/* Aroria owner dashboard: a daily ledger on cream, a burgundy rail, champagne hairlines.
   Tokens come from brand/aroria/design-system/tokens.json. */

@font-face{font-family:"Tajawal";src:url("/fonts/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Tajawal";src:url("/fonts/Tajawal-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url("/fonts/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"El Messiri";src:url("/fonts/ElMessiri%5Bwght%5D.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/CormorantGaramond-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Jost";src:url("/fonts/Jost%5Bwght%5D.ttf") format("truetype");font-weight:300 700;font-display:swap}

:root{
  --cream-50:#FBF8F1;--cream-100:#F6F0E4;--cream-200:#EFE6D4;--cream-300:#E4D7BF;--cream-400:#D3C3A6;
  --cream-600:#9C886B;--cream-700:#7A6850;--cream-800:#5B4D39;--ink:#241A17;--paper:#FFFDF9;
  --b-950:#240910;--b-900:#3A0E19;--b-800:#521423;--b-700:#6B1B2E;--b-600:#842A3E;--b-200:#E8C7CE;--b-100:#F5E5E8;--b-50:#FBF3F4;
  --ch-700:#8C7248;--ch-500:#B8995F;--ch-300:#D9C49A;--ch-100:#F1E8D4;
  --ok:#2F6B4F;--ok-bg:#E6F0EA;--warn:#7E5410;--warn-bg:#F7ECD5;--err:#9A3412;--err-bg:#F8E6DE;
  --blue:#285A86;--blue-bg:#E3ECF6;--violet:#5A3E8E;--violet-bg:#ECE6F6;--teal:#1E6B66;--teal-bg:#DDEFEC;

  --bg:var(--cream-100);--sheet:var(--cream-50);--raised:var(--paper);--line:var(--cream-300);--line-soft:var(--cream-200);
  --text:var(--ink);--muted:var(--cream-800);--faint:var(--cream-700);--accent:var(--b-700);--accent-deep:var(--b-800);

  --f-ui:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;--f-title:"El Messiri","Tajawal",serif;
  --f-mark:"Cormorant Garamond",Georgia,serif;--f-latin:"Jost","Tajawal",sans-serif;
  --t-micro:.78rem;--t-small:.86rem;--t-body:1rem;--t-h3:1.06rem;--t-h2:1.22rem;--t-h1:1.85rem;
  --r:10px;--r-sm:7px;--rail:240px;
  --shadow:0 1px 2px rgba(58,14,25,.05),0 6px 18px -10px rgba(58,14,25,.18);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--cream-400) var(--cream-100);accent-color:var(--b-700)}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-body)/1.6 var(--f-ui);caret-color:var(--b-700)}
::selection{background:var(--b-200);color:var(--b-950)}
a{color:var(--b-700);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--b-800)}
img,video{display:block;max-width:100%}
code,kbd{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.86em;direction:ltr;unicode-bidi:isolate;
  background:var(--cream-200);color:var(--b-900);border-radius:5px;padding:.08em .4em;overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--b-600);outline-offset:2px;border-radius:4px}
.num,table td,.tabular{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
svg.i{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ shell */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh;
  background:linear-gradient(to left,var(--b-900) var(--rail),transparent var(--rail))}
.rail{min-width:0}
.rail{position:sticky;top:0;height:100dvh;overflow-y:auto;background:var(--b-900);color:#EADFCB;
  display:flex;flex-direction:column;padding:22px 14px 16px;scrollbar-color:var(--b-700) var(--b-900)}
.brand{display:flex;align-items:center;gap:12px;padding:2px 10px 22px;color:var(--cream-50);text-decoration:none}
.brand img{width:42px;height:auto}
.brand b{display:block;font:600 1.3rem/1 var(--f-mark);letter-spacing:.14em}
.brand small{display:block;font-size:var(--t-micro);color:var(--ch-300);margin-top:5px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-group{margin:16px 10px 6px;font-size:var(--t-micro);color:var(--ch-300);font-weight:500}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);color:#EADFCB;text-decoration:none;
  font-size:.95rem;transition:background-color .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:rgba(251,248,241,.07);color:var(--cream-50)}
.nav a[aria-current="page"]{background:var(--b-800);color:var(--cream-50)}
.nav a[aria-current="page"] svg{color:var(--ch-300)}
.nav .count{margin-inline-start:auto;min-width:1.6em;padding:0 .45em;border-radius:999px;background:var(--cream-50);
  color:var(--b-900);font-size:var(--t-micro);font-weight:700;text-align:center;line-height:1.55}
