/* ==========================================================================
   포스트워크 workspace theme

   One surface, one hairline. Depth is reserved for things that float above the
   page — popovers, modals, the toast. Everything else is separated by a 1px
   line and by whitespace, which is what the products that read as "real" do.

   Colour has a budget: the gradient belongs to the primary action and nowhere
   else; brand blue marks state (selected, active, in progress) and nothing
   decorative. Status colours only appear where there is a status.

   Loaded last, so it only re-states what differs from the app's own sheets.
   ========================================================================== */

:root{
  /* surface ------------------------------------------------------------- */
  --paper:#ffffff;            /* page AND card — deliberately the same value */
  --bg:#ffffff;
  --sunken:#f7f7f8;           /* wells: charts, previews, code, quiet blocks */
  --line:#e8e8ea;             /* the only separator */
  --line-soft:#f1f1f3;
  --line-strong:#d4d4d8;      /* hover / selected outline */

  /* ink ----------------------------------------------------------------- */
  --ink:#111113;
  --sub:#3f3f46;
  --muted:#71717a;
  --faint:#a1a1aa;

  /* brand --------------------------------------------------------------- */
  --blue:#0080ff; --blue-strong:#004fff;
  --blue-050:#eff6ff; --blue-100:#d6ebff;
  --grad:linear-gradient(98deg,#00B4FF 1.72%,#0081FF 49.42%,#A600FF 97.11%);
  --navy:#0B293D;

  /* status -------------------------------------------------------------- */
  --pos:#16a34a; --pos-bg:#ecfdf3;
  --warn:#b45309; --warn-bg:#fffbeb;
  --neg:#dc2626;  --neg-bg:#fef2f2;
  --info:#1d4ed8; --info-bg:#eff6ff;

  /* the app's own variables, pointed at ours */
  --green:#0080ff; --lime:#d6ebff; --soft:#eff6ff; --red:#dc2626;

  /* geometry ------------------------------------------------------------ */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --radius:12px;
  --sidebar-w:220px; --content-max:1200px; --reading-max:720px;
  --ease-ui:cubic-bezier(.22,.61,.36,1);

  /* the only three shadows in the product */
  --sh-pop:0 12px 32px rgba(17,17,19,.13),0 2px 8px rgba(17,17,19,.06);
  --sh-modal:0 24px 64px rgba(17,17,19,.22);
  --sh-toast:0 8px 24px rgba(17,17,19,.18),0 2px 6px rgba(17,17,19,.08);

  color-scheme:light;
}

/* ---------- type ---------------------------------------------------------
   One family, four weights, a compressed scale. Numbers are tabular
   everywhere in the app chrome so columns of figures line up.
   ------------------------------------------------------------------------ */
body{
  font-family:Pretendard,'Pretendard Variable',-apple-system,BlinkMacSystemFont,
    system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.55;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
}
h1{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.015em}
h2{font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.005em;margin-bottom:12px}
h3{font-size:14px;line-height:1.45;font-weight:600;letter-spacing:-.005em}
.pagehead h1{font-size:21px;font-weight:600}
.pagehead p{font-size:13.5px;color:var(--muted);margin-top:6px}
.small{font-size:12.5px}
.muted{color:var(--muted)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted)}

/* ---------- surfaces: a hairline, never a shadow ------------------------ */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:none;padding:20px;
  transition:border-color .16s var(--ease-ui)}
.card:hover{box-shadow:none}
.empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--paper);padding:64px 24px;max-width:460px;margin:0 auto;text-align:center}
.empty svg{width:22px;height:22px;stroke:var(--muted);margin:0 0 14px;
  padding:13px;box-sizing:content-box;border-radius:50%;background:var(--sunken)}
.empty h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.empty p{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.note{background:var(--info-bg);border:1px solid #cddffb;color:var(--sub);
  border-radius:var(--r-md);font-size:13px;padding:12px 14px}
.note.info{background:var(--sunken);border-color:var(--line);color:var(--sub)}
.divider{background:var(--line)}
.plan-strip{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md)}
.plan-strip svg{stroke:var(--muted)}
.plan-strip strong{font-size:14px;font-weight:600}
.plan-strip span{color:var(--muted)}

