*{box-sizing:border-box}
/* Color tokens. Light is the default; the nav toggle sets data-theme="dark" on <html> (remembered per browser).
   The Instagram screen has its own set so dark mode can go true black like Instagram's own dark mode. */
:root{--bg:#fafafa;--panel:#fff;--surface-2:#fafafa;--field:#fff;--seg-on:#fff;--ring-gap:#fff;
  --line:#e9e9ec;--line-2:#f0f0f2;--ctl-line:#e4e4e7;--ctl-line-h:#d4d4d8;--ctl-focus:#a1a1aa;--dash:#d4d4d8;--fill:#f4f4f5;
  --text:#09090b;--text-2:#3f3f46;--text-3:#52525b;--muted:#71717a;--placeholder:#8b8b94;
  --inv-bg:#18181b;--inv-bg-h:#27272a;--inv-text:#fff;--inv-muted:#d4d4d8;
  --sel-row:#f3f7ff;--over-bg:#eff6ff;--over-ring:#93c5fd;
  --cal-out:#fbfbfb;--cal-out-num:#a1a1aa;--cal-past:#f6f6f7;--cal-past-num:#b4b4bb;
  --ok-bg:#ecfdf3;--ok-line:#abefc6;--ok-text:#067647;--warn-bg:#fffaeb;--warn-line:#fedf89;--warn-text:#b54708;--bad-bg:#fef3f2;--bad-line:#fecdca;--bad-text:#b42318;--bad-dash:rgba(240,68,56,.55);--bad-over:#fee4e2;
  --ig-bg:#fff;--ig-text:#09090b;--ig-strong:#000;--ig-text-2:#3f3f46;--ig-muted:#71717a;--ig-inactive:#8b8b94;
  --ig-btn:#efeff1;--ig-btn-h:#e4e4e7;--ig-line:#efeff1;--ig-ring:#e4e4e7;--ig-tile:#f4f4f5;--ig-dot:#c7c7cc;--sk-sweep:rgba(255,255,255,.55);
  --sw1:#9ba8f8;--sw2:#c3a3f0;--sw3:#f5a3c4;--sw4:#ffa48c;--sw5:#ffbd78;--sw6:#ffd780;--sw7:#f9dcbd;
  color-scheme:light}
:root[data-theme="dark"]{--bg:#0b0b0d;--panel:#161618;--surface-2:#1c1c1f;--field:#1c1c1f;--seg-on:#2c2c31;--ring-gap:#161618;
  --line:#27272a;--line-2:#232326;--ctl-line:#2f2f35;--ctl-line-h:#3f3f46;--ctl-focus:#52525b;--dash:#3f3f46;--fill:#232327;
  --text:#fafafa;--text-2:#d4d4d8;--text-3:#a1a1aa;--muted:#8b8b94;--placeholder:#6b6b74;
  --inv-bg:#fafafa;--inv-bg-h:#e4e4e7;--inv-text:#09090b;--inv-muted:#71717a;
  --sel-row:#17213a;--over-bg:rgba(59,130,246,.14);--over-ring:#3b82f6;
  --cal-out:#131315;--cal-out-num:#52525b;--cal-past:#111113;--cal-past-num:#4a4a52;
  --ok-bg:rgba(23,178,106,.14);--ok-line:rgba(23,178,106,.4);--ok-text:#4ade80;--warn-bg:rgba(247,144,9,.14);--warn-line:rgba(247,144,9,.4);--warn-text:#fdb022;--bad-bg:rgba(240,68,56,.14);--bad-line:rgba(240,68,56,.4);--bad-text:#f97066;--bad-dash:rgba(240,68,56,.6);--bad-over:rgba(240,68,56,.24);
  --ig-bg:#000;--ig-text:#f5f5f5;--ig-strong:#fff;--ig-text-2:#d4d4d4;--ig-muted:#a8a8a8;--ig-inactive:#737373;
  --ig-btn:#262626;--ig-btn-h:#363636;--ig-line:#262626;--ig-ring:#363636;--ig-tile:#121212;--ig-dot:#555;--sk-sweep:rgba(255,255,255,.08);
  --sw1:#bcc5fb;--sw2:#d6c2f6;--sw3:#f7c3d9;--sw4:#ffc6b6;--sw5:#ffd6aa;--sw6:#ffe9b5;--sw7:#fff5ea;
  color-scheme:dark}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}