.rail-foot{margin-top:auto;padding:16px 10px 0;border-top:1px solid rgba(217,196,154,.18);display:grid;gap:12px}
.mode{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:rgba(217,196,154,.12);color:var(--ch-100)}
.mode b{font-weight:700;font-size:.9rem}.mode span{font-size:var(--t-micro);color:var(--ch-300)}
.mode.live{background:var(--warn-bg);color:var(--warn)}.mode.live span{color:var(--warn)}
.rail-foot a{display:flex;align-items:center;gap:9px;color:var(--ch-300);text-decoration:none;font-size:var(--t-small)}
.rail-foot a:hover{color:var(--cream-50)}

.main{min-width:0;padding:30px clamp(20px,4vw,48px) 64px}
.wrap{max-width:1120px;margin-inline:auto}
.page-head{margin:6px 0 26px}
.page-head h1{margin:0;font:600 var(--t-h1)/1.25 var(--f-title);color:var(--b-800)}
.page-head p{margin:6px 0 0;color:var(--muted);max-width:68ch;text-wrap:pretty}
.page-head h1{text-wrap:balance}

/* ------------------------------------------------------------ status line */
.status{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:26px;box-shadow:var(--shadow)}
.status > *{display:flex;align-items:center;gap:9px;padding:11px 16px;font-size:var(--t-small);color:var(--muted)}
.status > * + *{border-inline-start:1px solid var(--line-soft)}
.status b{color:var(--text);font-weight:500}
.status .grow{margin-inline-start:auto}
.dot{width:8px;height:8px;border-radius:50%;background:var(--cream-600);flex:none}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--ch-700)}.dot.err{background:var(--err)}

/* --------------------------------------------------------------- sections */
.section{margin-bottom:34px}
.section-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--ch-300)}
.section-head h2{margin:0;font-size:var(--t-h2);font-weight:700;line-height:1.3}
.section-head .count{font-size:var(--t-small);color:var(--b-700);font-weight:700;font-variant-numeric:tabular-nums}
.status .num{color:var(--b-700);font-weight:700}
.feed-side{display:grid;justify-items:end;gap:6px}
.feed .hint{margin-top:4px;font-size:var(--t-micro)}
input.empty::-webkit-datetime-edit{color:transparent}
input.empty:focus::-webkit-datetime-edit{color:inherit}
.mini{display:contents}.mini span{display:none}
.when-ar{display:block;font-size:var(--t-micro);color:var(--b-800);font-weight:500}
input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.section-head .more{margin-inline-start:auto;font-size:var(--t-small);display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.section-head .more:hover{text-decoration:underline}
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.sheet.pad{padding:18px 20px}
.sheet + .section,.notice + .sheet,.sheet + .sheet{margin-top:28px}
.stack{display:grid;gap:14px}

/* ---------------------------------------------------------------- ledger */
.ledger{list-style:none;margin:0;padding:0}
.lrow + .lrow{border-top:1px solid var(--line-soft)}
.lrow-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s var(--ease),opacity .2s var(--ease)}
.lrow-body{min-height:0;overflow:hidden}
.lrow-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 18px}
.lrow.is-done .lrow-fold{grid-template-rows:0fr;opacity:0}
.lrow-done{display:none;align-items:center;gap:8px;padding:12px 18px;color:var(--ok);font-size:var(--t-small);font-weight:500}
.lrow.is-done .lrow-done{display:flex;animation:fade .2s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.strip{display:flex;gap:6px}
.thumb{position:relative;width:60px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--cream-200);flex:none}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .badge-video{position:absolute;inset-block-end:4px;inset-inline-end:4px;display:grid;place-items:center;width:18px;height:18px;
  border-radius:50%;background:rgba(36,9,16,.7);color:var(--cream-50)}
.thumb .badge-video svg{width:10px;height:10px;fill:currentColor;stroke:none}
.thumb.more{display:grid;place-items:center;color:var(--muted);font-size:var(--t-small);font-weight:500}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--t-small);color:var(--muted);margin-bottom:4px}
.meta .when{display:inline-flex;align-items:center;gap:5px}
.caption{margin:0;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:72ch}
.caption.empty{color:var(--faint)}
.codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.code{font:500 var(--t-micro)/1.5 var(--f-latin);direction:ltr;letter-spacing:.02em;color:var(--b-800);background:var(--b-50);
  border:1px solid var(--b-100);border-radius:5px;padding:0 6px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* inbox list */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 18px}