/* ---------- buttons ------------------------------------------------------
   Secondary is a hairline on the page surface. The gradient is spent once,
   on the primary action.
   ------------------------------------------------------------------------ */
button,.button{
  height:auto;min-height:40px;padding:0 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--paper);color:var(--sub);
  font:500 13.5px/1 inherit;font-family:inherit;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color .16s var(--ease-ui),background .16s var(--ease-ui),color .16s var(--ease-ui)}
button:hover,.button:hover{background:var(--sunken);border-color:var(--line-strong);color:var(--ink)}
button:active{transform:none;background:var(--line-soft)}
button:disabled{opacity:.45;cursor:not-allowed}

button.primary,.button.primary{
  position:relative;isolation:isolate;border:0;color:#fff;background:none;font-weight:600}
button.primary:before,.button.primary:before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--grad);transition:opacity .25s var(--ease-ui)}
button.primary:hover,.button.primary:hover{background:var(--blue);color:#fff}
button.primary:hover:before,.button.primary:hover:before{opacity:0}
button.primary:disabled:before{opacity:.4}
button.ghost{border-color:transparent;background:transparent}
button.ghost:hover{background:var(--sunken);border-color:transparent}
button.danger{color:var(--neg);border-color:var(--line)}
button.danger:hover{background:var(--neg-bg);border-color:#f3c0c0;color:var(--neg)}
button svg,a svg{width:17px;height:17px}

/* ---------- shell -------------------------------------------------------- */
.shell{grid-template-columns:var(--sidebar-w) 1fr;background:var(--bg)}
.sidebar{width:var(--sidebar-w);padding:22px 12px;background:var(--paper);
  border-right:1px solid var(--line)}
.sidebar .wordmark{padding:0 8px;margin-bottom:24px}
.wordmark{gap:9px;font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.workspace{margin-bottom:22px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper);
  transition:border-color .16s var(--ease-ui)}
.workspace:hover{border-color:var(--line-strong)}
.workspace label{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--faint)}
.nav{gap:1px}
.nav a{padding:9px 12px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;color:var(--muted);
  transition:background .14s var(--ease-ui),color .14s var(--ease-ui)}
.nav a:hover{background:var(--sunken);color:var(--ink)}
.nav a.active{background:var(--blue-050);color:var(--blue-strong);font-weight:600}
.nav svg{width:18px;height:18px}
.nav .nav-label{margin:18px 12px 4px;font-size:10.5px;font-weight:600;letter-spacing:.09em;color:var(--faint)}
.sidebottom{border-top:1px solid var(--line);padding-top:12px}
.userbox{padding:8px 6px 0}
.userbox strong{font-size:12.5px;font-weight:600}
.userbox small{color:var(--muted)}
.avatar{background:var(--sunken);color:var(--sub);font-weight:600;font-size:12.5px}

.topbar{height:60px;padding:0 28px;background:var(--paper);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15;backdrop-filter:none}
.topbar .crumb{font-size:13px;color:var(--muted)}
.topbar .crumb b{color:var(--ink);font-weight:600;margin-left:10px}
.topbar button{min-height:34px;font-size:13px}

.content{padding:28px 28px 80px;max-width:calc(var(--content-max) + 56px);margin:0 auto}
.pagehead{margin-bottom:24px}
.stack{gap:20px}
.overview-grid{gap:20px}

/* ---------- KPI tiles: number first, one hairline, no fills -------------- */
.metrics{gap:12px;margin:20px 0;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metric{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:none}
.metric label{font-size:12.5px;font-weight:500;color:var(--muted)}
.metric label svg{width:15px;height:15px;stroke:var(--faint)}
.metric strong{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em;
  margin:10px 0 4px;font-variant-numeric:tabular-nums}
.metric span{font-size:12.5px;color:var(--muted)}
/* the one that needs attention is marked with a line, not a fill */
.metric.highlight{background:var(--paper);border-color:var(--blue);color:var(--ink)}
.metric.highlight label,.metric.highlight span{color:var(--muted)}
.metric.highlight strong{color:var(--blue-strong)}
.metric.highlight label svg{stroke:var(--blue)}

/* ---------- the greeting block is a quiet well, not a coloured banner ---- */
.hello{background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:none;padding:22px 24px}
.hello h2{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hello p{font-size:13.5px;color:var(--muted)}
.hello .eyebrow{color:var(--muted)}
.mini-paper{border-color:var(--line-strong);box-shadow:none;background:var(--paper)}
.mini-paper.back{background:var(--line-soft)}
.mini-paper i{background:var(--line)}
.mini-paper i:first-child{background:var(--blue)}
.mini-paper b{color:var(--blue)}

/* ---------- steps, activity, usage -------------------------------------- */
.step{padding:16px 0;border-bottom:1px solid var(--line)}
.step strong{font-size:13.5px;font-weight:600}
.step p{font-size:12.5px;color:var(--muted);margin-top:3px}
.step-num{width:26px;height:26px;background:var(--sunken);color:var(--muted);
  font-size:12px;font-weight:600}
.activity{border-bottom:1px solid var(--line);font-size:12.5px}
.dot{background:var(--blue)}
.usage-row .row{font-size:12.5px}
.bar{height:4px;background:var(--line-soft)}
.bar i{background:var(--blue)}
.datebox{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md)}
.datebox b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.datebox span{color:var(--muted)}

/* ---------- status pills: tinted background, coloured text, no border ---- */
.pill{height:22px;padding:0 8px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;letter-spacing:-.005em;
  background:var(--blue-050);color:var(--blue-strong)}
.pill.neutral{background:var(--sunken);color:var(--muted)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--neg-bg);color:var(--neg)}
.pill.ok{background:var(--pos-bg);color:var(--pos)}

/* ---------- segmented control in place of underlined tabs --------------- */
.tabs{gap:2px;padding:3px;margin-bottom:22px;width:max-content;max-width:100%;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg)}
.tabs button{min-height:30px;height:30px;padding:0 13px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);font-size:13px;font-weight:500}
.tabs button:hover{background:transparent;color:var(--ink);border:0}
.tabs button.active{background:var(--paper);color:var(--ink);font-weight:600;
  border:0;box-shadow:0 1px 2px rgba(17,17,19,.06)}

