/* ===== Keyaria design system ===== */
:root{
  --brand:#e0a008; --brand-2:#b4740a; --brand-3:#f5c542;
  --brand-ink:#a1650a;            /* ذهبي غامق للنصوص/الروابط على خلفية فاتحة */
  --on-brand:#3a2a05;             /* حبر داكن فوق التعبئة الذهبية */
  --accent:#0ea5a3;
  --bg:#f6f4ee; --bg-2:#efeadf;
  --surface:#ffffff; --surface-2:#faf8f3;
  --text:#1c1917; --muted:#78716c; --line:#e7e2d8;
  --ok:#16a34a; --warn:#f97316; --err:#ef4444; --info:#3b82f6;
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --shadow:0 10px 30px -12px rgba(60,42,5,.16);
  --shadow-lg:0 24px 60px -20px rgba(180,116,10,.36);
  --ring:0 0 0 4px rgba(224,160,8,.20);
  --grad:linear-gradient(135deg,#f4b81f,#cf8a0a);
  --grad-soft:linear-gradient(135deg,#fbe7b0,#f3cf82);
  --glow-1:rgba(240,180,41,.14); --glow-2:rgba(202,138,10,.10);
}
:root[data-theme="dark"]{
  --brand:#f0b429; --brand-2:#d18f14; --brand-3:#facc5a;
  --brand-ink:#f5c869;
  --on-brand:#231a04;
  --bg:#0e0f13; --bg-2:#141519;
  --surface:#191a20; --surface-2:#212229;
  --text:#f4f1ea; --muted:#a8a29e; --line:#2c2d36;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.72);
  --ring:0 0 0 4px rgba(240,180,41,.28);
}

/* ===== سِمات الألوان (Accent themes) — تعمل مع الوضع الفاتح والداكن ===== */
:root[data-accent="blue"]{
  --brand:#2563eb; --brand-2:#1d4ed8; --brand-3:#60a5fa; --brand-ink:#1d4ed8;
  --on-brand:#ffffff; --accent:#0ea5a3;
  --ring:0 0 0 4px rgba(37,99,235,.20);
  --grad:linear-gradient(135deg,#3b82f6,#1e40af);
  --grad-soft:linear-gradient(135deg,#c7dbff,#9bb8f5);
  --glow-1:rgba(59,130,246,.16); --glow-2:rgba(30,64,175,.12);
}
:root[data-theme="dark"][data-accent="blue"]{ --brand:#60a5fa; --brand-2:#3b82f6; --brand-3:#93c5fd; --brand-ink:#93c5fd; --ring:0 0 0 4px rgba(96,165,250,.28); }

:root[data-accent="emerald"]{
  --brand:#059669; --brand-2:#047857; --brand-3:#34d399; --brand-ink:#047857;
  --on-brand:#ffffff; --accent:#0891b2;
  --ring:0 0 0 4px rgba(5,150,105,.20);
  --grad:linear-gradient(135deg,#10b981,#047857);
  --grad-soft:linear-gradient(135deg,#bff0dc,#8fe0c2);
  --glow-1:rgba(16,185,129,.16); --glow-2:rgba(4,120,87,.12);
}
:root[data-theme="dark"][data-accent="emerald"]{ --brand:#34d399; --brand-2:#10b981; --brand-3:#6ee7b7; --brand-ink:#6ee7b7; --ring:0 0 0 4px rgba(52,211,153,.28); }

:root[data-accent="purple"]{
  --brand:#7c3aed; --brand-2:#6d28d9; --brand-3:#a78bfa; --brand-ink:#6d28d9;
  --on-brand:#ffffff; --accent:#db2777;
  --ring:0 0 0 4px rgba(124,58,237,.20);
  --grad:linear-gradient(135deg,#8b5cf6,#6d28d9);
  --grad-soft:linear-gradient(135deg,#ddd3fb,#c3b2f5);
  --glow-1:rgba(139,92,246,.16); --glow-2:rgba(109,40,217,.12);
}
:root[data-theme="dark"][data-accent="purple"]{ --brand:#a78bfa; --brand-2:#8b5cf6; --brand-3:#c4b5fd; --brand-ink:#c4b5fd; --ring:0 0 0 4px rgba(167,139,250,.28); }

:root[data-accent="rose"]{
  --brand:#e11d48; --brand-2:#be123c; --brand-3:#fb7185; --brand-ink:#be123c;
  --on-brand:#ffffff; --accent:#9333ea;
  --ring:0 0 0 4px rgba(225,29,72,.20);
  --grad:linear-gradient(135deg,#f43f5e,#be123c);
  --grad-soft:linear-gradient(135deg,#fbd0d9,#f5aab9);
  --glow-1:rgba(244,63,94,.16); --glow-2:rgba(190,18,60,.12);
}
:root[data-theme="dark"][data-accent="rose"]{ --brand:#fb7185; --brand-2:#f43f5e; --brand-3:#fda4af; --brand-ink:#fda4af; --ring:0 0 0 4px rgba(251,113,133,.28); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Tahoma,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(1200px 600px at 100% -10%,var(--glow-1),transparent 60%),
             radial-gradient(1000px 500px at -10% 110%,var(--glow-2),transparent 55%),
             var(--bg);
  color:var(--text); min-height:100vh; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[dir="rtl"] body{font-family:"Segoe UI","Tahoma","Cairo",system-ui,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{vertical-align:middle}

.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.icon-sm{width:16px;height:16px}

/* ===== Top bar ===== */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,4vw,28px);background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.3px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--shadow)}
.brand .logo svg{width:20px;height:20px;stroke:#fff}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.chip:hover{border-color:var(--brand);box-shadow:var(--ring);text-decoration:none}

/* ===== Auth layout ===== */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr;place-items:center;padding:28px 16px}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(22px,4vw,34px);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:var(--grad)}
.auth-head{text-align:center;margin-bottom:22px}
.auth-head .logo{width:56px;height:56px;border-radius:16px;background:var(--grad);display:inline-grid;place-items:center;box-shadow:var(--shadow-lg);margin-bottom:12px}
.auth-head .logo svg{width:30px;height:30px;stroke:#fff}
.auth-head h1{margin:6px 0 2px;font-size:24px}
.auth-head p{margin:0;color:var(--muted);font-size:14px}
.auth-alt{text-align:center;margin-top:18px;color:var(--muted);font-size:14px}

/* ===== Forms ===== */
.field{margin-bottom:15px}
.field > label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--text)}
.control{position:relative;display:flex;align-items:center}
.control .lead{position:absolute;inset-inline-start:12px;color:var(--muted);pointer-events:none;display:flex}
.control input,.control select,textarea.input{
  width:100%;padding:13px 14px;padding-inline-start:42px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);font-size:15px;transition:.15s;font-family:inherit}
select.input,input.input{width:100%}
.control input:focus,.control select:focus,textarea.input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring);background:var(--surface)}
.control .trail{position:absolute;inset-inline-end:8px;display:flex;gap:2px}
.iconbtn{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:7px;border-radius:8px;display:grid;place-items:center}
.iconbtn:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.control.has-trail input{padding-inline-end:76px}
textarea.input{padding-inline-start:14px;min-height:80px;resize:vertical}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 18px;border:0;
  border-radius:var(--radius-sm);background:var(--grad);color:#fff;font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:var(--shadow);transition:.15s;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:var(--surface);color:var(--text);border:1.5px solid var(--line);box-shadow:none}
.btn.secondary:hover{border-color:var(--brand)}
.btn.ghost{background:transparent;color:var(--brand);box-shadow:none;width:auto;padding:9px 12px}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.btn.sm{width:auto;padding:9px 14px;font-size:13px}

/* strength meter */
.meter{margin-top:9px}
.meter .bars{display:flex;gap:6px}
.meter .bars span{height:6px;flex:1;border-radius:999px;background:var(--line);transition:.25s}
.meter .label{font-size:12px;margin-top:6px;color:var(--muted);font-weight:600}
.meter[data-score="1"] .bars span:nth-child(-n+1),
.meter[data-score="2"] .bars span:nth-child(-n+2),
.meter[data-score="3"] .bars span:nth-child(-n+3),
.meter[data-score="4"] .bars span:nth-child(-n+4){background:var(--_c)}
.meter[data-score="1"]{--_c:var(--err)}
.meter[data-score="2"]{--_c:var(--warn)}
.meter[data-score="3"]{--_c:var(--info)}
.meter[data-score="4"]{--_c:var(--ok)}

/* checkbox */
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.check input{width:19px;height:19px;margin-top:2px;accent-color:var(--brand);cursor:pointer;flex:0 0 auto}
.check a{font-weight:600}

/* captcha row */
.captcha-row{display:flex;gap:12px;align-items:stretch}
.captcha-row .cap-img{border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#f6f7fb;display:grid;place-items:center;min-width:170px}
.captcha-row .cap-img img{display:block}
.captcha-row .grow{flex:1}
.cap-refresh{align-self:center}

/* alerts */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:12px;border:1px solid}
.alert.error{background:color-mix(in srgb,var(--err) 12%,var(--surface));border-color:color-mix(in srgb,var(--err) 40%,transparent);color:#b91c1c}
.alert.success{background:color-mix(in srgb,var(--ok) 12%,var(--surface));border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:#047857}
:root[data-theme="dark"] .alert.error{color:#fca5a5}
:root[data-theme="dark"] .alert.success{color:#6ee7b7}

/* ===== 2FA setup ===== */
.qr-box{display:grid;place-items:center;padding:16px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);margin:0 auto 14px;width:max-content}
.qr-box img,.qr-box canvas{width:190px;height:190px;image-rendering:pixelated}
.secret-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px dashed var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;text-align:center;letter-spacing:2px;font-weight:700;word-break:break-all;font-size:14px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 16px}
.steps li{position:relative;padding-inline-start:38px;margin-bottom:10px;color:var(--muted);font-size:14px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;inset-inline-start:0;top:0;width:26px;height:26px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}

/* code input */
.code-input input{letter-spacing:10px;text-align:center;font-size:26px;font-weight:800;padding-inline-start:14px}

/* ===== App shell (vault) ===== */
.app{max-width:1120px;margin:0 auto;padding:clamp(14px,3vw,26px)}
.vault-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px}
.vault-head h2{margin:0;font-size:24px;display:flex;align-items:center;gap:10px}
.searchbar{position:relative;flex:1;min-width:200px}
.searchbar .lead{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.searchbar input{width:100%;padding:12px 14px;padding-inline-start:42px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:15px}
.searchbar input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filters .fbtn{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.filters .fbtn.active{color:#fff;border-color:transparent;background:var(--grad)}
.filters .fbtn:hover{border-color:var(--brand)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  transition:.18s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--cat) 40%,var(--line))}
.card .cat-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--cat) 16%,transparent);color:var(--cat);margin-bottom:12px}
.card h3{margin:0 0 3px;font-size:17px}
.card .cat-name{font-size:12px;color:var(--muted);font-weight:600}
.card .rows{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.vrow{display:flex;align-items:center;gap:8px;font-size:13px;background:var(--surface-2);border-radius:9px;padding:8px 10px}
.vrow .vlabel{color:var(--muted);font-weight:600;min-width:76px;display:flex;align-items:center;gap:5px}
.vrow .vval{flex:1;font-family:ui-monospace,Menlo,monospace;word-break:break-all;color:var(--text)}
.vrow .vval.mask{letter-spacing:2px}
.card .card-actions{position:absolute;top:12px;inset-inline-end:12px;display:flex;gap:4px;opacity:0;transition:.15s}
.card:hover .card-actions{opacity:1}
@media (hover:none){.card .card-actions{opacity:1}}

.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty svg{width:64px;height:64px;stroke:var(--line);margin-bottom:14px}

/* ===== Modal ===== */
.modal-back{position:fixed;inset:0;background:rgba(8,12,28,.55);backdrop-filter:blur(3px);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal-back.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);width:100%;max-width:520px;box-shadow:var(--shadow-lg);margin:auto;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:18px;flex:1}
.modal-body{padding:18px;max-height:70vh;overflow-y:auto}
.modal-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.modal-foot .btn{flex:1}

/* dynamic field editor */
.fieldrow{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;margin-bottom:8px;align-items:center}
.fieldrow select,.fieldrow input{padding:10px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:14px;font-family:inherit;width:100%}
.fieldrow .del{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err);border:0;border-radius:9px;padding:9px;cursor:pointer;display:grid;place-items:center}
.fieldrow .valwrap{position:relative;display:flex;align-items:center}
.fieldrow .valwrap input{padding-inline-end:34px}
.fieldrow .valwrap .mini{position:absolute;inset-inline-end:4px;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:5px;border-radius:6px}

/* generator popover */
.gen{border:1px dashed var(--line);border-radius:var(--radius-sm);padding:14px;background:var(--surface-2);margin-top:8px}
.gen .out{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.gen .out input{flex:1;font-family:ui-monospace,monospace;padding:10px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text)}
.gen .opt{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.gen .opt label{display:flex;align-items:center;gap:6px;cursor:pointer}
.gen .opt input[type=range]{accent-color:var(--brand)}
.gen .opt input[type=checkbox]{accent-color:var(--brand);width:17px;height:17px}

/* toast */
.toast{position:fixed;inset-block-end:22px;inset-inline:0;display:flex;justify-content:center;z-index:80;pointer-events:none}
.toast .t{background:var(--text);color:var(--surface);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);transition:.25s}
.toast .t.show{opacity:1;transform:none}

.muted{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:14px}
.row-split{display:flex;gap:12px}
.row-split > *{flex:1}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ============ صفحة التعليمات ============ */
.guide{max-width:1000px;margin:0 auto;padding:8px 16px 40px}
.g-hero{position:relative;overflow:hidden;text-align:center;border-radius:24px;padding:40px 22px 34px;color:#eaf1f6;margin:8px 0 30px;
  background:radial-gradient(120% 140% at 88% -20%, rgba(224,160,8,.25), transparent 55%), linear-gradient(120deg,#0d1620 0%,#173040 55%,#1f3e50 100%);
  box-shadow:0 20px 50px -22px rgba(13,22,32,.7)}
.g-hero-badge{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 24px rgba(180,116,10,.5)}
.g-hero-badge svg{width:32px;height:32px;color:#241a04}
.g-hero h1{margin:0 0 8px;font-size:clamp(24px,4vw,32px)}
.g-hero p{margin:0 auto;max-width:560px;color:#c3d2dc;font-size:15px}
.g-hero-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.g-hero-jump a{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:none;
  color:#eaf1f6;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}
.g-hero-jump a:hover{background:rgba(224,160,8,.22);border-color:rgba(224,160,8,.6)}
.g-hero-jump svg{width:15px;height:15px}

.g-sec{margin:36px 0}
.g-sec > h2{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 14px}
.g-sec > h2 svg{width:24px;height:24px;color:var(--brand)}
.g-lead{color:var(--muted);margin:0 0 16px;font-size:14.5px;line-height:1.8}

/* خطوات */
.g-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 16px 18px;box-shadow:var(--shadow);text-align:center}
.g-step-n{position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--c,#888);color:#fff;font-weight:900;display:grid;place-items:center;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.g-step-ic{width:52px;height:52px;margin:8px auto 12px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,var(--surface));color:var(--c)}
.g-step-ic svg{width:26px;height:26px}
.g-step h3{margin:0 0 6px;font-size:15px}
.g-step p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7}

/* شبكة بطاقات المزايا */
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-grid-3{grid-template-columns:repeat(3,1fr)}
.g-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 16px;box-shadow:var(--shadow);
  border-top:3px solid var(--c,var(--brand))}
.g-card-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:12px;background:color-mix(in srgb,var(--c) 15%,var(--surface));color:var(--c)}
.g-card-ic svg{width:23px;height:23px}
.g-card h3{margin:0 0 5px;font-size:15px}
.g-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.7}

/* أنواع الحقول */
.g-fields{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.g-field{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-align:center;font-weight:700;font-size:12.5px;box-shadow:var(--shadow)}
.g-field-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,var(--surface));color:var(--c)}
.g-field-ic svg{width:22px;height:22px}
.g-note-line{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;font-size:13px;color:var(--muted);
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.g-note-line svg{flex:0 0 auto;color:var(--brand)}

/* قسم مقسوم (نص + معاينة) */
.g-split{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center}
.g-mock{display:flex;justify-content:center}
.g-mock-card{width:100%;max-width:290px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-lg,var(--shadow));--cat:#e0a008}
.gm-row{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1.5px solid transparent;border-radius:11px;padding:8px}
.gm-label{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:var(--text);background:color-mix(in srgb,var(--cat) 16%,var(--surface));padding:7px 10px;border-radius:8px}
.gm-label svg{width:15px;height:15px;color:var(--cat)}
.gm-code{flex:1;text-align:center;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:17px;letter-spacing:2px;color:var(--brand-ink,var(--brand));direction:ltr}
.gm-ring{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--brand);
  background:conic-gradient(var(--brand) 144deg, var(--surface-2) 0);position:relative;isolation:isolate}
.gm-ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface);z-index:-1}
.gm-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);background:var(--surface)}
.gm-btn svg{width:15px;height:15px}
.gm-cap{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px}