.feed li + li{border-top:1px solid var(--line-soft)}
.kind-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cream-200);color:var(--b-700)}
.feed .who{font-weight:500}.feed .who .muted{font-weight:400}
.feed .text{margin:2px 0 0;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed time{font-size:var(--t-small);color:var(--faint);white-space:nowrap}
.feed-foot{padding:10px 18px;border-top:1px solid var(--line-soft);font-size:var(--t-small)}

/* facts row */
.facts{display:flex;flex-wrap:wrap;gap:6px 26px;padding:14px 18px;font-size:var(--t-small);color:var(--muted)}
.facts b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.facts .gap b{color:var(--warn)}

/* ----------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;font-size:var(--t-micro);font-weight:500;
  line-height:1.7;background:var(--cream-200);color:var(--cream-800);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.err{background:var(--err-bg);color:var(--err)}.badge.info{background:var(--b-100);color:var(--b-800)}
.badge.kind{background:transparent;border:1px solid var(--line);color:var(--muted)}
.badge.blue{background:var(--blue-bg);color:var(--blue)}.badge.violet{background:var(--violet-bg);color:var(--violet)}
.badge.teal{background:var(--teal-bg);color:var(--teal)}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge.kind::before{display:none}
.badge.k-image{background:var(--blue-bg);border-color:transparent;color:var(--blue)}.badge.k-carousel{background:var(--violet-bg);border-color:transparent;color:var(--violet)}
.badge.k-reel{background:var(--b-100);border-color:transparent;color:var(--b700)}.badge.k-story{background:var(--teal-bg);border-color:transparent;color:var(--teal)}
.kind-ic.comment{background:var(--blue-bg);color:var(--blue)}.kind-ic.dm{background:var(--ok-bg);color:var(--ok)}
.kind-ic.story{background:var(--violet-bg);color:var(--violet)}.kind-ic.at{background:var(--warn-bg);color:var(--warn)}
.section-head{position:relative}
.section-head::after{content:'';position:absolute;inset-block-end:-2px;inset-inline-start:0;width:96px;height:3px;border-radius:3px;background:var(--sec,var(--b700))}
.section-head h2{color:var(--sec,var(--text))}
.sec-drafts{--sec:var(--b700)}.sec-inbox{--sec:var(--blue)}.sec-perf{--sec:var(--teal)}.sec-lib{--sec:var(--ch-700)}.sec-notes{--sec:var(--violet)}.sec-time{--sec:var(--teal)}
.facts .gap b{color:var(--err)}
.nav a svg{opacity:.95}
.nav a[href='/'] svg{color:#F1E8D4}.nav a[href='/drafts'] svg{color:#F0B8C4}.nav a[href='/plan'] svg{color:#C9B8EC}
.nav a[href='/library'] svg{color:#E3CC96}.nav a[href='/products'] svg{color:#E3CC96}.nav a[href='/inbox'] svg{color:#A9C8EA}
.nav a[href='/customers'] svg{color:#C9B8EC}.nav a[href='/performance'] svg{color:#9FD8CF}.nav a[href='/chat'] svg{color:#A9DDB9}
.nav a[href='/lessons'] svg{color:#F1E8D4}.nav a[href='/instagram'] svg{color:#F0B8C4}


/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 15px;border-radius:var(--r-sm);
  border:1px solid transparent;font:500 var(--t-small)/1.2 var(--f-ui);cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--b-700);color:var(--cream-50);transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{background:var(--b-800);color:var(--cream-50)}
.btn:active{background:var(--b-900)}
.btn.secondary{background:var(--raised);color:var(--b-700);border-color:var(--cream-400)}
.btn.secondary:hover{border-color:var(--b-600);color:var(--b-800);background:var(--paper)}
.btn.quiet{background:transparent;color:var(--muted);border-color:transparent;padding-inline:10px}
.btn.quiet:hover{background:var(--cream-200);color:var(--text)}
.btn.danger{background:transparent;color:var(--err);border-color:#E9C3B3}
.btn.danger:hover{background:var(--err-bg);border-color:var(--err)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--cream-50);border-inline-end-color:transparent;animation:spin .7s linear infinite}
.btn.secondary[aria-busy="true"]::after{border-color:var(--b-700);border-inline-end-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.sm{min-height:32px;padding:5px 11px;font-size:var(--t-micro)}

/* ----------------------------------------------------------------- forms */
label.field{display:grid;gap:5px;font-size:var(--t-small);color:var(--muted);font-weight:500}
input,textarea,select{font:inherit;font-size:var(--t-small);color:var(--text);background:var(--raised);border:1px solid var(--cream-400);
  border-radius:var(--r-sm);padding:8px 11px;min-height:38px;width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
textarea{min-height:120px;line-height:1.65;resize:vertical;font-size:var(--t-body)}
input::placeholder,textarea::placeholder{color:var(--cream-700)}
input:hover,textarea:hover,select:hover{border-color:var(--cream-600)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--b-600);box-shadow:0 0 0 3px rgba(132,42,62,.14)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4D39' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:14px;background-position:left 10px center;padding-inline-end:11px;padding-inline-start:30px}
input[type="file"]{padding:6px;background:var(--paper)}
.file{position:relative;display:flex;align-items:center;gap:10px;min-height:38px;padding:5px 6px;border:1px dashed var(--cream-600);
  border-radius:var(--r-sm);background:var(--paper);cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.file:hover{border-color:var(--b-600);background:var(--b-50)}
.file:focus-within{outline:2px solid var(--b-600);outline-offset:2px}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;min-height:0}
.file .pick{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:6px;background:var(--cream-200);color:var(--b-800);font-size:var(--t-small);font-weight:500}
.file .name{font-size:var(--t-small);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
input[type="file"]::file-selector-button{font:inherit;font-size:var(--t-small);border:1px solid var(--cream-400);background:var(--cream-100);
  color:var(--b-700);border-radius:6px;padding:5px 12px;margin-inline-end:10px;cursor:pointer}
.toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.toolbar > .grow{flex:1 1 220px}
.toolbar > label.field{flex:1 1 160px}
.hint{font-size:var(--t-small);color:var(--muted);margin:0}

/* -------------------------------------------------------------- notices */
.notice{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--r);margin-bottom:18px;
  background:var(--b-50);color:var(--b-900);border:1px solid var(--b-100);font-size:var(--t-small)}
.notice svg{margin-top:2px}.notice.ok{background:var(--ok-bg);color:var(--ok);border-color:#CFE3D7}
.notice.err{background:var(--err-bg);color:var(--err);border-color:#EFCDBE}.notice.warn{background:var(--warn-bg);color:var(--warn);border-color:#EED9AE}

/* ------------------------------------------------------------ empty state */
.empty-state{display:grid;justify-items:start;gap:6px;padding:26px 22px}
.empty-state b{font-size:var(--t-h3)}
.empty-state p{margin:0;color:var(--muted);max-width:60ch}
.empty-state .btn{margin-top:8px}

/* ----------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
th{position:sticky;top:0;background:var(--cream-200);color:var(--muted);font-weight:500;text-align:start;padding:10px 14px;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--line-soft);vertical-align:top;text-align:start}
tbody tr:hover td{background:rgba(239,230,212,.35)}
td.wide{min-width:280px}
td .muted,.muted{color:var(--muted)}
.faint{color:var(--faint)}

/* ---------------------------------------------------------------- tabs */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--cream-200);border-radius:var(--r);margin-bottom:20px}
.tabs a{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;
  font-size:var(--t-small);font-weight:500;transition:background-color .15s var(--ease),color .15s var(--ease)}
.tabs a:hover{color:var(--text);background:rgba(255,253,249,.6)}
.tabs a[aria-current="page"]{background:var(--paper);color:var(--b-800);box-shadow:var(--shadow)}
.tabs .n{font-size:var(--t-micro);color:var(--faint);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------- draft editor */
.draft{padding:0}
.draft-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 20px;border-bottom:1px solid var(--line-soft)}
.draft-head h3{margin:0;font-size:var(--t-h3);font-weight:700}
.draft-head .grow{margin-inline-start:auto}
.draft-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;padding:18px 20px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;align-content:start}
.gallery a,.gallery .g{position:relative;display:block;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--cream-200)}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover}
.gallery .cap{position:absolute;inset-inline:6px;inset-block-end:6px;display:flex;gap:4px;flex-wrap:wrap}
.draft-form{display:grid;gap:12px;align-content:start}
.draft-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.draft-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 20px;border-top:1px solid var(--line-soft);background:rgba(239,230,212,.35);
  border-end-start-radius:var(--r);border-end-end-radius:var(--r)}
