/* RoboMOS Advice · panel UI (ink + teal, from the RoboMOS logo) */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;src:url(../fonts/Vazirmatn-400.woff2) format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;src:url(../fonts/Vazirmatn-500.woff2) format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;src:url(../fonts/Vazirmatn-700.woff2) format('woff2')}

:root{
  --ink:#20211E;--ink-2:#3A3C37;--muted:#6E7169;--faint:#9BA19A;
  --paper:#F4F4F0;--surface:#FFFFFF;--surface-2:#FAFAF7;--line:#E2E3DD;--line-2:#CDCFC7;--line-3:#EEEFEA;
  --teal:#3F8576;--teal-deep:#2F6B5E;--teal-ink:#1F4A41;--teal-tint:#E4F0EC;--teal-line:#CFE3DB;
  --amber:#B7791F;--amber-ink:#7A4F0E;--amber-tint:#FBF1DC;--amber-line:#EBD7A8;
  --blue:#4A6FA5;--blue-ink:#33507F;--blue-tint:#E6EDF7;--blue-line:#CFDBEE;
  --red:#B4372B;--red-ink:#8F2A20;--red-tint:#FAE7E4;--red-line:#E9C8C3;
  --violet-ink:#463F8E;--violet-tint:#ECEAF7;
  --side-bg:#20211E;--side-fg:#D8DAD3;--side-muted:#9BA19A;--side-line:#33352F;--side-hover:#2B2D28;
  --fill:#FBF3DE;--fill-line:#E0B65A;
  --r:12px;--r-sm:9px;--shadow:0 1px 2px rgba(32,33,30,.04);
  /* legacy aliases used by older view markup */
  --navy:var(--ink);--navy-2:var(--ink-2);--gold:var(--teal);--gold-ink:var(--teal-ink);--gold-bg:var(--teal-tint);
  --euc:var(--teal);--euc-bg:var(--teal-tint);--orange:var(--amber);--orange-bg:var(--amber-tint);--purple:var(--violet-ink);
  --bg:var(--paper);--line-2-legacy:var(--line-2);--danger:var(--red);--danger-bg:var(--red-tint);
}
*{box-sizing:border-box}
html{direction:rtl;height:100%}
body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:'Vazirmatn',Tahoma,sans-serif;font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--teal-deep);text-decoration:none}
a:hover{color:var(--teal-ink);text-decoration:underline}
h1,h2,h3{line-height:1.4;margin:0 0 10px;font-weight:700}
h1{font-size:20px}
h2{font-size:17px}
h3{font-size:15px}
p{margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;font-size:.92em}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:left}
svg.ic{width:18px;height:18px;flex-shrink:0;vertical-align:-4px}