/* نصائح */
.g-tips{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);border-radius:18px;padding:20px}
.g-tips-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:var(--grad);display:grid;place-items:center;color:#241a04}
.g-tips-ic svg{width:24px;height:24px}
.g-tips h3{margin:0 0 8px;font-size:16px}
.g-tips ul{margin:0;padding-inline-start:18px;color:var(--muted);font-size:13.5px;line-height:1.9}
.g-cta{text-align:center;margin-top:26px}

@media(max-width:860px){
  .g-steps,.g-grid,.g-grid-3{grid-template-columns:repeat(2,1fr)}
  .g-fields{grid-template-columns:repeat(3,1fr)}
  .g-split{grid-template-columns:1fr}
}
@media(max-width:480px){
  .g-steps,.g-grid,.g-grid-3{grid-template-columns:1fr}
  .g-fields{grid-template-columns:repeat(2,1fr)}
}

/* حلقة العدّ التنازلي لتحذير الخمول */
.idle-ring{position:relative;isolation:isolate;width:72px;height:72px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#16a34a}
.idle-ring::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-2;
  background:conic-gradient(#22c55e var(--deg,360deg), var(--surface-2) 0deg)}
.idle-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface);z-index:-1}
.idle-ring.low{color:var(--err)}
.idle-ring.low::before{background:conic-gradient(#ef4444 var(--deg,360deg), var(--surface-2) 0deg)}

/* موديول التأكيد المخصّص */
.kya-confirm-back{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--text) 45%,transparent);backdrop-filter:blur(3px);opacity:0;transition:opacity .16s ease}
.kya-confirm-back.show{opacity:1}
.kya-confirm{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.35);padding:26px 24px 20px;text-align:center;
  transform:translateY(10px) scale(.97);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.kya-confirm-back.show .kya-confirm{transform:none}
