/* ===== 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);
}
: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);
}
*{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%,rgba(240,180,41,.14),transparent 60%),
             radial-gradient(1000px 500px at -10% 110%,rgba(202,138,10,.10),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:560px){.filters-row .sort-wrap{order:-1}}
.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}
  .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}
.foot-links a{color:var(--brand-ink);font-weight:600}
.foot-copy{margin-inline-start:auto;font-size:12px;color:var(--muted)}
@media(max-width:680px){
  .foot-copy{margin-inline-start:0;width:100%;order:5}
  .foot-tag{width:100%;order:2}
}

/* 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}