/* Mr Vibrations CRM — command center (cloud build) */
/* light + floaty by default; dark stays available via the theme toggle */
:root {
  --bg: #F4F0E9; --bg-2: #FFFFFF; --bg-3: #F6F2EB; --raise: #FBF8F3;
  --line: #EDE7DC; --line-2: #E3DBCD; --ink: #241C15; --ink-2: #8E8578; --ink-3: #B7AE9F;
  --gold: #B98D51; --gold-2: #A0741F; --gold-soft: rgba(185,141,81,.14);
  --red: #B23A2B; --red-soft: rgba(178,58,43,.12);
  --good: #6E9B7C; --good-soft: rgba(110,155,124,.16);
  --warn: #B57C16; --warn-soft: rgba(181,124,22,.14);
  --crit: #C04834; --crit-soft: rgba(192,72,52,.13);
  --shadow: 0 10px 30px rgba(80,60,35,.07);
  --radius: 18px; --radius-sm: 12px;
}
:root[data-theme="dark"] {
  --bg: #14100D; --bg-2: #1E1813; --bg-3: #241C16; --raise: #231C16;
  --line: #2B2420; --line-2: #3A302A; --ink: #F2EADF; --ink-2: #B0A594; --ink-3: #7C7263;
  --gold: #D8AA64; --gold-2: #F0C769; --gold-soft: rgba(216,170,100,.14);
  --red: #C8402F; --red-soft: rgba(200,64,47,.16);
  --good: #7FA98C; --good-soft: rgba(127,169,140,.16);
  --warn: #D89A2E; --warn-soft: rgba(216,154,46,.15);
  --crit: #DB5A46; --crit-soft: rgba(219,90,70,.15);
  --shadow: 0 12px 34px rgba(0,0,0,.45);
}
:root[data-theme="light"] {
  --bg: #F4F0E9; --bg-2: #FFFFFF; --bg-3: #F6F2EB; --raise: #FBF8F3;
  --line: #EDE7DC; --line-2: #E3DBCD; --ink: #241C15; --ink-2: #8E8578; --ink-3: #B7AE9F;
  --gold: #B98D51; --gold-2: #A0741F; --gold-soft: rgba(185,141,81,.14);
  --good: #6E9B7C; --good-soft: rgba(110,155,124,.16);
  --shadow: 0 10px 30px rgba(80,60,35,.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- login */
.login-gate { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 30px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 13px;
  box-shadow: var(--shadow);
}
.login-card img { width: 52px; height: 52px; border-radius: 13px; align-self: center; }
.login-card h1 { font-size: 20px; text-align: center; letter-spacing: .04em; }
.login-card .sub { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: -6px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.login-card input {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
  padding: 11px 12px; font-size: 16px;
}
.login-card input:focus { outline: 2px solid var(--gold-soft); border-color: var(--line-2); }
.login-card .primary { background: var(--gold); color: #1a1206; border: 0; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 15px; margin-top: 4px; }
.login-card .primary:hover { background: var(--gold-2); }
.formmsg { font-size: 13px; color: var(--ink-3); min-height: 18px; }
.formmsg.err { color: var(--crit); }

/* ---------------------------------------------------------------- shell */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.rail {
  background: transparent; border-right: 0;
  display: flex; flex-direction: column; padding: 22px 16px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 18px; }
.brand .logo { width: 38px; height: 38px; border-radius: 11px; flex: none; object-fit: cover; box-shadow: var(--shadow); }
.brand .bt { display: flex; flex-direction: column; line-height: 1.15; }
.brand .bt strong { font-size: 14.5px; letter-spacing: .09em; }
.brand .bt em { font-style: normal; font-size: 11px; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; overflow-y: auto; }
.nav button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; position: relative;
  background: transparent; border: 0; color: var(--ink-2);
  padding: 9px 11px; border-radius: 10px; font-size: 14px; font-weight: 500;
  transition: background .12s, color .12s;
}
.nav button svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav button:hover { background: var(--bg-3); color: var(--ink); }
.nav button.on { background: var(--bg-2); color: var(--ink); box-shadow: var(--shadow); }
.nav button.on svg { color: var(--gold); opacity: 1; }
.nav .badge {
  margin-left: auto; font-size: 11.5px; font-weight: 700; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 20px; background: var(--crit-soft); color: var(--crit);
}
.nav .badge:empty { display: none; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.synced { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); padding: 0 6px; }
.synced .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.synced.off .dot { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft); }
.railbtn {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 9px; padding: 8px 10px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; justify-content: center;
}
.railbtn:hover { color: var(--ink); }

/* ---------------------------------------------------------------- main */
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 20px 30px 6px; }
.topbar .hello { font-size: 20px; font-weight: 650; }
.topbar .sub { color: var(--ink-3); font-size: 13px; margin-top: 1px; }
.topbar .spacer { flex: 1; }
.searchwrap { position: relative; }
.searchwrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); }
.searchwrap input {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
  padding: 10px 14px 10px 36px; font-size: 14px; width: 210px; box-shadow: var(--shadow);
}
.searchwrap input::placeholder { color: var(--ink-3); }
.searchwrap input:focus { outline: 2px solid var(--gold-soft); border-color: var(--line-2); }

.view { display: none; padding: 14px 30px 60px; }
.view.on { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.sectionhead { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; flex-wrap: wrap; }
.sectionhead:first-child { margin-top: 8px; }
.sectionhead h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); font-weight: 700; }
.sectionhead .hint { color: var(--ink-3); font-size: 13px; }
.sectionhead .spacer { flex: 1; }