/* ---------- app shell ---------- */
.app{display:flex;flex-direction:row;min-height:100vh}
.side{width:252px;flex-shrink:0;background:var(--side-bg);color:var(--side-fg);display:flex;flex-direction:column;padding:22px 18px 18px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{display:flex;flex-direction:column;gap:2px;padding:2px 6px 18px;border-bottom:1px solid var(--side-line);margin-bottom:10px}
.side .logo a{display:block;line-height:0}
.side .logo svg{display:block;direction:ltr;unicode-bidi:isolate}
.side .logo .sub{font-size:11.5px;color:var(--side-muted);line-height:1.6;margin-top:4px}
.grp{font-size:11px;font-weight:700;color:#8A8F87;letter-spacing:.4px;padding:12px 10px 4px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);color:var(--side-fg);font-size:14px;font-weight:500;min-height:40px;transition:background .12s}
.nav a:hover{background:var(--side-hover);color:#fff;text-decoration:none}
.nav a.active{background:var(--teal);color:#fff}
.nav a svg{width:18px;height:18px;flex-shrink:0}
.side .spacer{flex-grow:1;min-height:18px}
.me{display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid var(--side-line);margin-top:10px}
.me .av{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.me .who{min-width:0;line-height:1.3}
.me .nm{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .rl{font-size:11.5px;color:var(--side-muted)}
.me form{margin:0;margin-inline-start:auto}
.me .out{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--side-muted);background:transparent;border:0;cursor:pointer}
.me .out:hover{background:var(--side-hover);color:#fff}
.me .out svg{width:18px;height:18px}
/* light sidebar variant (admin setting) */
.side.light{background:var(--surface);color:var(--ink);border-left:1px solid var(--line)}
.side.light .logo{border-bottom-color:var(--line-3)}
.side.light .logo .sub{color:var(--muted)}
.side.light .nav a{color:var(--ink-2)}
.side.light .nav a:hover{background:#F1F2ED;color:var(--ink)}
.side.light .nav a.active{background:var(--teal-tint);color:var(--teal-ink)}
.side.light .me{border-top-color:var(--line-3)}
.side.light .me .nm{color:var(--ink)}
.side.light .me .out:hover{background:#F1F2ED;color:var(--ink)}

.main{flex-grow:1;min-width:0;display:flex;flex-direction:column}
.mobilebar{display:none}
.container{padding:0 32px 48px;display:flex;flex-direction:column;gap:16px}
.container > .page-head{margin:0 -32px 8px;padding:18px 32px;background:var(--surface);border-bottom:1px solid var(--line);min-height:72px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:20px}
.page-head p{margin:2px 0 0;font-size:12.5px}
.page-head .actions-bar{margin-inline-start:auto}
/* header always first, flashes right under it, whatever the source order */
.container > .page-head{order:-2}
.container > .flash,.container > .errors{order:-1;margin-top:8px}

/* ---------- cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0}
.card h3{font-size:15px;margin-bottom:10px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat,.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.stat .k,.tile .k{font-size:12.5px;color:var(--muted)}
.stat .v,.tile .v{font-size:26px;font-weight:700;line-height:1.25}
.tile .d{font-size:12px;color:var(--teal);font-weight:500}
.tile .d.blue{color:var(--blue-ink)} .tile .d.amber{color:var(--amber-ink)} .tile .d.red{color:var(--red-ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.split.wide{grid-template-columns:minmax(0,1fr) 340px}
.stack{display:flex;flex-direction:column;gap:14px}
.list-plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.list-plain li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card.tint{background:var(--teal-tint);border-color:var(--teal-line)}
.card.tint h3,.card.tint p{color:var(--teal-ink)}

/* ---------- flash ---------- */
.flash{padding:10px 14px;border-radius:var(--r-sm);border:1px solid transparent;font-size:13.5px}
.flash-ok{background:var(--teal-tint);color:var(--teal-ink);border-color:var(--teal-line)}
.flash-warn{background:var(--amber-tint);color:var(--amber-ink);border-color:var(--amber-line)}
.flash-err{background:var(--red-tint);color:var(--red-ink);border-color:var(--red-line)}
.errors{background:var(--red-tint);color:var(--red-ink);border:1px solid var(--red-line);border-radius:var(--r-sm);padding:10px 14px}
.errors ul{margin:0;padding-inline-start:18px}
.warnings{background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:var(--r);padding:12px 16px;font-size:13px;color:var(--amber-ink)}
.warnings b{color:var(--amber-ink)}
.warnings ul{margin:4px 0 0;padding-inline-start:18px}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;color:var(--ink-2);font-weight:700;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;font:inherit;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s
}
textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.8}
select{appearance:none;-webkit-appearance:none;padding-inline-end:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7169' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;background-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(63,133,118,.18)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--teal);margin:0}
.field{margin-bottom:12px}
.help{font-size:12px;color:var(--muted);margin-top:4px}
.row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px}
.check input{width:auto}
.check label{margin:0;font-weight:500}
fieldset{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px 8px;margin:0 0 16px;box-shadow:var(--shadow);min-width:0}
form#brief-form{counter-reset:sec}
form#brief-form fieldset{counter-increment:sec}
legend{font-weight:700;font-size:15px;padding:0 8px;color:var(--ink);display:flex;align-items:center;gap:10px}
form#brief-form legend::before{content:counter(sec);width:26px;height:26px;border-radius:8px;background:var(--teal-tint);color:var(--teal-ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.repeater-item{border:1px dashed var(--line-2);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--surface-2)}
.repeater-item .row{align-items:end}
.filled{background:var(--fill) !important;border-color:var(--fill-line) !important}
.repeater-item.filled{background:#FFF8E8 !important}
.sticky-bar{position:sticky;bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;box-shadow:0 -4px 18px rgba(32,33,30,.07)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .tr{width:40px;height:22px;border-radius:999px;background:var(--line-2);position:relative;transition:background .15s;flex-shrink:0}
.switch .tr::after{content:'';position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked + .tr{background:var(--teal)}
.switch input:checked + .tr::after{transform:translateX(-18px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:14px;height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;background:var(--ink);color:#fff;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
.btn:hover{background:var(--ink-2);color:#fff;text-decoration:none}
.btn svg{width:17px;height:17px}
.btn-gold,.btn-primary{background:var(--teal);color:#fff}
.btn-gold:hover,.btn-primary:hover{background:var(--teal-deep)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-light:hover{background:#F3F4EF;color:var(--ink)}
.btn-danger{background:#fff;color:var(--red);border-color:var(--red-line)}
.btn-danger:hover{background:var(--red-tint);color:var(--red-ink)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions-bar form{margin:0}

/* ---------- tables ---------- */
.tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
table.list{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--surface)}
table.list th,table.list td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line-3);vertical-align:middle}
table.list th{background:var(--surface-2);font-size:12px;color:var(--muted);white-space:nowrap;font-weight:700;border-bottom-color:var(--line)}
table.list tr:last-child td{border-bottom:0}
table.list td a b{color:var(--ink)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:1px 10px;border-radius:999px;line-height:1.8;white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.b-draft{background:#EEEFEA;color:var(--ink-2)}
.b-queued,.b-generating,.b-validated{background:var(--blue-tint);color:var(--blue-ink)}
.b-in_review{background:var(--amber-tint);color:var(--amber-ink)}
.b-ready{background:var(--teal-tint);color:var(--teal-ink)}
.b-failed{background:var(--red-tint);color:var(--red-ink)}
.b-skilled{background:var(--teal-tint);color:var(--teal-ink)}
.b-student{background:var(--violet-tint);color:var(--violet-ink)}
.b-teal{background:var(--teal-tint);color:var(--teal-ink)}
.b-amber{background:var(--amber-tint);color:var(--amber-ink)}
.b-blue{background:var(--blue-tint);color:var(--blue-ink)}
.b-red{background:var(--red-tint);color:var(--red-ink)}
.b-ink{background:#EEEFEA;color:var(--ink-2)}

/* ---------- roadmap page ---------- */
.status-box{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r);background:var(--blue-tint);border:1px solid var(--blue-line);color:var(--blue-ink)}
.status-box.ready{background:var(--teal-tint);border-color:var(--teal-line);color:var(--teal-ink)}
.status-box.failed{background:var(--red-tint);border-color:var(--red-line);color:var(--red-ink)}
.status-box.review{background:var(--amber-tint);border-color:var(--amber-line);color:var(--amber-ink)}
.status-box .ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--blue);flex-shrink:0}
.status-box.ready .ico{background:var(--teal)} .status-box.failed .ico{background:var(--red)} .status-box.review .ico{background:var(--amber)}
.status-box .versions{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.preview-wrap{background:#EDEEE9;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.preview{width:100%;height:1100px;border:0;border-radius:6px;background:#fff;box-shadow:0 8px 30px rgba(32,33,30,.12);display:block}
.events{font-size:12.5px;color:var(--muted)}
.events li{margin-bottom:2px}
.tl{display:flex;flex-direction:column}
.tl .ev{display:flex;gap:12px;align-items:flex-start;padding:5px 0;font-size:13px}
.tl .ev .tm{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);direction:ltr;width:60px;flex-shrink:0;padding-top:3px}
.tl .ev .ln{width:10px;display:flex;justify-content:center;flex-shrink:0;padding-top:7px}
.tl .ev .ln i{width:10px;height:10px;border-radius:50%;background:var(--teal);display:block}
.tl .ev.bad .ln i{background:var(--red)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:5px 16px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* ---------- login ---------- */
.auth{display:flex;flex-direction:row;min-height:100vh}
.auth .pane{width:600px;flex-shrink:0;background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:48px 96px;gap:26px}
.auth .pane .logo svg{direction:ltr;unicode-bidi:isolate;display:block}
.auth .pane h1{font-size:26px;margin:0}
.auth .hero{flex-grow:1;background:var(--ink);background-image:radial-gradient(rgba(63,133,118,.45) 1.2px,transparent 1.3px);background-size:32px 32px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px}
.auth .hero h2{font-size:34px;line-height:1.45;color:#fff;margin:0}
.auth .hero p{font-size:15.5px;color:#C9CCC4;line-height:1.9}
.auth .hero .chips{display:flex;gap:10px;flex-wrap:wrap}
.auth .hero .chips span{background:#2B2D28;color:#C9CCC4;border-radius:999px;padding:2px 12px;font-size:12px;font-weight:700}
.auth .hero .meta{display:flex;justify-content:space-between;align-items:center;color:var(--side-muted);font-size:12.5px}
.auth .hero .foot{color:var(--muted);font-size:12px}
.auth .btn{height:46px;font-size:15px;width:100%}
.auth .inwrap{position:relative}
.auth .inwrap svg{position:absolute;top:11px;left:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.auth .inwrap input{padding-left:38px}
.login{max-width:380px;margin:70px auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px 28px}

/* ---------- impersonation banner ---------- */
.impersonating{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--amber-tint);color:var(--amber-ink);border-bottom:1px solid var(--amber-line);padding:10px 32px;font-size:13.5px}
.impersonating form{margin:0;margin-inline-start:auto}
.impersonating .btn{background:var(--amber-ink)}
@media (max-width:900px){.impersonating{padding:10px 16px}}

/* ---------- misc ---------- */
details summary{cursor:pointer;font-weight:700;color:var(--ink)}
code.inline{background:#EEEFEA;padding:1px 6px;border-radius:4px;direction:ltr;unicode-bidi:isolate;font-size:.9em}
pre.code{background:#0f1420;color:#e7eaf2;padding:12px 14px;border-radius:8px;direction:ltr;text-align:left;overflow:auto;font-size:12.5px}
.card.intake{border-color:var(--teal-line);background:#F6FAF8}
.card.intake h2{display:flex;align-items:center;gap:10px;font-size:16px}
.card.intake .ico{width:34px;height:34px;border-radius:9px;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.card.intake .ico svg{width:18px;height:18px}
.topbar{background:var(--ink);color:#fff;padding:0 24px}
.topbar-in{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700}
.brand svg{direction:ltr;unicode-bidi:isolate;display:block}
.brand .en{font-size:13px;color:var(--side-muted);font-weight:500}
.topbar .user{margin-inline-start:auto;font-size:13px;color:#cfd6e6}
.topbar .user a{color:#fff}
.pagination{display:flex;gap:4px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pagination .page-link{display:block;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:13px}
.pagination .active .page-link{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .disabled .page-link{opacity:.5}

/* ---------- responsive ---------- */
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split.wide{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{flex-direction:column}
  .side{position:fixed;inset:0 auto 0 0;right:0;width:280px;height:100vh;transform:translateX(100%);transition:transform .2s;z-index:40;box-shadow:-12px 0 30px rgba(0,0,0,.25)}
  body.nav-open .side{transform:none}
  .mobilebar{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:10px 16px;position:sticky;top:0;z-index:30}
  .mobilebar .msub{font-size:10.5px;color:rgba(255,255,255,.62);line-height:1.4}
  .mobilebar .burger{width:40px;height:40px;border:0;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-inline-start:auto}
  .mobilebar .burger svg{width:22px;height:22px}
  .mobilebar svg.lg{direction:ltr}
  .container{padding:0 16px 40px}
  .container > .page-head{margin:0 -16px 8px;padding:14px 16px}
  .auth{flex-direction:column}
  .auth .pane{width:100%;padding:40px 24px}
  .auth .hero{padding:32px 24px;min-height:320px}
  .auth .hero h2{font-size:24px}
  .preview{height:800px}
  .tiles{grid-template-columns:1fr}
}