@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#f4f3ef; --paper:#ffffff; --ink:#191922; --ink2:#3d3d47; --muted:#7a7a86; --faint:#a9a9b2;
  --line:#eae7e0; --line2:#ded9cf;
  --accent:#242636; --accent-ink:#ffffff;
  --shadow:0 1px 2px rgba(20,20,30,.04),0 12px 34px rgba(20,20,30,.10);
  --shadow-sm:0 1px 2px rgba(20,20,30,.05),0 4px 14px rgba(20,20,30,.06);
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Tajawal','Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.ltr{direction:ltr;text-align:left;font-family:'Inter','Tajawal',sans-serif}

/* ══ create ══ */
.topbar{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px;font-weight:800;font-size:16px;
  color:var(--ink);position:relative}
.topbar .dot{width:9px;height:9px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.acct-btn{position:absolute;inset-inline-start:16px;top:14px;font-size:13px;font-weight:700;color:var(--accent);
  background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:8px 13px;box-shadow:var(--shadow-sm)}

/* نافذة الدخول */
.authm-box{max-width:440px}
.authm-sub{color:var(--muted);font-size:13.5px;margin-bottom:16px;line-height:1.7}
.authinp{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:13px;padding:15px;
  font-size:17px;font-family:inherit;color:var(--ink);margin-bottom:12px}
.authinp:focus{outline:none;border-color:var(--accent)}
.authinp.code{text-align:center;letter-spacing:8px;font-weight:800;font-size:22px}
.authmsg{color:#c0392b;font-size:13px;text-align:center;min-height:18px;margin-top:4px;font-weight:600}
.linkbtn{display:block;margin:12px auto 0;background:none;border:none;color:var(--muted);font-size:13px;
  font-family:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.wrap{max-width:500px;margin:0 auto;padding:6px 18px 70px}
.hero{text-align:center;margin:6px 0 22px}
.hero h1{font-size:26px;font-weight:900;letter-spacing:-.4px;line-height:1.25}
.hero p{color:var(--muted);font-size:14px;margin-top:10px;line-height:1.7}

/* معاينة حيّة */
.livecard{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px}
.lc-top{padding:26px 22px 20px;color:#fff;position:relative;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 66%,#000));
  display:flex;align-items:center;gap:15px}
.lc-av{width:62px;height:62px;border-radius:16px;background:rgba(255,255,255,.16);flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22)}
.lc-av img{width:100%;height:100%;object-fit:cover}
.lc-t{min-width:0}
.lc-name{font-size:19px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-sub{font-size:12.5px;opacity:.85;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-body{padding:14px 20px 18px;display:flex;align-items:center;justify-content:space-between}
.lc-chips{display:flex;gap:8px;flex-wrap:wrap}
.lc-chip{font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:4px 10px}
.lc-qr{width:48px;height:48px;opacity:.9}

.section{margin-bottom:14px}
.sec-t{font-size:13px;font-weight:700;color:var(--ink2);margin:0 4px 10px;display:flex;align-items:center;gap:7px}
.sec-t::before{content:'';width:14px;height:2px;border-radius:2px;background:var(--accent)}
.fields{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:6px 16px}
.f{padding:12px 0;border-bottom:1px solid var(--line)}
.f:last-child{border-bottom:0}
.f label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:500}
.f input,.f textarea{width:100%;border:none;background:none;color:var(--ink);font-size:16px;font-family:inherit;padding:2px 0}
.f input::placeholder,.f textarea::placeholder{color:var(--faint)}
.f input:focus,.f textarea:focus{outline:none}
.f.focus label{color:var(--accent)}
.req{color:#d1662b}

.collapsible .sec-t{cursor:pointer;justify-content:space-between}
.sec-t .chev{transition:transform .2s;color:var(--faint)}
.sec-t.closed .chev{transform:rotate(-90deg)}
.fields.closed{display:none}

.logo-drop{display:block;cursor:pointer}
.logo-prev{border:1.5px dashed var(--line2);border-radius:14px;height:120px;display:flex;align-items:center;
  justify-content:center;color:var(--muted);font-size:13.5px;overflow:hidden;background:var(--bg);gap:8px;flex-direction:column}
.logo-prev .plus{width:34px;height:34px;border-radius:10px;background:var(--paper);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:20px}
.logo-prev img{max-height:88px;width:auto;object-fit:contain;border-radius:8px}
.langseg{display:flex;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:15px;
  padding:6px;box-shadow:var(--shadow-sm)}
.langseg button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:15px;
  font-weight:700;padding:12px;border-radius:11px;cursor:pointer;transition:background .15s,color .15s}
.langseg button.on{background:var(--accent);color:#fff}
/* اختيار أكواد QR */
.qropts{display:flex;flex-direction:column;gap:2px}
.qropt{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.qropt:last-child{border-bottom:0}
.qropt input{width:22px;height:22px;accent-color:var(--accent);cursor:pointer;flex:none}
.qropt span{flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.qropt em{font-size:11px;color:var(--faint);font-style:normal;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:3px 9px;font-weight:700}
.qropt.locked{opacity:.9}
.qropt.locked span{color:var(--ink2)}

/* اختيار تصميم صفحة البطاقة — نماذج مصغّرة مصوّرة */
.design-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.dtile{border:2px solid transparent;background:var(--bg);border-radius:13px;padding:6px;cursor:pointer;
  font-family:inherit;transition:border-color .15s,transform .1s}
.dtile:active{transform:scale(.97)}
.dtile.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff)}
.dtile .dnm{text-align:center;font-size:11px;font-weight:700;color:var(--muted);margin-top:6px}
.dtile.on .dnm{color:var(--accent)}
.dmock{position:relative;aspect-ratio:3/4;border-radius:9px;overflow:hidden;background:#fff;
  box-shadow:0 2px 8px rgba(20,20,30,.12);display:flex;flex-direction:column;align-items:center}
.dmock .dm-hero{position:absolute;top:0;left:0;right:0;height:42%}
.dmock .dm-av{width:30%;aspect-ratio:1;border-radius:7px;background:#fff;margin-top:24%;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.dmock .dm-l{width:56%;height:6%;border-radius:3px;background:#e6e3dc;margin-top:9%}
.dmock .dm-l.s{width:38%;margin-top:5%}
/* كلاسيكي: تدرّج + أفاتار مربّع مستدير */
.m-classic .dm-hero{background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000))}
/* بسيط: فاتح بالكامل + أفاتار دائري */
.m-soft{background:#faf9f6}
.m-soft .dm-av{border-radius:50%;margin-top:20%;border:2px solid var(--accent)}
.m-soft .dm-l{margin-top:8%}
/* غامق */
.m-dark{background:#16161d}
.m-dark .dm-hero{background:linear-gradient(150deg,var(--accent),#0d0d12)}
.m-dark .dm-av{border-radius:50%;background:#fff}
.m-dark .dm-l{background:#33333f}
/* حيوي: لون صريح + أفاتار دائري بإطار */
.m-vivid .dm-hero{height:46%;background:var(--accent)}
.m-vivid .dm-av{border-radius:50%;margin-top:28%;border:3px solid #fff}

.pick-lbl{font-size:12.5px;color:var(--ink2);font-weight:700;margin:20px 2px 2px}
.pick-lbl:first-child{margin-top:8px}
.pick-hint{font-size:11px;color:var(--faint);font-weight:500}
.colorrow{display:flex;gap:11px;margin-top:12px;flex-wrap:wrap;padding:0 2px}
.colorrow button{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.colorrow button.on{outline:2.5px solid var(--accent);outline-offset:2px}
.colorrow button.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:800}
.colorrow .custom{overflow:hidden;background:conic-gradient(#f43f5e,#f59e0b,#eab308,#22c55e,#0ea5e9,#6366f1,#d946ef,#f43f5e)}
.colorrow .custom .wheel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.colorrow .custom .wheel::before{content:'+'}
.colorrow .custom.on .wheel::before{content:'✓'}
.colorrow .custom input[type=color]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  opacity:0;cursor:pointer;border:none;padding:0}

/* شبكة معاينات القوالب — صور حيّة تتحدّث مع البيانات واللون */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.tpl-cell{cursor:pointer;border:2px solid transparent;border-radius:13px;padding:5px;background:var(--bg);
  transition:border-color .15s,transform .1s}
.tpl-cell:active{transform:scale(.97)}
.tpl-cell.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff)}
.tpl-cell canvas{width:100%;aspect-ratio:4/5;border-radius:8px;background:#fff;display:block;
  box-shadow:0 2px 8px rgba(20,20,30,.10);object-fit:cover}
.tpl-cell .nm{text-align:center;font-size:11px;font-weight:700;color:var(--muted);margin-top:6px}
.tpl-cell.on .nm{color:var(--accent)}

.cta{position:sticky;bottom:14px;margin-top:22px}
.submit{width:100%;background:var(--accent);color:var(--accent-ink);border:none;border-radius:15px;
  padding:17px;font-size:16.5px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 10px 26px rgba(20,20,30,.22);
  transition:transform .12s,filter .15s}
.submit:active{transform:scale(.99)}
.submit:disabled{opacity:.6}
.poweredby{text-align:center;color:var(--faint);font-size:12px;margin-top:14px;letter-spacing:.2px}
.poweredby b{color:var(--muted);font-weight:700}

/* ══ card view ══ */
.view{background:var(--accent)}
.cardview{max-width:440px;margin:0 auto;min-height:100vh;background:var(--bg)}
.loading{text-align:center;color:var(--muted);padding:90px 20px}
.cv-hero{position:relative;padding:52px 24px 84px;text-align:center;color:#fff;
  background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000))}
.cv-hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:40px;
  background:radial-gradient(120% 40px at 50% 0,transparent 68%,var(--bg) 69%)}
.cv-av{width:112px;height:112px;margin:0 auto 18px;border-radius:28px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.3);
  border:4px solid rgba(255,255,255,.14)}
.cv-av img{width:100%;height:100%;object-fit:cover}
.cv-av.mono{font-weight:900;font-size:46px;color:var(--accent);background:#fff}
.cv-name{font-size:25px;font-weight:900;letter-spacing:-.3px}
.cv-title{font-size:14.5px;opacity:.9;margin-top:4px;font-weight:500}
.cv-company{font-size:15px;opacity:.82;margin-top:8px;font-weight:700}
.cv-bio{font-size:13.5px;opacity:.78;margin-top:12px;line-height:1.75;max-width:320px;margin-inline:auto}

.cv-body{padding:0 18px 44px;margin-top:-46px;position:relative;z-index:2}
.addbtn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:16px;padding:17px;font-size:16.5px;
  font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 14px 34px rgba(20,20,30,.28);
  display:flex;align-items:center;justify-content:center;gap:10px}
.addbtn svg{width:21px;height:21px}
.rows{margin-top:16px;background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row:active{background:var(--bg)}
.row .ic{width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent)}
.row .ic svg{width:20px;height:20px}
.row .t{flex:1;min-width:0}
.row .t .k{font-size:11.5px;color:var(--muted);font-weight:500}
.row .t .v{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.row .go{color:var(--faint)}
.row .go svg{width:16px;height:16px}

.socials{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.socials a{width:50px;height:50px;border-radius:16px;background:var(--paper);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.socials a:active{transform:scale(.96)}
.socials svg{width:23px;height:23px}

.qr-section{margin:22px 0 6px}
.qr-section.multi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qr-card{background:var(--paper);border-radius:20px;box-shadow:var(--shadow-sm);padding:22px;text-align:center;
  display:block;color:inherit}
.qr-card .qr-name{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:14px}
.qr-card .frame{width:184px;height:184px;margin:0 auto;padding:10px;border-radius:16px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000))}
.qr-card .frame img{width:100%;height:100%;border-radius:8px;background:#fff;padding:8px}
.qr-card .lbl{color:var(--muted);font-size:12.5px;margin-top:12px;font-weight:500}
.qr-section.multi .qr-card{padding:16px 12px}
.qr-section.multi .qr-card .qr-name{font-size:12.5px;margin-bottom:10px}
.qr-section.multi .qr-card .frame{width:118px;height:118px;padding:7px;border-radius:13px}
.qr-section.multi .qr-card .lbl{font-size:11px;margin-top:9px}
a.qr-card:active{transform:scale(.98)}

.cv-actions{display:flex;gap:10px;margin-top:16px}
.cv-actions .btn{flex:1;border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:14px;
  padding:14px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;text-align:center;box-shadow:var(--shadow-sm)}
.cv-actions .btn:active{transform:scale(.98)}
.cv-actions .btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.cv-foot{text-align:center;color:var(--faint);font-size:12px;margin-top:26px;letter-spacing:.2px}
.cv-foot a{color:var(--muted);font-weight:700}

/* ══ card designs (تصميم صفحة البطاقة) ══ */
/* بسيط — فاتح مسطّح، أفاتار دائري، نص داكن، بلا هيرو ملوّن */
.design-soft.cardview{background:#faf9f6}
.design-soft .cv-hero{background:#faf9f6;color:var(--ink);padding:44px 24px 26px}
.design-soft .cv-hero::after{display:none}
.design-soft .cv-av{border-radius:50%;border:3px solid var(--accent);box-shadow:0 8px 24px rgba(20,20,30,.12)}
.design-soft .cv-title{color:var(--muted);opacity:1}
.design-soft .cv-company{color:var(--ink2);opacity:1}
.design-soft .cv-bio{color:var(--muted);opacity:1}
.design-soft .cv-body{margin-top:8px}

/* غامق — خلفية داكنة وأسطح داكنة */
.design-dark.cardview{background:#14141b}
.design-dark .cv-hero{background:linear-gradient(150deg,var(--accent),#0c0c11)}
.design-dark .cv-hero::after{background:radial-gradient(120% 40px at 50% 0,transparent 68%,#14141b 69%)}
.design-dark .rows,.design-dark .qr-card,.design-dark .socials a,.design-dark .cv-actions .btn{background:#1e1e28}
.design-dark .row{border-color:#2a2a35}
.design-dark .row .t .k{color:#9a9aa6}
.design-dark .row .t .v{color:#f0f0f4}
.design-dark .row:active{background:#242430}
.design-dark .row .ic{background:color-mix(in srgb,var(--accent) 28%,#1e1e28);color:#fff}
.design-dark .socials a{color:#e8e8ee}
.design-dark .qr-card .qr-name{color:#f0f0f4}
.design-dark .qr-card .lbl{color:#8a8a96}
.design-dark .cv-actions .btn{border-color:#2a2a35;color:#d8d8e0}
.design-dark .cv-actions .btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.design-dark .cv-foot{color:#7a7a86}

/* حيوي — هيرو بلون صريح، أفاتار دائري بإطار أبيض */
.design-vivid .cv-hero{background:var(--accent)}
.design-vivid .cv-hero::after{background:radial-gradient(120% 40px at 50% 0,transparent 68%,var(--bg) 69%)}
.design-vivid .cv-av{border-radius:50%;border:5px solid rgba(255,255,255,.9)}

/* ══ download sheet ══ */
.sheet[hidden]{display:none!important}
.sheet{position:fixed;inset:0;background:rgba(20,20,28,.5);display:flex;align-items:flex-end;justify-content:center;z-index:30;
  backdrop-filter:blur(3px)}
.sheet-box{background:var(--paper);width:100%;max-width:500px;border-radius:24px 24px 0 0;padding:10px 18px 26px;
  max-height:94vh;overflow:auto}
.grab{width:40px;height:4px;border-radius:3px;background:var(--line2);margin:6px auto 12px}
.sheet-h{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:17px;margin-bottom:16px}
.x{background:var(--bg);border:none;color:var(--ink2);width:34px;height:34px;border-radius:11px;cursor:pointer;font-size:16px}
.tabs{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.tabs button{flex:none;background:var(--bg);border:1px solid var(--line);color:var(--ink2);border-radius:12px;
  padding:9px 15px;font-size:13.5px;cursor:pointer;font-family:inherit;white-space:nowrap;font-weight:600}
.tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.il-lbl{font-size:12px;color:var(--muted);font-weight:700;margin:2px 2px 8px}
.tabs.il{margin-bottom:14px}
.tabs.il button{flex:1;text-align:center}
.preview-wrap{display:flex;justify-content:center;background:var(--bg);border-radius:16px;padding:16px;margin-bottom:14px}
.preview-wrap.both::after{content:attr(data-note);position:absolute}
.both-note{text-align:center;font-size:11.5px;color:var(--muted);margin:-8px 0 14px;font-weight:600}
#cv{max-width:100%;max-height:50vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.adv{margin-bottom:16px;background:var(--bg);border-radius:14px;padding:4px 14px}
.adv .sec-t{cursor:pointer;justify-content:space-between;margin:0;padding:12px 0}
.adv .sec-t::before{display:none}
.adv .body{padding-bottom:12px}
.adv .body.closed{display:none}
.adv label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.adv select{width:100%;background:var(--paper);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px;font-size:15px;font-family:inherit}

/* ══ account page ══ */
.acct-wrap{max-width:520px;margin:0 auto;padding:6px 18px 60px}
.acct-head{display:flex;align-items:center;justify-content:space-between;padding:18px 2px 22px}
.acct-head .who{font-weight:800;font-size:17px}
.acct-head .who small{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:3px;direction:ltr;text-align:start}
.acct-head .out{background:var(--paper);border:1px solid var(--line);color:var(--ink2);border-radius:11px;
  padding:9px 14px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.acct-sec-t{font-size:13px;font-weight:700;color:var(--ink2);margin:18px 4px 12px;display:flex;align-items:center;gap:7px}
.acct-sec-t::before{content:'';width:14px;height:2px;border-radius:2px;background:var(--accent)}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acard{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);color:inherit}
.acard .top{height:56px;display:flex;align-items:center;justify-content:center}
.acard .av{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.acard .av img{width:100%;height:100%;object-fit:cover}
.acard .b{padding:11px 13px}
.acard .b .nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .b .co{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.acct-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:26px 16px;background:var(--paper);
  border:1px dashed var(--line2);border-radius:16px}
.addbtn2{width:100%;background:var(--paper);color:var(--accent);border:1.5px solid var(--accent);border-radius:16px;
  padding:15px;font-size:15.5px;font-weight:800;font-family:inherit;cursor:pointer;margin-top:12px;
  display:flex;align-items:center;justify-content:center;gap:9px}
.addbtn2:active{transform:scale(.99)}
.addbtn2 svg{width:19px;height:19px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:13px 22px;border-radius:14px;font-size:14px;font-weight:700;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.3);
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}