.draft-foot .grow{margin-inline-start:auto}

/* --------------------------------------------------------------- library */
.upload{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.upload .naming{margin:4px 0 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.tile{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tile-media{position:relative;aspect-ratio:4/5;background:var(--cream-200)}
.tile-media img,.tile-media video{width:100%;height:100%;object-fit:cover}
.tile-media .badge{position:absolute;inset-block-start:8px;inset-inline-start:8px}
.tile-body{display:grid;gap:8px;padding:10px 12px 12px}
.tile-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile-title b{font:500 .92rem/1.3 var(--f-latin);direction:ltr}
.tile-title b.none{font-family:var(--f-ui);color:var(--warn);direction:rtl}
.tile .meta{margin:0;font-size:var(--t-micro)}
.tile select,.tile input{min-height:32px;padding-block:5px;font-size:var(--t-micro)}

/* --------------------------------------------------------------- products */
.p-form{display:grid;grid-template-columns:minmax(150px,1.4fr) 90px 110px 168px auto;gap:8px;align-items:center}
.p-form input,.p-form select{min-height:34px;padding-block:5px}

/* ------------------------------------------------------------------- chat */
.chat{display:grid;grid-template-rows:minmax(0,1fr) auto;height:calc(100dvh - 190px);min-height:420px}
.chat-log{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:20px}
.msg{max-width:78%;padding:11px 15px;border-radius:14px;white-space:pre-wrap;line-height:1.7;font-size:.97rem}
.msg.me{align-self:flex-start;background:var(--b-700);color:var(--cream-50);border-start-start-radius:4px}
.msg.ai{align-self:flex-end;background:var(--paper);border:1px solid var(--line);border-start-end-radius:4px;unicode-bidi:plaintext}
.msg.ai pre{direction:ltr;text-align:left;background:var(--cream-200);border-radius:8px;padding:10px 12px;overflow-x:auto;
  font:.84rem/1.55 ui-monospace,Consolas,monospace;margin:6px 0}
.msg.thinking{color:var(--muted)}
.chat-empty{margin:auto;text-align:center;color:var(--muted);max-width:46ch}
.chat-empty b{display:block;color:var(--text);font-size:var(--t-h3);margin-bottom:4px}
.composer{display:flex;gap:10px;align-items:flex-end;padding:14px 16px;border-top:1px solid var(--line-soft)}
.composer textarea{min-height:52px;max-height:200px}
.composer .btn{min-height:44px}

/* -------------------------------------------------------------- connect */
.connect{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:22px}
.connect .ig{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--b-50);color:var(--b-700)}
.connect .ig svg{width:28px;height:28px}
.connect h2{margin:0;font-size:var(--t-h2)}
.connect p{margin:4px 0 0;color:var(--muted)}
.connect .actions{grid-column:1/-1}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;margin:0;padding:18px 22px;font-size:var(--t-small)}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 20px;counter-increment:s}
.steps li + li{border-top:1px solid var(--line-soft)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--cream-200);color:var(--b-800);font-weight:700;font-size:var(--t-small)}
.steps p{margin:0}.steps .hint{margin-top:2px}
.copy{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.copy code{font-size:var(--t-small);padding:5px 9px;user-select:all}

.checks{list-style:none;margin:0;padding:4px 22px 6px;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-small)}
.checks li.ok svg{color:var(--ok)}.checks li.warn svg{color:var(--warn)}
.connect-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 20px}
.advanced{margin-top:28px}
.advanced summary{cursor:pointer;padding:14px 20px;font-weight:500;list-style-position:inside;color:var(--muted)}
.advanced[open] summary{border-bottom:1px solid var(--line-soft);color:var(--text)}
.advanced-body{padding:16px 20px;display:grid;gap:12px}
.copy-row{display:grid;grid-template-columns:minmax(140px,max-content) minmax(0,1fr) auto;gap:10px;align-items:center}
.copy-label{font-size:var(--t-small);color:var(--muted)}
.copy-val{font-size:var(--t-small);background:var(--cream-100)}
.perf-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:28px}
.perf-kv > div{display:grid;gap:2px;padding:16px 18px}
.perf-kv > div + div{border-inline-start:1px solid var(--line-soft)}
.perf-kv span{font-size:var(--t-small);color:var(--muted)}
.perf-kv b{font:600 1.5rem/1.2 var(--f-latin);color:var(--b-800)}
.perf-kv small{font-size:var(--t-micro);color:var(--faint)}
.perf-aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.bars{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.bars li{display:grid;grid-template-columns:minmax(70px,1fr) 2fr auto;gap:10px;align-items:center;font-size:var(--t-small)}
.bar{height:8px;border-radius:99px;background:var(--cream-200);overflow:hidden}
.bar i{display:block;height:100%;background:var(--b-700);border-radius:99px}

/* ------------------------------------------------------------------ login */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--b-900)}
.login-card{width:min(380px,100%);background:var(--sheet);border-radius:14px;padding:30px 28px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45)}
.login-card .mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-card .mark img{width:48px}
.login-card .mark b{font:600 1.45rem/1 var(--f-mark);letter-spacing:.14em;color:var(--b-800)}
.login-card .mark small{display:block;color:var(--muted);font-size:var(--t-micro);margin-top:4px}
.login-card form{display:grid;gap:14px}
.login-card .btn{width:100%;min-height:42px}