button,input,textarea,select{font-family:inherit}
a{color:#2563eb}
svg{flex:none}

.app{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column}

/* Sync aura: a glowing band that hugs the bottom edge while the board loads (first open, refresh), behind everything.
   Drawn by a small WebGL shader in app.js (colors flow sideways, the top edge ripples); this only places the canvas. */
.aura{position:fixed;left:0;bottom:0;width:100%;height:0;z-index:0;pointer-events:none;display:block}
/* First open: the glow rises alone, then the phone and the plan panel rise in from below, staggered, and the nav fades in.
   Pure CSS, plays once per page load (refresh only replays the glow). */
@keyframes rise-in{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.preview-col{animation:rise-in .9s cubic-bezier(.76,0,.24,1) .5s both}
.plan-col{animation:rise-in .9s cubic-bezier(.76,0,.24,1) .64s both}
.topbar{animation:fade-in .6s ease .9s both}
@media (prefers-reduced-motion:reduce){.preview-col,.plan-col,.topbar{animation:none}}
.topbar{flex:none;width:100%;max-width:2200px;margin:0 auto;min-height:62px;padding:14px 24px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--inv-bg);color:var(--inv-text);display:flex;align-items:center;justify-content:center}
.brand-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.sync{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sync-text{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;max-height:36px;margin-right:8px}
.sync-note{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:16px;font-weight:500;color:var(--text-3);white-space:nowrap}
.sync-note svg{width:13px;height:13px}
.sync-note.pending{color:var(--warn-text)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#f79009}
.checked{font-size:12px;line-height:14px;color:var(--muted);white-space:nowrap}
.checked:empty{display:none}
.sync .icon-btn{width:36px;height:36px}
.nav-sep{width:1px;height:20px;margin:0 4px;background:var(--line)}
/* Theme toggle, the same 28px square as the brand mark. Both icons live in the button: switching, the current icon drops
   out the bottom, then the other rises in from below (Henry's panel curve), and only then does the app change color.
   Before app.js runs, the icon follows data-theme (set by the inline script), so the first paint never animates. */
.icon-btn.theme-btn{position:relative;overflow:hidden;view-transition-name:theme-btn;width:28px;height:28px}
.theme-btn .ti{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translateY(130%);opacity:0;
  transition:transform .2s cubic-bezier(.55,0,1,.45),opacity .2s ease}
:root:not([data-theme="dark"]) .theme-btn:not([data-icon]) .ti-moon,:root[data-theme="dark"] .theme-btn:not([data-icon]) .ti-sun,
.theme-btn[data-icon="moon"] .ti-moon,.theme-btn[data-icon="sun"] .ti-sun{transform:none;opacity:1;
  transition:transform .42s cubic-bezier(.76,0,.24,1) .16s,opacity .3s ease .16s}
/* The page crossfades on switch; the toggle sits out of the crossfade so its icon slide plays live */
::view-transition-old(theme-btn){display:none}
::view-transition-new(theme-btn){animation:none}
@media (prefers-reduced-motion:reduce){.theme-btn .ti{transition:none !important}}
/* Image loading: a placeholder tinted with the asset's average color and a soft light band sweeping across it
   (the kind ChatGPT shows while an image generates). The image fades in over it once loaded. */
.shimmer{position:relative;overflow:hidden;background:color-mix(in srgb,var(--avg,var(--sk-base)) 38%,var(--sk-base))}
.shimmer::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,var(--sk-hi) 50%,transparent 70%);
  transform:translateX(-100%);animation:shimmer 1.5s cubic-bezier(.4,0,.2,1) infinite;transition:opacity .3s ease}
.shimmer img{opacity:0;transition:opacity .4s ease}
.shimmer.loaded img{opacity:1}
.shimmer.loaded::after{opacity:0;animation:none}
.shimmer.instant img,.shimmer.instant::after{transition:none}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.shimmer::after{animation:none;opacity:0}}
.reload.busy svg{animation:spin .8s linear infinite}
.reload:disabled{opacity:1;cursor:progress}
@keyframes spin{to{transform:rotate(360deg)}}