/* ---------- content list ------------------------------------------------- */
.toolbar{gap:8px;margin-bottom:18px}
.postgrid{gap:14px}
.postcard{padding:20px;border-radius:var(--r-lg);box-shadow:none;
  transition:border-color .16s var(--ease-ui)}
.postcard:hover{border-color:var(--line-strong);box-shadow:none;transform:none}
.postcard h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:14px 0 10px}
.postbody{font-size:13.5px;line-height:1.7;color:var(--sub)}
.postmeta{font-size:12px;color:var(--faint);margin-top:14px}
.postcard footer{padding-top:16px;border-top:1px solid var(--line-soft);margin-top:16px}
.postcard footer button{min-height:30px;height:30px;font-size:12.5px;padding:0 10px}
/* row-level actions step back until you reach for them */
.postcard .actions{opacity:.55;transition:opacity .14s var(--ease-ui)}
.postcard:hover .actions,.postcard:focus-within .actions{opacity:1}
@media(hover:none){.postcard .actions{opacity:1}}

.brandicon{background:var(--sunken);color:var(--sub);border-radius:var(--r-lg);
  font-size:20px;font-weight:700}
.channel-icon{background:var(--sunken);border-radius:var(--r-lg)}
.brandgrid,.channelgrid{gap:14px}
.connection{border-top:1px solid var(--line)}

/* ---------- forms -------------------------------------------------------- */
input,textarea,select{
  min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);color:var(--ink);font-size:14px;
  accent-color:var(--blue);caret-color:var(--blue);
  transition:border-color .16s var(--ease-ui),box-shadow .16s var(--ease-ui)}
