:root{
  --bg:#090a0b;
  --panel:#121416;
  --panel-2:#17191b;
  --ink:#f7f4ed;
  --muted:#9da3aa;
  --gold:#d8b56c;
  --gold-2:#efd79e;
  --line:rgba(216,181,108,.24);
  --soft:rgba(255,255,255,.085);
  --green:#4ac58a;
  --amber:#efb550;
  --red:#ef6b68;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 88% 0,rgba(216,181,108,.11),transparent 29%),linear-gradient(155deg,#0d0e0f,#070809 68%);color:var(--ink);font-family:Tajawal,Arial,sans-serif;line-height:1.75;min-height:100vh}
button,input,select,textarea{font:inherit}
a{color:inherit}
.wrap{width:min(1120px,calc(100% - 28px));margin-inline:auto}
.topbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--soft);background:rgba(9,10,11,.86);backdrop-filter:blur(14px)}
.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand strong{color:var(--gold-2);font-size:1rem}.brand span{color:var(--muted);font-size:.72rem}
.nav-actions{display:flex;gap:8px;align-items:center}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid transparent;border-radius:13px;text-decoration:none;cursor:pointer;font-weight:900;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.button:hover{transform:translateY(-1px)}
.button.primary{color:#111;background:linear-gradient(135deg,#ecd18f,#c99d4b)}
.button.secondary{color:var(--gold-2);border-color:var(--line);background:rgba(216,181,108,.06)}
.button.ghost{color:var(--ink);border-color:var(--soft);background:rgba(255,255,255,.025)}
.button.danger{color:#ffc2c0;border-color:rgba(239,107,104,.25);background:rgba(239,107,104,.07)}
.page-main{padding:clamp(34px,6vw,72px) 0 80px}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:24px;align-items:end;padding:clamp(24px,5vw,48px);border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 90% 0,rgba(216,181,108,.16),transparent 36%),linear-gradient(145deg,rgba(27,28,28,.98),rgba(10,11,12,.98));box-shadow:var(--shadow)}
.hero.compact{grid-template-columns:1fr}.hero h1{margin:13px 0 10px;font-size:clamp(2rem,6vw,4.25rem);line-height:1.08}.hero h1 span{color:var(--gold-2)}
.hero p{max-width:760px;margin:0;color:var(--muted);font-size:1.02rem}.hero-side{display:grid;gap:9px;padding:18px;border:1px solid var(--soft);border-radius:19px;background:rgba(255,255,255,.025)}
.hero-side strong{color:var(--gold-2)}.hero-side span{color:var(--muted);font-size:.82rem}
.eyebrow,.status{display:inline-flex;width:max-content;padding:6px 11px;border:1px solid var(--line);border-radius:999px;color:var(--gold-2);background:rgba(216,181,108,.06);font-size:.75rem;font-weight:900}
.status.success{color:#baf1d6;border-color:rgba(74,197,138,.25);background:rgba(74,197,138,.08)}
.status.warning{color:#ffe0a3;border-color:rgba(239,181,80,.25);background:rgba(239,181,80,.08)}
.status.error{color:#ffc2c0;border-color:rgba(239,107,104,.25);background:rgba(239,107,104,.08)}
.section{margin-top:22px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.section-head h2{margin:7px 0 0;font-size:clamp(1.45rem,4vw,2.25rem)}.section-head p{max-width:580px;margin:0;color:var(--muted)}
.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.panel,.card{padding:clamp(18px,3vw,27px);border:1px solid var(--soft);border-radius:23px;background:linear-gradient(145deg,rgba(22,24,26,.96),rgba(13,14,15,.96));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.card{display:flex;flex-direction:column;text-decoration:none;min-height:210px;transition:transform .22s ease,border-color .22s ease}.card:hover{transform:translateY(-3px);border-color:var(--line)}
.card-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border:1px solid var(--line);border-radius:15px;color:var(--gold-2);background:rgba(216,181,108,.08);font-size:1.15rem;font-weight:900}
.card h2,.card h3,.panel h2,.panel h3{margin:0 0 6px}.card p,.panel>p{margin:0;color:var(--muted)}.card-link{margin-top:auto;padding-top:18px;color:var(--gold-2);font-weight:900;font-size:.82rem}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}.form-grid label{display:grid;gap:7px;color:#e4e7eb;font-size:.82rem;font-weight:800}.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea,.search-input{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--soft);border-radius:13px;outline:none;background:#0d0f10;color:var(--ink);resize:vertical}
.form-grid .check-input{width:auto;min-height:auto;margin-left:7px;accent-color:var(--gold)}
.form-grid textarea{min-height:112px}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.search-input:focus{border-color:rgba(216,181,108,.65);box-shadow:0 0 0 3px rgba(216,181,108,.08)}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.metric{display:grid;gap:3px;padding:16px;border:1px solid var(--soft);border-radius:17px;background:rgba(255,255,255,.022)}.metric span{color:var(--muted);font-size:.72rem}.metric strong{color:var(--gold-2);font-size:1.25rem;line-height:1.35}.metric small{color:var(--muted);font-size:.68rem}
.result{display:none}.result.show{display:block}.result-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(216,181,108,.12),rgba(255,255,255,.018))}.result-hero strong{font-size:clamp(1.6rem,5vw,2.7rem);color:var(--gold-2)}.result-hero span{color:var(--muted);font-size:.78rem}
.notice{padding:14px 16px;border-right:4px solid var(--gold);border-radius:14px;background:rgba(216,181,108,.055);color:#d8dde2;font-size:.83rem}.notice strong{color:var(--gold-2)}.notice.success{border-color:var(--green);background:rgba(74,197,138,.07)}.notice.error{border-color:var(--red);background:rgba(239,107,104,.07)}
.result-detail{margin:6px 0 0}
.list{display:grid;gap:9px}.list-item{padding:14px;border:1px solid var(--soft);border-radius:15px;background:rgba(255,255,255,.02)}.list-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.list-item strong,.list-item span{display:block}.list-item small{color:var(--muted)}.list-item-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;color:var(--muted);font-size:.75rem}
.empty{display:grid;place-items:center;min-height:140px;padding:24px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted)}.empty strong{color:var(--gold-2)}
.timeline{display:grid;gap:0;margin-top:18px}.timeline-step{position:relative;display:grid;grid-template-columns:26px 1fr;gap:11px;padding-bottom:18px}.timeline-step:before{content:"";position:absolute;top:24px;right:12px;bottom:0;width:2px;background:var(--soft)}.timeline-step:last-child:before{display:none}.timeline-dot{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;background:#111;color:var(--gold-2);font-size:.7rem;font-weight:900}.timeline-step.done .timeline-dot{color:#07110c;border-color:var(--green);background:var(--green)}.timeline-step strong{display:block}.timeline-step span{display:block;color:var(--muted);font-size:.78rem}
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px dashed var(--line);border-radius:14px;background:rgba(216,181,108,.045);direction:ltr}.code-box code{color:var(--gold-2);font-size:1rem;font-weight:900;word-break:break-all}
.footer{padding:28px 0;border-top:1px solid var(--soft);color:var(--muted);font-size:.82rem}.footer-row{display:flex;justify-content:space-between;gap:15px}.footer a{color:var(--gold-2);text-decoration:none}
[hidden]{display:none!important}
@media(max-width:900px){.hero,.grid.three,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.hero>div:first-child{grid-column:1/-1}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wrap{width:min(100% - 20px,1120px)}.nav{min-height:64px}.brand span{display:none}.nav-actions .button{padding:8px 11px;font-size:.75rem}.page-main{padding-top:26px}.hero,.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.hero{padding:22px;border-radius:24px}.hero>div:first-child{grid-column:auto}.section-head{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.form-grid .full,.form-actions{grid-column:auto}.form-actions{flex-direction:column}.form-actions .button{width:100%}.metrics{grid-template-columns:1fr 1fr}.metric{padding:13px}.result-hero{grid-template-columns:1fr}.footer-row{flex-direction:column}.list-item-head{flex-direction:column}.code-box{align-items:stretch;flex-direction:column}.code-box .button{width:100%}}
@media print{.topbar,.no-print,.footer{display:none!important}.page-main{padding:0}.wrap{width:100%;max-width:none}.panel{box-shadow:none}.result{display:block!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}