:root{
  --bg:#f5f4f2; --card:#fff; --ink:#18181b; --muted:#6b6b70; --line:#e6e3df; --nav:#18181b;
  --red:#b3132b; --red-2:#e2001a; --red-soft:#fbe7ea; --red-ink:#a3102a;
  --green:#1f7a3f; --green-soft:#eef7f0; --green-line:#cfe8d6; --amber:#9a5b00; --amber-soft:#fdf2e3;
  --radius:16px; --shadow:0 1px 0 rgba(0,0,0,.03);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
.rtl{direction:rtl;text-align:right;font-family:"IBM Plex Sans Arabic","Inter",sans-serif}
/* nav */
.nav{background:var(--nav);color:#fff;height:68px;display:flex;align-items:center;padding:0 28px;gap:10px;position:sticky;top:0;z-index:5}
.brand{font-weight:800;font-size:22px;letter-spacing:-.3px;margin-right:22px;text-decoration:none}
.brand b{color:#ff4d61;font-weight:800}
.nav a.tab{color:#d4d4d8;text-decoration:none;padding:9px 16px;border-radius:10px;font-weight:500}
.nav a.tab.on{background:#2c2c31;color:#fff;font-weight:700}
.nav .spacer{flex:1}
.nav .who{display:flex;align-items:center;gap:10px;font-weight:600}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--red-2);display:grid;place-items:center;font-weight:800;font-size:14px}
.badge-count{background:var(--red-2);color:#fff;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;margin-left:6px}
/* layout */
.wrap{max-width:1640px;margin:0 auto;padding:34px 32px 80px}
.kicker{letter-spacing:.08em;color:#55555a;font-weight:600;font-size:14px;text-transform:uppercase}
h1{font-size:44px;line-height:1.1;margin:10px 0 8px;letter-spacing:-.8px}
h2{font-size:26px;margin:0 0 16px;letter-spacing:-.3px}
h3{font-size:20px;margin:0 0 12px}
.sub{color:var(--muted);font-size:17px;margin:0}
.head{display:flex;align-items:flex-end;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1fr 1fr}
.main-side{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
.draft-grid{display:grid;grid-template-columns:510px minmax(0,1fr);gap:36px;align-items:start}
@media (max-width:1100px){.main-side,.draft-grid{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr}}
@media (max-width:640px){.g4,.g2{grid-template-columns:1fr}.wrap{padding:20px 16px 60px}h1{font-size:32px}.nav{padding:0 12px;overflow-x:auto}}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
.card.dark{background:#18181b;color:#fff;border-color:#18181b}
.stat .lbl{color:#4b4b50;font-size:16px}
.stat .val{font-size:40px;font-weight:800;letter-spacing:-1px;margin:6px 0 2px}
.stat .hint{color:var(--muted);font-size:14px}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #d6d3cf;background:#fff;color:var(--ink);padding:12px 22px;border-radius:12px;font-family:inherit;font-size:16px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:#faf9f8}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:#9c0f24}
.btn.soft{background:var(--red-soft);border-color:var(--red-soft);color:var(--red-ink)}
.btn.ghost-dark{background:transparent;border-color:#55555a;color:#fff}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:10px}
.btn.lg{padding:16px 30px;font-size:19px;border-radius:14px}
.btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* chips */
.chip{display:inline-block;border-radius:999px;padding:4px 13px;font-size:14px;font-weight:600;background:#efedea;color:#3f3f44}
.chip.dark{background:#18181b;color:#fff}
.chip.ok{background:#e3f1e7;color:var(--green)} .chip.warn{background:var(--amber-soft);color:var(--amber)} .chip.bad{background:var(--red-soft);color:var(--red-ink)}
.tag{display:inline-block;border-radius:999px;padding:3px 12px;font-size:14px;background:#f0eeeb;color:#3f3f44;margin:0 6px 6px 0}
/* idea card */
.idea{margin-bottom:20px}
.idea h3{font-size:24px;margin:18px 0 10px}
.idea .hook{font-size:27px;font-weight:700;margin:14px 0 12px}
.idea .why{color:#55555a;margin:0 0 18px}
.idea .why b{color:var(--ink)}
.check{display:flex;align-items:center;gap:10px;color:#3f3f44;cursor:pointer;user-select:none}
.check input{width:22px;height:22px;accent-color:var(--red)}
.list{margin:0;padding:0;list-style:none}
.list li{display:flex;gap:12px;margin:10px 0}
.dot{width:9px;height:9px;border-radius:50%;margin-top:9px;flex:none;background:var(--green)}
.dot.amber{background:#b26b00}
.note{color:var(--muted);font-size:14px}
.cal{display:flex;gap:14px;margin:14px 0}
.cal .d{background:#2c2c31;border-radius:12px;width:68px;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.cal .d small{font-size:13px;color:#d4d4d8}.cal .d b{font-size:26px;line-height:1}
.cal .t b{display:block;font-size:18px}.cal .t span{color:#d4d4d8;font-size:15px}
/* draft */
.crumbs{color:#55555a;margin-bottom:34px}.crumbs a{color:var(--red);text-decoration:none}
.seg{display:flex;gap:10px;margin-bottom:18px}
.seg button{border:1px solid #d6d3cf;background:#fff;border-radius:12px;padding:13px 20px;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;color:var(--ink)}
.seg button.on{background:#18181b;color:#fff;border-color:#18181b}
.preview{border-radius:22px;overflow:hidden;background:#2a0a0f;line-height:0}
.preview img,.preview video{width:100%;display:block}
textarea,input[type=text],input[type=number],input[type=password],input[type=datetime-local],select,input[type=search]{width:100%;border:1px solid #d6d3cf;border-radius:12px;padding:14px 16px;font-family:inherit;font-size:16px;line-height:1.5;background:#fff;color:var(--ink)}
textarea{min-height:240px;resize:vertical;font-family:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif}
select{appearance:auto}
label.f{display:block;font-weight:600;font-size:14px;margin:12px 0 6px;color:#3f3f44}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1300px){.checks{grid-template-columns:1fr 1fr}}
.ck{border:1px solid var(--green-line);background:var(--green-soft);border-radius:12px;padding:14px 16px;display:flex;gap:12px}
.ck .ic{color:var(--green);font-weight:800;font-size:20px;line-height:1.2}
.ck b{display:block}.ck span{color:#55555a;font-size:15px}
.ck.warn{border-color:#f0d8b0;background:var(--amber-soft)}.ck.warn .ic{color:var(--amber)}
.ck.fail{border-color:#f2c4cc;background:var(--red-soft)}.ck.fail .ic{color:var(--red)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1300px){.facts{grid-template-columns:1fr 1fr}}
.fact{background:#f5f4f2;border-radius:12px;padding:14px 16px}.fact small{color:#55555a;display:block}.fact b{font-size:19px;font-weight:600}
.publish{background:#18181b;color:#fff;border-radius:22px;padding:24px 28px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.publish select{background:#2c2c31;color:#fff;border-color:#45454b;max-width:420px}
.publish .grow{flex:1;min-width:260px}
.status-pill{border-radius:999px;padding:8px 18px;font-weight:700;background:#e3f1e7;color:var(--green)}
.status-pill.bad{background:var(--red-soft);color:var(--red-ink)}.status-pill.warn{background:var(--amber-soft);color:var(--amber)}
/* drafts list */
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;display:block}
.dcard .th{aspect-ratio:4/5;background:#2a0a0f;overflow:hidden}.dcard .th img{width:100%;height:100%;object-fit:cover}
.dcard .meta{padding:14px 16px}.dcard .meta b{display:block;margin-bottom:6px}
/* assets */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.filters input{max-width:560px}
.pillf{border:1px solid #d6d3cf;border-radius:999px;padding:12px 22px;background:#fff;text-decoration:none;font-weight:500}
.pillf.on{background:#18181b;color:#fff;border-color:#18181b;font-weight:700}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.asset{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.asset .th{height:235px;display:grid;place-items:center;font-weight:700;letter-spacing:.06em;background:#efedea;color:#3f3f44;position:relative}
.asset .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.asset .th.crest img,.asset .th.brand img{object-fit:contain;padding:22px}
.asset .th.k-screenshot{background:#2e7d4f;color:#fff}.asset .th.k-brand{background:#e2001a;color:#fff}.asset .th.k-crest{background:#0f4c9c;color:#fff}
.asset .th.k-photo{background:#3d0b12;color:#fff}.asset .th.k-audio{background:#18181b;color:#fff}.asset .th.k-past{background:#55555a;color:#fff}
.asset .body{padding:18px 20px}.asset .body b{display:block;font-size:19px;margin-bottom:10px}
.flag{background:var(--amber-soft);color:var(--amber);border-radius:10px;padding:8px 12px;font-weight:600;font-size:15px;margin-top:6px}
details.edit summary{cursor:pointer;color:var(--muted);font-size:14px;margin-top:10px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:#55555a;font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.flash{border-radius:12px;padding:14px 18px;margin-bottom:22px;font-weight:500;background:#e3f1e7;color:#155a2e}
.flash.err{background:var(--red-soft);color:var(--red-ink)}
dialog{border:none;border-radius:18px;padding:28px;max-width:620px;width:92vw}
dialog::backdrop{background:rgba(0,0,0,.45)}
.ok{color:var(--green);font-weight:700}.bad{color:var(--red);font-weight:700}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;white-space:pre-wrap;word-break:break-word}
/* mobile approve */
.m-wrap{max-width:520px;margin:0 auto;padding:22px 18px 200px}
.m-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.m-card .pv{background:#1c0a0d;line-height:0}.m-card .pv img,.m-card .pv video{width:100%}
.m-card .bd{padding:22px}
.m-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 14px calc(16px + env(safe-area-inset-bottom));z-index:30}
.m-bar .in{max-width:520px;margin:0 auto;display:grid;gap:12px}
.scene-row{display:grid;grid-template-columns:1fr 180px;gap:10px;margin-bottom:8px}

img,video{max-width:100%}
.m-bar .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.brand{display:inline-flex;align-items:baseline}
.brand .ver{margin-left:9px;font-size:11px;font-weight:600;color:#a1a1aa;background:#2c2c31;border-radius:999px;padding:2px 8px;letter-spacing:0;white-space:nowrap}
@media (max-width:760px){.brand .ver{font-size:10px;padding:2px 6px;margin-left:7px}}
@media (max-width:340px){.brand .ver{display:none}}

/* ===================================================================== responsive / phone (v7) */
.nav .tabs{display:flex;gap:4px;align-items:center}
.nav a.tab{display:inline-flex;align-items:center;gap:6px;position:relative}
.nav a.tab svg{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:560px}
button,.btn,.pillf,.tab,summary,select{touch-action:manipulation}
@media (hover:none){.btn:hover{background:inherit}.btn.primary:hover{background:var(--red)}}

/* tablets */
@media (max-width:1100px){
  .wrap{padding:26px 22px 80px}
  h1{font-size:36px}
  .nav{padding:0 18px}
  .nav .handle{display:none}
}

/* phones */
@media (max-width:760px){
  html,body{font-size:15px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wrap{padding:16px 14px 28px}
  /* top bar: logo + avatar */
  .nav{height:54px;padding:0 14px;padding-top:env(safe-area-inset-top);box-sizing:content-box}
  .brand{font-size:20px;margin-right:0}
  .nav .who .avatar{width:32px;height:32px;font-size:12px}
  /* bottom tab bar like an app */
  .nav .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(24,24,27,.97);backdrop-filter:blur(8px);
    border-top:1px solid #2c2c31;padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;gap:0}
  .nav a.tab{flex:1;flex-direction:column;gap:3px;padding:6px 2px;border-radius:12px;font-size:11px;font-weight:600;color:#a1a1aa;justify-content:center}
  .nav a.tab svg{display:block}
  .nav a.tab.on{background:transparent;color:#fff}
  .nav a.tab.on svg{stroke:#ff4d61}
  .nav a.tab .badge-count{position:absolute;top:2px;left:calc(50% + 6px);margin:0;padding:1px 6px;font-size:10px}
  /* typography */
  h1{font-size:26px;letter-spacing:-.4px;margin:6px 0}
  h2{font-size:20px;margin-bottom:12px}
  h3{font-size:17px}
  .sub{font-size:15px}
  .kicker{font-size:12px}
  .crumbs{margin-bottom:14px;font-size:14px}
  .note{font-size:13px}
  /* layout: one column everywhere */
  .g4{grid-template-columns:1fr 1fr;gap:10px}
  .g3,.g2,.main-side,.draft-grid,.checks,.facts{grid-template-columns:1fr}
  .grid{gap:14px}
  .main-side,.draft-grid{gap:16px}
  .head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
  .head > .row,.head > form,.head > a.btn,.head > button{width:100%}
  .head .row > *{flex:1}
  .head .btn{width:100%;justify-content:center}
  .card{padding:16px;border-radius:14px}
  .stat .val{font-size:28px}
  .stat .lbl{font-size:13px}
  /* touch targets + no iOS zoom on focus (inputs must be >= 16px) */
  .btn{min-height:44px;padding:11px 16px;font-size:15px;justify-content:center}
  .btn.sm{min-height:38px;padding:8px 12px;font-size:14px}
  .btn.lg{padding:14px 18px;font-size:16px}
  textarea,input[type=text],input[type=number],input[type=password],input[type=datetime-local],select,input[type=search]{font-size:16px;padding:12px 13px}
  textarea{min-height:150px}
  input[type=file]{max-width:100%;font-size:14px}
  .row{gap:8px}
  .row > form > .btn,.row > .btn{flex:1 1 auto}
  /* plan */
  .idea h3{font-size:19px;margin:12px 0 6px}
  .idea .hook{font-size:21px;margin:8px 0}
  .idea .why{font-size:14px}
  .cal .d{width:54px;height:54px}.cal .d b{font-size:20px}.cal .t b{font-size:15px}
  /* drafts */
  .dl{grid-template-columns:repeat(2,1fr);gap:10px}
  .dcard .meta{padding:10px}.dcard .meta b{font-size:14px}
  .seg button{flex:1;padding:11px 8px;font-size:14px}
  .preview{border-radius:16px}
  .publish{padding:16px;border-radius:16px;gap:10px}
  .publish .grow{min-width:0;width:100%}
  .publish select{max-width:none}
  .publish .btn{flex:1}
  .ck{padding:11px 12px}.ck span{font-size:13px}
  .fact b{font-size:16px}
  .status-pill{align-self:flex-start;font-size:13px;padding:6px 12px}
  /* storyboard rows (thumbnail + controls) */
  #storyboard form > div[style*="grid-template-columns:90px"]{grid-template-columns:64px 1fr !important;gap:10px !important}
  #storyboard [id^="th-"]{width:64px !important;height:114px !important}
  #storyboard .row[style*="flex-wrap:nowrap"]{flex-wrap:wrap !important}
  #storyboard .row[style*="flex-wrap:nowrap"] select{flex:1 1 100% !important}
  /* assets */
  .filters{gap:8px;margin-bottom:16px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .filters input{min-width:180px}
  .pillf{padding:9px 14px;white-space:nowrap;font-size:14px}
  .agrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .asset .th{height:150px;font-size:12px}
  .asset .body{padding:10px 12px}.asset .body b{font-size:15px}
  .tag{font-size:12px;padding:2px 9px}
  .flag{font-size:13px}
  /* dialogs become bottom sheets */
  dialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
  /* tables */
  table{font-size:13px} th,td{padding:8px 6px}
  /* flash messages */
  .flash{font-size:14px;padding:11px 13px;margin-bottom:14px}
  /* phone approval page has its own bottom bar: hide the tab bar there */
  .m-wrap{padding:14px 14px 210px}
}
@media (max-width:380px){
  .g4{grid-template-columns:1fr}
  .dl,.agrid{grid-template-columns:1fr 1fr}
  .nav a.tab{font-size:10px}
}