/* Studio Desk — quiet, fast, phone-first. Colour goes on data and the one action. */
:root{
  --ground:#fbf6f4; --surface:#ffffff; --ink:#3a2c30; --muted:#6f6064; --line:#ecdfdc; --step:#f4ebe8;
  --accent:#a8566a; --accent-ink:#ffffff; --hue:#a8566a; --bad:#a3392b; --bad-bg:#fbeae6; --good:#2f6b4f;
  --r:10px; --gap:16px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.5 var(--font)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{max-width:760px;margin:0 auto;padding:12px 16px 104px}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--ground);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:650;font-size:17px}
.brand img{border-radius:7px}
.bell{position:relative;display:grid;place-items:center;width:44px;height:44px;color:var(--ink);border-radius:50%}
.bell b{position:absolute;top:4px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:12px;line-height:20px;text-align:center}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;display:grid;place-items:center;min-height:56px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:550}
.tabs a[aria-current]{color:var(--ink);box-shadow:inset 0 3px 0 var(--accent)}
@media (min-width:860px){
  .tabs{position:sticky;top:65px;bottom:auto;max-width:760px;margin:0 auto;background:transparent;border:0;gap:4px;padding:8px 16px 0}
  .tabs a{flex:none;min-height:40px;padding:0 14px;border-radius:999px}
  .tabs a[aria-current]{background:var(--step);box-shadow:none}
  main{padding-bottom:64px}
}
.title{font-size:26px;line-height:1.15;letter-spacing:-.01em;margin:16px 0 4px}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sub{color:var(--muted);margin:0 0 16px}
h2{font-size:17px;margin:0 0 10px}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 var(--gap)}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.block-head h2{margin:0}
.warn-block{border-color:#e6b8ad;background:var(--bad-bg)}
.muted{color:var(--muted)} .small{font-size:14px} .bad{color:var(--bad)} .hue-t{color:var(--hue)}
.empty{color:var(--muted);margin:4px 0}
.flash{background:var(--step);border-radius:var(--r);padding:12px 14px;margin:12px 0}
.flash.bad{background:var(--bad-bg);color:var(--bad)}
/* buttons: one fill colour, fully round */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 15px/1 var(--font);text-decoration:none;cursor:pointer;transition:transform .08s ease,background .15s}
.btn:active{transform:scale(.97)}
.btn:hover{background:#94485b}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--step)}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;color:var(--accent);font:inherit;font-size:14px;cursor:pointer;min-height:44px}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.row-btns form{margin:0}
.danger{margin-top:24px}
/* forms */
.stack{display:grid;gap:14px;margin-top:12px}
label{display:grid;gap:6px;font-weight:600;font-size:15px}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #dccbc7;border-radius:8px;background:#fff;color:var(--ink);font:16px/1.4 var(--font)}
textarea{resize:vertical}
.hint{font-weight:400;font-size:14px;color:var(--muted)}
label.check{display:flex;align-items:center;gap:10px;font-weight:500}
label.check input{width:22px;min-height:22px;height:22px;accent-color:var(--accent)}
.seg{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.seg legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.seg label{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-weight:500;cursor:pointer}
.seg input{width:18px;min-height:18px;height:18px;accent-color:var(--accent)}
.seg label:has(input:checked){border-color:var(--accent);background:var(--step)}
details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
details.add{margin-top:12px}
details.add summary{list-style:none;width:max-content}
details.add summary::-webkit-details-marker{display:none}
.inline{display:flex;gap:8px;flex-wrap:wrap}
.inline input{flex:1;min-width:200px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters input{flex:1 1 200px}.filters select{flex:0 1 180px}
/* lists */
.rows,.posts,.rules,.people,.log,.bell-list,.menu{list-style:none;margin:0;padding:0}
.rows li,.posts li,.log li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.rows li:first-child,.posts li:first-child,.log li:first-child{border-top:0}
.rows a{display:grid;text-decoration:none;color:var(--ink)}
.bell-list li{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:var(--step);margin-bottom:8px}
.bell-list li a{flex:1;color:var(--ink);text-decoration:none;font-weight:550}
.bell-list li.k-warn{background:var(--bad-bg)} .bell-list li.k-warn a{color:var(--bad)}
.bell-list .x{width:36px;height:36px;border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer}
.bell-list form{margin:0}
.kpis{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0 14px}
.kpis div{display:grid}
.kpi{font-size:34px;font-weight:650;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-l{color:var(--muted);font-size:14px}
.funnel{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.funnel li{display:grid;grid-template-columns:128px 1fr 48px;align-items:center;gap:10px;font-size:14px}
.f-bar{height:10px;background:var(--step);border-radius:5px;overflow:hidden}
.f-bar i{display:block;height:100%;background:#cdb8b4;border-radius:5px}
.f-bar i.hue{background:var(--hue)}
.f-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.f-bar i.w-0{width:0%}
.f-bar i.w-5{width:5%}
.f-bar i.w-10{width:10%}
.f-bar i.w-15{width:15%}
.f-bar i.w-20{width:20%}
.f-bar i.w-25{width:25%}
.f-bar i.w-30{width:30%}
.f-bar i.w-35{width:35%}
.f-bar i.w-40{width:40%}
.f-bar i.w-45{width:45%}
.f-bar i.w-50{width:50%}
.f-bar i.w-55{width:55%}
.f-bar i.w-60{width:60%}
.f-bar i.w-65{width:65%}
.f-bar i.w-70{width:70%}
.f-bar i.w-75{width:75%}
.f-bar i.w-80{width:80%}
.f-bar i.w-85{width:85%}
.f-bar i.w-90{width:90%}
.f-bar i.w-95{width:95%}
.f-bar i.w-100{width:100%}
.rules li{padding:14px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.rules li:first-child{border-top:0;padding-top:4px}
.rules li.off{opacity:.55}
.r-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.kw{font-size:20px;letter-spacing:.01em;color:var(--accent)}
.r-nums{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.r-nums b{color:var(--ink);font-size:16px}
.r-act{display:flex;gap:8px;flex-wrap:wrap}
.r-act form{margin:0}
.people li{padding:14px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.people li:first-child{border-top:0}
.people li.hand{background:var(--step);margin:0 -16px;padding:14px 16px}
.p-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.p-top a{color:var(--ink)}
.note{margin:0;font-style:italic}
.pager{display:flex;justify-content:space-between;margin-top:12px}
.menu li a{display:grid;padding:14px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
.menu li:first-child a{border-top:0}
.menu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 16px;margin-bottom:16px}
.log li{align-items:flex-start;flex-direction:column;gap:2px}
.log li.k-error span:last-child{color:var(--bad)}
/* planner */
.week{display:flex;align-items:center;gap:12px;margin:8px 0 12px;font-weight:600}
.week a[aria-label]{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;text-decoration:none;color:var(--ink);background:var(--surface)}
.days{display:grid;gap:10px;margin-bottom:16px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.day.today{border-color:var(--accent)}
.day h2{font-size:15px;margin:0 0 4px}
.posts a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);min-width:0;flex:1}
.posts img,.posts .ph{width:56px;height:56px;border-radius:6px;object-fit:cover;flex:none;background:var(--step);display:grid;place-items:center;color:var(--muted)}
.post-t{display:grid;min-width:0}
.post-t strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{flex:none;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--step);color:var(--muted);white-space:nowrap}
.st-posted{background:#e5f0ea;color:var(--good)}
.st-scheduled{background:#f3e4e7;color:var(--accent)}
.st-failed{background:var(--bad-bg);color:var(--bad)}
.thumbs{display:flex;gap:8px;overflow-x:auto;margin:8px 0 12px;padding-bottom:4px}
.thumbs img,.thumbs video{height:140px;width:auto;border-radius:6px;flex:none;background:var(--step)}
/* help and public pages */
.help ol{padding-left:20px}.help li{margin-bottom:6px}
body.plain main{max-width:560px;padding:40px 20px}
body.plain h1{font-size:26px;line-height:1.2}
.doc h2{margin-top:24px}
.login{display:grid;gap:14px;max-width:360px;margin:8vh auto 0}
.login img{border-radius:12px}
.login h1{margin:0 0 6px}
code{font-size:14px;background:var(--step);padding:2px 5px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}