/* -------------------------------------------------------- public product */
.public{min-height:100dvh;background:var(--cream-100)}
.public-top{display:flex;justify-content:center;padding:22px 16px;background:var(--b-900)}
.public-top b{font:600 1.35rem/1 var(--f-mark);letter-spacing:.14em;color:var(--cream-50)}
.public-main{max-width:1040px;margin:0 auto;padding:28px 16px 56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
.public-gal{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.public-gal img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.public-gal img:first-child{grid-column:1/-1}
.public-info{position:sticky;top:24px;display:grid;gap:10px}
.public-info .code{justify-self:start}
.public-info h1{margin:0;font:600 2rem/1.25 var(--f-title);color:var(--b-800)}
.public-info .rule{height:1px;background:linear-gradient(90deg,transparent,var(--ch-500),transparent);margin:6px 0}
.price{font:500 2.4rem/1.1 var(--f-latin);color:var(--b-800);direction:ltr;text-align:right}
.price span{font-size:1rem;color:var(--b-700);margin-inline-start:6px}
.public-info .cta{margin-top:10px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .draft-body{grid-template-columns:1fr}
  .p-form{grid-template-columns:1fr 1fr}
  .p-form > :first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;background:none}
  .rail{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;overflow:visible}
  .brand{padding:0 4px}.brand small{display:none}.brand img{width:32px}
  .nav{order:3;flex-direction:row;overflow-x:auto;width:100%;min-width:0;gap:4px;padding-bottom:2px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36px);mask-image:linear-gradient(to right,transparent 0,#000 36px)}
  .nav a[href="/"]{order:-3}.nav a[href="/drafts"]{order:-2}.nav a[href="/inbox"]{order:-1}
  .nav-group{display:none}
  .nav a{flex:none;padding:6px 10px;font-size:var(--t-small)}
  .rail-foot{margin:0 auto 0 0;padding:0;border:0;display:flex;align-items:center;gap:10px}
  .mode{padding:4px 10px}.mode span{display:none}
  .rail-foot a span{display:none}
  .main{padding:20px 16px 48px}
  .lrow-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .actions{justify-content:flex-start}
  .status > *{flex:1 1 auto;padding:8px 12px}
  .status .grow,.status .wide-only{display:none}
  .upload{grid-template-columns:1fr}
  .public-main{grid-template-columns:1fr}
  .public-info{position:static}
  .chat{height:calc(100dvh - 230px)}
  .msg{max-width:92%}
  .kv{grid-template-columns:1fr;gap:2px}
  .copy-row{grid-template-columns:1fr auto}.copy-label{grid-column:1/-1}
  .perf-kv > div + div{border-inline-start:0;border-top:1px solid var(--line-soft)}
  .kv dd{margin-bottom:10px}
  .draft-form .row2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .table-wrap{overflow:visible;background:none;border:0;box-shadow:none}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap thead{display:none}
  .table-wrap tr{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:6px 0;box-shadow:var(--shadow)}
  .table-wrap td{border:0;padding:6px 14px}
  .table-wrap td[data-label]:not([data-label=''])::before{content:attr(data-label);display:block;font-size:var(--t-micro);color:var(--faint);margin-bottom:2px}
  tbody tr:hover td{background:none}
  td.wide{min-width:0}
  .mini{display:grid;gap:3px}.mini span{display:block;font-size:var(--t-micro);color:var(--faint)}
  .p-form{grid-template-columns:1fr 1fr;align-items:end}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}