textarea{padding:11px 12px;line-height:1.65}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,19,.08)}
input[aria-invalid=true],input:user-invalid{border-color:var(--neg)}
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;padding:0}
label.field{font-size:13px;font-weight:600;margin-bottom:18px}
label.field small{font-size:12.5px;color:var(--muted);margin-top:5px}
.form-error{color:var(--neg);font-size:13.5px}
.charcount{font-size:11.5px;color:var(--muted)}

/* select keeps our chevron, never the OS one */
select{
  -webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px 16px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E")}
select::-ms-expand{display:none}
.workspace select{min-height:0;border:0;padding:0 24px 0 0;box-shadow:none;
  font-size:13.5px;font-weight:600;background-color:transparent;
  background-position:right 0 center;background-size:16px 16px}
.workspace select:focus{box-shadow:none}

input[type=date],input[type=time],input[type=datetime-local]{color-scheme:light}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  opacity:.5;cursor:pointer;border-radius:5px;padding:2px;
  transition:opacity .14s var(--ease-ui),background .14s var(--ease-ui)}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--sunken)}

/* ---------- tables ------------------------------------------------------- */
table{font-size:13.5px}
th{padding:0 12px 10px;background:none;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--muted)}
td{padding:16px 12px;height:60px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--sunken)}
td button{min-height:28px;height:28px;font-size:12px;padding:0 9px}

/* ---------- plans -------------------------------------------------------- */
.plans{gap:14px}
.plan{padding:26px;border-radius:var(--radius)}
.plan.featured{border-color:var(--blue);background:var(--paper)}
.plan .price{font-size:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .price span{color:var(--muted)}
.plan ul{font-size:13.5px;line-height:2.2;color:var(--sub)}
.plan li:before{color:var(--blue)}

/* ---------- the three things that may float ------------------------------ */
dialog{width:min(640px,calc(100vw - 32px));border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-modal);background:var(--paper)}
dialog::backdrop{background:rgba(9,9,11,.5);backdrop-filter:blur(3px)}
.dialog-head{padding:22px 24px 14px;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0}
.dialog-head button{min-height:30px;height:30px;padding:0 9px}
.dialog-body{padding:20px 24px}
.dialog-foot{gap:8px;padding-top:16px;border-top:1px solid var(--line);margin-top:20px}

#toast{
  left:auto;right:24px;bottom:24px;transform:translateY(12px);
  display:flex;align-items:center;gap:10px;
  max-width:min(92vw,420px);min-height:56px;padding:0 20px 0 14px;
  border-radius:var(--r-lg);border:0;background:var(--ink);color:#fff;
  font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1.45;
  box-shadow:var(--sh-toast);opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease-ui),transform .28s cubic-bezier(.165,.84,.44,1)}
#toast:before{content:"";flex:none;width:28px;height:28px;border-radius:var(--r-md);
  background:#fff url("/assets/logo-mark.png") center/19px 19px no-repeat}
#toast.on{display:flex;opacity:1;transform:translateY(0);pointer-events:auto}

/* ---------- the mark ----------------------------------------------------- */
.mark{width:30px;height:30px;border-radius:0;background:none;
  background-image:url("/assets/logo-mark.png");
  background-size:contain;background-position:center;background-repeat:no-repeat;
  font-size:0;color:transparent;line-height:0}
.boot{gap:16px}
.boot .mark{width:52px;height:52px}
.boot p{color:var(--muted);font-size:14px}

/* ---------- small native things ------------------------------------------ */
::selection{background:var(--blue-100);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ==========================================================================
   Screens the marketing site does not carry
   ========================================================================== */

/* ---------- sign in / sign up ---------- */
/* ---------- sign in ------------------------------------------------------
   This is the first screen anyone sees, and a flat grey half-page read as
   unfinished. The left panel now carries the brand image, with the wordmark
   pinned top and the promise pinned bottom so neither floats in dead space.
   The right column holds the form at a comfortable measure instead of
   stranding it in the middle of an empty field.
   ------------------------------------------------------------------------ */
.authpage{grid-template-columns:1.08fr 1fr;background:var(--paper);min-height:100vh}

.authstory{
  position:relative;isolation:isolate;
  /* wordmark, then a spring, then the promise block and the footline —
     a grid so the quote card can never land on top of the footline */
  display:grid;grid-template-rows:auto 1fr auto;gap:22px;
  padding:44px 56px 40px;min-height:100vh;overflow:hidden;
  background:#eaf2fc url("/assets/auth-story.jpg") 72% center/cover no-repeat;
  color:var(--ink);border-right:0}
/* the artwork's blue bloom sits low-left, exactly where the type goes, so the
   wash is weighted to the left rather than the top */
.authstory:before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 30%,
      rgba(255,255,255,.46) 62%,rgba(255,255,255,.10) 100%),
    linear-gradient(0deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 26%)}
