/* Cloud 11 — Localization Review.
   Landing reads like the product site; the working pages stay light and dense. */
:root{
  --bg:#F4F6FA; --card:#FFFFFF; --soft:#EDF1F8;
  --ink:#0B0E14; --ink-2:#434A58; --ink-3:#79818F;
  --accent:#2760DD; --accent-2:#6E8BFF; --accent-hover:#1E4EBD; --on-accent:#fff;
  --night:#0A0D16; --night-2:#121A33;
  --border:rgba(11,14,20,.10); --border-strong:rgba(11,14,20,.18);
  --open:#C2410C; --open-bg:#FFF2E8;
  --done:#15803D; --done-bg:#E8F7EE;
  --edit:#2760DD; --edit-bg:#E9EFFD;
  --shadow:0 2px 10px rgba(11,14,20,.06);
  --shadow-lg:0 24px 60px rgba(11,14,20,.18);
  --radius:16px;
  --font:'Helvetica Neue',-apple-system,'Noto Sans Thai',Arial,sans-serif;
  --mono:ui-monospace,'JetBrains Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(244,246,250,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)}
.topbar.on-dark{background:rgba(10,13,22,.72);border-color:rgba(255,255,255,.1);color:#fff}
.topbar-in{max-width:1280px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.015em}
.logo .mark{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,#FFB3D2,#A9B6FF 48%,#8FD3FF);
  display:grid;place-items:center;color:#000;font-size:12px;font-weight:800;letter-spacing:-.08em}
.logo small{font-weight:400;opacity:.6;font-size:12px}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:7px;font-size:13px;opacity:.85}
.who input{width:150px;padding:7px 11px;border:1px solid var(--border-strong);border-radius:10px;background:var(--card);color:var(--ink)}
.on-dark .who input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.on-dark .who input::placeholder{color:rgba(255,255,255,.5)}
.btn{padding:8px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--card);
  cursor:pointer;font-size:13px;font-weight:500;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn:disabled,.btn[disabled]{opacity:.4;color:var(--ink-3);cursor:not-allowed}
.btn:disabled:hover{border-color:var(--border-strong);background:var(--card)}
.on-dark .btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.on-dark .btn:hover{background:rgba(255,255,255,.16)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-done{background:var(--done);border-color:var(--done);color:#fff}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:9px;min-height:32px}
@media(pointer:coarse){.btn,.btn-sm,.chip,.m-toggle,.lang-btn{min-height:44px}}
.btn-ghost{background:none;border-color:transparent;color:var(--ink-3)}
.btn-ghost:hover{color:var(--ink);border-color:var(--border-strong)}

/* ---------- hero (Cloud 11 key-visual treatment) ---------- */
.hero{position:relative;overflow:hidden;background:#000;color:#fff;padding:92px 0 120px}
.hero::before{content:"";position:absolute;inset:-40% 30% auto -20%;height:780px;
  background:radial-gradient(closest-side,rgba(255,164,206,.5),transparent 72%),
             radial-gradient(closest-side,rgba(142,160,255,.45),transparent 70%);
  transform:translateX(12%)}
.hero::after{content:"";position:absolute;inset:auto -25% -45% 30%;height:620px;
  background:radial-gradient(closest-side,rgba(126,212,255,.4),transparent 70%),
             radial-gradient(closest-side,rgba(255,206,150,.34),transparent 66%)}
.hero > *{position:relative;z-index:1}
.hero-edge{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;
  background:linear-gradient(90deg,#FF9DC5,#C6A8FF,#8FD3FF,#9CF0D0,#FFD79B,#FF9DC5)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 15px}

.headline{margin:26px 0 18px}
.headline .line{display:block;width:max-content;max-width:100%;background:#000;padding:2px 16px 6px;margin-bottom:6px;
  font-size:clamp(2.3rem,6.4vw,5rem);line-height:1.04;font-weight:800;letter-spacing:-.035em;text-transform:uppercase;
  background-clip:padding-box}
.headline .line span{background:linear-gradient(96deg,#FFC2DC 0%,#D5B8FF 34%,#9BD6FF 64%,#FFDAAC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .at{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.3rem,2.6vw,2rem);color:rgba(255,255,255,.78);
  margin:14px 0 0;letter-spacing:-.01em}
.wm{font-weight:800;letter-spacing:-.055em;color:#fff;font-size:1.35em}
.wm i{font-style:normal;letter-spacing:-.09em;margin-left:.04em}
.hero p.lede{max-width:54ch;color:rgba(255,255,255,.7);margin:22px 0 28px;font-size:16px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:46px}
.hero .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff;border-radius:999px;padding:11px 20px}
.hero .btn:hover{background:rgba(255,255,255,.2)}
.hero .btn-primary{background:#fff;border-color:#fff;color:#000;font-weight:600}
.hero .btn-primary:hover{background:rgba(255,255,255,.86)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden}
.hero-stats > div{background:rgba(0,0,0,.72);padding:17px 19px}
.hero-stats .n{font-size:27px;font-weight:700;letter-spacing:-.025em}
.hero-stats .l{font-size:11px;color:rgba(255,255,255,.62);margin-top:3px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- feature sections ---------- */
.board{position:relative;z-index:2;margin-top:-64px;padding-bottom:90px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-lg);margin-bottom:26px}
.search{flex:1;min-width:230px;padding:11px 15px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips[hidden]{display:none}
.chip{padding:8px 13px;border:1px solid var(--border-strong);border-radius:999px;background:var(--card);cursor:pointer;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.feature{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.feature-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.feature-no{width:30px;height:30px;border-radius:9px;background:var(--soft);display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--ink-2)}
.feature h2{font-size:19px;margin:0;letter-spacing:-.015em}
.feature h2 small{font-weight:400;font-size:13px;color:var(--ink-3);margin-left:8px}
.feature .desc{color:var(--ink-3);font-size:13px;margin:0 0 14px 42px}
.feature .done-n{margin-left:auto;font-size:13px;color:var(--ink-3)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.tile{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg);transition:.15s;display:block}
.tile:hover{background:var(--card);border-color:var(--accent);transform:translateY(-1px)}
.tile.is-done{background:var(--done-bg);border-color:rgba(21,128,61,.3)}
.tile .t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px}
.tile .m{font-size:12px;color:var(--ink-3);margin-top:3px}
.bar{height:5px;background:var(--soft);border-radius:999px;overflow:hidden;display:flex;margin-top:9px}
.bar i{height:100%}
.bar .b-edit{background:var(--accent)}
.bar .b-done{background:var(--done)}

/* ---------- page view ---------- */
.page-head{background:var(--card);border-bottom:1px solid var(--border);padding:22px 0 18px}
.page-head h1{margin:0 0 4px;font-size:25px;letter-spacing:-.02em}
.page-head .crumb{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.page-head .row2{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pagenav{position:sticky;top:53px;z-index:50;background:rgba(244,246,250,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);padding:9px 0}
.pagenav .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.screens{padding:26px 0 100px}

.screen{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;
  box-shadow:var(--shadow);overflow:hidden}
.screen-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.screen-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.screen-head .n{font-size:12px;color:var(--ink-3)}
.screen-body{display:grid;grid-template-columns:clamp(300px,33%,430px) minmax(0,1fr);gap:0}
@media(max-width:900px){.screen-body{grid-template-columns:1fr}}
.shots{padding:22px 16px;border-right:1px solid var(--border);background:linear-gradient(180deg,var(--soft),var(--card));
  align-self:start;position:sticky;top:112px}
@media(max-width:900px){.shots{position:static;border-right:none;border-bottom:1px solid var(--border)}}
.shots img{width:100%;border-radius:12px;border:1px solid var(--border);display:block;margin-bottom:10px;
  cursor:zoom-in;background:#fff}
.shots .nope{font-size:12px;color:var(--ink-3);text-align:center;padding:26px 0}
.shots .cap{font-size:11px;color:var(--ink-3);margin:-6px 0 12px}

.fields{padding:8px 0}
.field{padding:14px 18px;border-bottom:1px solid var(--border)}
.field:last-child{border-bottom:none}
.field.changed{background:#F7F9FF}
.field-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.key{font-family:var(--mono);font-size:12px;color:#1D4ED8;word-break:break-all}
.pill{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:600}
.p-sheet{background:var(--soft);color:var(--ink-2);font-weight:500}
.p-draft{background:#FFF4E5;color:#9A5B00}
.p-approved{background:#E9EFFD;color:#1E4EBD}
.p-exported{background:#EDE9FE;color:#5B21B6}
.p-applied{background:var(--done-bg);color:var(--done)}
.sheet-note{font-size:11px;color:var(--ink-3)}
.uses{font-size:11px;color:#5B21B6;background:#F3F0FF;border-radius:999px;padding:3px 9px;cursor:help}
.row-flag{font-size:12px;border-radius:9px;padding:7px 10px;margin:2px 0 8px}
.flag-lock{background:var(--soft);color:var(--ink-2)}
.flag-drift{background:#FFF4E5;color:#9A5B00}
.flag-note{background:#F7F8FB;color:var(--ink-2)}
.flag-dup{background:#F3F0FF;color:#5B21B6}
.row-flag b{font-weight:600}
.warns{display:flex;flex-direction:column;gap:5px}
.warn{font-size:12px;color:#B42318;background:#FEF3F2;border:1px solid #FECDCA;border-radius:9px;padding:7px 10px;margin-top:8px}
.field.has-warn{box-shadow:inset 3px 0 0 #B42318}
.field.flash-warn{animation:flashwarn 1.6s ease-out 2}
@keyframes flashwarn{0%,100%{background:transparent}25%{background:#FEF3F2}}
.field.locked{background:#FAFBFD}
.field.locked textarea{background:var(--soft);color:var(--ink-3);cursor:not-allowed}
.note-actions{display:flex;gap:8px;margin-top:8px}
.btn-approve{background:var(--done);border-color:var(--done);color:#fff}
.btn-approve:hover{background:#126c34;border-color:#126c34}

/* role switch + the undo toast */
.roleswitch{display:flex;align-items:center;gap:4px;background:var(--soft);border-radius:999px;padding:3px 3px 3px 10px}
.on-dark .roleswitch{background:rgba(255,255,255,.12)}
.role-label{font-size:11px;color:var(--ink-3)}
.on-dark .role-label{color:rgba(255,255,255,.6)}
.role-tag{font-size:12px;font-weight:600;padding:5px 11px}
.toast-undo{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(18px);background:var(--ink);
  color:#fff;padding:10px 12px 10px 20px;border-radius:999px;font-size:14px;display:flex;align-items:center;gap:14px;
  opacity:0;transition:.2s;z-index:100;pointer-events:none;box-shadow:0 12px 30px rgba(11,14,20,.3)}
.toast-undo.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast-undo .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}

/* the real screenshot is the source of truth, so give it weight */
.m-real{font-weight:600}
.m-real[aria-pressed="false"]{background:var(--card);border:1px solid var(--border-strong)}
.p-edit{background:var(--edit-bg);color:var(--edit)}
.p-done{background:var(--done-bg);color:var(--done)}
.p-open{background:var(--open-bg);color:var(--open)}
.field-top .right{margin-left:auto;display:flex;gap:6px;align-items:center}

.langs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.langs{grid-template-columns:1fr}}
.lang label{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.lang textarea{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--card);resize:vertical;line-height:1.45}
.lang textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(39,96,221,.14)}
.lang textarea.dirty{border-color:var(--accent);background:#FBFCFF}
.was{font-size:12px;color:var(--ink-3);margin-top:4px}
.was b{font-weight:500;color:var(--ink-2)}
.note{margin-top:10px}
.note textarea{width:100%;min-height:38px;padding:8px 11px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--bg)}
.cmts{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.cmt{background:var(--soft);border-radius:9px;padding:7px 10px;font-size:13px}
.cmt .who-line{font-size:11px;color:var(--ink-3);display:flex;gap:8px;align-items:center;margin-bottom:2px}
.del{margin-left:auto;border:none;background:none;color:var(--ink-3);cursor:pointer;font-size:13px;
  min-width:32px;min-height:32px;border-radius:8px}
.del:hover{color:var(--open)}

.empty-state{text-align:center;padding:60px 20px;color:var(--ink-3)}
.lightbox{position:fixed;inset:0;background:rgba(10,13,22,.85);display:none;align-items:center;justify-content:center;
  z-index:95;padding:26px;cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:min(94vw,860px);max-height:92vh;border-radius:14px}
.lightbox .phone-zoom{width:min(92vw,430px);height:min(92vh,900px);cursor:default}
.lightbox .phone-zoom .m-box{font-size:26px}
.lightbox .phone-zoom .m-para{font-size:16px}
.lightbox .phone-zoom .m-tag{font-size:15px;padding:10px 15px}
.lightbox .phone-zoom .m-cta{font-size:18px;padding:14px 18px}
.lightbox .phone-zoom .m-row{font-size:17px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(18px);background:var(--done);
  color:#fff;padding:13px 24px;border-radius:999px;font-size:15px;font-weight:600;opacity:0;transition:.2s;
  z-index:99;pointer-events:none;box-shadow:0 12px 30px rgba(11,14,20,.3)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- account + activity log ---------- */
.acct{display:flex;align-items:center;gap:8px}
.acct-chip{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--border-strong);
  border-radius:999px;background:var(--card);font-size:12px;line-height:1.25}
.on-dark .acct-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.acct-chip img{width:26px;height:26px;border-radius:50%}
.acct-chip b{display:block;font-weight:600}
.acct-chip small{opacity:.6}
.locked{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;border-radius:12px;
  background:var(--open-bg);color:var(--open);font-size:14px;border:1px solid rgba(194,65,12,.25)}
.log{display:flex;flex-direction:column;gap:8px}
.log-row{display:grid;grid-template-columns:120px 170px minmax(0,1fr);gap:14px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
@media(max-width:820px){.log-row{grid-template-columns:1fr;gap:6px}}
.log-when{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.log-who b{font-size:13px}
.log-who small{display:block;font-size:11px;color:var(--ink-3)}
.log-what{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.log-what a{color:var(--accent);font-weight:500}
.log-diff{flex-basis:100%;font-size:13px;background:var(--soft);border-radius:9px;padding:7px 10px}
.log-diff .old{color:var(--ink-3);text-decoration:line-through}
.log-diff .new{color:var(--done);font-weight:500}
.log-diff small{color:var(--ink-3);font-family:var(--mono);font-size:10px;margin-left:6px}

/* ---------- brand mark ---------- */
.brandmark{height:20px;width:auto;display:block}
.topbar:not(.on-dark) .brandmark{filter:invert(1)}
.hero .brandmark{height:clamp(34px,5vw,62px)}
.logo{gap:10px}

/* ---------- feature cards (landing) ---------- */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.fcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.18s}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.fcard.is-done{border-color:rgba(21,128,61,.35)}
.fcard-shot{position:relative;height:190px;background:#0A0D16;overflow:hidden;display:grid;place-items:center}
.fcard-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.95}
.fcard-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,13,22,0) 40%,rgba(10,13,22,.78) 100%)}
.fcard-shot .noshot{color:rgba(255,255,255,.4);font-size:12px}
.fcard-no{position:absolute;top:12px;left:12px;z-index:1;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:#000;background:linear-gradient(96deg,#FFC2DC,#D5B8FF 45%,#9BD6FF);padding:5px 10px;border-radius:999px}
.fcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.fcard-body h2{margin:0;font-size:19px;letter-spacing:-.02em}
.fcard-th{font-size:13px;color:var(--ink-2)}
.fcard-body p{margin:2px 0 8px;font-size:13px;color:var(--ink-3);line-height:1.45}
.fcard-meta{display:flex;gap:12px;font-size:12px;color:var(--ink-3);margin-top:auto}
.fcard-meta .hl{color:var(--accent);font-weight:600}
.fcard-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-3);margin-top:8px}
.fcard-foot b{color:var(--accent);font-weight:600}

/* ---------- phone mock-up (follows the Cloud 11 app design) ---------- */
.device{display:flex;flex-direction:column;align-items:center;gap:10px}
.dev-toggle{display:flex;gap:4px;background:var(--soft);border-radius:999px;padding:3px}
.m-toggle{border:none;background:none;padding:7px 15px;border-radius:999px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.m-toggle[aria-pressed="true"]{background:var(--ink);color:#fff}
.m-expand{border:none;background:none;padding:7px 11px;border-radius:999px;font-size:14px;cursor:pointer;
  color:var(--ink-3);line-height:1}
.m-expand:hover{background:var(--card);color:var(--ink)}
.phone{width:min(340px,100%);height:clamp(540px,calc(100vh - 230px),716px);border-radius:52px;background:#0A0A0A;
  padding:11px;flex:none;box-shadow:0 22px 54px rgba(11,14,20,.28),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone-body{position:relative;height:100%;border-radius:42px;background:#fff;overflow:hidden auto;
  display:flex;flex-direction:column;color:#0A0A0A}
.phone-body::-webkit-scrollbar{width:0}
.phone-body::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:110px;height:27px;border-radius:999px;background:#0A0A0A;z-index:3}
.m-status{display:flex;justify-content:space-between;padding:14px 22px 6px;font-size:12px;font-weight:600}
.m-appbar{display:flex;align-items:center;gap:14px;padding:12px 20px 6px}
.m-appbar img{height:19px;width:auto;filter:invert(1)}  /* the file is white; the app screen is not */
.m-prog{flex:1;height:2px;background:#E6E6E6;border-radius:2px;overflow:hidden}
.m-prog i{display:block;width:45%;height:100%;background:#0A0A0A}
.m-screen{padding:14px 20px 24px;display:flex;flex-direction:column;gap:11px;flex:1}

/* headline and paragraph sit in outlined boxes, like the real onboarding screens */
.m-box{border:1.5px solid #CC00FF;border-radius:999px;padding:9px 18px;font-size:22px;line-height:1.22;
  letter-spacing:-.01em;width:max-content;max-width:100%}
.m-box.strong{font-weight:800}
.m-para{border-radius:20px;font-size:14px;line-height:1.5;color:#0A0A0A;width:auto;padding:13px 16px;font-weight:400}
.m-title{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.m-label{font-size:13px;font-weight:600;margin-top:5px}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.m-tag{background:#0A0A0A;color:#fff;border-radius:5px;padding:9px 13px;font-size:13px;line-height:1.2}
.m-chips{display:flex;gap:6px;flex-wrap:wrap}
.m-chip{border:1px solid #DDE2EC;border-radius:999px;padding:8px 14px;font-size:13px;color:#434A58}
.m-row{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#F4F4F6;
  border-radius:14px;padding:13px 15px;font-size:15px}
.m-row i{font-style:normal;color:#A6ADBA}
.m-input{border:1px solid #DADADF;border-radius:12px;padding:13px 15px;font-size:14px;color:#8A8A92;background:#fff}
.m-footer{position:sticky;bottom:0;background:#0A0A0A;padding:15px 18px 20px;margin-top:auto}
.m-cta{border:1.5px solid #CC00FF;border-radius:999px;color:#fff;text-align:center;padding:11px 16px;
  font-size:16px;font-weight:600}
.m-cta i{font-style:normal;margin-left:6px}
.m-ref{width:100%;display:block;cursor:zoom-in}
.dev-note{font-size:11px;color:var(--ink-3);text-align:center;max-width:320px}
.shots{display:grid;place-items:center}
.screen-head h3 small{font-weight:400;font-size:12px;color:var(--ink-3)}

/* ---------- language switch, header actions, per-section save ---------- */
.langswitch{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:3px}
.on-dark .langswitch{background:rgba(255,255,255,.12)}
.lang-btn{border:none;background:none;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:600;
  cursor:pointer;color:var(--ink-3);letter-spacing:.04em}
.on-dark .lang-btn{color:rgba(255,255,255,.65)}
.lang-btn[aria-pressed="true"]{background:var(--card);color:var(--ink)}
.on-dark .lang-btn[aria-pressed="true"]{background:#fff;color:#000}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.head-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.pagenav .hint{margin-left:auto;font-size:12px;color:var(--ink-3)}

.save-wrap{margin-left:auto;display:flex;align-items:center;gap:10px}
.unsaved-n{font-size:12px;color:var(--open);font-weight:600}
.saved-at{font-size:12px;color:var(--done);font-weight:600}
.screen.just-saved{border-color:var(--done);box-shadow:0 0 0 3px rgba(21,128,61,.14)}
.screen.just-saved .screen-head{background:var(--done-bg)}
.screen,.screen-head{transition:background .25s,border-color .25s,box-shadow .25s}
.screen.has-unsaved{border-color:var(--open)}
.screen.has-unsaved .screen-head{background:var(--open-bg)}
.field[data-dirty]{background:#FFFBF5;box-shadow:inset 3px 0 0 var(--open)}

/* ---------- screen-by-screen editor ---------- */
.editor{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;padding:22px 22px 90px;align-items:start}
@media(max-width:768px){.editor{grid-template-columns:1fr}}
.screenlist{position:sticky;top:112px;max-height:calc(100vh - 140px);overflow:auto;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}
@media(max-width:1000px){.screenlist{position:static;max-height:320px}}
.sl-sheet{display:flex;align-items:center;gap:9px;width:100%;border:1px solid transparent;cursor:pointer;
  background:var(--soft);border-radius:10px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);padding:11px 12px;text-align:left;margin-top:6px;transition:background .15s,border-color .15s}
.sl-sheet:hover{background:#E4EAF5;border-color:var(--border-strong);color:var(--ink)}
.sl-sheet[aria-expanded="true"]{background:var(--soft);color:var(--ink)}
.sl-sheet-name{font-weight:700;letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sheet-sum{margin-left:auto;display:flex;gap:7px;text-transform:none;letter-spacing:0;font-size:11px}
.sl-sheet-sum .ok{color:var(--done)}
.sl-sheet-sum .draft{color:var(--open)}
.sl-caret{flex:none;font-size:13px;line-height:1;transition:transform .22s ease}
.sl-sheet[aria-expanded="false"] .sl-caret{transform:rotate(-90deg)}

/* the list pushes the sheets below it down as it opens */
.sl-group{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.sl-group.open{grid-template-rows:1fr}
.sl-group-in{overflow:hidden;display:flex;flex-direction:column;gap:1px}
.sl-group.open .sl-group-in{padding-top:3px}
.sl-item{display:block;width:100%;text-align:left;border:none;background:none;border-radius:10px;
  padding:9px 10px;cursor:pointer;font-size:13.5px;line-height:1.35}
.sl-item:hover{background:var(--soft)}
.sl-item.on{background:var(--ink);color:#fff}
.sl-name{display:block;font-weight:500}
.sl-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px;font-size:11px;color:var(--ink-3)}
.sl-item.on .sl-meta{color:rgba(255,255,255,.72)}
.dot-n.draft{color:var(--open)}
.dot-n.dev{color:var(--accent)}
.dot-n.ok{color:var(--done)}
.sl-item.on .dot-n{color:#fff}
.dot-n.total{margin-left:auto;opacity:.6}

.screenpane{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.screenpane.has-unsaved{border-color:var(--open)}
.screenpane.just-saved{border-color:var(--done);box-shadow:0 0 0 3px rgba(21,128,61,.14)}
.screen-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-bottom:1px solid var(--border)}
.screenpane.has-unsaved .screen-top{background:var(--open-bg)}
.screen-top h2{margin:2px 0 4px;font-size:19px;letter-spacing:-.015em}
.screen-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.warn-n{color:#B42318}
.screen-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  border-top:1px solid var(--border);background:var(--bg)}
.screen-nav .btn{max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.shot-strip{display:flex;flex-direction:column;gap:12px}
.shot-strip figure{margin:0}
.shot-strip img{width:100%;border-radius:12px;border:1px solid var(--border);display:block;cursor:zoom-in;background:#fff}
.shot-strip figcaption{font-size:11px;color:var(--ink-3);margin-top:5px}
.no-shot{font-size:12px;color:var(--ink-3);text-align:center;padding:40px 14px;border:1px dashed var(--border-strong);
  border-radius:12px;background:var(--card)}

/* ---------- sign-off extras ---------- */
.uses{border:none;font:inherit;font-size:11px;color:#5B21B6;background:#F3F0FF;border-radius:999px;
  padding:4px 10px;cursor:pointer}
.uses:hover{background:#E9E2FF}
.from-screen{font-size:11px;color:var(--done);background:var(--done-bg);border-radius:999px;padding:3px 9px}
.uses-pop{position:absolute;z-index:70;margin-top:6px;background:var(--card);border:1px solid var(--border-strong);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;width:280px;max-height:320px;overflow:auto}
.uses-head{font-size:11px;color:var(--ink-3);padding:4px 6px 8px}
.uses-row{display:flex;gap:10px;align-items:center;padding:6px;border-radius:9px}
.uses-row:hover{background:var(--soft)}
.uses-row img{width:34px;height:46px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--border)}
.uses-noshot{width:34px;height:46px;display:grid;place-items:center;color:var(--ink-3);background:var(--soft);border-radius:6px}
.uses-row b{display:block;font-size:13px}
.uses-row small{color:var(--ink-3);font-size:11px}
.field-top{position:relative}

.modal-wrap{position:fixed;inset:0;background:rgba(11,14,20,.5);display:flex;align-items:center;
  justify-content:center;z-index:120;padding:24px}
.modal{background:var(--card);border-radius:var(--radius);padding:22px;max-width:440px;width:100%;
  box-shadow:var(--shadow-lg)}
.modal h3{margin:0 0 16px;font-size:17px}
.modal-actions{display:flex;flex-direction:column;gap:8px}

/* the screen list collapses into a dropdown when there is no room beside the pane */
#screenselect{display:none;width:100%;padding:11px 13px;border:1px solid var(--border-strong);
  border-radius:12px;background:var(--card);margin-bottom:14px}
@media(max-width:768px){
  .screenlist{display:none}
  #screenselect{display:block}
}

/* ---------- screen header states ---------- */
.screen-actions .hint{font-size:12px;color:var(--open)}
.badge-done{font-size:13px;font-weight:600;color:var(--done);background:var(--done-bg);
  border-radius:999px;padding:7px 14px}
.warn-jump{color:#B42318;border-color:#FECDCA;background:#FEF3F2}
.warn-jump:hover{border-color:#B42318}
.feat-bar{display:inline-block;vertical-align:middle;width:120px;height:5px;background:var(--soft);
  border-radius:999px;overflow:hidden;margin-left:10px}
.feat-bar i{display:block;height:100%;background:var(--done)}

/* ---------- screen list rows ---------- */
.sl-item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;align-items:start}
.sl-icon{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;
  font-weight:700;margin-top:2px}
.sl-icon.done{background:var(--done);color:#fff}
.sl-icon.draft{background:#FFF0E0;color:#9A5B00;border:1px solid #F0B27A}
.sl-icon.dev{background:#E9EFFD;color:#1E4EBD;border:1px solid #9CB6F5}
.sl-icon.none{border:1px solid var(--border-strong)}
.sl-item.is-done{background:#EEF8F1;box-shadow:inset 3px 0 0 var(--done)}
.sl-item.is-done .sl-name{color:var(--ink-3)}
.sl-item.on.is-done{background:var(--ink)}
.sl-item.on.is-done .sl-name{color:#fff}
.sl-text{min-width:0}
.dot-n.state{font-weight:500}

.modal-wide{max-width:560px}
.multi-list{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;margin-bottom:18px}
.multi-row{background:var(--soft);border-radius:10px;padding:10px 12px}
.multi-key{font-size:13px;font-weight:600;font-family:var(--mono)}
.multi-screens{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.p-stale{background:var(--soft);color:var(--ink-2);margin-left:10px;font-weight:500;vertical-align:middle}
.dot-n.stale{color:var(--ink-3)}

/* ---------- activity tabs ---------- */
.pagenav .tabs{margin-right:6px}
.pagenav .tabs .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}

/* ---------- picking a side after sign-in ---------- */
.role-pick{max-width:520px;text-align:center;padding:34px 30px 28px}
.role-pick h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.role-pick .hint{margin:0 0 26px;font-size:13px;color:var(--ink-3)}
.role-opts{display:flex;justify-content:center;gap:34px;margin-bottom:28px}
.role-opt{display:flex;flex-direction:column;align-items:center;gap:10px;border:none;background:none;
  cursor:pointer;width:150px;padding:0}
.role-ring{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--border-strong);color:var(--ink-3);background:var(--card);transition:.18s}
.role-ring svg{width:34px;height:34px}
.role-opt:hover .role-ring{border-color:var(--accent);color:var(--accent)}
.role-opt[aria-pressed="true"] .role-ring{border-color:var(--accent);border-width:2px;color:var(--accent);
  box-shadow:0 8px 22px rgba(39,96,221,.18)}
.role-tick{position:absolute;top:-2px;right:-2px;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-style:normal;display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:.18s}
.role-opt[aria-pressed="true"] .role-tick{opacity:1;transform:scale(1)}
.role-opt b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.role-opt[aria-pressed="true"] b{color:var(--ink)}
.role-hint{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.role-next{border-radius:999px;padding:12px 30px;min-width:190px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;font-size:12px}
.role-next:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:600px){.role-opts{gap:18px}.role-opt{width:130px}}

/* role shown inside the account chip, switchable from there */
.role-link{border:none;background:none;padding:0;font:inherit;color:var(--accent);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.on-dark .role-link{color:#9BD6FF}

/* signed-out: the editor is visibly frozen, not just unresponsive */
.field.locked textarea,.field.locked input{background:var(--soft);color:var(--ink-3);cursor:not-allowed}
.screenpane .btn:disabled{opacity:.4}