.kya-confirm .kc-ico{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.kya-confirm .kc-ico .icon{width:28px;height:28px}
.kc-ico.kc-danger{background:color-mix(in srgb,var(--err) 15%,var(--surface));color:var(--err)}
.kc-ico.kc-warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:#b45309}
.kc-ico.kc-brand{background:color-mix(in srgb,var(--brand) 18%,var(--surface));color:var(--brand)}
.kya-confirm h3{margin:0 0 6px;font-size:19px}
.kya-confirm p{margin:0 0 20px;color:var(--muted);line-height:1.6}
.kya-confirm .kc-actions{display:flex;gap:10px}
.kya-confirm .kc-actions .btn{flex:1;margin:0}

/* أكواد الاسترداد */
.codes-grid{list-style:none;margin:16px 0;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--surface-2);border:1px dashed var(--line);border-radius:14px}
.codes-grid li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:700;letter-spacing:1px;text-align:center;padding:8px 6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--text)}
@media(max-width:420px){.codes-grid{grid-template-columns:1fr}}

/* شارة فحص التسريب */
.check-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.check-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px}
.check-pill.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.check-pill.bad{background:color-mix(in srgb,var(--err) 14%,var(--surface));color:var(--err)}
.check-pill.warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:#b45309}

/* أيقونة الموقع الحقيقية داخل البطاقة */
.card .fav{width:22px;height:22px;border-radius:6px;object-fit:contain;background:var(--surface-2);flex:0 0 auto}

