/* Naqlah's palette, from the site's tokens. System fonts only: the panel loads nothing from outside. */
:root{
  --paper:#fff;--paper-2:#EFF3F9;--paper-3:#DDE5F0;
  --ink:#0A1A33;--ink-soft:#46607E;--ink-faint:#566D87;
  --blue:#1B4DFF;--blue-ink:#123BCC;--blue-deep:#08206B;--blue-tint:#E4EAFF;
  --on-deep:#fff;--on-deep-soft:#B9C8F5;
  --alert:#C4271B;--alert-tint:#FBEAE8;--good:#0F6B45;--good-tint:#E2F4EB;--warn:#7A5200;--warn-tint:#FBF0D9;
  --line:#E4EAF2;--line-2:#C9D5E4;
  --font:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-2);color:var(--ink);font:400 1rem/1.6 var(--font);overflow-wrap:anywhere}
h1,h2,h3,p,dl,dd,ul{margin:0;padding:0}
ul{list-style:none}
a{color:var(--blue-ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.875em}

.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.125rem}
.brand-sub{font-weight:400;color:var(--ink-soft);font-size:.9375rem}
.mark{width:.875rem;height:.875rem;background:var(--blue);border-radius:.1875rem}

.login{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login-card{width:100%;max-width:23rem;background:var(--paper);border:1px solid var(--line);border-radius:.75rem;padding:1.75rem}
.login-card h1{font-size:1.375rem;margin:.75rem 0 1.25rem}
.login-card label{display:block;font-size:.875rem;color:var(--ink-soft);margin:.875rem 0 .25rem}
.login-card input{width:100%;font:inherit;padding:.625rem .75rem;border:1px solid var(--line-2);border-radius:.5rem;background:var(--paper);color:var(--ink)}
.login-card button{width:100%;margin-top:1.25rem;font:inherit;font-weight:700;padding:.6875rem;border:0;border-radius:.5rem;background:var(--blue);color:var(--on-deep);cursor:pointer}
.login-card button:hover{background:var(--blue-ink)}
.error{background:var(--alert-tint);color:var(--alert);border-radius:.5rem;padding:.625rem .75rem;font-size:.9375rem}

.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--paper);border-bottom:1px solid var(--line);padding:.75rem 1.25rem}
.top-actions{display:flex;align-items:center;gap:.625rem}
.top-actions form{margin:0}
.muted{color:var(--ink-faint);font-size:.875rem}
.btn{display:inline-block;font:inherit;font-size:.9375rem;padding:.3125rem .875rem;border-radius:.5rem;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--paper-2)}
.btn.quiet{border-color:transparent;color:var(--ink-soft)}

.page{max-width:70rem;margin:0 auto;padding:1.25rem 1rem 3rem;display:grid;gap:1.75rem}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.125rem}
.stat b{display:block;font-size:2rem;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-soft);font-size:.9375rem}
.stat.urgent{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--on-deep)}
.stat.urgent span{color:var(--on-deep-soft)}
.notice{background:var(--warn-tint);color:var(--warn);border-radius:.5rem;padding:.625rem .875rem;font-size:.9375rem;margin-top:-.75rem}

.section-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}
h2{font-size:1.125rem}
.tabs{display:flex;gap:.25rem}
.tab{padding:.25rem .75rem;border-radius:999px;color:var(--ink-soft);text-decoration:none;font-size:.9375rem}
.tab:hover{background:var(--paper-3)}
.tab.on{background:var(--ink);color:var(--on-deep)}

.inbox{background:var(--paper);border:1px solid var(--line);border-radius:.75rem}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.875rem;padding:.75rem 1rem}
.row + .row{border-top:1px solid var(--line)}
.row-title{font-weight:600}
.row-meta{color:var(--ink-soft);font-size:.875rem}
.row-when{color:var(--ink-faint);font-size:.875rem;white-space:nowrap}
.tag{font-size:.8125rem;font-weight:600;padding:.125rem .625rem;border-radius:.375rem}
.tag.renewal{background:var(--blue-tint);color:var(--blue-ink)}
.tag.lead{background:var(--paper-2);color:var(--ink-soft)}
.link{font-size:.9375rem;font-weight:600;white-space:nowrap}
.empty{background:var(--paper);border:1px solid var(--line);border-radius:.75rem;padding:1.5rem;text-align:center;color:var(--ink-soft)}

.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.product{background:var(--paper);border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:.75rem}
.product header,.product footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.product footer{margin-top:auto}
h3{font-size:1.0625rem}
.badge{font-size:.8125rem;padding:.0625rem .5625rem;border-radius:999px;background:var(--paper-2);color:var(--ink-soft)}
.badge.good{background:var(--good-tint);color:var(--good)}
.badge.warn{background:var(--warn-tint);color:var(--warn)}
.badge.bad{background:var(--alert-tint);color:var(--alert)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.625rem}
.metric dt{color:var(--ink-soft);font-size:.8125rem}
.metric dd{font-size:1.375rem;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.subs{display:flex;flex-wrap:wrap;gap:.25rem 1rem;color:var(--ink-soft);font-size:.875rem;border-top:1px solid var(--line);padding-top:.625rem}
.pending{color:var(--blue-ink);font-weight:600;font-size:.9375rem}

@media (max-width:44rem){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .products{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:.25rem}
  .row-main{grid-column:2 / -1;grid-row:1}
  .row-when{grid-column:2;grid-row:2}
  .row .link{grid-column:3;grid-row:2}
  .tag{grid-row:1;align-self:start}
  .muted{display:none}
}
@media (prefers-reduced-motion:no-preference){.btn,.tab{transition:background-color .12s}}