.authstory .wordmark{font-size:20px}
.authstory .mark{width:34px;height:34px}
.authstory > div:nth-child(2){align-self:end;min-width:0}
.authstory h1{
  font-size:clamp(30px,3vw,44px);line-height:1.26;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);margin:0 0 18px;max-width:14em;word-break:keep-all;text-wrap:balance}
.authstory p{font-size:16px;line-height:1.65;color:var(--sub);max-width:30em}
.authstory small{font-size:12.5px;color:var(--sub);letter-spacing:.01em;font-weight:500}
.authstory .quote{
  margin-top:24px;max-width:400px;padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px rgba(24,64,120,.10)}
.quote strong{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.quote p{font-size:13.5px;line-height:1.6;color:var(--sub);margin:8px 0 0}

.authform{background:var(--paper);display:grid;place-items:center;padding:48px 32px}
.authbox{width:100%;max-width:380px}
.authbox h1{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0}
.authbox > p{font-size:14.5px;color:var(--muted);margin:10px 0 28px}
.authbox label.field{margin-bottom:16px}
.authbox button[type=submit]{min-height:50px;width:100%;margin-top:22px;font-size:15px}
.authfooter{font-size:13px;color:var(--muted);margin-top:22px}
.authfooter a{color:var(--blue);font-weight:600}
.auth-error{color:var(--neg);font-size:13.5px}

@media(max-width:900px){
  .authpage{grid-template-columns:1fr}
  .authstory{min-height:0;padding:28px 24px 30px;gap:20px}
  .authstory h1{font-size:26px;margin-bottom:12px}
  .authstory p{font-size:14.5px}
  .authstory .quote,.authstory small{display:none}
  .authform{padding:36px 24px 56px;min-height:0;align-items:start}
}

/* ---------- public landing inside the app ---------- */
.publicnav{border-bottom:1px solid var(--line)}
.publicnav .links a{color:var(--sub);font-weight:500}
.publicnav .links a:hover{color:var(--ink);text-decoration:none}
.hero h1{font-weight:700;letter-spacing:-.035em}
.hero p{color:var(--muted)}
.hero-board{background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:none;transform:none}
.hero-board .card{border-color:var(--line)}
.section-head h2{font-size:26px;font-weight:700;letter-spacing:-.03em}
.feature-num{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.publicfooter{border-top:1px solid var(--line);color:var(--muted)}

/* ---------- instagram workspace ---------- */
.ig-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.ig-beta{background:var(--sunken);color:var(--muted);border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600}
.ig-flowcard,.ig-inbox,.ig-chat,.ig-connect{border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:none}
.ig-bubble{border-radius:var(--r-lg)}
.ig-empty,.ig-chat-empty{border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:var(--paper);color:var(--muted)}

/* ---------- responsive --------------------------------------------------- */
@media(min-width:1500px){
  .content{padding:32px 40px 96px}
  .topbar{padding:0 40px}
}
@media(max-width:1150px){
  :root{--sidebar-w:200px}
  .content{padding:24px 22px 72px}
  .topbar{padding:0 22px}
  .card{padding:18px}
}
@media(max-width:800px){
  .sidebar{padding:12px 16px}
  .sidebar .wordmark{margin:0}
  .mark{width:26px;height:26px}
  .topbar{height:54px;padding:0 16px}
  .content{padding:20px 16px 64px}
  .metrics{gap:10px;grid-template-columns:1fr 1fr}
  .metric strong{font-size:26px}
  .card,.postcard{padding:16px}
  .tabs{width:100%;overflow-x:auto}
  #toast{right:12px;left:12px;bottom:12px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  #toast,select,.workspace,.card,.postcard,button{transition-duration:.01ms}
}

/* ---------- audit fixes: same contrast and focus language as the site ------ */
:root{--grad:linear-gradient(98deg,#0072E6 0%,#0064E6 50%,#7A00C8 100%)}
input::placeholder,textarea::placeholder{color:#6b7684}
.postmeta,.nav .nav-label,.workspace label{color:#6b7684}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
button,.button{border-radius:8px}
.shell{align-items:stretch}
.sidebar{min-height:100%}
@media(max-width:800px){
  .topbar .crumb,.topbar .crumb b{font-size:13px}
  .metric label,.eyebrow,.card label{font-size:12px}
  .pagehead p,.card p,.postbody{font-size:14px}
  button,.button{font-size:14px;min-height:44px}
  a.small{display:inline-block;padding-block:12px}
  .workspace select{min-height:44px}
}
@media(max-width:900px){
  /* nothing in the app chrome drops below 12px on a phone */
  .workspace label,.nav .nav-label,.userbox small,.small,.postmeta,
  .metric span,.step p,.activity,.charcount{font-size:12px}
  .sidebar .wordmark,.topbar button,.pv__tab{min-height:44px}
}

/* ==========================================================================
   Fixes found by walking every screen of the running app
   ========================================================================== */

/* A disabled primary was rendering the gradient at 40% — a lavender blob where
   a button should be. Disabled means neutral and obviously inert. */
button.primary:disabled,.button.primary:disabled,
button.primary[disabled],.button.primary[disabled]{
  color:var(--faint);background:var(--sunken);
  border:1px solid var(--line);opacity:1}
button.primary:disabled:before,.button.primary:disabled:before,
button.primary[disabled]:before,.button.primary[disabled]:before{display:none}
button:disabled{opacity:1;color:var(--faint);background:var(--sunken);border-color:var(--line)}

/* A ✓ next to something that has not shipped reads as a promise. */
.plan li.is-soon{color:var(--faint)}
.plan li.is-soon:before{content:'·';color:var(--faint)}

/* At 0% the usage bar was an invisible hairline — you could not tell it was a bar. */
.bar{height:6px;background:var(--line);border-radius:99px}
.bar i{min-width:6px;border-radius:99px}
.usage-row b{font-variant-numeric:tabular-nums}

/* Destructive actions should not look like the two buttons beside them. */
button.danger{color:var(--neg);border-color:#f0cfcf;background:var(--paper)}
button.danger:hover{background:var(--neg-bg);border-color:var(--neg);color:var(--neg)}

/* A "connect" card whose action is not available yet should say so as text,
   not as a dead button the eye keeps returning to. */
.channel-card .pill{flex:none}

/* Screens that hold one or two cards were leaving 400px of blank canvas below.
   Let the content sit in a reading column instead of stretching a short grid. */
.settings-grid,.channelgrid{align-items:start}
.content > .empty{margin-top:8px}

/* ---------- a metered action says what it will spend, before you spend it -- */
.costline{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.costline b{color:var(--ink);font-weight:600}
.costline .muted{color:var(--faint)}
.dialog-body .costline + .form-error:empty + .dialog-foot{margin-top:12px;border-top:0;padding-top:0}

/* ---------- a settings row resolves its own state into a sentence --------- */
.ig-resolved{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.ig-accountbar{display:block}
.ig-accountbar .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ig-accountbar .row + .row{margin-top:14px}

/* ---------- short screens sit in a reading column instead of stranding
              four hundred pixels of blank canvas below a wide grid ---------- */
.content:has(.settings-grid),
.content:has(.channelgrid),
.content:has(.brandgrid){max-width:calc(var(--reading-max) + 480px)}
.settings-grid,.channelgrid,.brandgrid{align-items:start}
/* and the cards in those grids match heights so the row reads as one object */
.channelgrid > .card,.settings-grid > .stack > .card{height:100%}
.channelgrid{align-items:stretch}
.channel-card{display:flex;flex-direction:column}
.channel-card .connection{margin-top:auto}