/* صف الفلاتر + الفرز */
.filters-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.filters-row .filters{flex:1;min-width:0;margin:0}
.filters-row .sort-wrap{margin-top:2px}
@media(max-width:600px){
  /* على الجوال: الترتيب في سطر مستقل، والفلاتر بعرض كامل تتوزّع أفقيًا */
  .filters-row{flex-direction:column;align-items:stretch;gap:10px}
  .filters-row .sort-wrap{order:-1;margin-top:0;justify-content:space-between}
  .filters-row .filters{width:100%}
  .filters .fbtn{flex:0 1 auto}
}
.sort-wrap{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:6px 10px;color:var(--muted);flex:0 0 auto}
.sort-wrap select{border:0;background:transparent;color:var(--text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;outline:none}

/* فلتر الوسوم */
.tagfilter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.tbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit}
.tbtn.active{border-color:var(--brand);color:var(--brand-ink,var(--brand));background:color-mix(in srgb,var(--brand) 12%,var(--surface))}
.tbtn .tc{background:var(--surface-2);border-radius:999px;padding:0 7px;font-size:11px}

/* ملاحظة البطاقة */
.card-note{display:flex;gap:8px;margin-top:10px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;font-size:12.5px;color:var(--muted);line-height:1.7;word-break:break-word}
.card-note svg{flex:0 0 auto;width:15px;height:15px;color:var(--cat,var(--muted));margin-top:2px}

/* وسوم البطاقة */
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tagchip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--brand-ink,#7a5a06);background:color-mix(in srgb,var(--brand) 14%,var(--surface));border-radius:999px;padding:3px 9px}
.tagchip.edit{background:var(--surface-2);color:var(--text)}
.tagchip .tagx{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0}

/* إدخال الوسوم في النافذة */
.tags-input{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface-2);padding:7px 10px}
.tags-input input{flex:1;min-width:120px;border:0;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--text)}

/* مصادِق TOTP داخل البطاقة */
.totp-row .totp-code{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:17px;letter-spacing:2px;color:var(--brand-ink,var(--brand));direction:ltr;white-space:nowrap;text-align:center}
.totp-ring{position:relative;isolation:isolate;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--muted)}
.totp-ring::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-2;
  background:conic-gradient(var(--brand) var(--deg,0deg), var(--surface-2) 0deg)}
.totp-ring::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface);z-index:-1}
.totp-ring.low{color:var(--err)}
.totp-ring.low::before{background:conic-gradient(var(--err) var(--deg,0deg), var(--surface-2) 0deg)}

/* نجمة التثبيت */
.iconbtn.pin-b.on{color:var(--brand)}
.iconbtn.pin-b.on svg{fill:var(--brand)}
.card.pinned{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent), var(--shadow)}

/* شارة الصف (مسرّبة/مكرّرة) */
.row-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;flex:0 0 auto}
.row-badge .icon{width:14px;height:14px}
.row-badge.bad{background:color-mix(in srgb,var(--err) 16%,var(--surface));color:var(--err)}
.row-badge.warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:#b45309}

/* سجل النشاط */
.activity-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.activity-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:13px}
.activity-row .ai{color:var(--brand)}
.activity-row .ad{font-weight:700;flex:1;min-width:120px}
.activity-row .aip,.activity-row .at{color:var(--muted);font-size:12px;font-family:ui-monospace,Menlo,monospace}
.now-badge{font-size:10.5px;background:color-mix(in srgb,var(--ok) 16%,var(--surface));color:var(--ok);border-radius:999px;padding:1px 8px;margin-inline-start:4px}
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px}
.vbadge.ok{background:color-mix(in srgb,var(--ok) 15%,var(--surface));color:var(--ok)}
.vbadge.warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:#b45309}
@media(max-width:520px){.activity-row .at{width:100%}}