/* action tiles */
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.action {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 16px; text-align: left; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
.action:hover { transform: translateY(-2px); box-shadow: 0 16px 38px var(--shadow); }
.action .rail-stripe { display: none; }
.action.crit .rail-stripe { background: var(--crit); } .action.crit .n { color: var(--crit); }
.action.warn .rail-stripe { background: var(--warn); } .action.warn .n { color: var(--warn); }
.action.info .rail-stripe { background: var(--gold); } .action.info .n { color: var(--gold); }
.action.good .rail-stripe { background: var(--good); } .action.good .n { color: var(--good); }
.action .n { font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1; }
.action .lbl { color: var(--ink-2); font-size: 13px; margin-top: 7px; }
.action .go { color: var(--ink-3); font-size: 12px; margin-top: 9px; display: flex; align-items: center; gap: 4px; }

/* money / stat row */
.money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.stat .k { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.stat .v { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; }
.stat .v small { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.stat .d { font-size: 12px; margin-top: 5px; display: flex; align-items: center; gap: 5px; color: var(--ink-3); }
.stat .d.up { color: var(--good); }
.stat .spark { margin-top: 10px; height: 34px; width: 100%; display: block; }
.stat.good .v { color: var(--good); } .stat.gold .v { color: var(--gold); }

/* two-column + panels */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.cols.wide { grid-template-columns: 1.5fr 1fr; }
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.panel .ph { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel .ph h3 { font-size: 14.5px; }
.panel .ph .count { color: var(--ink-3); font-size: 12.5px; }
.panel .ph .spacer { flex: 1; }
.panel .pb { padding: 6px 8px; }
.panel .pb.empty, .list.empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

.row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; }
.row:hover { background: var(--bg-3); }
.row + .row { border-top: 1px solid var(--line); }
.avatar {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: var(--ink); background: var(--raise); border: 1px solid var(--line-2);
}
.row .who { min-width: 0; flex: 1; }
.row .who .nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .who .mt { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .who .mt a { color: var(--ink-2); }
.row .right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.row .when { font-size: 12.5px; color: var(--ink-2); }
.row .when.over { color: var(--crit); font-weight: 600; }

.minibtn {
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink-2);
  border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.minibtn:hover { color: var(--ink); border-color: var(--gold); }
.minibtn.gold { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.minibtn.gold:hover { background: var(--gold-2); }
.minibtn.done { background: var(--good-soft); color: var(--good); border-color: transparent; }
.minibtn.danger:hover { border-color: var(--crit); color: var(--crit); }

/* live toast notifications */
#toastwrap { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; background: var(--bg-2);
  border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: 12px;
  padding: 13px 12px 13px 14px; box-shadow: var(--shadow); cursor: pointer;
  animation: toastin .26s cubic-bezier(.2,.9,.3,1);
}
.toast.good { border-left-color: var(--good); }
.toast.info { border-left-color: var(--gold); }
.toast.out { animation: toastout .24s ease forwards; }
.toast .ti { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast .ti strong { font-size: 14px; }
.toast .ti span { font-size: 12.5px; color: var(--ink-2); }
.toast .tx { background: transparent; border: 0; color: var(--ink-3); font-size: 18px; line-height: 1; padding: 0 2px; flex: none; }
.toast .tx:hover { color: var(--ink); }
@keyframes toastin { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateX(20px); } }
@media (max-width: 720px) { #toastwrap { right: 10px; left: 10px; bottom: 84px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.out { animation: none; opacity: 0; } }

/* tasks */
.tickbox {
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  border: 2px solid var(--line-2); background: transparent; color: var(--good);
  font-size: 14px; font-weight: 800; line-height: 1; display: grid; place-items: center; padding: 0;
  transition: border-color .12s, background .12s;
}
.tickbox:hover { border-color: var(--good); }
.tickbox.on { background: var(--good-soft); border-color: var(--good); }
.row.task .who .nm { white-space: normal; }
.row.task.isdone .nm { text-decoration: line-through; color: var(--ink-3); }
.row.task .mt.overdue { color: var(--crit); font-weight: 600; }

/* pills + chips */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.pill .pd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.cold { background: rgba(120,140,170,.15); color: #93a7c4; }
.pill.warm { background: var(--warn-soft); color: var(--warn); }
.pill.callbooked, .pill.booked { background: var(--gold-soft); color: var(--gold); }
.pill.sold, .pill.paid { background: var(--good-soft); color: var(--good); }
.pill.lost { background: rgba(150,130,120,.13); color: var(--ink-3); }
.pill.unpaid { background: var(--warn-soft); color: var(--warn); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); background: var(--bg-3); border: 1px solid var(--line); padding: 3px 8px; border-radius: 7px; white-space: nowrap; }

/* tables */
.tablewrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--bg-3); }
td .nmline { display: flex; align-items: center; gap: 10px; }
td .em { color: var(--ink-3); font-size: 12.5px; }
.amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.amt.in { color: var(--good); }
.mini {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); border-radius: 7px;
  padding: 5px 8px; font-size: 13px; font-family: inherit; min-width: 0; max-width: 100%;
}
.mini:focus { outline: 2px solid var(--gold-soft); border-color: var(--line-2); }
td.contact { white-space: nowrap; }
td.contact .mini { width: 148px; display: block; }
td.contact .mini + .mini { margin-top: 5px; }
.due-dot { color: var(--crit); }

/* pipeline board */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.col { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.col.over { border-color: var(--gold); }
.col .ch { padding: 13px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.col .ch .t { font-weight: 650; font-size: 13.5px; }
.col .ch .c { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.col .ch .val { font-size: 12px; color: var(--gold); font-weight: 650; font-variant-numeric: tabular-nums; margin-left: 8px; }
.col .cb { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-height: 46px; }
.card { background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 10px; padding: 11px 12px; cursor: grab; }
.card.dragging { opacity: .5; }
.card.due { border-left-color: var(--crit); }
.card .cn { font-weight: 600; font-size: 13.5px; }
.card strong { font-weight: 600; font-size: 13.5px; }
.card .cm, .card .small { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.card .cf { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.card .cardfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.card .cardlink { color: var(--gold); font-size: 12px; text-decoration: none; }
.col .cb .empty { color: var(--ink-3); font-size: 12px; text-align: center; padding: 12px; }

/* forms */
.form { display: flex; flex-direction: column; gap: 11px; padding: 16px 18px; }
.form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form .frow.three { grid-template-columns: 1fr 1fr 1fr; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.form input, .form select, .form textarea {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
  padding: 9px 11px; font-size: 16px; font-family: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gold-soft); border-color: var(--line-2); }
.form textarea { resize: vertical; min-height: 62px; }
.form .primary { background: var(--gold); color: #1a1206; border: 0; border-radius: 9px; padding: 11px; font-weight: 700; font-size: 14.5px; }
.form .primary:hover { background: var(--gold-2); }

/* bars (analytics) */
.bars { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bars.empty { color: var(--ink-3); font-size: 13.5px; }
.bar { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; }
.bar .bl { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .bt { height: 10px; background: var(--bg-3); border-radius: 6px; overflow: hidden; }
.bar .bt i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.bar .bt i.green { background: linear-gradient(90deg, var(--good), #6fc39c); }
.bar .bv { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 58px; text-align: right; }

/* trend charts */
.chartbox { padding: 14px 16px 10px; }
.chartbox svg { width: 100%; height: auto; display: block; overflow: visible; }
.chartbox .gl { stroke: var(--line); stroke-width: 1; }
.chartbox .xlab { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chartbox .endlab { fill: var(--ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chartbox .dotring { fill: var(--bg-2); }

/* insights */
.insights { display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.insight { display: flex; gap: 12px; padding: 12px 14px; border-radius: 11px; align-items: flex-start; }
.insight .ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.insight .ic svg { width: 16px; height: 16px; }
.insight .ic .ins-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.insight.critical { background: var(--crit-soft); } .insight.critical .ic { background: var(--crit); color: #fff; }
.insight.warn { background: var(--warn-soft); } .insight.warn .ic { background: var(--warn); color: #221800; }
.insight.info { background: var(--gold-soft); } .insight.info .ic { background: var(--gold); color: #221800; }
.insight.good { background: var(--good-soft); } .insight.good .ic { background: var(--good); color: #04160e; }
.insight .it { font-weight: 650; font-size: 14px; }
.insight .id { color: var(--ink-2); font-size: 13px; margin-top: 2px; }

/* cadence + follow-ups */
.cadence { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.cad { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.cad .pill { min-width: 92px; justify-content: center; }
.cad input { width: 70px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 6px 8px; font-size: 14px; font-family: inherit; }
.datelbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.datelbl input { background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 5px 7px; font-size: 13px; font-family: inherit; }
.followctl { display: flex; align-items: center; gap: 8px; flex: none; }
.overdue { color: var(--crit); font-weight: 600; }

/* ---------------------------------------------------------------- invoice doc (light) */
.invoice-doc, #invPreview {
  background: #fff; color: #241c15; border-radius: 12px; padding: 34px 34px 30px; min-height: 300px;
}
.inv2-top { text-align: center; margin-bottom: 22px; }
.inv2-logo { width: 60px; height: 60px; object-fit: contain; }
.inv2-name { font-size: 24px; font-weight: 700; letter-spacing: .16em; margin-top: 8px; }
.inv2-parties { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.inv2-lbl { font-size: 11px; letter-spacing: .08em; color: #8a7c6e; }
.inv2-client { font-size: 16px; font-weight: 600; margin-top: 3px; }
.inv2-cem { font-size: 12.5px; color: #6b5e4e; }
.inv2-meta { text-align: right; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.inv2-strong { font-weight: 700; }
.inv2-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 13.5px; }
.inv2-table th { text-align: left; font-size: 11px; letter-spacing: .06em; color: #8a7c6e; border-bottom: 1.5px solid #241c15; padding: 8px 6px; }
.inv2-table td { padding: 9px 6px; border-bottom: 1px solid #eee; }
.inv2-table .amt { text-align: right; font-variant-numeric: tabular-nums; }
.inv2-empty { text-align: center; color: #b3a798; padding: 16px; }
.inv2-subtotal { display: flex; justify-content: space-between; padding: 6px 6px; font-size: 13.5px; color: #6b5e4e; }
.inv2-totalbox { border-top: 2px solid #241c15; margin-top: 4px; padding-top: 10px; }
.inv2-totalrow { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.inv2-words { font-size: 11.5px; color: #6b5e4e; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.inv2-terms { margin: 20px 0 0; padding-left: 18px; font-size: 10.5px; color: #6b5e4e; letter-spacing: .02em; }
.inv2-terms li { margin-bottom: 4px; }

/* invoice form line items */
.inv-items { display: flex; flex-direction: column; gap: 8px; }
.inv-item { display: grid; grid-template-columns: 1fr 60px 90px 34px; gap: 8px; }
.inv-item input { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px 9px; font-size: 14px; font-family: inherit; }
.inv-additem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips .chip { cursor: pointer; } .chips .chip:hover { border-color: var(--gold); color: var(--ink); }

/* print */
#printroot { display: none; }
@media print {
  html, body { background: #fff !important; }
  body.printing > *:not(#printroot) { display: none !important; }
  body.printing #printroot { display: block; }
  #printroot { position: absolute; left: 0; top: 0; width: 100%; }
  .invoice-doc { border-radius: 0; box-shadow: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 940px) {
  .actions, .money { grid-template-columns: 1fr 1fr; }
  .cols, .cols.wide { grid-template-columns: 1fr; }
  .board, .kb { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 100px 1fr auto; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto;
    flex-direction: row; z-index: 60; padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    background: var(--bg-2); border-right: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px var(--shadow); overflow: hidden;
  }
  .brand, .rail-foot { display: none; }
  .nav { flex-direction: row; gap: 0; width: 100%; justify-content: space-around; margin: 0; overflow: visible; }
  .nav button { flex: 1; flex-direction: column; align-items: center; gap: 0; padding: 8px 2px; border-radius: 12px; }
  .nav button svg { width: 22px; height: 22px; opacity: 1; }
  .nav button span:not(.badge) { display: none; }
  .nav button.on { background: transparent; box-shadow: none; }
  .nav button.on svg { color: var(--gold); }
  .nav .badge { position: absolute; top: 3px; left: calc(50% + 4px); }
  .main { padding-bottom: 78px; }
  .topbar { padding: 16px 16px 4px; flex-wrap: wrap; }
  .searchwrap input { width: 150px; }
  .view { padding: 12px 16px 40px; }
  .form .frow, .form .frow.three { grid-template-columns: 1fr; }
  td.contact .mini { width: 130px; }
  .inv-item { grid-template-columns: 1fr 50px 80px 30px; }
}
@media (prefers-reduced-motion: reduce) { .view.on { animation: none; } .action:hover { transform: none; } }

/* ---- content board (three lanes) ---- */
.cboard{ display:block; }
.cbtabs{ display:inline-flex; gap:4px; margin-bottom:16px; }
.cbtab{ font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); background:transparent; border:1px solid transparent; padding:8px 16px; border-radius:999px; cursor:pointer; }
.cbtab.on{ background:var(--raise); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow); }
.cbtab .n{ color:var(--ink-3); margin-left:7px; font-size:12px; }
.cbdet{ display:grid; grid-template-columns:220px 1fr; gap:24px; background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.cbdet.text{ grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .cbdet, .cbdet.text{ grid-template-columns:1fr; } }
.cbmedia{ width:220px; aspect-ratio:9/16; border-radius:12px; overflow:hidden; position:relative; background:#000; border:1px solid var(--line); }
.cbmedia video{ width:100%; height:100%; object-fit:cover; display:block; }
.cbmedia.ph, .cbmini.ph{ display:flex; align-items:center; justify-content:center; background:var(--bg-3); color:var(--ink-3); }
.cbmedia.img, .cbmini.img{ background-size:cover; background-position:center; }
.cbmini.vid.frame video, .cbmedia.vid.frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cbmini.vid.frame .glyph, .cbmedia.vid.frame .glyph{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:32px; color:#fff; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.55); pointer-events:none; }
.cbmedia .dur, .cbmini .dur, .cbmedia .slide, .cbmini .slide{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:2px 7px; border-radius:6px; }
.cbmedia .glyph{ font-size:24px; opacity:.7; }
.cbdoc{ background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:16px; }
.cbdoc .tag{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.cbdoc .ttl{ font-size:16px; font-weight:600; margin:6px 0 8px; color:var(--ink); }
.cbdoc .bdy{ font-size:12.5px; color:var(--ink-2); line-height:1.6; max-height:230px; overflow:auto; }
.cbdet-r{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.cbtitle{ font-size:17px; font-weight:600; color:var(--ink); line-height:1.35; }
.cbrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cbrow.lbl{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:-4px; }
.cbpill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink-2); background:var(--bg-3); border:1px solid var(--line); border-radius:999px; padding:4px 11px 4px 9px; }
.cbpill i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.cbpill.s-review i{ background:var(--gold); }
.cbpill.s-appr i{ background:var(--good); }
.cbpill.s-edit i{ background:var(--warn); }
.cbpill.s-sched i{ background:#5aa0a0; }
.cbpill.s-posted i{ background:var(--ink-3); }
.cbtag{ font-size:11px; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; text-transform:capitalize; }
.cbtag.done{ color:var(--good); border-color:transparent; background:var(--good-soft); }
.cbptoggle{ font:inherit; font-size:11.5px; font-weight:600; border-radius:999px; padding:5px 12px; cursor:pointer; border:1px solid var(--line); background:var(--raise); color:var(--ink-2); }
.cbptoggle.on{ background:var(--gold-soft); color:var(--gold); border-color:transparent; }
.cbptoggle.off{ color:var(--ink-3); text-decoration:line-through; }
.cbapprove{ font:inherit; font-size:13px; font-weight:600; background:var(--gold); color:#231a08; border:none; border-radius:10px; padding:10px 18px; cursor:pointer; }
.cbapprove:disabled{ opacity:.6; }
.cbnote{ background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.cbnote .who{ font-size:11px; font-weight:700; color:var(--gold); }
.cbnote p{ margin:4px 0 0; font-size:13.5px; color:var(--ink); line-height:1.5; }
.cbdim{ color:var(--ink-3); font-size:12px; }
.cbqhead{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:26px 2px 12px; }
.cbtrack{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.cbcard{ flex:0 0 150px; background:var(--raise); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow); cursor:pointer; }
.cbcard:hover{ border-color:var(--gold); }
.cbcard.txt{ flex-basis:210px; }
.cbmini{ width:100%; aspect-ratio:9/16; border-radius:10px; position:relative; overflow:hidden; background:var(--bg-3); }
.cbmini.img{ aspect-ratio:4/5; }
.cbc-cap{ font-size:12.5px; font-weight:500; color:var(--ink); margin:9px 3px 8px; line-height:1.3; height:32px; overflow:hidden; }
.cbc-foot{ padding:0 3px 3px; }
.cbc-doc .tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.cbc-doc .head{ font-size:14px; font-weight:600; color:var(--ink); margin:6px 0 6px; line-height:1.3; }
.cbc-doc .exc{ font-size:12px; color:var(--ink-2); line-height:1.45; height:34px; overflow:hidden; }
.cbempty{ background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); padding:26px; color:var(--ink-2); text-align:center; }
.cbempty.small{ padding:14px; font-size:13px; }

.cbunapprove{ font:inherit; font-size:12.5px; font-weight:500; background:var(--bg-3); color:var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:9px 14px; cursor:pointer; margin-left:8px; }
.cbunapprove:hover{ color:var(--ink); border-color:var(--gold); }
.cbunapprove:disabled{ opacity:.6; }

.cbsched{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
.cbsched[hidden]{ display:none; }
.cbsi{ font:inherit; font-size:13px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:9px 11px; color:var(--ink); }
.cbschedgo{ font:inherit; font-size:13px; font-weight:600; background:var(--gold); color:#fff; border:none; border-radius:10px; padding:9px 16px; cursor:pointer; box-shadow:0 6px 16px rgba(185,141,81,.26); }
.cbschedgo:disabled{ opacity:.6; }

/* ---------- channel analytics strip ---------- */
.chstrip{ margin-bottom:8px; }
.chchips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.chchips::-webkit-scrollbar{ display:none; }
.chchip{ display:inline-flex; align-items:center; gap:8px; flex:none; font:inherit; font-size:13px; font-weight:500;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px; color:var(--ink-2);
  padding:8px 14px 8px 11px; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s, color .12s, border-color .12s; }
.chchip svg{ width:16px; height:16px; opacity:.8; }
.chchip:hover{ color:var(--ink); transform:translateY(-1px); }
.chchip.on{ color:var(--ink); border-color:var(--gold); }
.chchip.on svg{ color:var(--gold); opacity:1; }
.chkpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.chkpi{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--shadow); }
.chkpi b{ display:block; font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.chkpi span{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-2); }
.chnote{ margin-top:10px; font-size:12.5px; color:var(--ink-2); }

/* ---------- daily scripts ---------- */
.cscripts{ margin-top:2px; }
.csfilters{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.csfilter{ font:inherit; font-size:12.5px; font-weight:500; background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); padding:6px 13px; cursor:pointer; }
.csfilter:hover{ color:var(--ink); }
.csfilter.on{ background:var(--bg-2); color:var(--ink); border-color:var(--gold); box-shadow:var(--shadow); }
.csgridwrap{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.cscard{ display:flex; flex-direction:column; gap:8px; text-align:left; font:inherit; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  transition:transform .13s, box-shadow .13s; }
.cscard:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(80,60,35,.12); }
.cscard.done{ opacity:.62; }
.csc-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cspill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-2); background:var(--gold-soft); border-radius:999px; padding:4px 10px; }
.cspill.p-mindset{ color:#8a6d1f; background:rgba(185,141,81,.16); }
.cspill.p-calisthenics{ color:#b4442e; background:rgba(200,70,45,.14); }
.cspill.p-ai{ color:#2f6d6a; background:rgba(45,120,115,.14); }
[data-theme="dark"] .cspill.p-calisthenics{ color:#f0a58f; }
[data-theme="dark"] .cspill.p-ai{ color:#7ed8d2; }
.csdone{ font-size:11px; font-weight:600; color:var(--ink-2); }
.csc-ttl{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; }
.csc-line{ font-size:13px; color:var(--ink-2); line-height:1.45; }
.csc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:4px; }
.csfmt{ font-size:11.5px; color:var(--ink-3); }
.csgo{ font-size:12px; font-weight:600; color:var(--gold-2); }

/* ---------- script modal ---------- */
body.modal-open{ overflow:hidden; }
.csmodal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(30,22,12,.42); backdrop-filter:blur(4px); animation:csfade .16s ease; }
@keyframes csfade{ from{ opacity:0 } to{ opacity:1 } }
.csm-card{ position:relative; width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 80px rgba(40,28,10,.32);
  animation:cspop .18s cubic-bezier(.2,.8,.3,1); }
@keyframes cspop{ from{ transform:translateY(14px) scale(.985); opacity:0 } to{ transform:none; opacity:1 } }
.csm-x{ position:absolute; top:12px; right:14px; width:32px; height:32px; border:none; background:var(--bg-3); border-radius:50%; color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer; }
.csm-x:hover{ color:var(--ink); }
.csm-head{ padding:22px 24px 14px; border-bottom:1px solid var(--line); }
.csm-ttl{ font-size:19px; font-weight:700; color:var(--ink); line-height:1.25; padding-right:34px; }
.csm-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.csmpill{ font-size:11px; font-weight:600; color:var(--ink-2); background:var(--bg-3); border-radius:999px; padding:4px 10px; }
.csm-body{ padding:6px 24px 16px; overflow-y:auto; }
.csblock{ padding:14px 0; border-bottom:1px solid var(--line); }
.csblock:last-child{ border-bottom:none; }
.csbh{ display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:8px; }
.csmini{ font:inherit; font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--gold-2); background:var(--gold-soft); border:none; border-radius:8px; padding:4px 10px; cursor:pointer; }
.csmini:hover{ color:#fff; background:var(--gold); }
.csmini.ok{ color:#fff; background:var(--gold); }
.cshook{ font-size:16px; font-weight:600; color:var(--ink); line-height:1.4; }
.csol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.csol li{ font-size:14px; color:var(--ink); line-height:1.5; }
.csbody p{ font-size:14px; color:var(--ink); line-height:1.55; margin:0 0 9px; }
.csbody p:last-child{ margin-bottom:0; }
.csul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.csul li{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.cscap{ font-size:14px; color:var(--ink); line-height:1.5; font-style:italic; }
.cscta{ font-size:14px; color:var(--gold-2); font-weight:600; }
.csm-foot{ display:flex; gap:10px; padding:14px 24px 18px; border-top:1px solid var(--line); }
.csm-copyall{ flex:1; font:inherit; font-size:14px; font-weight:600; background:var(--gold); color:#fff; border:none; border-radius:12px; padding:12px; cursor:pointer; box-shadow:0 8px 20px rgba(185,141,81,.28); }
.csm-copyall:hover{ background:var(--gold-2); }
.csm-done{ font:inherit; font-size:14px; font-weight:600; background:var(--bg-3); color:var(--ink-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px; cursor:pointer; }
.csm-done:hover{ color:var(--ink); border-color:var(--gold); }
.csm-done.is{ color:var(--gold-2); border-color:var(--gold); }

/* ---------- per-post scorecard ---------- */
.cbscore{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.cbscore .sch{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:10px; }
.cbscore.empty .scnote{ font-size:13px; color:var(--ink-2); }
.scrow{ margin-bottom:12px; }
.scrh{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.scgrade{ font-size:14px; font-weight:700; color:var(--gold-2); }
.scgrade i{ font-style:normal; font-size:11px; color:var(--ink-3); font-weight:500; }
.scgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; }
.sctile{ background:var(--bg-3); border:1px solid var(--line); border-radius:10px; padding:9px 6px; text-align:center; }
.sctile b{ display:block; font-size:16px; font-weight:700; color:var(--ink); }
.sctile span{ display:block; margin-top:2px; font-size:10.5px; color:var(--ink-2); }

@media (max-width:720px){
  .chkpis{ grid-template-columns:repeat(2,1fr); }
  .csgridwrap{ grid-template-columns:1fr; }
  .csmodal{ padding:0; align-items:flex-end; }
  .csm-card{ max-width:100%; max-height:92vh; border-radius:22px 22px 0 0; }
}

/* ---------- create studio ---------- */
.prompt{ display:flex; gap:10px; align-items:center; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:8px 8px 8px 18px; box-shadow:var(--shadow); }
.prompt .ic{ color:var(--gold); flex:none; }
.prompt input{ flex:1; border:0; background:transparent; color:var(--ink); font-size:15px; outline:none; min-width:0; }
.prompt input::placeholder{ color:var(--ink-3); }
.prompt .go{ background:var(--gold); color:#fff; border:0; border-radius:999px; padding:11px 20px; font-weight:600; font-size:14px; box-shadow:0 8px 18px rgba(185,141,81,.26); white-space:nowrap; cursor:pointer; }
.prompt .go:hover{ background:var(--gold-2); }
.chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.chiprow .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-right:2px; }
.schip{ background:transparent; border:1px solid var(--line); color:var(--ink-2); border-radius:999px; padding:7px 14px; font:inherit; font-size:13px; cursor:pointer; }
.schip:hover{ color:var(--ink); }
.schip.on{ background:var(--bg-2); color:var(--ink); border-color:var(--gold); box-shadow:var(--shadow); }
.rescount{ font-size:13px; color:var(--ink-2); margin:18px 0 12px; }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.tpl{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer; transition:transform .13s, box-shadow .13s; }
.tpl:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(80,60,35,.13); }
.tpl .phone{ position:relative; aspect-ratio:9/16; background:#241c16 center/cover no-repeat; display:grid; place-items:center; }
.tpl .phone.ph{ background:linear-gradient(160deg,var(--bg-3),var(--line)); }
.tpl .phone .glyph{ color:var(--ink-3); font-size:26px; }
.tbody{ padding:12px 13px 13px; display:flex; flex-direction:column; gap:7px; flex:1; }
.tsrc{ display:flex; align-items:center; gap:8px; }
.tbadge{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
.tbadge.real{ color:var(--gold-2); background:var(--gold-soft); }
.tbadge.ai{ color:#6b58a6; background:rgba(107,88,166,.14); }
.tbadge.saved{ color:var(--ink-2); background:var(--bg-3); }
[data-theme="dark"] .tbadge.ai{ color:#b8a6e8; }
.tsrc .who{ font-size:11.5px; color:var(--ink); font-weight:600; }
.tpl .ttl{ font-size:14.5px; font-weight:700; line-height:1.25; color:var(--ink); }
.tpl .why{ font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.use2{ margin-top:auto; background:var(--gold-soft); color:var(--gold-2); border-radius:10px; padding:8px; font-weight:600; font-size:13px; text-align:center; }
.tpl:hover .use2{ background:var(--gold); color:#fff; }

.followstrip{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.followstrip .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-right:2px; }
.fchip{ display:inline-flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:5px 13px 5px 6px; font-size:13px; color:var(--ink); box-shadow:var(--shadow); }
.fchip .av{ width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:800; background:linear-gradient(150deg,var(--gold),var(--gold-2)); }
.fmore{ font-size:12.5px; color:var(--ink-3); }
.savebar{ display:flex; gap:10px; align-items:center; background:var(--bg-2); border:1px dashed var(--line-2); border-radius:var(--radius); padding:8px 8px 8px 18px; box-shadow:var(--shadow); }
.savebar .ic{ color:var(--ink-3); flex:none; }
.savebar input{ flex:1; border:0; background:transparent; color:var(--ink); font-size:14.5px; outline:none; min-width:0; }
.savebar input::placeholder{ color:var(--ink-3); }
.savebar .save{ background:var(--gold); color:#fff; border:0; border-radius:12px; padding:10px 18px; font-weight:600; font-size:13.5px; cursor:pointer; }
.savebar .save:hover{ background:var(--gold-2); }
.savebar .save:disabled{ opacity:.6; }
.swgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; margin-top:16px; }
.sw{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); text-align:left; padding:0; color:inherit; display:flex; flex-direction:column; cursor:pointer; }
.sw:hover{ border-color:var(--gold); }
.swthumb{ position:relative; aspect-ratio:9/16; background:#241c16 center/cover no-repeat; }
.swthumb.ph{ background:linear-gradient(160deg,var(--bg-3),var(--line)); }
.swst{ position:absolute; left:7px; bottom:7px; font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; display:inline-flex; gap:5px; align-items:center; }
.swst.ready{ background:rgba(63,143,95,.92); color:#fff; }
.swst.studying{ background:rgba(185,134,47,.92); color:#fff; }
.swst i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1s infinite; }
.swmeta{ padding:10px 11px 12px; }
.swh{ font-size:12px; font-weight:600; color:var(--ink); }
.swtags{ font-size:11px; color:var(--ink-2); line-height:1.4; margin-top:3px; }

.reflabel{ font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-bottom:8px; font-weight:700; }
.recipe{ display:flex; flex-direction:column; }
.rrow{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.rrow:last-child{ border-bottom:0; }
.rrow .rk{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700; }
.rrow .rv{ font-size:13.5px; color:var(--ink); line-height:1.5; }
.rnote{ font-size:13px; color:var(--ink-2); line-height:1.5; margin:6px 0 0; }
.upbtn{ display:inline-block; margin-top:12px; background:var(--bg-3); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:10px 16px; font-size:13.5px; font-weight:600; cursor:pointer; }
.upbtn:hover{ border-color:var(--gold); }
.upname{ font-size:12.5px; color:var(--ink-2); margin-left:10px; }

@media (max-width:720px){
  .swgrid{ grid-template-columns:repeat(2,1fr); }
  .tgrid{ grid-template-columns:1fr 1fr; }
}

/* ---------- create: your edits ---------- */
.editlist{ display:flex; flex-direction:column; gap:12px; }
.edrow{ display:flex; gap:14px; align-items:center; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); }
.edmedia{ width:78px; height:118px; border-radius:12px; overflow:hidden; flex:none; background:#000; }
.edvid{ width:100%; height:100%; object-fit:cover; background:#000; }
.edph{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(160deg,var(--bg-3),var(--line)); }
.edph .glyph{ color:var(--ink-3); font-size:22px; }
.edbody{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.edtitle{ font-size:15px; font-weight:700; color:var(--ink); }
.edact{ display:flex; align-items:center; gap:10px; margin-top:2px; flex-wrap:wrap; }
.edapprove{ background:var(--gold); color:#fff; border:0; border-radius:10px; padding:9px 16px; font-weight:600; font-size:13.5px; cursor:pointer; box-shadow:0 6px 16px rgba(185,141,81,.26); }
.edapprove:hover{ background:var(--gold-2); }
.edapprove:disabled{ opacity:.6; }
.edwait{ font-size:13px; color:var(--ink-2); }
.edfail{ font-size:13px; color:#b4442e; }
[data-theme="dark"] .edfail{ color:#f0a58f; }
.eddel{ margin-left:auto; width:26px; height:26px; border:0; background:var(--bg-3); color:var(--ink-3); border-radius:8px; font-size:16px; line-height:1; cursor:pointer; }
.eddel:hover{ color:var(--ink); }

/* download a finished reel from Content */
.cbdl{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--gold-2); background:var(--gold-soft); border-radius:10px; padding:8px 14px; text-decoration:none; }
.cbdl:hover{ background:var(--gold); color:#fff; }
.cbdl svg{ flex:none; }

/* editable note on a content item */
.cbnote .who{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:700; margin-bottom:6px; }
.cbnotebox{ width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:10px 12px; resize:vertical; min-height:56px; outline:none; }
.cbnotebox:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.cbnotebox::placeholder{ color:var(--ink-3); }
.cbnotesaved{ font-size:11.5px; color:var(--gold-2); font-weight:600; margin-top:5px; display:inline-block; }

/* ================================================================ *
 *  APP LANGUAGE v2 — mobile-first, one calm look across every tab   *
 * ================================================================ */

/* five real tabs, each grouping related views behind sub-tabs */
.segbar{ padding:2px 30px 0; }
.segbar:empty{ display:none; }
.segtitle{ font-size:25px; font-weight:750; letter-spacing:-.02em; color:var(--ink); margin:4px 0 12px; }
.segtabs{ display:flex; gap:5px; background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:4px; overflow-x:auto; scrollbar-width:none; }
.segtabs::-webkit-scrollbar{ display:none; }
.seg{ flex:1 0 auto; white-space:nowrap; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); background:transparent; border:0; border-radius:11px; padding:9px 15px; cursor:pointer; transition:background .12s,color .12s; }
.seg.on{ background:var(--bg-2); color:var(--ink); box-shadow:var(--shadow); }

/* calmer topbar greeting */
.topbar .hello{ font-size:24px; font-weight:750; letter-spacing:-.02em; }
.topbar .sub{ font-size:13.5px; }

/* Content: the big upload entry */
.uploadbig{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--gold); color:#1a1206; border:0; border-radius:16px; padding:15px; font-size:15px; font-weight:700; box-shadow:var(--shadow); margin:2px 0 18px; cursor:pointer; }
.uploadbig:hover{ background:var(--gold-2); }
.uploadbig svg{ flex:none; }

/* Create: link-first bar */
.linkbar{ display:flex; gap:10px; align-items:center; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:7px 7px 7px 16px; box-shadow:var(--shadow); margin-top:2px; }
.linkbar .ic{ color:var(--ink-3); flex:none; }
.linkbar input{ flex:1; border:0; background:transparent; color:var(--ink); font-size:15px; outline:none; min-width:0; }
.linkbar input::placeholder{ color:var(--ink-3); }
.linkbar .go{ background:var(--gold); color:#1a1206; border:0; border-radius:12px; padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; }
.linkbar .go:hover{ background:var(--gold-2); }
.rescount{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; margin:18px 2px 12px; }
.rescount:empty{ display:none; margin:8px 0 0; }

/* Create: reels-to-replicate grid (media-forward, minimal text) */
.tgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.tpl{ background:transparent; border:0; box-shadow:none; padding:0; gap:0; }
.tpl:hover{ transform:none; box-shadow:none; }
.tphone{ position:relative; aspect-ratio:9/16; border-radius:15px; overflow:hidden; background:#241c16 center/cover no-repeat; box-shadow:0 6px 18px rgba(80,60,35,.10); }
.tpl.ph .tphone{ background:linear-gradient(160deg,var(--bg-3),var(--line)); }
.tphone .thandle{ position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:600; color:#fff; background:rgba(20,16,12,.45); padding:3px 8px; border-radius:20px; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tplay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.tplay::after{ content:""; border-left:12px solid var(--ink); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.tstudy{ position:absolute; bottom:8px; left:8px; font-size:10px; font-weight:600; color:#fff; background:rgba(185,134,47,.94); padding:3px 8px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; }
.tstudy i{ width:6px; height:6px; border-radius:50%; background:#fff; }
.tcap{ font-size:12.5px; font-weight:500; color:var(--ink); margin:8px 3px 2px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Create: side-by-side approval gate */
.edreview{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.edrev-h{ font-size:17px; font-weight:750; color:var(--ink); }
.edrev-sub{ font-size:13px; color:var(--ink-3); margin:4px 0 14px; line-height:1.45; }
.edrev-pair{ display:flex; gap:12px; }
.rv{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.rvl{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; text-align:center; color:var(--ink-3); }
.rvl.gold{ color:var(--gold-2); }
.rvbox{ position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 8px 20px rgba(80,60,35,.12); }
.rvbox.b{ outline:2px solid rgba(185,141,81,.5); }
.rvbox video{ width:100%; height:100%; object-fit:cover; display:block; }
.rvthumb{ width:100%; height:100%; background:#241c16 center/cover no-repeat; }
.rvthumb.ph{ background:linear-gradient(160deg,var(--bg-3),var(--line)); }
.edrev-act{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.edrev-act .edapprove{ width:100%; padding:15px; border-radius:14px; font-size:15px; }
.edredo{ width:100%; background:transparent; color:var(--ink-2); border:1px solid var(--line-2); border-radius:14px; padding:12px; font-size:13.5px; font-weight:600; cursor:pointer; }
.edredo:hover{ color:var(--ink); }

/* Create recipe modal: the example plays */
.csm-card.sheet .csm-body{ padding-top:14px; }
.rcplayer video{ width:100%; max-height:50vh; border-radius:14px; background:#000; display:block; }
.rcposter{ aspect-ratio:9/16; max-height:50vh; margin:0 auto; border-radius:14px; background:#241c16 center/cover no-repeat; position:relative; }
.rcposter.ph{ background:linear-gradient(160deg,var(--bg-3),var(--line)); display:grid; place-items:center; }
.csm-card.sheet .upbtn{ display:block; text-align:center; background:var(--gold); color:#1a1206; border:0; font-weight:700; padding:14px; border-radius:13px; }
.csm-card.sheet .upbtn:hover{ background:var(--gold-2); }

/* Content: caption editor + copy caption */
.cbcapbox{ width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:10px 12px; resize:vertical; min-height:72px; outline:none; }
.cbcapbox:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.cbrow.gap{ gap:8px; flex-wrap:wrap; }
.cbdl.ghost{ background:var(--bg-3); color:var(--ink-2); border:1px solid var(--line); cursor:pointer; }
.cbdl.ghost:hover{ background:var(--gold-soft); color:var(--gold-2); }

/* Content: upload sheet */
.uppick{ display:flex; flex-direction:column; align-items:center; gap:9px; background:var(--bg-3); border:1.5px dashed var(--line-2); border-radius:16px; padding:26px; cursor:pointer; text-align:center; }
.uppick:hover{ border-color:var(--gold); }
.upplus{ width:44px; height:44px; border-radius:50%; background:var(--gold-soft); color:var(--gold-2); display:grid; place-items:center; font-size:26px; }
.uptxt{ font-size:13.5px; color:var(--ink-2); }
.upthumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.upthumbs:empty{ display:none; }
.upth{ position:relative; width:56px; height:74px; border-radius:9px; overflow:hidden; background:#241c16; display:grid; place-items:center; }
.upth img{ width:100%; height:100%; object-fit:cover; }
.upth .glyph{ color:#fff; font-size:20px; }
.upth .upx{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(20,16,12,.72); color:#fff; font-size:12px; line-height:1; display:grid; place-items:center; cursor:pointer; }
.upcount{ text-align:right; font-size:11px; color:var(--ink-3); margin:6px 2px 4px; }
.uprow{ display:flex; gap:10px; }
.uprow .cbsi{ flex:1; }
.upplats{ display:flex; gap:8px; flex-wrap:wrap; }

/* content board: media reads well on a phone */
@media (max-width:720px){
  .cbmedia{ width:100%; max-width:250px; margin:0 auto; }
  .cbdet{ padding:16px; gap:16px; }
}

/* ---- five-tab bottom bar: keep the labels, give them room ---- */
@media (max-width:720px){
  .nav{ justify-content:space-around; }
  .nav button{ flex:1; gap:0; padding:8px 2px 5px; }
  .nav button svg{ width:23px; height:23px; }
  .nav button span:not(.badge){ display:block; font-size:10px; font-weight:600; margin-top:4px; letter-spacing:.005em; color:var(--ink-3); }
  .nav button.on span:not(.badge){ color:var(--gold-2); }
  .nav .badge{ position:absolute; top:2px; left:calc(50% + 6px); }
  .searchwrap{ display:none !important; }
  .segbar{ padding:2px 16px 0; }
  .segtitle{ font-size:23px; margin:2px 0 12px; }
  .topbar{ padding:14px 16px 2px; }
  .sectionhead{ margin:20px 0 12px; }
  .sectionhead .hint{ display:none; }
}

.nmstrong{ font-weight:600; }

/* ---- tables become cards on a phone (no more sideways scroll) ---- */
@media (max-width:720px){
  .tablewrap{ overflow:visible; }
  table.grid, table.grid tbody, table.grid tr, table.grid td{ display:block; width:100%; }
  table.grid thead{ display:none; }
  table.grid tr{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; margin-bottom:12px; padding:6px 4px 8px; box-shadow:var(--shadow); position:relative; }
  table.grid tbody tr:hover{ background:var(--bg-2); }
  table.grid td{ border:0 !important; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 14px; text-align:right; }
  table.grid td::before{ content:attr(data-label); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; flex:none; text-align:left; }
  table.grid td.rowhead{ display:block; text-align:left; padding:10px 14px 8px; border-bottom:1px solid var(--line) !important; margin-bottom:4px; }
  table.grid td.rowhead::before{ content:none; }
  table.grid td.rowact{ position:absolute; top:8px; right:8px; width:auto; padding:0; }
  table.grid td.rowact::before{ content:none; }
  table.grid td[data-label=""]::before{ content:""; }
  table.grid td .mini{ max-width:62%; }
  table.grid td.contact{ flex-direction:column; align-items:stretch; gap:6px; text-align:left; }
  table.grid td.contact .mini{ max-width:100%; width:100%; }
  td.contact .mini + .mini{ margin-top:0; }
}

/* desktop: a roomier reading column so nothing sprawls */
@media (min-width:900px){
  .view, .topbar, .segbar{ max-width:1180px; }
}

/* never let anything push the page sideways on a phone */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width:720px){
  .app{ max-width:100vw; overflow-x:hidden; }
  .main{ min-width:0; max-width:100vw; overflow-x:hidden; }
  .view{ max-width:100%; }
  /* the crucial fix: minmax(0,1fr) lets columns shrink instead of forcing overflow */
  .actions, .money{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; }
  .chkpis{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .cols, .cols.wide{ grid-template-columns:minmax(0,1fr); }
  .tgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .action{ padding:15px 15px 13px; min-width:0; }
  .action .n{ font-size:26px; }
  .action .lbl{ font-size:12.5px; }
  .stat{ padding:15px; min-width:0; }
  .stat .v{ font-size:22px; }
}
@media (max-width:380px){
  .actions, .money{ grid-template-columns:minmax(0,1fr); }
}

/* upload raw + editing commands */
.uploadrow{ display:flex; gap:10px; margin:2px 0 18px; }
.uploadrow .uploadbig{ margin:0; flex:1; min-width:0; }
.uploadbig.ghost{ background:var(--bg-2); color:var(--ink); border:1px solid var(--line-2); }
.uploadbig.ghost:hover{ background:var(--bg-2); border-color:var(--gold); }
@media (max-width:560px){ .uploadrow{ flex-direction:column; } }
.rawbtn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:10px; background:var(--bg-2); color:var(--ink-2); border:1px dashed var(--line-2); border-radius:14px; padding:12px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.rawbtn:hover{ color:var(--ink); border-color:var(--gold); }
.rawbtn svg{ flex:none; }
.erchips{ display:flex; flex-wrap:wrap; gap:8px; }
.erchip{ font:inherit; font-size:12.5px; font-weight:600; border-radius:20px; padding:8px 14px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-3); cursor:pointer; }
.erchip.on{ background:var(--gold-soft); color:var(--gold-2); border-color:rgba(185,141,81,.45); }
.erchip.mini{ font-size:11px; padding:4px 10px; cursor:default; background:var(--gold-soft); color:var(--gold-2); border-color:transparent; }
.erhook{ width:100%; margin-top:10px; }
.erused{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:12px 0 2px; }
.erused .ernote{ font-size:12.5px; color:var(--ink-2); font-style:italic; }
.edrev-single{ max-width:220px; margin:2px auto 0; }
.edrev-single .rvbox{ aspect-ratio:9/16; }
.upname{ display:inline-block; font-size:12px; color:var(--ink-2); margin-left:8px; }

/* remove a saved reel from the shelf */
.tplwrap{ position:relative; }
.tpldel{ position:absolute; top:8px; right:8px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(20,16,12,.5); color:#fff; font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2; padding:0; }
.tpldel:hover{ background:rgba(178,58,43,.92); }
/* delete a content item */
.cbdelitem{ align-self:flex-start; margin-top:10px; background:transparent; border:0; color:var(--ink-3); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 0; }
.cbdelitem:hover{ color:var(--crit); text-decoration:underline; text-underline-offset:2px; }

/* photo carousel in a content post */
.cbcarousel{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.cbcarousel::-webkit-scrollbar{ display:none; }
.cbslide{ position:relative; flex:0 0 82%; max-width:230px; aspect-ratio:4/5; border-radius:12px; background:#000 center/cover no-repeat; scroll-snap-align:center; border:1px solid var(--line); }
.cbslide .slide{ position:absolute; right:8px; top:8px; background:rgba(20,16,12,.62); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; }
@media (min-width:820px){ .cbslide{ flex-basis:200px; } }
.cbdet-l.zoomable{ cursor:zoom-in; }

/* ---- fullscreen slide viewer ---- */
body.lbox-open{ overflow:hidden; }
.lbox{ position:fixed; inset:0; z-index:9999; background:rgba(8,8,10,.93); display:flex; align-items:center; justify-content:center; }
.lbx-img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.6); cursor:zoom-out; }
.lbx-close{ position:absolute; top:16px; right:18px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.lbx-close:hover{ background:rgba(255,255,255,.26); }
.lbx-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.lbx-nav:hover{ background:rgba(255,255,255,.26); }
.lbx-nav.prev{ left:16px; }
.lbx-nav.next{ right:16px; }
.lbx-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; letter-spacing:.06em; background:rgba(0,0,0,.45); padding:6px 13px; border-radius:20px; }

/* ---- unified Create: chooser, composers, brand kit, fix-the-words ---- */
.iconbtn{ width:38px; height:38px; border-radius:11px; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2); display:grid; place-items:center; box-shadow:var(--shadow); flex:none; cursor:pointer; }
.iconbtn:hover{ color:var(--gold-2); border-color:var(--gold); }
.iconbtn svg{ width:18px; height:18px; }
@media (max-width:720px){ .iconbtn{ position:absolute; top:16px; right:16px; } }

.createfin{ display:block; width:100%; margin:11px 0 4px; background:transparent; border:0; color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:2px; cursor:pointer; text-align:center; }
.createfin:hover{ color:var(--gold-2); }

.chooserbody{ display:flex; flex-direction:column; gap:11px; padding-top:8px; }
.choice{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--bg-3); border:1px solid var(--line); border-radius:16px; padding:14px; font:inherit; cursor:pointer; }
.choice:hover{ border-color:var(--gold); background:var(--bg-2); }
.choi{ width:46px; height:46px; border-radius:13px; background:var(--gold-soft); color:var(--gold-2); display:grid; place-items:center; flex:none; }
.choi svg{ width:23px; height:23px; }
.chot{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.chot b{ font-size:16px; font-weight:700; color:var(--ink); }
.chot i{ font-style:normal; font-size:12.5px; color:var(--ink-2); line-height:1.35; }
.choarw{ margin-left:auto; color:var(--ink-3); font-size:20px; }

.opt{ font-size:11px; color:var(--ink-3); font-weight:500; text-transform:none; letter-spacing:0; }
.pastemini{ display:flex; align-items:center; gap:9px; background:var(--bg-2); border:1px solid var(--line); border-radius:13px; padding:8px 8px 8px 12px; box-shadow:var(--shadow); }
.pastemini .lk{ width:15px; height:15px; border:2px solid var(--ink-3); border-radius:5px; flex:none; }
.pastemini input{ flex:1; border:0; background:transparent; color:var(--ink); font-size:14px; outline:none; min-width:0; }
.pastemini .refuse{ background:var(--gold); color:#1a1206; border:0; border-radius:10px; padding:8px 14px; font-weight:700; font-size:13px; cursor:pointer; }
.refpicks{ display:flex; gap:7px; overflow-x:auto; margin-top:9px; scrollbar-width:none; }
.refpicks::-webkit-scrollbar{ display:none; }
.refpk{ width:42px; height:56px; border-radius:9px; background:#000 center/cover no-repeat; border:2px solid transparent; flex:none; cursor:pointer; }
.refpk:hover{ border-color:var(--gold); }
.refsel{ display:flex; align-items:center; gap:12px; background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:9px; }
.refthumb{ position:relative; width:44px; height:58px; border-radius:9px; background:#241c16 center/cover no-repeat; flex:none; }
.refthumb .tplay{ width:22px; height:22px; }
.refthumb .tplay::after{ border-left-width:7px; border-top-width:5px; border-bottom-width:5px; margin-left:2px; }
.refmeta{ flex:1; min-width:0; }
.refmeta b{ font-size:13.5px; color:var(--ink); display:block; }
.refmeta span{ font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.refclear{ width:26px; height:26px; border:0; background:var(--bg-2); color:var(--ink-3); border-radius:8px; font-size:16px; cursor:pointer; flex:none; }
.refclear:hover{ color:var(--crit); }

.words{ display:flex; align-items:flex-start; gap:8px; background:var(--good-soft); border-radius:12px; padding:10px 12px; font-size:12px; color:#4d6b57; margin-top:12px; line-height:1.4; }
.words svg{ flex:none; margin-top:1px; }
.words b{ color:#3c5745; }
[data-theme="dark"] .words{ color:#a8ccb5; } [data-theme="dark"] .words b{ color:#c7e4d0; }
.draftrow{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink); margin:12px 0 4px; cursor:pointer; }
.draftrow input{ width:18px; height:18px; accent-color:var(--gold); }
.bkfull{ width:100%; }
.bkrow{ display:flex; gap:14px; margin-top:2px; }
.bkrow > div{ flex:1; min-width:0; }
.bkcolor{ width:100%; height:40px; border:1px solid var(--line); border-radius:10px; background:var(--bg-3); padding:3px; cursor:pointer; }

/* ---- subscriptions + credits tracker ---- */
.subsum{ display:flex; gap:11px; margin-bottom:12px; }
.subsum .sumc{ flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:15px; padding:13px 15px; box-shadow:var(--shadow); }
.subsum .k{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; }
.subsum .v{ font-size:24px; font-weight:750; margin-top:4px; letter-spacing:-.01em; }
.subsum .v small{ font-size:13px; color:var(--ink-3); font-weight:600; }
.subsum .v.crit{ color:var(--crit); }
.subalerts{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.subalerts:empty{ display:none; }
.al{ font-size:11.5px; font-weight:700; border-radius:20px; padding:5px 11px; display:inline-flex; align-items:center; gap:6px; }
.al i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.al.low{ color:var(--crit); background:var(--crit-soft); }
.al.due{ color:var(--warn); background:var(--warn-soft); }
.al.un{ color:var(--ink-2); background:var(--bg-3); }
.sublist{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.subrow{ display:flex; align-items:center; gap:12px; background:var(--bg-2); border:1px solid var(--line); border-radius:15px; padding:12px; box-shadow:var(--shadow); cursor:pointer; }
.subrow:hover{ border-color:var(--gold); }
.subic{ width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; }
.submid{ flex:1; min-width:0; }
.subnm{ font-size:14.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:7px; }
.autob{ font-size:9px; font-weight:800; letter-spacing:.05em; color:var(--good); background:var(--good-soft); padding:2px 6px; border-radius:20px; }
.subsub{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.subbar{ height:6px; border-radius:4px; background:var(--bg-3); margin-top:7px; overflow:hidden; max-width:220px; }
.subbar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); }
.subbar i.lowb{ background:linear-gradient(90deg,var(--crit),#d9694f); }
.subright{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.subright .amt{ font-size:14px; font-weight:750; }
.subpill{ font-size:10.5px; font-weight:700; border-radius:20px; padding:3px 9px; white-space:nowrap; }
.subpill.ok{ color:var(--good); background:var(--good-soft); }
.subpill.low{ color:var(--crit); background:var(--crit-soft); }
.subpill.due{ color:var(--warn); background:var(--warn-soft); }
.subpill.un{ color:var(--ink-2); background:var(--bg-3); }
.connectrow{ display:flex; align-items:flex-start; gap:9px; background:var(--good-soft); border-radius:12px; padding:11px 12px; font-size:12px; color:#3c5745; margin-top:14px; line-height:1.4; }
.connectrow svg{ flex:none; margin-top:1px; }
.connectrow.off{ background:var(--bg-3); color:var(--ink-2); }
[data-theme="dark"] .connectrow{ color:#a8ccb5; }

.wordscard{ border-left:3px solid var(--gold); }
.edfixbtn{ width:100%; margin-top:12px; background:var(--gold); color:#1a1206; border:0; border-radius:13px; padding:13px; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); }
.edfixbtn:hover{ background:var(--gold-2); }

/* send the note as an edit request */
.cbnoterow{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.cbsendedit{ background:var(--gold); color:#1a1206; border:0; border-radius:12px; padding:11px 18px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); }
.cbsendedit:hover{ background:var(--gold-2); }
.cbsendedit:disabled{ opacity:.6; }
.cbeditingtag{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--warn); background:var(--warn-soft); border-radius:20px; padding:7px 13px; }
.cbeditingtag i{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ===== posting calendar (Content > Calendar) ===== */
.ctoggle{ display:inline-flex; gap:4px; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:14px; }
.cseg{ border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:9px; cursor:pointer; }
.cseg.on{ background:var(--bg-2); color:var(--ink); box-shadow:var(--shadow); }
.calhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.calkick{ text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; color:var(--gold-2); }
.calh{ margin:4px 0 0; font-size:22px; color:var(--ink); }
.calprog{ text-align:right; line-height:1.1; flex:none; }
.calprog b{ font-size:24px; color:var(--gold-2); }
.calprog span{ display:block; font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.calstart{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); margin-bottom:16px; }
.calstart input{ background:var(--bg-3); border:1px solid var(--line); border-radius:9px; color:var(--ink); padding:7px 10px; font:inherit; font-size:13px; }
.calnote{ color:var(--ink-3); font-size:12px; }
.calthis{ background:var(--raise); border:1px solid var(--line); border-radius:16px; padding:14px 14px 6px; margin-bottom:22px; box-shadow:var(--shadow); }
.calthis-h{ font-size:12px; font-weight:700; color:var(--gold-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.calallh{ font-size:12px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin:6px 0 10px; }
.calweek{ border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; background:var(--bg-2); }
.calweek-h{ width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; background:transparent; border:0; cursor:pointer; font:inherit; text-align:left; }
.calweek.open .calweek-h{ border-bottom:1px solid var(--line); }
.cw-n{ font-weight:700; color:var(--ink); font-size:14px; }
.cw-r{ flex:1; color:var(--ink-3); font-size:11.5px; letter-spacing:.03em; }
.cw-c{ flex:none; font-size:12px; font-weight:700; color:var(--gold-2); }
.calweek-b{ padding:8px 12px 12px; }
.pslot{ display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pslot:last-child{ border-bottom:0; }
.pslot.posted{ opacity:.62; }
.pslot-l{ flex:none; width:96px; display:flex; flex-direction:column; gap:6px; }
.pday{ font-size:10.5px; font-weight:700; color:var(--ink-2); letter-spacing:.04em; }
.plane{ display:inline-block; align-self:flex-start; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em; }
.plane.lteach{ background:var(--gold-soft); color:var(--gold-2); }
.plane.lfree{ background:var(--good-soft); color:var(--good); }
.plane.lsell{ background:var(--ink); color:var(--bg-2); }
.pslot-m{ flex:1; min-width:150px; }
.ptitle{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; }
.pchips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.pchip{ font-size:10.5px; color:var(--ink-2); background:var(--bg-3); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.pchip.fmt{ font-weight:700; color:var(--ink); }
.pchip.kw{ color:var(--gold-2); border-color:var(--gold-soft); font-weight:700; }
.pchip.rep{ color:var(--warn); border-color:var(--warn-soft); }
.pchip.seek{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pchip.tofilm{ color:var(--warn); border-color:var(--warn-soft); font-weight:700; }
.pslot-r{ flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.pmakebtn{ background:var(--gold); color:#1a1206; border:0; border-radius:10px; padding:9px 15px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.pmakebtn:hover{ background:var(--gold-2); }
/* live schedule calendar, mirrors the posting queue */
.calnote2{ font-size:12.5px; color:var(--ink-2); margin:2px 2px 16px; max-width:640px; line-height:1.5; }
.caldays{ display:flex; flex-direction:column; gap:16px; }
.calday-h{ display:flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:0 2px 8px; }
.calday.today .calday-h{ color:var(--gold-2); }
.calday-now{ font-size:10px; background:var(--gold-soft); color:var(--gold-2); border-radius:20px; padding:2px 9px; letter-spacing:.05em; }
.calday-b{ background:var(--raise); border:1px solid var(--line); border-radius:14px; padding:2px 16px; box-shadow:var(--shadow); }
.calday.past{ opacity:.6; }
.pslot[data-schedopen]{ cursor:pointer; }
.pslot[data-schedopen]:hover{ background:var(--bg-3); }
.ptag.failx{ color:var(--crit); background:var(--crit-soft); border-color:transparent; }
.plinkbtn{ background:transparent; border:0; color:var(--ink-3); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; padding:4px; }
.ptag{ font-size:12px; font-weight:700; padding:6px 11px; border-radius:20px; }
.ptag.done{ background:var(--good-soft); color:var(--good); }
.ptag.sched{ background:var(--gold-soft); color:var(--gold-2); }
@media (max-width:560px){
  .pslot-l{ width:auto; flex-direction:row; align-items:center; gap:8px; }
  .pslot-r{ width:100%; margin-left:0; }
}
.cbchange{ background:transparent; border:1px solid var(--line-2); color:var(--ink-2); border-radius:12px; padding:9px 14px; font:inherit; font-size:13px; cursor:pointer; }
.cbchange:hover{ border-color:var(--gold); color:var(--ink); }