.main{flex:1;min-height:0;width:100%;max-width:2200px;margin:0 auto;padding:26px 24px 24px;display:flex;gap:34px;align-items:stretch}
.panel{min-width:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
/* Phone frame around the Instagram preview */
/* Fixed phone width; only the height follows the window, capped where a full 3x3 grid fits.
   The plan panel on the right absorbs width changes. */
.preview-col{flex:none;width:360px;display:flex;flex-direction:column;gap:14px}
.phone-wrap{flex:0 1 var(--phone-max,830px);min-height:0;display:flex}
.phone{position:relative;width:100%;height:100%;border-radius:54px;padding:4px;
  background:linear-gradient(150deg,#8a8a92 0%,#3a3a40 14%,#121215 38%,#0b0b0d 60%,#26262b 82%,#77777f 100%);
  box-shadow:0 34px 60px -24px rgba(9,9,11,.5),0 14px 28px -14px rgba(9,9,11,.35),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.12)}
.phone::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(90% 38% at 6% 0%,rgba(255,255,255,.6),transparent 46%),radial-gradient(60% 26% at 100% 100%,rgba(255,255,255,.25),transparent 50%)}
.phone::after{content:"";position:absolute;left:-3px;top:21%;width:3px;height:44px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#55555c,#2a2a2f);box-shadow:0 60px 0 #3a3a40}
.phone-btn-r{position:absolute;right:-3px;top:28%;width:3px;height:72px;border-radius:0 3px 3px 0;background:linear-gradient(270deg,#55555c,#2a2a2f)}
.bezel{position:relative;z-index:1;height:100%;border-radius:50px;padding:9px;
  background:linear-gradient(128deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 16%,transparent 26%),radial-gradient(70% 30% at 12% 0%,rgba(255,255,255,.2),transparent 60%),radial-gradient(50% 22% at 95% 100%,rgba(255,255,255,.08),transparent 60%),#060607;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* The screen is drawn in iPhone 15 Pro points: 393pt wide, so 1pt = 100cqw / 393 and everything inside scales with the frame. */
.screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:var(--ig-bg);color:var(--ig-text);container-type:inline-size;--pt:calc(100cqw / 393)}
/* Drop target cue: picking up a post from the plan sends a thin line of the aura palette travelling around the screen
   edge (a conic gradient spun by --sweep, masked to a 2px ring), in pastel versions of the palette (--sw1 to --sw7; a little
   deeper in light mode, where true pastels vanish on white) and slow enough to sit in the background. Over the phone, the line grows into the full ring. */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --arc{syntax:"<percentage>";inherits:false;initial-value:58%}
.screen::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:6;opacity:0;--arc:58%;
  background:conic-gradient(from var(--sweep),transparent 0 var(--arc),var(--sw1) calc(var(--arc) + (100% - var(--arc)) * .14),var(--sw2) calc(var(--arc) + (100% - var(--arc)) * .32),var(--sw3) calc(var(--arc) + (100% - var(--arc)) * .5),var(--sw4) calc(var(--arc) + (100% - var(--arc)) * .66),var(--sw5) calc(var(--arc) + (100% - var(--arc)) * .82),var(--sw6) calc(var(--arc) + (100% - var(--arc)) * .95),var(--sw7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .35s ease,--arc .6s cubic-bezier(.76,0,.24,1)}
.phone.drag-live .screen::after{opacity:.9;animation:sweep 7s linear infinite}
.phone.drop-on .screen::after{--arc:0%}
@keyframes sweep{to{--sweep:360deg}}
@media (prefers-reduced-motion:reduce){.phone.drag-live .screen::after{animation:none}}
.screen .scroll{padding-top:calc(54 * var(--pt));scrollbar-width:none}
.screen .scroll::-webkit-scrollbar{display:none}
.island{position:absolute;top:calc(11 * var(--pt));left:50%;transform:translateX(-50%);width:calc(125 * var(--pt));height:calc(37 * var(--pt));border-radius:calc(18.5 * var(--pt));background:#000;z-index:4}
/* iOS status bar: 54pt tall, 9:41 in SF Pro Semibold 17pt centred in the left ear, cellular, Wi-Fi and battery centred in the right ear */
.ios-bar{position:absolute;top:0;left:0;right:0;z-index:3;height:calc(54 * var(--pt));padding:calc(21 * var(--pt)) calc(16 * var(--pt)) 0;display:flex;align-items:flex-start;background:var(--ig-bg);color:var(--ig-strong);pointer-events:none}
.ios-time,.ios-levels{flex:1;height:calc(22 * var(--pt));display:flex;align-items:center;justify-content:center}
.ios-time{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,sans-serif;font-weight:600;font-size:calc(17 * var(--pt));letter-spacing:calc(-.41 * var(--pt));font-variant-numeric:tabular-nums;line-height:1}
.ios-gap{flex:none;width:calc(124 * var(--pt))}
.ios-levels{gap:calc(6 * var(--pt))}
.ios-cell{width:calc(19.2 * var(--pt));height:calc(12.2 * var(--pt))}
.ios-wifi{width:calc(17.1 * var(--pt));height:calc(12.3 * var(--pt))}
.ios-batt{width:calc(27.3 * var(--pt));height:calc(13 * var(--pt))}
.preview-controls{flex:none;display:flex;justify-content:center}
/* Picking up a grid tile turns the Grid/Post switcher into a "Remove from grid" drop area: it stretches to the phone's
   width (app.js sets the widths), goes dashed red with a red tint like the Unapproved pill, then shrinks back. */
.preview-controls .seg{position:relative;border:1px dashed transparent;justify-content:center;
  transition:width .4s cubic-bezier(.76,0,.24,1),background-color .3s ease,border-color .3s ease}
.preview-controls .seg button{transition:opacity .2s ease .22s}
.rm-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--bad-text);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}
.preview-controls.removing .seg{background:var(--bad-bg);border-color:var(--bad-dash)}
.preview-controls.removing .seg.over{background:var(--bad-over)}
.preview-controls.removing .seg button{opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.12s}
.preview-controls.removing .rm-label{opacity:1;transition:opacity .2s ease .2s}
@media (prefers-reduced-motion:reduce){.preview-controls .seg,.preview-controls .seg button,.rm-label{transition:none}}
.plan-col{flex:999 1 640px;min-width:0;display:flex;flex-direction:column}
.panel-plan{flex:1;min-height:0}
/* Bento tray: its own panel under the plan. Opening animates its row height, so the plan panel above resizes with it. */
.tray-dock{flex:none;display:grid;grid-template-rows:0fr;margin-top:0;visibility:hidden;
  transition:grid-template-rows .4s cubic-bezier(.76,0,.24,1),margin-top .4s cubic-bezier(.76,0,.24,1),visibility 0s linear .4s}
.tray-dock.open{grid-template-rows:1fr;margin-top:20px;visibility:visible;
  transition:grid-template-rows .4s cubic-bezier(.76,0,.24,1),margin-top .4s cubic-bezier(.76,0,.24,1),visibility 0s}
.tray-clip{min-height:0;overflow:hidden;border-radius:14px}
@media (prefers-reduced-motion:reduce){.tray-dock,.tray-dock.open{transition:none}}
.panel-head{flex:none;padding:12px 14px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-2)}
.panel-title{font-size:14px;font-weight:600}
.plan-head{padding:16px;border-bottom:0;flex-wrap:wrap}
.plan-title{min-width:0}
.plan-title h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.plan-title p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.panel-body{flex:1;min-height:0;position:relative}
.scroll{position:absolute;inset:0;overflow-y:auto}
.panel-foot{flex:none;padding:10px 16px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}

.seg{display:inline-flex;padding:3px;background:var(--fill);border-radius:10px;gap:2px}
.seg button{border:0;background:transparent;font-size:13px;font-weight:500;color:var(--text-3);padding:0 12px;height:30px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--seg-on);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
.seg.full{display:flex;width:100%}
.seg.full button{flex:1;justify-content:center}
/* Lightbox status: four options don't fit one row at 340px, so two per row */
.seg.grid2{display:grid;grid-template-columns:1fr 1fr}

.btn{height:36px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent}
.btn-primary{background:var(--inv-bg);color:var(--inv-text)}
.btn-primary:hover{background:var(--inv-bg-h)}
.btn-ghost{background:var(--panel);color:var(--text-2);border-color:var(--ctl-line)}
.btn-ghost:hover{background:var(--fill)}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary:disabled:hover{background:var(--inv-bg)}
.btn-ghost:disabled:hover{background:var(--panel)}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--ctl-line);background:var(--panel);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.icon-btn:hover{background:var(--fill)}
.icon-btn:disabled{opacity:.4;cursor:default}

/* Instagram preview */
.ig{padding:16px 16px 12px}
.ig-handle{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.ig-row{display:flex;align-items:center;gap:20px}
.ig-avatar{width:78px;height:78px;border-radius:50%;padding:2px;box-shadow:0 0 0 1px var(--ig-ring);flex:none;background:var(--ig-bg)}
.ig-avatar img,.avatar-sm{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--ig-tile)}
.ig-stats{flex:1;display:flex;justify-content:space-around;text-align:center}
.ig-stats b{display:block;font-size:15px;line-height:1.15;font-weight:600;letter-spacing:-.02em;margin-bottom:1px}
.ig-stats span{font-size:13px;color:var(--ig-text-2)}
.ig-bio{margin-top:12px;font-size:13px;line-height:1.45}
.ig-bio .nm{font-weight:600}
.ig-bio .bio{color:var(--ig-text-2);white-space:pre-line}
.ig-actions{display:flex;gap:6px;margin-top:12px}
.ig-actions button,.ig-actions span{flex:1;height:32px;border-radius:8px;background:var(--ig-btn);border:0;font-size:13px;font-weight:600;color:var(--ig-text);display:flex;align-items:center;justify-content:center}
.ig-actions button{cursor:pointer;gap:6px}
/* Small brown dot: the one button in the mock profile that does something */
.ed-dot{width:6px;height:6px;border-radius:50%;background:#a0703f;flex:none}
.ig-actions button:hover{background:var(--ig-btn-h)}
.ig-tabs{display:flex;border-top:1px solid var(--ig-line)}
.ig-tabs span{flex:1;height:44px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--ig-line);color:var(--ig-inactive)}
.ig-tabs span.on{border-bottom:1.5px solid var(--ig-text);color:var(--ig-text)}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.tile{position:relative;aspect-ratio:3/4;border:0;padding:0;margin:0;background:var(--ig-tile);cursor:pointer;overflow:hidden;display:block;width:100%}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.tile:hover img{transform:scale(1.03)}
.tile .when{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:600;color:#fff;background:rgba(9,9,11,.62);padding:2px 6px;border-radius:5px}
.tile .vid{position:absolute;right:6px;top:6px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.tile.sel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #3b82f6}
/* No post date yet: faded, so dated posts read first */
.tile.undated img{opacity:.5;transition:opacity .2s ease,transform .3s ease}
.tile.undated:hover img{opacity:.7}
/* The tile being dragged out of the grid */
.tile.lifting img{opacity:.3}
/* Drag preview: where the dragged post will land */
.tile.ghost{cursor:copy;animation:ghost-in .32s cubic-bezier(.76,0,.24,1) both}
.tile.ghost img{opacity:.5}
.tile.landed{animation:land .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ghost-in{from{transform:scale(.8);opacity:0}}
@keyframes land{from{transform:scale(.88)}}
@media (prefers-reduced-motion:reduce){.tile.ghost,.tile.landed{animation:none}}
.empty{padding:56px 24px;text-align:center;font-size:13px;color:var(--ig-muted)}
/* Instagram's single-post header: back chevron, username over "Posts" */
.ig-nav{position:relative;height:44px;display:flex;align-items:center;justify-content:center}
.ig-back{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ig-text)}
.ig-nav-title{display:flex;flex-direction:column;align-items:center;line-height:1.2}
.ig-nav-title span{font-size:10px;font-weight:600;color:var(--ig-muted);letter-spacing:.02em}
.ig-nav-title b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.post-head{display:flex;align-items:center;gap:10px;padding:10px 14px}
.post-head .avatar-sm{width:32px;height:32px}
.post-head .h{font-size:13px;font-weight:600;flex:1}
.post-media{position:relative;aspect-ratio:4/5;--sk-base:var(--ig-tile);--sk-hi:var(--sk-sweep)}
.post-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-icons{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}
.post-icons .pi{display:flex;align-items:center;gap:14px}
.post-icons>span{display:flex}
/* Carousel: slide counter, arrows, dots */
.slide-count{position:absolute;top:12px;right:12px;font-size:12px;font-weight:600;color:#fff;background:rgba(18,18,18,.7);padding:3px 9px;border-radius:999px}
.slide-nav{position:absolute;top:50%;width:28px;height:28px;margin-top:-14px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:#09090b;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.slide-nav:hover{background:#fff}
.slide-count,.slide-nav{z-index:2}
.slide-nav.l{left:10px}
.slide-nav.r{right:10px}
.post-icons .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-25%);display:flex;gap:4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ig-dot)}
.dots i.on{background:#0095f6}
.cbadge{position:absolute;right:3px;bottom:3px;width:15px;height:15px;border-radius:4px;background:rgba(9,9,11,.55);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cbadge svg{width:10px;height:10px}
.post-caption{padding:2px 14px 0;font-size:13px;line-height:1.5}
.post-caption .h{font-weight:600}
.post-caption .c{white-space:pre-line}
.post-caption .muted{color:var(--ig-muted)}
.post-when{padding:6px 14px 14px;font-size:12px;color:var(--ig-muted)}
/* Single-post view fills the screen so its footer sits on the bottom edge (and stays there when the post is taller) */
.post-view{min-height:100%;display:flex;flex-direction:column}
.post-nav{margin-top:auto;position:sticky;bottom:0;z-index:3;background:var(--ig-bg);display:flex;align-items:center;justify-content:center;gap:28px;
  padding:10px 14px calc(20 * var(--pt));border-top:1px solid var(--ig-line)}
.post-nav span{font-size:12px;font-weight:500;color:var(--ig-muted)}

/* List */
.list-wrap{position:absolute;inset:0;display:flex;flex-direction:column}
.chips{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 14px}
.list-hint{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}
.chip{border:1px solid var(--ctl-line);background:var(--panel);color:var(--text-2);font-size:13px;font-weight:500;height:32px;padding:0 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip:hover{background:var(--fill)}
.chip.on{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-text)}
.chip .n{color:var(--muted)}
.chip.on .n{color:var(--inv-muted)}
.list-scroll{flex:1;min-height:0;overflow:auto}
.list-inner{min-width:860px}
.cols{display:grid;grid-template-columns:minmax(240px,2fr) 156px 168px minmax(220px,1.3fr);align-items:center;column-gap:16px}
.thead{position:sticky;top:0;z-index:2;padding:10px 16px;background:var(--surface-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:12px;font-weight:500;color:var(--muted)}
.row{padding:10px 16px;border-top:1px solid var(--line-2)}
.row:first-of-type{border-top:0}
.row:hover{background:var(--surface-2)}
.row.sel{background:var(--sel-row)}
/* A row leaving the current filter (a post dropped into the grid) folds away */
.row.leaving{height:0 !important;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;
  transition:height .34s cubic-bezier(.76,0,.24,1),padding .34s cubic-bezier(.76,0,.24,1),opacity .2s ease}
.asset{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:0;cursor:pointer;min-width:0;text-align:left;color:var(--text)}
.asset .th{position:relative;flex:none;cursor:grab}
.asset:active .th{cursor:grabbing}
.asset .th img{transition:transform .15s ease,box-shadow .15s ease}
.row:not(.sel):hover .asset .th img{transform:translateY(-1px);box-shadow:0 3px 8px rgba(9,9,11,.16)}
.asset img{width:40px;height:50px;object-fit:cover;border-radius:6px;display:block;background:var(--fill)}
.row.sel .asset img{box-shadow:0 0 0 2px var(--ring-gap),0 0 0 4px #3b82f6}
.asset .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nm-wrap{display:flex;flex-direction:column;gap:1px;min-width:0}
.nm-wrap .kind{font-size:12px;color:var(--muted)}
.status{position:relative;display:inline-flex;align-items:center;height:32px;border-radius:999px;border:1px solid var(--ctl-line);font-size:13px;font-weight:500;background:var(--panel);color:var(--text-3)}
.status .dot{position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#d4d4d8;pointer-events:none}
.status svg{position:absolute;right:9px;top:50%;margin-top:-6px;pointer-events:none}
.status select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;height:30px;padding:0 28px 0 25px;border-radius:999px;cursor:pointer;max-width:156px}
.status select:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.st-none{border-style:dashed;border-color:var(--dash);color:var(--placeholder)}
.st-ready{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
.st-ready .dot{background:#17b26a}
.st-unapproved{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-text)}
.st-unapproved .dot{background:#f04438}
.st-other .dot{background:#a1a1aa}
.st-review{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-text)}
.st-review .dot{background:#f79009}
.field{height:34px;width:100%;border:1px solid var(--ctl-line);border-radius:8px;padding:0 10px;font:inherit;font-size:13px;color:var(--text);background:var(--field)}
.field:hover{border-color:var(--ctl-line-h)}
.field:focus{outline:none;border-color:var(--ctl-focus);box-shadow:0 0 0 3px rgba(161,161,170,.28)}
.field::placeholder{color:var(--placeholder)}
.field.no-date{color:var(--placeholder)}
.area{height:auto;min-height:34px;max-height:132px;padding:7px 10px;line-height:1.45;resize:none;display:block;field-sizing:content;overflow-y:auto}
.datewrap{position:relative;display:block}
.datewrap svg{position:absolute;right:10px;top:50%;margin-top:-7px;pointer-events:none;color:var(--text-3)}
.datewrap input{position:relative;cursor:pointer;padding-right:32px}
.datewrap input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
.list-empty{padding:40px 16px;text-align:center;font-size:13px;color:var(--muted)}

/* Calendar */
.cal-wrap{position:absolute;inset:0;display:flex;flex-direction:column}
.cal-grid .cal-cell:nth-child(7n){border-right:0}
.cal-grid .cal-cell:nth-last-child(-n+7){border-bottom:0}
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 14px;flex-wrap:wrap}
.cal-bar .left{display:flex;align-items:center;gap:8px}
.cal-bar .month{font-size:15px;font-weight:600;margin-left:4px}
.legend{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text-3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cal{flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.cal-dows,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dows{flex:none;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.cal-dows div{padding:8px;font-size:12px;font-weight:500;color:var(--muted)}
.cal-grid{flex:1;min-height:0;grid-template-rows:repeat(var(--rows,5),minmax(0,1fr))}
.cal-cell{position:relative;min-height:0;min-width:0;padding:6px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:4px;overflow:hidden;transition:background .12s}
.cal-cell.out{background:var(--cal-out)}
.cal-cell.out .num{color:var(--cal-out-num)}
.cal-cell.past{background:var(--cal-past)}
.cal-cell.past .num{color:var(--cal-past-num)}
.cal-cell.past .cthumb{opacity:.55}
.cal-cell.over{background:var(--over-bg);box-shadow:inset 0 0 0 2px var(--over-ring)}
.num{flex:none;font-size:12px;font-weight:500;color:var(--text-3);width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}
.cal-cell.today .num{background:var(--inv-bg);color:var(--inv-text)}
.cal-posts{position:relative;flex:1;min-height:0}
.cal-posts .cthumb{position:absolute;top:0;width:auto;height:100%;max-height:76px;aspect-ratio:3/4;box-shadow:0 0 0 2px var(--ring-gap),0 2px 6px rgba(9,9,11,.14);transition:transform .15s ease}
.cal-posts .cthumb:hover{transform:translateY(-2px);z-index:20 !important}
.cal-posts .cthumb.sel{box-shadow:0 0 0 2px var(--ring-gap),0 0 0 4px #3b82f6}
.more{position:absolute;top:7px;right:7px;font-size:11px;font-weight:600;color:var(--text-2);background:var(--fill);border-radius:999px;padding:1px 7px}
.cthumb{position:relative;width:44px;aspect-ratio:3/4;border:0;padding:0;border-radius:6px;overflow:hidden;cursor:grab;background:var(--fill);flex:none}
.cthumb:active{cursor:grabbing}
.cthumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cthumb.sel{box-shadow:0 0 0 2px var(--ring-gap),0 0 0 4px #3b82f6}
.sdot{position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px var(--ring-gap);background:#d4d4d8}
.sd-ready{background:#17b26a}
.sd-unapproved{background:#f04438}
.sd-other{background:#a1a1aa}
.sd-review{background:#f79009}
.tray{padding:14px 16px 0;box-shadow:none;transition:background .12s,box-shadow .12s}
.tray.over{background:var(--over-bg);box-shadow:inset 0 0 0 2px var(--over-ring)}
/* 4px inner padding so the selection ring is not clipped by the scroll box */
.tray-scroll{max-height:112px;overflow-y:auto;padding:4px 4px 12px;margin:0 -4px}
.tray-scroll.fade{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.tray-empty{font-size:12px;color:var(--muted);padding:2px 0 4px}
.tray-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.tray-head b{font-size:13px;font-weight:600}
.tray-head b span{font-weight:500;color:var(--muted)}
.tray-head em{font-style:normal;font-size:12px;color:var(--muted)}
.tray-items{display:flex;flex-wrap:wrap;gap:6px}

/* Overlay: lightbox + profile form */
.lb{position:fixed;inset:0;z-index:50;background:rgba(9,9,11,.82);display:flex;align-items:center;justify-content:center;padding:24px;outline:none}
.lb-inner{display:flex;max-width:1200px;width:100%;height:min(86vh,820px);background:var(--panel);border-radius:14px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.lb-media{flex:1;min-width:0;position:relative;background:#111113;display:flex;align-items:center;justify-content:center;padding:24px}
/* The stage is a size container so the frame can take the image's exact fitted size before the image arrives */
.lb-media{container-type:size}
.lb-frame{width:min(100cqw,calc(100cqh * var(--r,.8)));aspect-ratio:var(--r,.8);border-radius:4px;--sk-base:#1c1c1f;--sk-hi:rgba(255,255,255,.09)}
.lb-frame img{width:100%;height:100%;object-fit:contain;display:block}
.lb-media.has-strip{padding-bottom:100px}
.lb-strip{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;padding:6px;background:rgba(255,255,255,.08);border-radius:12px;max-width:calc(100% - 140px);overflow-x:auto}
.lb-strip button{flex:none;width:46px;height:58px;border:0;padding:0;border-radius:6px;overflow:hidden;cursor:pointer;background:#27272a;opacity:.55;transition:opacity .15s}
.lb-strip button:hover{opacity:.85}
.lb-strip button.on{opacity:1;box-shadow:0 0 0 2px #fff}
.lb-strip img{width:100%;height:100%;object-fit:cover;border-radius:0}
.lb-nav{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#09090b;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lb-nav:hover{background:#fff}
.lb-nav:disabled{opacity:.3;cursor:default}
/* Fixed 340px for every asset; a long file name truncates instead of widening the panel */
.lb-side{flex:0 0 340px;width:340px;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--line-2);min-height:0}
.lb-top{flex:none;display:flex;align-items:flex-start;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--line-2)}
.lb-top .t{flex:1;min-width:0}
.lb-top .n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-top .c{font-size:12px;color:var(--muted);margin-top:2px}
.lb-fields{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:18px}
.lb-label{font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:6px;display:block}
.lb-foot{flex:none;padding:14px 16px 16px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.lb-foot .btns{display:flex;gap:8px}
.lb-foot .btns .btn{flex:1}
.hint{font-size:12px;color:var(--muted);text-align:center}
kbd{font-family:inherit;font-size:11px;font-weight:500;color:var(--text-3);background:var(--fill);border:1px solid var(--ctl-line);border-radius:4px;padding:1px 5px}
.src-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}

.modal{position:fixed;inset:0;z-index:60;background:rgba(9,9,11,.5);display:flex;align-items:center;justify-content:center;padding:24px}
.modal-card{width:100%;max-width:440px;max-height:90vh;overflow-y:auto;background:var(--panel);border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.modal-card form{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-card h2{margin:0;font-size:16px;font-weight:600}
.modal-card .sub{margin:-8px 0 0;font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avatars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.avatars button{aspect-ratio:1;border:0;padding:0;border-radius:50%;overflow:hidden;cursor:pointer;background:var(--fill)}
.avatars button img{width:100%;height:100%;object-fit:cover;display:block}
.avatars button.on{box-shadow:0 0 0 2px var(--ring-gap),0 0 0 4px var(--inv-bg)}
.modal-actions{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.modal-actions .r{display:flex;gap:8px}

.state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:13px;color:var(--muted);flex-direction:column;gap:12px}

@media (max-width:900px){
  .app{height:auto;min-height:100vh}
  .main{flex-direction:column}
  .plan-col{flex:none;width:100%}
  .panel-plan{height:720px;flex:none}
  .preview-col{width:100%;align-items:center}
  .phone-wrap{flex:none;height:760px;width:360px}
  .lb{padding:12px}
  .lb-inner{flex-direction:column;height:92vh}
  .lb-side{flex:none;max-height:52%;overflow-y:auto;border-left:0;border-top:1px solid var(--line-2)}
}