/* legal */
.doc{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,36px);box-shadow:var(--shadow)}
.doc h1{margin-top:0}
.doc h2{font-size:18px;margin-top:24px}
.steps{counter-reset:step;list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
.steps li{position:relative;padding-inline-start:48px;min-height:34px;display:flex;align-items:center;line-height:1.6}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;inset-inline-start:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#241a04;font-weight:800;display:flex;align-items:center;justify-content:center}

@media(max-width:520px){
  .fieldrow{grid-template-columns:1fr 1fr auto}
  .captcha-row{flex-direction:column}
  .captcha-row .cap-img{min-width:0}
  .row-split{flex-direction:column}
}

/* responsive helpers */
@media(max-width:640px){
  .hide-sm{display:none}
  .topbar{gap:8px;padding-inline:12px;flex-wrap:wrap;row-gap:8px}
  .topbar .logo-bar{max-width:150px}
  .chip span{display:none}
  .chip{padding:9px}
  .vault-head h2{font-size:20px}
  .grid{grid-template-columns:1fr}
  .brand{font-size:17px}
}
@media(min-width:641px){ .brand .logo{box-shadow:var(--shadow)} }

/* ============ Gold theme overrides ============ */
a{color:var(--brand-ink)}
.btn{color:var(--on-brand)}
.btn.secondary{color:var(--text)}
.btn.ghost{color:var(--brand-ink)}
.btn.danger{color:#fff}
.brand .logo svg,.auth-head .logo svg{stroke:var(--on-brand)}
.brand b{background:linear-gradient(135deg,#c98a0a,#9a6a06);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .brand b{background:linear-gradient(135deg,#f5c869,#e0a534);-webkit-background-clip:text;background-clip:text;color:transparent}
.filters .fbtn.active{color:var(--on-brand)}
.iconbtn:hover{color:var(--brand-ink)}
.alert.error{color:#b91c1c}
.alert.success{color:#15803d}
:root[data-theme="dark"] .alert.error{color:#fca5a5}
:root[data-theme="dark"] .alert.success{color:#86efac}
.meter[data-score="2"]{--_c:var(--warn)}   /* برتقالي للمتوسط */

/* ============ Dashboard ============ */
.dash{margin-bottom:18px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:13px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c)}
.kpi .kico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.kpi .kico svg{width:24px;height:24px}
.kpi .num{font-size:26px;font-weight:800;line-height:1;color:var(--text)}
.kpi .lbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px}

.charts{display:grid;grid-template-columns:1.05fr 1fr;gap:12px}
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.chart-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:14px}
.chart-title svg{color:var(--brand)}
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
#donut svg{display:block}
.legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:150px}
.legend .lg{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text)}
.legend .dot{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
.legend .lg .v{margin-inline-start:auto;font-weight:800;color:var(--muted)}

.health-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.health-score{flex:0 0 auto;text-align:center;min-width:84px}
.health-score .big{font-size:36px;font-weight:800;line-height:1}
.health-score .sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.health-bar{flex:1;display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--surface-2);gap:2px}
.health-bar span{display:block;transition:width .5s ease}
.health-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted)}
.health-legend .hl{display:flex;align-items:center;gap:7px}
.health-legend .dot{width:10px;height:10px;border-radius:3px}
.health-legend .hl b{color:var(--text)}

/* card accent by category */
.card{border-top:3px solid var(--cat)}
.card .cat-ico svg{width:24px;height:24px}

@media(max-width:760px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
  .vault-head{flex-direction:column;align-items:stretch}
}

/* ============ Brand logo ============ */
.logo-badge{display:block;object-fit:contain}
.logo-hero{width:120px;height:120px;margin:0 auto 12px;filter:drop-shadow(0 8px 20px rgba(180,116,10,.30))}
.brand-link{display:inline-flex;align-items:center;text-decoration:none}
.brand-link:hover{text-decoration:none}
.logo-bar{height:48px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.18))}
@media(max-width:640px){ .logo-hero{width:104px;height:104px} .logo-bar{height:40px} }

/* ============ Field rows: distinct label vs value backgrounds ============ */
.vrow{background:var(--surface-2);border:1.5px solid transparent;border-radius:11px;padding:6px;gap:7px}
.vrow .vlabel{min-width:82px;font-weight:700;color:var(--text);
  background:color-mix(in srgb,var(--cat,#94a3b8) 16%,var(--surface));
  padding:7px 10px;border-radius:8px}
.vrow .vlabel svg{color:var(--cat,var(--muted))}
.vrow .vval{background:var(--surface);padding:7px 11px;border-radius:8px}

/* حدود حقل كلمة المرور حسب القوة (تومض للضعيفة والقوية) */
.vrow.pw-weak{border-color:#ef4444;animation:kyaPulseRed 1.6s ease-in-out infinite}
.vrow.pw-strong{border-color:#16a34a;animation:kyaPulseGreen 2s ease-in-out infinite}
.vrow.pw-fair{border-color:#f97316}
.vrow.pw-good{border-color:#3b82f6}
@keyframes kyaPulseRed{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.25)}}
@keyframes kyaPulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}50%{box-shadow:0 0 0 4px rgba(22,163,74,.22)}}
@media(prefers-reduced-motion:reduce){.vrow.pw-weak,.vrow.pw-strong{animation:none}}

/* ============ Sticky footer + section separation ============ */
body{display:flex;flex-direction:column;min-height:100vh}
.app{flex:1 0 auto;width:100%}
.auth-wrap{flex:1 0 auto;min-height:auto}

.topbar{box-shadow:0 1px 0 rgba(0,0,0,.02)}

/* فواصل أفقية بين أقسام صفحة الحافظة */
.vault-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.dash{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:16px}
.filters{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}

/* الفوتر */
.site-footer{border-top:1px solid var(--line);background:var(--surface);flex-shrink:0;margin-top:24px}
.foot-inner{max-width:1120px;margin:0 auto;padding:18px clamp(14px,4vw,28px);
  display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.foot-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--text)}
.foot-ico{width:26px;height:26px;border-radius:7px;object-fit:cover}
.foot-tag{color:var(--muted)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--brand-ink);font-weight:600;white-space:nowrap}
.foot-copy{margin-inline-start:auto;font-size:12px;color:var(--muted)}
@media(max-width:680px){
  .foot-inner{justify-content:center;text-align:center}
  .foot-brand{width:100%;justify-content:center;order:1}
  .foot-tag{width:100%;order:2}
  .foot-links{width:100%;order:3;justify-content:center;row-gap:10px;gap:14px}
  .foot-copy{margin-inline-start:0;width:100%;order:5;text-align:center}
}

/* danger card (delete account) */
.danger-card{border-top:3px solid var(--err)!important}

