@font-face{font-family:Outfit;src:url(fonts/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#d6e4e3; --paper:#f2f3f2; --card:#fff; --ink:#151515; --ink-2:#3b3b3b; --dim:#707070; --faint:#a3a3a3; --line:#e4e6e5;
  --sage:#d2e3df; --sage-d:#a9c9c2; --rose:#fbd3e6; --vanilla:#fde9a7; --lilac:#d9cdeb; --sky:#cfe1f5; --peach:#fcd9c4;
  --red:#d9534f; --ok:#2f8a6b;
  --x:#151515; --instagram:#e1306c; --tiktok:#151515; --youtube:#ff0000;
  --r:28px; --r-s:20px; --font:Outfit,Inter,system-ui,sans-serif; --body:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%23a9c2c0' stroke-width='3' opacity='.55'%3E%3Cpath d='M-50 120C150 40 260 260 420 180S700 -20 950 90'/%3E%3Cpath d='M-80 520c180-120 300 120 470 20s260-210 560-60'/%3E%3Cpath d='M120 760c60-160 240-260 380-170s200 160 450 60'/%3E%3C/g%3E%3C/svg%3E");background-size:900px 700px;background-attachment:fixed}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:12px}
h1,h2,h3{font-family:var(--font);font-weight:500;letter-spacing:-.02em;margin:0}

/* logo */
.logo{display:inline-grid;place-items:center;font:700 40px/1 var(--font);color:var(--ink);text-decoration:none;letter-spacing:-.06em}
.logo span{color:var(--sage-d)}
.logo.big{font-size:72px}

/* buttons */
.btn{border:0;background:var(--card);padding:.75rem 1.3rem;border-radius:999px;transition:.18s;white-space:nowrap;font-family:var(--font);font-weight:500;box-shadow:0 1px 0 #0000000d}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px #0003}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:disabled{background:#d9dcdb;color:var(--faint);transform:none;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:transparent;box-shadow:none}
.btn.danger{color:var(--red)}
.circ{width:44px;height:44px;border-radius:50%;border:0;background:var(--card);display:inline-grid;place-items:center;font-size:20px;transition:.18s;flex:0 0 auto}
.circ:hover{background:var(--ink);color:#fff}
.chip{border:0;background:var(--card);border-radius:999px;padding:.45rem 1rem;font-family:var(--font);font-weight:500}
.arrow{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto;transition:.2s}
.arrow svg{width:18px;height:18px}
.link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;color:var(--dim)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:2rem}
.login-card{width:min(460px,100%);background:var(--paper);border-radius:44px;padding:48px 42px;text-align:center;box-shadow:0 30px 80px -30px #0003}
.login-title{font-size:38px;margin-top:4px}
.lede{color:var(--dim);margin:.6rem 0 2rem;font-size:16px}
.login form{display:grid;gap:1rem;text-align:left}
label{display:grid;gap:.45rem;font-size:13px;color:var(--dim);font-weight:500}
input[type=password],input[type=text],input[type=datetime-local],.headline{background:var(--card);border:2px solid transparent;border-radius:16px;padding:.85rem 1rem;outline:none;transition:.15s}
input:focus,.headline:focus{border-color:var(--ink)}
.err{color:var(--red);min-height:1.2em;margin:0;font-size:13px}

/* frame */
.app{display:grid;grid-template-columns:104px 1fr;width:min(1440px,calc(100% - 48px));margin:24px auto;min-height:calc(100vh - 48px);background:var(--paper);border-radius:48px;overflow:hidden;box-shadow:0 40px 100px -40px #2f4a4844}
.rail{background:#fff;display:flex;flex-direction:column;align-items:center;padding:34px 0 28px;gap:12px}
.rail nav{display:grid;gap:14px;margin-top:70px}
.rail nav a{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:.18s}
.rail nav a svg{width:24px;height:24px;fill:currentColor}
.rail nav a:hover{background:var(--paper)}
.rail nav a.on{background:var(--ink);color:#fff}
.rail nav a.on svg circle[fill="#fff"]{fill:var(--ink)}
.rail-new{margin-top:22px;width:60px;height:60px;border-radius:50%;border:0;background:var(--sage);font-size:26px;transition:.18s}
.rail-new:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.rail-out{margin-top:auto;border:0;background:none;color:var(--faint);font-size:20px}
.rail-out:hover{color:var(--ink)}
.stage{padding:40px 48px 60px;min-width:0}
.top{display:flex;align-items:center;gap:24px;margin-bottom:34px}
.hello{font-size:52px;line-height:1.05;margin-right:auto}
.search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:0 22px;width:min(320px,34vw);height:58px;color:var(--dim)}
.search svg{width:20px;height:20px;flex:0 0 auto}
.search input{border:0;outline:0;background:none;flex:1;font-size:15px;min-width:0}
.avatar{width:62px;height:62px;border-radius:50%;background:var(--rose);display:grid;place-items:center;font:600 24px var(--font);flex:0 0 auto}
.h2{font-size:34px;margin:0 0 20px;display:flex;align-items:baseline;gap:.35em}
.muted{color:var(--faint)}
.label{font:500 13px var(--body);color:var(--dim);margin:0}

/* home */
.home{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:34px}
.col-main>.h2:not(:first-child){margin-top:38px}
.next-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tile{position:relative;border:0;text-align:left;border-radius:var(--r);padding:22px 22px 20px;min-height:168px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s;color:var(--ink);text-decoration:none;background:var(--sage)}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px #0004}
.tile:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.tile .when-badge{align-self:flex-end;background:#fff;border-radius:999px;padding:.25rem .7rem;font:600 12px var(--body);display:flex;gap:.35em;align-items:center}
.tile .t{font:500 21px/1.25 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .foot{display:flex;align-items:flex-end;gap:12px;margin-top:auto}
.tile .foot .t{flex:1}
.bubbles{display:flex}
.bubbles span{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;border:2.5px solid var(--bubble-bg,var(--sage));margin-right:-8px}
.bubbles svg{width:14px;height:14px}
.t-sage{background:var(--sage);--bubble-bg:var(--sage)} .t-rose{background:var(--rose);--bubble-bg:var(--rose)} .t-vanilla{background:var(--vanilla);--bubble-bg:var(--vanilla)}
.t-lilac{background:var(--lilac);--bubble-bg:var(--lilac)} .t-sky{background:var(--sky);--bubble-bg:var(--sky)} .t-peach{background:var(--peach);--bubble-bg:var(--peach)}
.tile.empty{background:transparent;border:2px dashed #cfd5d3;color:var(--dim);align-items:center;justify-content:center;text-align:center;cursor:pointer}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{border-radius:var(--r);padding:20px 20px 18px;display:flex;flex-direction:column;min-height:132px;border:0;text-align:left;transition:.2s;color:var(--ink)}
.stat:hover{transform:translateY(-3px)}
.stat:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.stat .label{color:var(--ink-2)}
.stat .foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto}
.stat b{font:500 48px/1 var(--font);letter-spacing:-.03em}
.feed{display:grid;gap:16px;margin-top:16px}
.wide{border-radius:var(--r);padding:20px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center;border:0;text-align:left;color:var(--ink);transition:.2s}
.wide:hover{transform:translateY(-2px)}
.wide:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.wide .ic{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center}
.wide .ic svg{width:18px;height:18px}
.wide .t{grid-column:1/-1;font:500 24px/1.25 var(--font);margin-top:6px}
.wide .sub{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:.4em}
.progress{grid-column:1/-1;height:7px;border-radius:9px;background:#00000014;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:var(--ink);border-radius:9px;transition:width .6s}

/* calendar */
.cal{background:#fff;border-radius:var(--r);padding:24px 24px 18px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-head b{font:500 22px var(--font)}
.cal-head .nav{display:flex;gap:4px}
.cal-head .nav button{border:0;background:none;font-size:24px;width:36px;height:36px;border-radius:50%}
.cal-head .nav button:hover{background:var(--paper)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px;text-align:center}
.cal-grid .dow{font:500 12px var(--body);color:var(--dim);letter-spacing:.04em;padding-bottom:6px}
.cal-grid button{width:42px;height:42px;margin:auto;border-radius:50%;border:0;background:none;font:500 15px var(--font);position:relative;transition:.15s}
.cal-grid button:hover{background:var(--paper)}
.cal-grid button.out{color:var(--faint)}
.cal-grid button.has{background:var(--sage)}
.cal-grid button.today{box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:50%}
.cal-grid button.today:not(.sel){outline:1.5px dashed transparent}
.cal-grid button.sel{background:var(--ink);color:#fff}
.cal-grid button .n{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ink);color:#fff;font:600 10px/17px var(--body)}
.cal-grid button.sel .n{background:var(--rose);color:var(--ink)}
.day-list{display:grid;gap:12px;margin-top:16px}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;border:0;text-align:left;border-radius:999px;padding:10px 18px 10px 10px;background:var(--sage);transition:.18s;color:var(--ink)}
.row:hover{transform:translateX(3px)}
.row .ic{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center}
.row .ic svg{width:20px;height:20px}
.row .tx{min-width:0}
.row .tx b{display:block;font:500 15px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx small{color:var(--ink-2);font-size:13px}
.row .tm{font:600 15px var(--font)}
.row.published{background:var(--vanilla)} .row.failed,.row.partial{background:var(--rose)}
.row.add{background:transparent;border:2px dashed #cfd5d3;color:var(--dim);border-radius:999px;padding:16px 22px;display:block;text-align:center}

/* week */
.week-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.week-head .h2{margin:0}
.arrows{display:flex;gap:8px;align-items:center}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:20px}
.wday{background:#fff;border-radius:var(--r-s);padding:14px 10px 12px;min-height:420px;display:flex;flex-direction:column;gap:8px;cursor:copy;transition:.15s}
.wday:hover{box-shadow:inset 0 0 0 2px var(--sage)}
.wday.today{background:var(--ink);color:#fff}
.wday .d{display:flex;align-items:baseline;justify-content:space-between;padding:0 6px 6px}
.wday .d span{font:500 12px var(--body);color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.wday.today .d span{color:#ffffffa0}
.wday .d b{font:500 26px var(--font)}
.wcard{border:0;text-align:left;border-radius:16px;padding:10px 11px;display:grid;gap:4px;color:var(--ink);cursor:pointer;transition:.15s}
.wcard:hover{transform:scale(1.03)}
.wcard .top-line{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--font)}
.wcard .top-line .bubbles span{width:22px;height:22px;border-width:2px;margin-right:-6px}
.wcard .top-line .bubbles svg{width:11px;height:11px}
.wcard p{margin:0;font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.wday .plus{margin-top:auto;align-self:center;color:var(--faint);font-size:22px;opacity:0;transition:.15s}
.wday:hover .plus{opacity:1}
.wday.today .plus{color:#fff8}

/* accounts */
.connect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:38px}
.connect{border:0;text-align:left;border-radius:var(--r);padding:22px;min-height:170px;display:flex;flex-direction:column;gap:6px;transition:.2s;color:var(--ink)}
.connect:hover{transform:translateY(-3px)}
.connect:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.connect .ic{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center}
.connect .ic svg{width:22px;height:22px}
.connect .foot{display:flex;align-items:flex-end;gap:10px;margin-top:auto}
.connect b{font:500 22px var(--font);display:block}
.connect small{color:var(--ink-2);font-size:13px;line-height:1.35;display:block}
.connect.off{opacity:.55;cursor:not-allowed}
.connect.off:hover{transform:none}
.linkbox{grid-column:1/-1;padding:18px 22px;border-radius:var(--r-s);background:#fff;font-size:14px}
.linkbox code{display:block;margin-top:.5em;font:13px ui-monospace,monospace;word-break:break-all}
.acc-list{display:grid;gap:12px}
.acc{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff}
.acc .ic{width:50px;height:50px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.acc .ic svg{width:20px;height:20px}
.acc .h{font:500 17px var(--font)}
.acc .meta{margin-left:auto;display:flex;gap:8px;align-items:center}
.pill{font:600 12px var(--body);padding:.35em .85em;border-radius:999px;background:var(--paper);color:var(--ink-2);border:0}
.pill.ok{background:var(--sage)} .pill.bad{background:var(--rose)} .pill.gold{background:var(--vanilla)}
button.pill:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* log */
.log{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:760px}
.log li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;background:#fff;border-radius:var(--r-s);padding:14px 18px}
.log li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sage-d);grid-row:span 2}
.log li.good::before{background:#e8b923} .log li.bad::before{background:var(--red)}
.log time{font-size:12px;color:var(--dim)}
.log .k{font:500 15px var(--font)}
.log a{color:var(--ink)}
.empty-note{color:var(--dim);font-size:14px;margin:0}

/* platform colors (icons on white) */
.pl-x{--glow:var(--x)} .pl-instagram{--glow:var(--instagram)} .pl-tiktok{--glow:var(--tiktok)} .pl-youtube{--glow:var(--youtube)}
.ic svg,.bubbles svg,.tgt svg,.problem svg,.trow svg,.pv-cap svg{color:var(--glow,var(--ink))}

/* sheet / composer */
.sheet-backdrop{position:fixed;inset:0;z-index:50;background:#1d2b2a55;backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:min(1200px,100%);height:min(840px,100%);display:grid;grid-template-columns:1.05fr .95fr;border-radius:44px;overflow:hidden;background:var(--paper);box-shadow:0 50px 120px -30px #0006;animation:pop .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.97) translateY(10px);opacity:0}}
.sheet-write{padding:32px 34px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{font-size:36px}
.x{width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:15px;flex:0 0 auto}
.x:hover{background:var(--ink);color:#fff}
.targets{display:flex;flex-wrap:wrap;gap:8px}
.tgt{display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:5px 8px 5px 5px;background:#fff;font:500 14px var(--body);color:var(--dim);transition:.15s;cursor:pointer}
.tgt .ic{width:30px;height:30px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.tgt .ic svg{width:14px;height:14px}
.tgt.on{background:var(--ink);color:#fff}
.tgt.on .ic{background:#fff}
.tgt select{background:#ffffff26;border:0;color:inherit;font:600 12px var(--body);padding:4px 6px;cursor:pointer;border-radius:999px}
.tgt select option{background:#fff;color:var(--ink)}
.tgt.add{padding:10px 16px;text-decoration:none;color:var(--ink)}
.headline{font:500 20px var(--font);background:#fff}
.writer{position:relative;flex:1;min-height:180px;display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:var(--r);padding:20px 22px 14px}
.writer textarea{flex:1;resize:none;background:transparent;border:0;outline:none;font:400 19px/1.55 var(--font);color:var(--ink);padding:0}
.writer textarea::placeholder{color:var(--faint)}
.meter{align-self:flex-end;display:flex;min-height:18px;gap:12px;align-items:center;font:600 12px var(--body);color:var(--dim)}
.meter span{display:flex;align-items:center;gap:5px}
.meter .ring{width:18px;height:18px;border-radius:50%;background:conic-gradient(var(--ink) calc(var(--p)*1%),var(--line) 0);display:inline-block}
.meter .over{color:var(--red)} .meter .over .ring{background:var(--red)}
.meter svg{width:12px;height:12px}
.media{display:flex;gap:10px;flex-wrap:wrap}
.drop{flex:1;min-width:200px;border:2px dashed #cfd5d3;border-radius:var(--r-s);padding:18px;text-align:center;color:var(--dim);font-size:14px;cursor:pointer;transition:.15s}
.drop:hover,.drop.over{border-color:var(--ink);color:var(--ink);background:#fff}
.thumb{position:relative;width:86px;height:86px;border-radius:18px;overflow:hidden;background:#ddd;flex:0 0 auto}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;background:#fffd;font-size:11px}
.thumb .tag{position:absolute;left:5px;bottom:5px;font:600 10px var(--body);background:#fffd;border-radius:8px;padding:1px 6px}
.thumb.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff8,transparent);animation:shimmer 1s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.problems{display:grid;gap:8px}
.problem{display:flex;gap:12px;align-items:center;font-size:14px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--rose)}
.problem .ic{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto}
.problem .ic svg{width:14px;height:14px}
.when{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.when-modes{display:flex;background:#fff;border-radius:999px;padding:4px}
.when-modes button{border:0;background:none;padding:.5rem 1.05rem;border-radius:999px;color:var(--dim);font:500 14px var(--font)}
.when-modes button.on{background:var(--ink);color:#fff}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.quick button{border:0;background:var(--sage);border-radius:999px;padding:.4rem .9rem;font:500 13px var(--body)}
.quick button:hover{background:var(--ink);color:#fff}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;position:sticky;bottom:-32px;background:var(--paper);padding:12px 0 4px;z-index:2}
.hint{font-size:14px;color:var(--dim)}
.sheet-preview{background:var(--sage);padding:32px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.sheet-preview .label{color:var(--ink-2)}
.previews{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start}

/* platform mockups */
.pv{font-family:var(--body);color:#111;background:#fff;border-radius:22px;width:280px;overflow:hidden;box-shadow:0 20px 50px -25px #0005;font-size:13px;line-height:1.35;animation:rise2 .3s both}
@keyframes rise2{from{opacity:0;transform:translateY(8px)}}
.pv-cap{font:600 12px var(--body);color:var(--ink-2);margin-bottom:8px;display:flex;gap:6px;align-items:center}
.pv-cap svg{width:13px;height:13px}
.pv .who{display:flex;gap:8px;align-items:center;padding:12px}
.pv .av{width:32px;height:32px;border-radius:50%;background:var(--rose);flex:0 0 auto}
.pv .nm{font-weight:700}
.pv .sub{color:#666;font-weight:400}
.pv .body{padding:0 12px 12px;white-space:pre-wrap;word-break:break-word}
.pv .med{background:#e9ecea center/cover;aspect-ratio:1;display:grid;place-items:center;color:#888;font-size:12px;overflow:hidden}
.pv .med img,.pv .med video{width:100%;height:100%;object-fit:cover}
.pv .more{color:#888}
.pv-x .med{aspect-ratio:16/9;border-radius:16px;margin:0 12px 12px}
.pv-ig .med{aspect-ratio:4/5}
.pv-vert{width:210px;aspect-ratio:9/16;position:relative;background:#111;color:#fff}
.pv-vert .med{position:absolute;inset:0;aspect-ratio:auto;background:#2a2a2a}
.pv-vert .ov{position:absolute;left:0;right:0;bottom:0;padding:50px 14px 16px;background:linear-gradient(transparent,#000c);font-size:12px}
.pv-vert .ov b{display:block;margin-bottom:4px}
.pv-vert .ov p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pv-yt{width:300px}
.pv-yt .med{aspect-ratio:16/9}
.pv-yt .t{padding:12px 12px 2px;font-weight:600;font-size:14px}
.pv-yt .sub{padding:0 12px 12px;font-size:12px}
.pv.bad{outline:3px solid var(--red);outline-offset:4px}

/* detail */
.detail{width:min(660px,100%);max-height:90vh;overflow:auto;background:var(--paper);border-radius:40px;padding:34px;position:relative;animation:pop .28s cubic-bezier(.2,1.3,.4,1)}
.detail .x{position:absolute;right:22px;top:22px}
.detail h2{font-size:30px;margin:.3em 3rem .6em 0}
.detail .txt{white-space:pre-wrap;font:17px/1.55 var(--body);color:var(--ink-2);margin:0 0 20px;background:#fff;border-radius:var(--r-s);padding:16px 18px}
.trow{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;margin-bottom:8px;background:#fff;border-radius:999px;font-size:14px}
.trow .ic{width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.trow .ic svg{width:16px;height:16px}
.trow .e{color:var(--red);font-size:12px;display:block}
.trow a{color:var(--ink);font-weight:600}
.detail .acts{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;align-items:center}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:.85rem 1.4rem;border-radius:999px;box-shadow:0 14px 40px #0004;animation:rise2 .25s;font:500 15px var(--font)}

@media (max-width:1180px){ .home{grid-template-columns:1fr} .col-side{order:-1} .week{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:760px){
  .switcher{margin:-4px 0 22px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .proj{flex:0 0 auto}
  .app{grid-template-columns:1fr;width:100%;margin:0;border-radius:0;min-height:100vh}
  .rail{flex-direction:row;padding:10px 14px;gap:6px;position:sticky;top:0;z-index:10;box-shadow:0 1px 0 var(--line)}
  .rail .logo{font-size:30px;margin-right:auto}
  .rail nav{display:flex;margin:0;gap:4px}
  .rail nav a{width:44px;height:44px}
  .rail nav a svg{width:20px;height:20px}
  .rail-new{margin:0;width:44px;height:44px;font-size:20px}
  .rail-out{display:none}
  .stage{padding:22px 16px 60px}
  .top{flex-wrap:wrap;gap:12px;margin-bottom:22px}
  .hello{font-size:34px;width:100%}
  .search{width:auto;flex:1;height:50px}
  .avatar{width:50px;height:50px;font-size:20px}
  .h2{font-size:26px}
  .next-row{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .stat{padding:14px;min-height:110px} .stat b{font-size:34px} .stat .arrow{display:none}
  .week{grid-template-columns:1fr}
  .wday{min-height:0}
  .wday .plus{opacity:1}
  .sheet-backdrop{padding:0}
  .sheet{grid-template-columns:1fr;height:100%;border-radius:0;overflow:auto}
  .sheet-write{overflow:visible;padding:22px 18px}
  .sheet-preview{padding:22px 18px}
  .cal-grid button{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* projects */
.hello-wrap{margin-right:auto;min-width:0}
.crumb{margin:0 0 4px;font:500 14px var(--body);color:var(--dim)}
.crumb a{color:var(--dim)}
.switcher{display:flex;gap:10px;flex-wrap:wrap;margin:-12px 0 30px}
.proj{display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:6px 16px 6px 6px;background:#fff;font:500 15px var(--font);transition:.15s;color:var(--ink);text-decoration:none}
.proj .em{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:var(--pc,var(--paper))}
.proj:hover{box-shadow:0 6px 18px -10px #0004;transform:translateY(-1px)}
.proj.on{background:var(--ink);color:#fff}
.proj .ct{font:600 12px var(--body);opacity:.55}
.proj.add{background:transparent;border:2px dashed #cfd5d3;color:var(--dim);padding:10px 16px}
.proj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:38px}
.pcard{border:0;text-align:left;border-radius:var(--r);padding:20px;min-height:170px;display:flex;flex-direction:column;gap:8px;transition:.2s;color:var(--ink);text-decoration:none;background:var(--pc)}
.pcard:hover{transform:translateY(-3px)}
.pcard:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.pcard .em{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:24px}
.pcard b{font:500 22px var(--font)}
.pcard .foot{display:flex;align-items:flex-end;gap:10px;margin-top:auto}
.pcard .foot small{flex:1;color:var(--ink-2);font-size:13px}
.pcard .nx{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgt .proj-tag{font:600 11px var(--body);opacity:.6}
.tgt-group{display:contents}
.tgt-head{width:100%;font:600 12px var(--body);color:var(--dim);margin:6px 0 -2px}
.acc .proj-sel{border:0;background:var(--paper);border-radius:999px;padding:.35em .7em;font:600 12px var(--body);cursor:pointer}
.acc-group{margin-bottom:22px}
.acc-group h3{font:500 18px var(--font);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.proj-form{width:min(480px,100%)}
.proj-form label input{font-size:17px}
.emoji-pick,.color-pick{display:flex;flex-wrap:wrap;gap:8px}
.emoji-pick button{width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:20px}
.color-pick button{width:40px;height:40px;border-radius:50%;border:3px solid #fff;background:var(--c)}
.emoji-pick button.on,.color-pick button.on{box-shadow:0 0 0 2.5px var(--ink)}

.lu{width:1.15em;height:1.15em;display:block}
.proj .em .lu{width:18px;height:18px}
.pcard .em .lu{width:24px;height:24px}
.icon-pick{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.icon-pick button{width:auto;aspect-ratio:1;display:grid;place-items:center;color:var(--ink);transition:.12s}
.icon-pick button .lu{width:20px;height:20px}
.icon-pick button:hover{background:var(--pc)}
.icon-pick button.on{background:var(--pc);box-shadow:0 0 0 2.5px var(--ink)}
.hello{display:flex;align-items:center;gap:16px}
.hello-ic{width:62px;height:62px;border-radius:50%;background:var(--pc);display:grid;place-items:center;flex:0 0 auto}
.hello-ic .lu{width:28px;height:28px}
.em.sm{width:30px;height:30px;border-radius:50%;background:var(--pc);display:inline-grid;place-items:center}
.em.sm .lu{width:15px;height:15px}
@media (max-width:760px){.hello-ic{width:46px;height:46px}.hello-ic .lu{width:22px;height:22px}.icon-pick{grid-template-columns:repeat(6,1fr)}}

.edit-proj{margin-left:6px;display:inline-flex;align-items:center;gap:6px;border:0;background:#fff;border-radius:999px;padding:8px 14px 8px 12px;font:500 14px var(--body);color:var(--ink-2);transition:.15s;align-self:center}
.edit-proj .lu{width:15px;height:15px}
.edit-proj:hover{background:var(--ink);color:#fff}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start}
.pc-edit{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;opacity:0;transition:.15s;background:#ffffff99}
.pc-edit .lu{width:15px;height:15px}
.pcard:hover .pc-edit,.pc-edit:focus{opacity:1}
.pc-edit:hover{background:var(--ink);color:#fff}
@media (max-width:760px){.edit-proj span{display:none}.edit-proj{padding:8px}.pc-edit{opacity:1}}
@media (hover:none){.pc-edit{opacity:1}}

/* format toggle */
.seg{display:inline-flex;background:#ffffff26;border-radius:999px;padding:3px;gap:2px;margin-left:4px}
.seg button{border:0;background:none;color:inherit;font:600 12.5px var(--body);padding:5px 11px;border-radius:999px;opacity:.75;transition:.15s}
.seg button:hover{opacity:1}
.seg button.on{background:#fff;color:var(--ink);opacity:1}

/* nav live dot */
.nav-live{position:relative}
.live-dot{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 #ff4d6d;animation:ping 1.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 #ff4d6d99}80%,100%{box-shadow:0 0 0 10px #ff4d6d00}}

/* live page */
.live-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.live-head .h2{margin:0}
.live-badge{display:flex;align-items:center;gap:8px;font:500 13px var(--body);color:var(--dim);background:#fff;border-radius:999px;padding:8px 14px}
.live-badge i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:ping 2s infinite;box-shadow:0 0 0 0 #2f8a6b}
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px;align-items:start}
.lane{background:#ffffff80;border-radius:32px;padding:16px;min-height:300px}
.lane h3{display:flex;align-items:center;gap:10px;font:500 20px var(--font);padding:4px 8px 14px}
.lane h3 .n{margin-left:auto;font:600 13px var(--body);background:#fff;border-radius:999px;padding:2px 10px}
.lane .dot{width:12px;height:12px;border-radius:50%;background:var(--sage-d)}
.lane-now .dot{background:#ff4d6d;animation:ping 1.4s infinite}
.lane-done .dot{background:#e8b923}
.lane-body{display:grid;gap:14px}
.lane-empty{color:var(--dim);font-size:14px;padding:6px 8px;margin:0}
.lcard{position:relative;border-radius:var(--r);padding:16px;animation:lc-in .5s cubic-bezier(.2,1.2,.4,1) both;overflow:hidden}
@keyframes lc-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
.lcard.fresh{animation:lc-in .6s cubic-bezier(.2,1.4,.4,1) both}
.lcard.changed{animation:flash 1s ease}
@keyframes flash{0%{transform:scale(1)}30%{transform:scale(1.035);box-shadow:0 18px 40px -16px #0005}100%{transform:scale(1)}}
.lcard header{display:flex;justify-content:space-between;align-items:center}
.cd{font:600 13px var(--body);background:#fff;border-radius:999px;padding:4px 11px;font-variant-numeric:tabular-nums}
.cd.hot{background:#ff4d6d;color:#fff}
.lc-open{border:0;background:none;padding:0}
.lc-open .arrow{width:38px;height:38px}
.lc-open:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.lcard h3{font:500 19px/1.25 var(--font);margin:12px 2px 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lts{display:grid;gap:8px}
.lt{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:8px 10px 12px 8px;overflow:hidden}
.lt-ic{position:relative;width:44px;height:44px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.lt-ic>svg:first-child{width:17px;height:17px}
.lt-ic .ring{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.lt-ic .ring circle{fill:none;stroke-width:3}
.lt-ic .ring circle:first-child{stroke:transparent}
.lt-ic .ring .v{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:calc(var(--p) * 1) 100;transition:stroke-dasharray .8s cubic-bezier(.3,.9,.3,1)}
.lt.published .lt-ic{background:var(--vanilla)} .lt.published .ring .v{stroke:#e8b923}
.lt.failed .lt-ic{background:var(--rose)}
.lt.publishing .lt-ic{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.lt.publishing.proc .ring .v,.lt.publishing[style*="--p:0"] .ring .v{stroke-dasharray:22 100;animation:spin 1s linear infinite;transform-origin:22px 22px}
@keyframes spin{to{transform:rotate(360deg)}}
.lt-tx{min-width:0;display:grid}
.lt-tx b{font:600 14px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-tx b small{font-weight:500;color:var(--dim);margin-left:4px}
.lt-tx span{font-size:13px;color:var(--ink-2)}
.lt-tx em{font-style:normal;font-size:12px;color:var(--red);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lt-go .arrow{width:36px;height:36px;background:var(--paper)}
.lt-go:hover .arrow{background:var(--ink);color:#fff;transform:rotate(45deg)}
.lt .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:transparent}
.lt .bar i{display:block;height:100%;width:calc(var(--p) * 1%);background:var(--ink);border-radius:0 4px 4px 0;transition:width .8s cubic-bezier(.3,.9,.3,1)}
.lt.publishing .bar i{background:linear-gradient(90deg,var(--ink) 0 40%,#555 50%,var(--ink) 60%) 0 0/200% 100%;animation:shine 1.2s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.lt.published .bar i{background:#e8b923}
.lt.pending .bar,.lt.failed .bar{display:none}
.lcard.scheduled .lt-ic{background:var(--paper)}
.lcard.scheduled::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%) 0 0/250% 100%;animation:shine 4s linear infinite}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;opacity:0;animation:fall 1.8s ease-out forwards}
.confetti i:nth-child(6n+1){background:#e8b923;left:8%} .confetti i:nth-child(6n+2){background:#ff6fa8;left:22%} .confetti i:nth-child(6n+3){background:#5aa894;left:38%}
.confetti i:nth-child(6n+4){background:#a18bd0;left:55%} .confetti i:nth-child(6n+5){background:#151515;left:72%} .confetti i:nth-child(6n){background:#7fb0e8;left:88%}
.confetti i:nth-child(n+7){animation-delay:.25s;margin-left:5%}
.lcard.published:not(.fresh):not(.changed) .confetti{display:none}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(240px) rotate(540deg)}}
@media (max-width:1180px){.lanes{grid-template-columns:1fr}.lane{min-height:0}}

/* TikTok compose panel (TikTok content sharing guidelines) */
.tt-panel{display:grid;gap:12px}
.tt-card{background:#fff;border-radius:var(--r);padding:16px 18px;display:grid;gap:12px}
.tt-who{display:flex;align-items:center;gap:12px}
.tt-av{width:44px;height:44px;border-radius:50%;background:var(--lilac);object-fit:cover;flex:0 0 auto}
.tt-who b{display:block;font:600 16px var(--font)}
.tt-who small{color:var(--dim);font-size:13px}
.tt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;flex-wrap:wrap}
.tt-row>span:first-child{color:var(--ink-2);font-weight:500}
.tt-row select{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:.45rem .9rem;font:500 14px var(--body);min-width:220px}
.tt-row select:invalid,.tt-row select option[value=""]{color:var(--dim)}
.chks{display:flex;gap:14px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--ink)}
.chk.off{color:var(--faint);cursor:not-allowed}
.tt-sub{display:grid;gap:8px;padding:12px 14px;background:var(--paper);border-radius:16px}
.tt-note{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.tt-note a,.tt-consent a{color:var(--ink)}
.tt-warn{margin:0;font-size:13px;color:var(--red);background:#fde2e1;border-radius:12px;padding:8px 12px}
.switch{position:relative;width:44px;height:26px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:999px;background:#d9dcdb;transition:.2s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0003}
.switch input:checked+i{background:var(--ink)}
.switch input:checked+i::after{transform:translateX(18px)}
.tt-consent{font-size:13px;color:var(--ink-2);flex:1 0 100%;order:-1;padding:10px 14px;background:#fff;border-radius:14px}
.sheet-foot .hint{flex:1}
.sheet-foot{flex-wrap:wrap}
.acc-av{object-fit:cover;padding:0}
.acc .h small{font:400 13px var(--body)}