/* ============ Unified gradient header & footer ============ */
/* خلفية غامقة متدرّجة (أزرق ليلي) للهيدر والفوتر — الخيار 4 */
:root{ --headfoot: radial-gradient(120% 140% at 90% -30%, rgba(224,160,8,.16), transparent 55%), linear-gradient(120deg,#0d1620 0%,#173040 55%,#1f3e50 100%); --headfoot-border:#264a5e; }
:root[data-theme="dark"]{ --headfoot: radial-gradient(120% 140% at 90% -30%, rgba(224,160,8,.14), transparent 55%), linear-gradient(120deg,#0a1017 0%,#122534 55%,#173442 100%); --headfoot-border:#1e3c4c; }
.topbar{
  background:var(--headfoot)!important;
  backdrop-filter:none;
  border-bottom:1px solid var(--headfoot-border);
  box-shadow:0 2px 14px -6px rgba(0,0,0,.5);
}
.site-footer{
  background:var(--headfoot);
  border-top:1px solid var(--headfoot-border);
  margin-top:28px;
}
/* نصوص وأيقونات فاتحة فوق الخلفية الغامقة */
.topbar .chip{color:#eaf1f6;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.topbar .chip:hover{background:rgba(255,255,255,.16);border-color:rgba(224,160,8,.5)}
.topbar .chip svg{color:#eaf1f6}
.site-footer .foot-brand span,.site-footer .foot-links a{color:#d9e3ea}
.site-footer .foot-links a:hover{color:#f4b81f}
.site-footer .foot-tag,.site-footer .foot-copy{color:#93a6b3}
:root[data-theme="dark"] .foot-tag,:root[data-theme="dark"] .foot-copy{color:#8598a5}

/* ============ Tooltips for icon-only controls ============ */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 8px);
  inset-inline-start:50%;
  transform:translateX(-50%) translateY(3px);
  background:#1c1917;color:#fff;font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;
  z-index:95;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
}
[dir="rtl"] [data-tip]::after{transform:translateX(50%) translateY(3px)}
[data-tip]::before{
  content:"";position:absolute;top:calc(100% + 2px);inset-inline-start:50%;
  transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#1c1917;
  opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:95;
}
[dir="rtl"] [data-tip]::before{transform:translateX(50%)}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
[dir="rtl"] [data-tip]:hover::after{transform:translateX(50%) translateY(0)}
[data-tip]:hover::before{opacity:1}
:root[data-theme="dark"] [data-tip]::after{background:#33302a}
:root[data-theme="dark"] [data-tip]::before{border-bottom-color:#33302a}

/* allow tooltips to overflow card edges */
.card{overflow:visible}

/* ============ منتقي لون السِمة (Accent picker) ============ */
.accent-menu{position:relative;display:inline-flex}
.accent-menu>summary{list-style:none;cursor:pointer}
.accent-menu>summary::-webkit-details-marker{display:none}
.accent-menu>summary::marker{content:""}
.accent-menu[open]>summary{border-color:var(--brand);box-shadow:var(--ring)}
.accent-dot{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.35) inset}
.accent-pop{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:120;
  min-width:180px;padding:8px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.32);
  display:flex;flex-direction:column;gap:2px;
  animation:accentIn .16s ease;
}
@keyframes accentIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.accent-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
  color:var(--text);font-weight:600;font-size:14px;text-decoration:none;
}
.accent-item:hover{background:color-mix(in srgb,var(--brand) 12%,transparent);text-decoration:none}
.accent-item.is-active{background:color-mix(in srgb,var(--brand) 16%,transparent)}
.accent-swatch{width:22px;height:22px;border-radius:7px;flex:0 0 auto;box-shadow:0 2px 6px -1px rgba(0,0,0,.25),0 0 0 2px rgba(255,255,255,.3) inset}
.accent-name{flex:1}
.accent-check{color:var(--brand)}
/* على الخلفية الغامقة داخل الشريط العلوي */
.topbar .accent-menu>summary svg{color:#eaf1f6}

/* ============ المجلدات ============ */
.folders-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.fld-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s}
.fld-chip:hover{border-color:var(--brand)}
.fld-chip.active{background:var(--grad);color:var(--on-brand);border-color:transparent}
.fld-chip .fc{background:color-mix(in srgb,var(--text) 10%,transparent);border-radius:999px;padding:1px 7px;font-size:11.5px;font-weight:700}
.fld-chip.active .fc{background:rgba(255,255,255,.28)}
.fld-chip svg{width:15px;height:15px}
.fld-new{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1.5px dashed var(--line);background:transparent;color:var(--brand-ink,var(--brand));font-weight:700;font-size:13px;cursor:pointer}
.fld-new:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.fld-new svg{width:15px;height:15px}
.folder-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--brand) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 24%,transparent)}
.folder-head .fh-ico svg{width:22px;height:22px;color:var(--brand)}
.folder-head .fh-name{margin:0;font-size:17px;font-weight:800}
.folder-head .fh-count{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.folder-head .spacer{flex:1}
[dir="rtl"] #fld-back svg{transform:scaleX(-1)}
.card-folder{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;font-size:11.5px;font-weight:700;color:var(--brand-ink,var(--brand))}
.card-folder svg{width:13px;height:13px}

/* ============ الصفحة الرئيسية (Landing) ============ */
.lnav{display:flex;align-items:center;gap:8px;max-width:1080px;margin:0 auto;padding:14px 18px}
.lnav .spacer{flex:1}
.landing{max-width:1080px;margin:0 auto;padding:0 18px 40px}
.hero{text-align:center;padding:36px 10px 30px}
.hero-badge{margin-bottom:6px}
.hero h1{font-size:clamp(26px,5vw,42px);line-height:1.2;margin:10px 0 12px;letter-spacing:-.5px}
.hero-sub{max-width:640px;margin:0 auto 22px;color:var(--muted);font-size:clamp(15px,2.4vw,18px);line-height:1.7}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:13.5px;font-weight:600}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust svg{width:16px;height:16px;color:var(--brand)}
.lsection{padding:34px 0;border-top:1px solid var(--line)}
.lsection>h2{text-align:center;font-size:clamp(21px,3.4vw,28px);margin:0 0 6px}
.lsection-sub{text-align:center;color:var(--muted);margin:0 auto 26px;max-width:560px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;transition:.18s}
.feat:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow);transform:translateY(-2px)}
.feat-ico{width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--brand) 14%,transparent);display:grid;place-items:center;margin-bottom:12px}
.feat-ico svg{width:24px;height:24px;color:var(--brand)}
.feat h3{margin:0 0 6px;font-size:16.5px}
.feat p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.lsec-trust .trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.trust-card{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);border-radius:18px;padding:22px}
.trust-card h3{margin:8px 0 6px;font-size:16.5px}
.trust-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.trust-more{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.explore-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;max-width:760px;margin:0 auto}
.explore-links a{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;font-size:14.5px;transition:.15s}
.explore-links a:hover{border-color:var(--brand);color:var(--brand-ink,var(--brand));text-decoration:none}
.explore-links svg{color:var(--brand);flex:0 0 auto}
.lcta{text-align:center;margin-top:30px;padding:38px 22px;border-radius:24px;background:var(--headfoot);color:#eaf1f6}
.lcta h2{margin:0 0 8px;font-size:clamp(22px,3.6vw,30px)}
.lcta p{margin:0 0 20px;color:#a9bcc9}
/* مقالات السيو */
.article{max-width:760px;margin:0 auto;padding:8px 4px 30px}
.article h1{font-size:clamp(24px,4.4vw,34px);line-height:1.25;margin:6px 0 8px}
.article .lead{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 22px}
.article h2{font-size:clamp(19px,3vw,24px);margin:28px 0 10px}
.article h3{font-size:17px;margin:20px 0 8px}
.article p{line-height:1.9;margin:0 0 14px}
.article ul{line-height:1.9;padding-inline-start:22px;margin:0 0 14px}
.article .cta-inline{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 6px}
@media(max-width:600px){.lnav .hide-sm{display:none}.hero{padding-top:22px}}

/* صفحة اتصل بنا */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:6px 0 10px}
.contact-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;color:var(--text);transition:.16s}
.contact-card:hover{border-color:var(--brand);box-shadow:var(--shadow);text-decoration:none;transform:translateY(-2px)}
.contact-card h3{margin:8px 0 6px;font-size:16.5px}
.contact-card p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.7}
.contact-val{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--brand-ink,var(--brand));font-size:14px}

/* رمز الربط (App Link) */
.applink-code{display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:6px auto;max-width:100%}
.applink-code code{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:1px;word-break:break-all;color:var(--brand-ink,var(--brand))}

/* ============================================================
   تخطيط الحافظة الجديد: قائمة جانبية (كمبيوتر) + سحب جانبي (جوال)
   ============================================================ */
.vault-head .vh-title{display:flex;flex-direction:column;min-width:0}
.vault-head .vh-title h2{margin:0}
.menu-btn{display:none;flex:0 0 auto}

.vshell{display:grid;grid-template-columns:264px minmax(0,1fr);gap:22px;align-items:start}

.vside{position:sticky;top:78px;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;
  max-height:calc(100vh - 96px);overflow:auto}
.vside-head{display:none;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.vside-head strong{font-size:15px;font-weight:800}
.side-sec{display:flex;flex-direction:column;gap:9px}
.side-label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.side-label svg{width:15px;height:15px;color:var(--brand)}

/* عناصر عمودية داخل القائمة الجانبية */
.vside .folders-bar,.vside .filters,.vside .tagfilter{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px;margin:0}
.vside .fld-chip,.vside .fbtn,.vside .tbtn{width:100%;justify-content:flex-start;border-radius:11px;padding:9px 11px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vside .fld-chip>span:not(.fc),.vside .fbtn>span,.vside .tbtn>span{overflow:hidden;text-overflow:ellipsis}
.vside .fld-chip .fc,.vside .tbtn .tc{margin-inline-start:auto}
.vside .fbtn{border-color:transparent;background:transparent;color:var(--text)}
.vside .fbtn:hover{background:var(--surface-2);border-color:transparent}
.vside .fbtn.active{color:#fff;background:var(--grad);border-color:transparent}
.vside .fbtn.active svg{color:#fff}
.vside .fld-new{width:100%;justify-content:center;margin-top:3px}
/* إخفاء قسم الوسوم كاملًا عند عدم وجود وسوم */
#tags-sec:has(#tagfilter[hidden]){display:none}

/* طبقة التعتيم للسحب الجانبي */
.vside-overlay{position:fixed;inset:0;background:rgba(15,17,21,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:.2s;z-index:39}
.vside-overlay.show{opacity:1;visibility:visible}
body.no-scroll{overflow:hidden}

@media(max-width:979px){
  .vshell{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  .vside{position:fixed;top:0;bottom:0;height:100%;width:min(312px,86vw);max-height:none;
    border-radius:0;z-index:40;transition:transform .24s ease;padding:16px}
  .vside-head{display:flex}
  [dir="rtl"] .vside{right:0;left:auto;transform:translateX(110%);border:0;border-inline-start:1px solid var(--line)}
  [dir="ltr"] .vside{left:0;right:auto;transform:translateX(-110%);border:0;border-inline-end:1px solid var(--line)}
  .vside.open{transform:none;box-shadow:var(--shadow-lg,var(--shadow))}
}
@media(max-width:420px){
  .hide-xs{display:none}
  .vault-head .vh-title h2{font-size:20px}
}

/* الهامبرغر والعنوان دائمًا معًا في مجموعة واحدة */
.vh-lead{display:flex;align-items:center;gap:12px;min-width:0}
/* ترتيب ترويسة الحافظة على الجوال: [هامبرغر + العنوان] / [بحث] / [فرز + إضافة] */
@media(max-width:600px){
  .vault-head{gap:10px 12px}
  .vault-head .vh-lead{flex:1 1 100%}
  .vault-head .searchbar{flex:1 1 100%;min-width:0}
  .vault-head .sort-wrap{flex:0 0 auto}
  .vault-head #add-btn{flex:1}
}

/* ===== الاستيراد ===== */
.side-import{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:4px;padding:10px 12px;border-radius:11px;
  border:1.5px dashed var(--line);color:var(--brand-ink,var(--brand));font-weight:700;font-size:13.5px;text-decoration:none;transition:.15s}
.side-import:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.side-import svg{width:16px;height:16px}
.import-or{display:flex;align-items:center;text-align:center;gap:12px;color:var(--muted);font-size:12.5px;font-weight:700;margin:14px 0}
.import-or::before,.import-or::after{content:"";flex:1;height:1px;background:var(--line)}
.imp-sources{display:flex;flex-wrap:wrap;gap:8px}
.imp-src{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);font-weight:700;font-size:13px}
.imp-src svg{width:15px;height:15px;color:var(--brand)}
input[type=file].input{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;color:var(--text);font-family:inherit}

/* ===== مولّد كلمات المرور ===== */
.gen-out{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.gen-out code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;letter-spacing:.5px;color:var(--text);word-break:break-all;line-height:1.5}
.gen-strength{display:flex;align-items:center;gap:10px;margin:12px 0 4px}
.gen-strength .gs-bar{flex:1;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.gen-strength .gs-bar i{display:block;height:100%;width:0;border-radius:999px;transition:.25s}
.gen-strength .gs-label{font-size:12.5px;font-weight:800;min-width:56px;text-align:center}
.gen-row{display:flex;align-items:center;gap:12px;margin:16px 0 6px}
.gen-row label{font-weight:700;font-size:13.5px;color:var(--muted);white-space:nowrap}
.gen-row input[type=range]{flex:1;accent-color:var(--brand);height:6px}
.gen-row output{font-weight:800;min-width:28px;text-align:center;color:var(--brand-ink,var(--brand))}
.gen-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:8px}
.gen-opts .check{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.gen-opts .check input{accent-color:var(--brand);width:17px;height:17px}

/* ===== أدوات القائمة الجانبية (درجة الأمان + تحتاج انتباه) ===== */
.side-tool{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.15s}
.side-tool:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,transparent)}
.side-tool svg{width:16px;height:16px;color:var(--brand)}
.side-tool .fc{margin-inline-start:auto;background:var(--weak,#ef4444);color:#fff;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:800}
.side-tool.active{background:var(--grad);color:#fff;border-color:transparent}
.side-tool.active svg{color:#fff}
.side-tool.has-attn:not(.active) svg{color:#ef4444}

/* شارة «تحتاج انتباه» على البطاقة */
.card.needs-attn{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--err) 30%,transparent), var(--shadow)}
.card-attn{position:absolute;inset-block-start:12px;inset-inline-start:12px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;z-index:2}
.card-attn svg{width:13px;height:13px}
.card-attn.bad{background:color-mix(in srgb,var(--err) 16%,var(--surface));color:var(--err)}
.card-attn.warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:#b45309}
.card-attn.weak{background:color-mix(in srgb,var(--err) 12%,var(--surface));color:var(--err)}
.card{position:relative}

/* ===== نافذة درجة الأمان ===== */
.score-top{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.score-ring{flex:0 0 auto;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;position:relative;isolation:isolate;
  background:conic-gradient(var(--brand) 0deg, var(--surface-2) 0)}
.score-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface);z-index:-1}
.score-ring #score-num{font-size:26px;font-weight:900;line-height:1}
.score-ring small{color:var(--muted);font-size:11px;font-weight:700}
.score-stats{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.score-stat{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px 11px;font-size:12.5px;font-weight:700;color:var(--muted)}
.score-stat b{font-size:16px;color:var(--text)}
.score-stat svg{width:16px;height:16px}
.score-stat.ok svg{color:var(--ok)} .score-stat.bad svg{color:var(--err)} .score-stat.warn svg{color:#f59e0b}
.score-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.score-item{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.score-item .si-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line)}
.score-item .si-ico svg{width:16px;height:16px;color:var(--brand)}
.score-item .si-title{flex:1;font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-item .si-fix{width:auto;flex:0 0 auto}
.pill{font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px}
.pill.bad{background:color-mix(in srgb,var(--err) 15%,var(--surface));color:var(--err)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:#b45309}
.pill.weak{background:color-mix(in srgb,var(--err) 12%,var(--surface));color:var(--err)}
.score-ok{display:flex;align-items:center;gap:10px;justify-content:center;padding:22px;background:color-mix(in srgb,var(--ok) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius:14px;font-weight:800;color:var(--ok)}
.score-ok svg{width:22px;height:22px}
.score-scan-note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;color:var(--muted);font-size:12.5px;line-height:1.6}
.score-scan-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}

/* ===== عدّاد مسح الحافظة ===== */
.clip-timer{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:85;display:inline-flex;align-items:center;gap:8px;
  background:var(--text);color:var(--surface);padding:9px 15px;border-radius:999px;font-size:13px;font-weight:700;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}
.clip-timer.show{opacity:1;transform:none}
.clip-timer svg{width:15px;height:15px}

/* ===== سِجل النشاط الزمني ===== */
.timeline{display:flex;flex-direction:column;max-height:360px;overflow:auto}
.tl-item{display:flex;align-items:center;gap:12px;padding:10px 4px;border-inline-start:2px solid var(--line);margin-inline-start:6px;position:relative;cursor:pointer}
.tl-item:hover{background:var(--surface-2);border-radius:8px}
.tl-dot{position:absolute;inset-inline-start:-6px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface)}
.tl-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);flex:0 0 auto}
.tl-ico svg{width:16px;height:16px;color:var(--brand)}
.tl-body{display:flex;flex-direction:column;min-width:0;flex:1}
.tl-title{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-date{font-size:11.5px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.tl-empty{text-align:center;color:var(--muted);padding:24px;font-size:13.5px}

/* ===== رمز QR للمشاركة ===== */
.share-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}
.share-qr{background:#fff;padding:8px;border-radius:12px;border:1px solid var(--line);line-height:0}

/* ===== تخصيص لون/أيقونة البطاقة ===== */
.cust-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.cust-lbl{font-size:12.5px;font-weight:700;color:var(--muted);min-width:52px}
.cust-colors,.cust-icons{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.cust-color{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--sw,var(--surface-2));cursor:pointer;padding:0;transition:.12s}
.cust-color.sel{outline:2px solid var(--text);outline-offset:2px;border-color:#fff}
.cust-color.def,.cust-icon.def{background:var(--surface-2);color:var(--muted);display:grid;place-items:center}
.cust-color.def svg,.cust-icon.def svg{width:14px;height:14px}
.cust-icon{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--text);padding:0}
.cust-icon svg{width:16px;height:16px}
.cust-icon.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand)}

/* ===== حقيبة الطوارئ ===== */
.ekit-sheet{background:#fff;color:#1a1a1a;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,4vw,36px);box-shadow:var(--shadow);max-width:720px;margin:0 auto}
.ekit-brand{display:flex;align-items:center;gap:12px;border-bottom:2px solid #e0a008;padding-bottom:14px;margin-bottom:18px}
.ekit-logo{width:46px;height:46px;border-radius:11px}
.ekit-name{font-weight:900;font-size:19px;color:#241a04}
.ekit-sub{color:#8a6d1e;font-weight:700;font-size:13px}
.ekit-h{display:flex;align-items:center;gap:8px;font-size:15px;margin:20px 0 10px;color:#241a04}
.ekit-h svg{width:17px;height:17px;color:#b8860b}
.ekit-tbl{width:100%;border-collapse:collapse}
.ekit-tbl td{padding:8px 10px;border:1px solid #eadfc4;font-size:13.5px}
.ekit-tbl td:first-child{background:#faf6ea;font-weight:700;width:38%;color:#5c4a1e}
.ekit-steps,.ekit-hint{font-size:13px;line-height:1.9;color:#3a3a3a}
.ekit-codes{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:14px 0}
.ekit-code-line{display:block;height:26px;border-bottom:1.5px dashed #c9b787}
.ekit-tip{display:flex;align-items:center;gap:8px;margin-top:18px;padding:11px 14px;background:#fbf5e6;border:1px solid #ecd9a6;border-radius:11px;font-size:12.5px;color:#7a5a06;font-weight:600}
.ekit-tip svg{width:16px;height:16px;flex:0 0 auto}

/* ===== الطباعة ===== */
@media print {
  .no-print,.topbar,.site-footer,.toast,.clip-timer{display:none!important}
  body{background:#fff}
  .app{padding:0;max-width:none}
  .ekit-sheet{border:0;box-shadow:none;border-radius:0;max-width:none;padding:0}
  .ekit-code-line{border-bottom-color:#999}
}