:root {
  color-scheme: light;
  --bg-1: #0f2a33; --bg-2: #15434d; --bg-3: #1e5c66;
  --glass: rgba(236, 241, 246, .78); --glass-border: rgba(255,255,255,.75);
  --card: rgba(255,255,255,.82); --card-border: rgba(255,255,255,.9); --card-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.18);
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --faint: #94a3b8; --line: #e2e8f0; --line-2: #eef2f7;
  --blue: #2f6fed; --blue-2: #6ea0ff; --blue-soft: #dbe7ff; --green: #16a34a; --green-soft: #dcfce7; --red: #dc2626; --red-soft: #fee2e2;
  --amber: #d97706; --amber-soft: #fef3c7;
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; color: var(--ink);
  background: radial-gradient(1200px 700px at 15% 0%, var(--bg-3), transparent 60%),
              radial-gradient(900px 600px at 95% 100%, #2c6f7a, transparent 55%),
              linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed; min-height: 100vh; padding: 24px;
}
@media (max-width: 720px) { body { padding: 10px; } }
a { color: inherit; }

/* The glass window that holds the whole dashboard */
.window {
  max-width: 1560px; margin: 0 auto; min-height: calc(100vh - 48px);
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px;
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8);
  display: grid; grid-template-columns: 200px 1fr; overflow: hidden;
}
@media (max-width: 900px) { .window { grid-template-columns: 64px 1fr; } }
@media (max-width: 720px) { .window { grid-template-columns: 1fr; border-radius: 18px; } }

/* Sidebar */
.side {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 10px;
  border-right: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.25);
}
@media (max-width: 900px) { .side { align-items: center; padding: 16px 0; } }
@media (max-width: 720px) { .side { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.6); } }
.side .spacer { flex: 1; }
.ico {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); text-decoration: none;
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(16,24,40,.06); cursor: pointer;
}
.ico:hover { color: var(--ink-2); }
.ico.logo { background: linear-gradient(135deg, #2f6fed, #6ea0ff); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 6px 16px -6px rgba(47,111,237,.7); }
.ico.active { color: var(--blue); outline: 2px solid var(--blue-soft); }
.ico svg { width: 18px; height: 18px; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--line); border: 2px solid #fff; box-shadow: 0 1px 2px rgba(16,24,40,.1); }

/* Main */
.main { padding: 18px 22px 26px; min-width: 0; }
@media (max-width: 720px) { .main { padding: 14px; } }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topbar .title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.topbar .title .crumb { color: var(--faint); font-weight: 500; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.seg button { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.seg button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.right-tools, .left-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pillbtn, select.pillbtn {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-2); background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95);
  border-radius: 10px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.06); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.pillbtn:hover { background: #fff; }
.pillbtn:disabled { opacity: .6; cursor: default; }
.pillbtn svg { width: 14px; height: 14px; }
.pillbtn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.pillbtn.primary:hover { background: #2561d6; }
.syncing { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.syncing .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 14px; }
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid2, .grid4 { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 14px; align-content: start; }
.section { margin-top: 14px; }

.card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 16px 18px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hint { font-size: 11px; color: var(--faint); font-weight: 500; }
.more { color: var(--faint); font-weight: 700; letter-spacing: .1em; cursor: default; }
.kpi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.kpi .value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pill { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--line-2); color: var(--muted); white-space: nowrap; }
.pill.up { background: var(--green-soft); color: var(--green); }
.pill.down { background: var(--red-soft); color: var(--red); }
.pill.warn { background: var(--amber-soft); color: var(--amber); }
.kpi .ctx { font-size: 11px; color: var(--muted); }
.chart { position: relative; height: 120px; margin-top: 10px; }
.chart.tall { height: 170px; }
.chart.taller { height: 220px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 8px; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--sw, var(--blue)); }

/* Right column pieces */
.acct { display: flex; align-items: center; gap: 12px; }
.acct img, .acct .ph { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--line); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.acct .name { font-weight: 600; font-size: 14px; }
.acct .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bignum { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
.growth { margin-top: 4px; font-size: 12px; color: var(--muted); }
.growth b { color: var(--green); font-weight: 700; font-size: 15px; }
.tabs { display: flex; gap: 2px; padding: 3px; background: var(--line-2); border-radius: 9px; margin-bottom: 10px; }
.tabs button { flex: 1; font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; padding: 6px; border-radius: 7px; cursor: pointer; }
.tabs button.active { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(16,24,40,.1); }
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; }
.row:last-child { border-bottom: 0; }
.row .k { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.row .k b { color: var(--blue); font-weight: 700; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.row .v.up { color: var(--green); } .row .v.down { color: var(--red); } .row .v.flat { color: var(--faint); }
.row.total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 11px; }
.row.total .k { font-weight: 600; color: var(--ink); }

/* Horizontal bars (demographics) */
.bars { display: grid; gap: 7px; margin-top: 10px; }
.bar { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; }
.bar .n { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .t { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar .f { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.bar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Active-hours heatmap */
.heat { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; margin-top: 10px; font-size: 10px; color: var(--faint); }
.heat .d { font-weight: 600; color: var(--muted); align-self: center; }
.heat .c { aspect-ratio: 1; border-radius: 4px; background: rgba(47,111,237, var(--a, .06)); min-width: 0; }
.heat .c.top { outline: 2px solid var(--blue); outline-offset: -2px; }
.heat .h { text-align: center; }

/* Tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 12.5px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); user-select: none; }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--ink-2); }
th.sorted { color: var(--blue); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font-weight: 500; }
td.best { color: var(--green); font-weight: 700; }
.thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--line); display: inline-block; vertical-align: middle; margin-right: 10px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--line); display: inline-block; vertical-align: middle; margin-right: 8px; }
.caption { max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; color: var(--ink); text-decoration: none; font-weight: 500; }
.caption:hover { color: var(--blue); }
.tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.tag.feed { background: var(--line-2); color: var(--muted); }
.muted { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); padding: 18px; text-align: center; }
.err { color: var(--red); font-weight: 600; }
.note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.foot { margin-top: 14px; font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.foot a { color: var(--muted); }


/* Transcript cell: one line, click to expand */
.tx { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; cursor: pointer; color: var(--ink-2); font-weight: 400; }
.tx.open { white-space: normal; max-width: 520px; line-height: 1.45; }
.tx.none { color: var(--faint); cursor: default; }
.lang { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-left: 6px; vertical-align: middle; }

/* Date range pickers */
.dates { display: inline-flex; align-items: center; gap: 6px; }
.dates input[type=date] { font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.95); border-radius: 10px; background: rgba(255,255,255,.8); color: var(--ink-2); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.dates.active input[type=date] { border-color: var(--blue); }

/* Reels page */
.pill.muted { background: var(--line-2); color: var(--muted); }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; margin-bottom: 14px; border: 1px solid transparent; }
.banner.ok { background: var(--green-soft); color: #166534; border-color: #bbf7d0; }
.banner.warn { background: var(--amber-soft); color: #92400e; border-color: #fde68a; }
.banner.info { background: var(--blue-soft); color: #1e3a8a; border-color: #bfdbfe; }
.banner b { font-weight: 700; }
.search { font: inherit; font-size: 12px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.95); border-radius: 10px; background: rgba(255,255,255,.8); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.06); min-width: 220px; }
.search:focus { outline: 0; border-color: var(--blue); }
.count { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--line-2); color: var(--muted); margin-left: 5px; }
.tabs button.active .count { background: var(--blue-soft); color: var(--blue); }
.actions button { font: inherit; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.actions button:hover { border-color: var(--blue); color: var(--blue); }
.actions a { font-size: 11px; color: var(--muted); margin-left: 8px; }
.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.health .h { padding: 10px 12px; border-radius: 10px; background: var(--line-2); }
.health .h .label { font-size: 10px; }
.health .h .v { font-size: 18px; font-weight: 700; margin-top: 2px; }

/* Ideas, library, bell, recycle */
.side { position: relative; }
.ico.bell { position: relative; font: inherit; padding: 0; }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; line-height: 1; }
.bell-badge[hidden], .bell-panel[hidden] { display: none; }
.bell-panel { position: absolute; left: 206px; bottom: 60px; z-index: 60; width: 340px; max-width: calc(100vw - 90px); max-height: min(70vh, 460px); display: flex; flex-direction: column; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px -12px rgba(16,24,40,.35); overflow: hidden; }
@media (max-width: 900px) { .bell-panel { left: 70px; } }
@media (max-width: 720px) { .bell-panel { left: 10px; right: 10px; bottom: auto; top: 62px; width: auto; max-width: none; } }
.bell-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--muted); }
.bell-head b { color: var(--ink); font-size: 13px; }
.bell-head button { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; }
.bell-list { overflow-y: auto; }
.bn { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink-2); font-size: 12px; position: relative; }
.bn:last-child { border-bottom: 0; }
a.bn:hover { background: var(--line-2); }
.bn.unread { background: #f4f8ff; padding-left: 22px; }
.bn.unread::before { content: ""; position: absolute; left: 10px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.bn-title { display: block; font-weight: 600; color: var(--ink); }
.bn-body { display: block; margin-top: 2px; color: var(--muted); line-height: 1.4; }
.bn-time { display: block; margin-top: 3px; font-size: 10.5px; color: var(--faint); }
.bn-empty { padding: 22px 14px; text-align: center; color: var(--faint); font-size: 12px; }

/* Kanban board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kcol { background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.8); border-radius: 14px; padding: 10px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; }
.kcol.over { outline: 2px dashed var(--blue); outline-offset: -3px; background: rgba(219,231,255,.45); }
.khead { display: flex; align-items: center; gap: 7px; padding: 2px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.khead .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--faint)); }
.khead .count { margin-left: auto; }
.kcards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; flex: 1; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.05); cursor: grab; display: flex; gap: 9px; }
.kcard:hover { border-color: var(--blue-2); }
.kcard.dragging { opacity: .4; }
.kcard .kthumb { width: 44px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--line-2); flex: none; }
.kcard .kbody { min-width: 0; flex: 1; }
.kcard .ktitle { font-weight: 600; font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.kcard .kmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.kcard .ktx { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.4; font-style: italic; }
.tag.idea { background: var(--amber-soft); color: var(--amber); }
.kdrop { height: 3px; border-radius: 3px; background: var(--blue); margin: -4px 0; }
.kadd { display: flex; gap: 6px; }
.kadd input, .kadd select { font: inherit; font-size: 12px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); min-width: 0; flex: 1; }
.kadd select { flex: none; max-width: 96px; }
.kadd input:focus { outline: 0; border-color: var(--blue); }
.errbar { margin-bottom: 12px; padding: 9px 13px; border-radius: 10px; background: var(--red-soft); color: #991b1b; font-size: 12.5px; }
.errbar:empty { display: none; }

/* Library */
.libwrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
.libwrap.withpanel { grid-template-columns: 190px minmax(0, 1fr) 300px; }
@media (max-width: 1100px) { .libwrap, .libwrap.withpanel { grid-template-columns: 1fr; } }
.folders { display: flex; flex-direction: column; gap: 2px; }
.folders button { font: inherit; font-size: 12.5px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 9px; color: var(--ink-2); cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
.folders button:hover { background: var(--line-2); }
.folders button.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.folders .n { color: var(--faint); font-size: 11px; font-weight: 500; }
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 14px; text-align: center; color: var(--muted); font-size: 12px; margin-bottom: 12px; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.uploads { display: grid; gap: 6px; margin-bottom: 12px; }
.uprow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 54px; gap: 10px; align-items: center; font-size: 12px; }
.uprow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uprow .bar-t { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.uprow .bar-t i { display: block; height: 100%; width: 0; background: var(--blue); }
.uprow .st { text-align: right; color: var(--muted); font-size: 11px; }
.uprow.err .st { color: var(--red); }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.asset { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; }
.asset:hover, .asset.sel { border-color: var(--blue); }
.asset.sel { box-shadow: 0 0 0 2px var(--blue-soft); }
.asset .th { position: relative; aspect-ratio: 1; background: var(--line-2); }
.asset .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset .vb { position: absolute; right: 6px; bottom: 6px; background: rgba(15,23,42,.78); color: #fff; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.asset .meta { padding: 7px 9px; font-size: 11.5px; }
.asset .fn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset .sz { color: var(--faint); font-size: 10.5px; margin-top: 1px; }
.apanel img, .apanel video { width: 100%; max-height: 300px; object-fit: contain; border-radius: 10px; background: #0f172a; display: block; }
.apanel label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.apanel textarea, .apanel select { width: 100%; font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.apanel textarea { resize: vertical; min-height: 60px; }
.apanel .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.apanel .pillbtn.danger { color: var(--red); }
.apanel .msg { margin-top: 8px; font-size: 12px; color: var(--red); }
.apanel .msg.ok { color: var(--green); }

/* Recycle */
.rec-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-reason { white-space: normal; max-width: 260px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

/* Planner & composer */
.pill.blue { background: var(--blue-soft); color: var(--blue); }
.planner-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 1000px) { .planner-layout { grid-template-columns: 1fr; } }
.pl-box { margin-top: 8px; max-height: 360px; overflow: auto; }
.pl-hint { margin: 8px 0 0; }
.pl-item { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.pl-item:last-child { border-bottom: 0; }
.pl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pl-t { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-t a { text-decoration: none; } .pl-t a:hover { color: var(--blue); }
.pl-n { display: inline-block; min-width: 18px; color: var(--blue); }
.pl-btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pl-btns .pillbtn, .pl-add .pillbtn, .pl-slot .pillbtn { padding: 5px 9px; font-size: 11px; }
.pl-slot { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; }
.pl-slot .hint { flex: 1; }
.pl-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pl-x { border: 0; background: transparent; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.pl-x:hover { color: var(--red); }
.pl-add { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.pl-quota { margin-top: 8px; display: grid; gap: 4px; font-size: 12.5px; }

/* Calendar grid */
.cal-scroll { overflow-x: auto; margin-top: 8px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 6px; min-width: 920px; }
.cal-h { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 2px 4px; }
.cal-cell { background: rgba(255,255,255,.55); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; min-height: 112px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal.week .cal-cell { min-height: 360px; padding: 8px; }
.cal.month .cal-cell { max-height: 190px; overflow: auto; }
.cal-cell.other { opacity: .5; }
.cal-cell.today { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); background: #fff; }
.cal-cell.over { background: var(--blue-soft); border-color: var(--blue); }
.cal-dn { font-size: 11px; font-weight: 600; color: var(--muted); }
.cal-cell.today .cal-dn { color: var(--blue); }
.cal-pub { display: flex; align-items: center; gap: 6px; text-decoration: none; font-size: 11px; color: var(--ink-2); padding: 3px; border-radius: 8px; background: var(--green-soft); }
.cal-pub img, .cal-pub .ph { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: var(--line); flex: none; }
.cal-pub:hover { outline: 1px solid var(--green); }
.cal-post { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 7px; cursor: grab; box-shadow: 0 1px 2px rgba(16,24,40,.05); min-width: 0; overflow: hidden; }
.cal-post:hover { border-color: var(--blue); }
.cal-post.dragging { opacity: .4; }
.cal-post.st-cancelled { opacity: .6; }
.cal-post.st-published { cursor: pointer; }
.cal-ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 3px; min-width: 0; }
.cal-ph .pill, .cal-ph .tag { white-space: nowrap; }
.cal-ph .pill { font-size: 10px; padding: 2px 6px; }
.cal-pt { font-size: 11.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cal-slot { font: inherit; font-size: 11px; color: var(--muted); background: transparent; border: 1px dashed var(--faint); border-radius: 8px; padding: 4px 6px; text-align: left; cursor: pointer; }
.cal-slot:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

/* Composer modal */
body.cmp-open { overflow: hidden; }
.cmp-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; }
.cmp-panel { position: relative; width: min(1100px, 100%); height: min(90vh, 880px); background: #f4f7fa; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; }
.cmp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.cmp-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cmp-x { border: 0; background: var(--line-2); width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.cmp-x:hover { background: var(--line); color: var(--ink); }
.cmp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.cmp-left { overflow: auto; padding: 16px 20px 24px; display: grid; gap: 12px; align-content: start; }
.cmp-right { background: linear-gradient(160deg, #e8eef5, #dbe5ef); padding: 20px; overflow: auto; border-left: 1px solid var(--line); }
@media (max-width: 860px) { .cmp-body { grid-template-columns: 1fr; overflow: auto; } .cmp-left, .cmp-right { overflow: visible; } .cmp-right { order: -1; border-left: 0; } }
.cmp-fld { display: grid; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmp-fld .search, .cmp-fld select { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cmp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-ta { width: 100%; resize: vertical; line-height: 1.45; font-family: inherit; }
.cmp-count { font-size: 11.5px; color: var(--muted); margin-top: -6px; }
.cmp-hashrow, .cmp-mediabtns, .cmp-sched { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cmp-groups { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.cmp-grp { display: grid; grid-template-columns: 1fr; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.cmp-grp .search { min-width: 0; width: 100%; }
.cmp-grpbtns { display: flex; gap: 6px; }
.cmp-media { display: flex; gap: 8px; flex-wrap: wrap; min-height: 70px; padding: 8px; border: 1px dashed var(--faint); border-radius: 12px; background: rgba(255,255,255,.6); }
.cmp-media.over { border-color: var(--blue); background: var(--blue-soft); }
.cmp-empty { color: var(--muted); font-size: 12px; align-self: center; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cmp-athumb { position: relative; width: 74px; height: 98px; border-radius: 10px; overflow: hidden; background: var(--line); }
.cmp-athumb.small { width: 44px; height: 58px; display: block; }
.cmp-athumb img, .cmp-athumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #cbd5e1, #e2e8f0); }
.cmp-vid { position: absolute; right: 4px; bottom: 4px; font-size: 9px; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 1px 4px; }
.cmp-n { position: absolute; left: 4px; top: 4px; font-size: 10px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; min-width: 16px; text-align: center; padding: 1px 4px; }
.cmp-abtns { display: flex; justify-content: center; gap: 2px; margin-top: 3px; }
.cmp-abtns button { border: 0; background: var(--line-2); border-radius: 6px; width: 22px; height: 20px; cursor: pointer; color: var(--ink-2); font-size: 13px; line-height: 1; }
.cmp-abtns button:hover { background: var(--blue-soft); color: var(--blue); }
.cmp-cover { display: flex; gap: 10px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.cmp-cv { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.cmp-up { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cmp-upn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .15s; }
.cmp-sec { border-top: 1px solid var(--line); padding-top: 12px; }
.cmp-thread, .cmp-events { display: grid; gap: 8px; margin-top: 8px; }
.cmp-cm { background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap; }
.cmp-cmh { display: flex; justify-content: space-between; margin-bottom: 2px; }
.cmp-addcm { display: grid; gap: 6px; margin-top: 8px; justify-items: start; }
.cmp-ev { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.cmp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2); }
.cmp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: #fff; }
.cmp-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cmp-btns .pillbtn { background: #fff; border-color: var(--line); }
.cmp-btns .pillbtn.primary { background: var(--blue); border-color: var(--blue); }
.cmp-btns .pillbtn.danger { color: var(--red); }
.cmp-msg { font-size: 12px; color: var(--muted); min-height: 16px; }
.cmp-msg.err { color: var(--red); font-weight: 600; }
.cmp-msg.ok { color: var(--green); font-weight: 600; }

/* Phone preview */
.cmp-phone { width: 250px; margin: 0 auto; background: #fff; border: 7px solid #0f172a; border-radius: 32px; overflow: hidden; position: relative; box-shadow: 0 20px 40px -18px rgba(15,23,42,.6); }
.cmp-notch { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 14px; background: #0f172a; border-radius: 0 0 10px 10px; }
.cmp-screen { position: relative; width: 100%; background: #1e293b; overflow: hidden; }
.cmp-screen.r916 { aspect-ratio: 9 / 16; }
.cmp-screen.r11 { aspect-ratio: 1 / 1; background: #cbd5e1; }
.cmp-screen.story { background: linear-gradient(160deg, #6366f1, #ec4899); }
.cmp-screen img, .cmp-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-grad { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.cmp-over { position: absolute; left: 10px; right: 46px; bottom: 12px; color: #fff; font-size: 11px; z-index: 2; }
.cmp-cap { margin-top: 3px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.cmp-storybar { position: absolute; top: 18px; left: 10px; right: 10px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); z-index: 2; }
.cmp-storybar i { display: block; width: 35%; height: 100%; background: #fff; border-radius: 2px; }
.cmp-feedhead { display: flex; align-items: center; gap: 7px; padding: 20px 10px 8px; font-size: 11px; }
.cmp-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ec4899); }
.cmp-badge { position: absolute; z-index: 2; right: 8px; top: 8px; background: rgba(15,23,42,.7); color: #fff; font-size: 10px; border-radius: 999px; padding: 2px 7px; }
.cmp-dots { display: flex; justify-content: center; gap: 4px; padding: 8px 0 2px; }
.cmp-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.cmp-dots i.on { background: var(--blue); }
.cmp-feedcap { padding: 6px 10px 14px; font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }

/* Library picker inside the composer */
.cmp-lib { position: absolute; inset: 0; z-index: 10; background: rgba(15,23,42,.45); display: grid; place-items: center; padding: 24px; }
.cmp-libp { background: #fff; border-radius: 16px; width: min(820px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px -12px rgba(0,0,0,.5); }
.cmp-libh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cmp-libgrid { padding: 14px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; align-content: start; min-height: 160px; }
.cmp-lt { cursor: pointer; border-radius: 12px; padding: 4px; border: 2px solid transparent; }
.cmp-lt:hover { background: var(--line-2); }
.cmp-lt.sel { border-color: var(--blue); background: var(--blue-soft); }
.cmp-lt .cmp-athumb { width: 100%; height: 120px; }
.cmp-ltn { font-size: 10.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cmp-panel [hidden] { display: none !important; }
/* the library block defines a bare .up row class; keep the green pill an inline pill */
.pill.up { display: inline-block; grid-template-columns: none; gap: 0; font-size: 11px; }

/* UX pass */
.side .nav { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 12px; color: var(--muted); text-decoration: none; font: inherit; font-size: 13px; font-weight: 500; background: transparent; border: 0; cursor: pointer; position: relative; text-align: left; min-width: 0; }
.side .nav:hover { background: rgba(255,255,255,.55); color: var(--ink-2); }
.side .nav.active { background: rgba(255,255,255,.85); color: var(--blue); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.side .nav .ico { flex: none; outline: 0; }
.side .nav.active .ico { color: var(--blue); outline: 2px solid var(--blue-soft); }
.side .nav .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .nav.logo { color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.side .nav.me { cursor: default; margin-top: 4px; }
.side .nav.me:hover { background: transparent; }
.side .nav.me .lbl { color: var(--ink-2); font-weight: 600; font-size: 12px; }
.side .nav .avatar-sm { flex: none; margin: 2px 2px 2px 2px; }
.side .nav.bell .bell-badge { top: 2px; left: 28px; right: auto; }
.side .nav.bell .ico { position: static; }
@media (max-width: 900px) {
  .side .nav { justify-content: center; padding: 3px; }
  .side .nav .lbl { display: none; }
  .side .nav.bell .bell-badge { left: auto; right: 0; }
}
@media (max-width: 720px) { .side .nav { padding: 0; } }

.dates { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dates input[type=date] { font: inherit; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); border-radius: 10px; padding: 7px 9px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }

.legend .nf { --sw: #f59e0b; }
.splitnote { font-size: 12px; color: var(--ink-2); margin: 6px 0 0; }
.splitnote b { color: #b45309; }
.kpi.net .value { font-size: 34px; }
.kpi.net .value.pos { color: var(--green); }
.kpi.net .value.neg { color: var(--red); }
.chart.huge { height: 280px; }

.besttimes { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; }
.besttimes .bt-row { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.besttimes .bt-row:last-child { border-bottom: 0; }
.besttimes .bt-d { font-weight: 600; color: var(--muted); }
.besttimes .bt-h { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.besttimes .bt-h b { color: var(--blue); font-weight: 800; }
.besttimes .bt-h .sep { color: var(--faint); margin: 0 6px; }
.bt-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .bt-layout { grid-template-columns: 1fr; } }
.seg.small button { padding: 5px 9px; font-size: 10.5px; }

.settings-line { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted); }
.settings-line b { font-weight: 700; }
.settings-line b.on { color: var(--green); }
.settings-line b.off { color: var(--faint); }
a.tx-now { font-size: 11px; font-weight: 600; color: var(--blue); text-decoration: none; margin-left: 4px; }
a.tx-now:hover { text-decoration: underline; }
.rec-hook { max-width: 260px; white-space: normal; font-weight: 600; }

/* Google Drive */
.drv-panel { width: min(900px, 100%); }
.drv-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 20px 20px; }
.drv-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.drv-crumbs { flex: 1; min-width: 160px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.drv-crumbs button { font: inherit; background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; }
.drv-crumbs .sep { color: var(--muted); }
.drv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; align-content: start; }
.drv-item { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.drv-item:hover { border-color: var(--blue); }
.drv-item.sel { border-color: var(--blue); background: var(--blue-soft); }
.drv-th { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--line-2); display: grid; place-items: center; font-size: 30px; overflow: hidden; }
.drv-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drv-th .vb { position: absolute; left: 6px; bottom: 6px; font-size: 10px; background: rgba(15,23,42,.75); color: #fff; padding: 2px 6px; border-radius: 6px; }
.drv-nm { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drv-sz { font-size: 10.5px; color: var(--muted); }
.drv-add { margin-top: 3px; font-size: 11px; }
.drv-note { background: var(--line-2); border-radius: 12px; padding: 16px; font-size: 13px; line-height: 1.55; }
.drv-note code { background: #fff; padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.drv-err { color: #c0362c; font-size: 12.5px; margin-bottom: 10px; }
.drvhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.drv [hidden], .drvhead [hidden], #drivePane[hidden], .libwrap[hidden], .right-tools [hidden] { display: none !important; }

/* Workflow v2 */
.cmp-btns .pillbtn.accent { background: #16a34a; border-color: #16a34a; color: #fff; }
.wf-error { background: var(--red-soft); color: var(--red); border: 1px solid #fecaca; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.wf-error[hidden] { display: none; }
.wf-trial { display: flex; flex-direction: column; gap: 2px; }
.wf-trial[hidden] { display: none; }
.wf-settings { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: rgba(255,255,255,.6); margin-top: 10px; }
.wf-settings summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.wf-settings > div { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.wf-chk { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.wf-day { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.55); }
.wf-day[hidden] { display: none; }
.wf-hour { display: grid; grid-template-columns: 56px 1fr; min-height: 52px; border-top: 1px solid var(--line-2); }
.wf-hour:first-child { border-top: 0; }
.wf-hour.over { background: var(--blue-soft); }
.wf-hour.now { box-shadow: inset 3px 0 0 var(--blue); }
.wf-hl { font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 6px; }
.wf-hb { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; align-items: flex-start; min-width: 0; }
.wf-hb .cal-post { width: 220px; }
.wf-cerr { font-size: 10.5px; font-weight: 700; color: var(--red); padding: 2px 8px 0; }

/* V3 models */
.mdl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 14px; align-items: start; }
.mdl-card { display: flex; flex-direction: column; gap: 14px; }
.mdl-card.fresh { animation: mdl-flash 1.6s ease-out; }
@keyframes mdl-flash { 0% { box-shadow: 0 0 0 3px var(--blue-2), var(--card-shadow); } 100% { box-shadow: 0 0 0 3px rgba(110,160,255,0), var(--card-shadow); } }
.mdl-top { display: flex; align-items: center; gap: 12px; }
.mdl-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--line); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16,24,40,.12); flex: none; display: block; }
.mdl-av.ph { display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(135deg, #2f6fed, #6ea0ff); text-transform: uppercase; }
.mdl-id { min-width: 0; flex: 1; }
.mdl-user { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.mdl-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-user:hover { color: var(--blue); }
.mdl-user svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.mdl-user:hover svg { color: var(--blue); }
.mdl-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mdl-stat { padding: 10px 12px; border-radius: 12px; background: var(--line-2); min-width: 0; }
.mdl-stat .label { font-size: 10px; white-space: nowrap; }
.mdl-stat b { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-token { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 12px; line-height: 1.45; }
.mdl-token.st-ok { border-color: #bbf7d0; background: #f3fcf6; }
.mdl-token.st-expiring, .mdl-token.st-sync_error, .mdl-token.st-missing { border-color: #fde68a; background: #fffaf0; }
.mdl-token.st-blocked, .mdl-token.st-expired { border-color: #fecaca; background: #fff5f5; }
.mdl-token .pill { flex: none; margin-top: 1px; }
.mdl-token-detail { min-width: 0; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.mdl-token-detail.long { cursor: pointer; }
.mdl-token-detail.open { display: block; }
.mdl-token .pillbtn { flex: none; margin-left: auto; align-self: center; padding: 5px 10px; font-size: 11px; }
.mdl-links:empty { display: none; }
.mdl-sec .card-head { min-height: 18px; }
.mdl-msg { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mdl-msg.ok { color: var(--green); }
.mdl-msg.err { color: var(--red); }
.mdl-tgt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 10px; }
@media (max-width: 460px) { .mdl-tgt { grid-template-columns: 1fr; } }
.mdl-tgt label { display: grid; grid-template-columns: minmax(0, 1fr) 62px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.mdl-tgt label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdl-tgt input { font: inherit; font-size: 13px; width: 62px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: center; }
.mdl-tgt input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.mdl-tgt input.dirty { border-color: var(--blue-2); background: #f4f8ff; }
.mdl-tgt input.bad { border-color: var(--red); background: var(--red-soft); }
.mdl-tgt-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mdl-tgt-foot .pillbtn, .mdlm-foot .pillbtn { padding: 7px 12px; }
.mdl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.mdl-actions .push { margin-left: auto; }
.mdl-actions .pillbtn.danger, .mdlm-foot .pillbtn.danger { color: var(--red); }
.mdl-actions .pillbtn.danger:hover { background: var(--red-soft); border-color: #fecaca; }
.mdlm-foot .pillbtn.danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.mdlm-foot .pillbtn.danger-solid:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }

/* Add model */
.mdl-add { margin-bottom: 14px; }
.mdl-add[hidden], .mdl-add [hidden] { display: none; }
.mdl-add-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mdl-add .search, .mdl-adv select, .mdl-adv input { border-color: var(--line); background: #fff; }
.mdl-add-row .search { flex: 1; min-width: 240px; }
.mdl-add .search.masked { -webkit-text-security: disc; }
.mdl-adv { margin-top: 10px; font-size: 12.5px; }
.mdl-adv summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.mdl-adv-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 560px) { .mdl-adv-row { grid-template-columns: 1fr; } }
.mdl-adv-row .search { min-width: 0; }
.mdl-result { margin-top: 12px; }
.mdl-result:empty { display: none; }
.mdl-result .banner { margin-bottom: 0; flex-wrap: wrap; }
.mdl-result .banner .pillbtn { margin-left: auto; }
.mdl-show { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; }

/* Modal (Models page delete confirmation, To-do targets) */
body.mdlm-open { overflow: hidden; }
.mdlm-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; }
.mdlm-overlay[hidden] { display: none; }
.mdlm-panel { width: min(520px, 100%); max-height: min(90vh, 720px); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; }
.mdlm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mdlm-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdlm-x { flex: none; border: 0; background: var(--line-2); width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.mdlm-x:hover { background: var(--line); color: var(--ink); }
.mdlm-body { padding: 16px 18px; overflow: auto; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.mdlm-body p { margin: 0 0 10px; }
.mdlm-body ul { margin: 0 0 12px; padding-left: 18px; }
.mdlm-body li { margin: 2px 0; }
.mdlm-body .note { margin-top: 14px; }
.mdlm-confirm { display: grid; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mdlm-confirm input { font: inherit; font-size: 13px; font-weight: 500; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.mdlm-confirm input:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.mdlm-err { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--red-soft); color: #991b1b; font-size: 12.5px; }
.mdlm-err:empty { display: none; }
.mdlm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); background: #f8fafc; }
.mdlm-foot .left { margin-right: auto; font-size: 12px; }
.mdlm-foot .left a { color: var(--blue); text-decoration: none; font-weight: 600; }
.mdlm-foot .left a:hover { text-decoration: underline; }
.mdlm-foot .mdl-msg { min-height: 16px; }
.mdlm-panel .mdl-tgt { grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.mdlm-panel .mdl-tgt label { grid-template-columns: minmax(0, 1fr) 70px; font-size: 13px; }
.mdlm-panel .mdl-tgt input { width: 70px; }
/* end V3 models */

/* V3 overview */
/* Handbook links: the small ⓘ next to labels and table headers */
a.info { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--faint); text-decoration: none; vertical-align: 1px; cursor: help; }
a.info:hover, a.info:focus-visible { color: var(--blue); }
th a.info { font-size: 11px; margin-left: 3px; }

/* Status column: status pill + Viral pill + error flags */
.stp { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; }
a.pill { text-decoration: none; }
a.pill:hover { filter: brightness(.94); }
.pill.viral { background: var(--green); color: #fff; }
.pill.viral.pending { background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.tabs button .count.good { background: var(--green-soft); color: var(--green); }
.tabs button.active .count.good { background: var(--green-soft); color: var(--green); }

/* Reels table: the action buttons stay visible while the table scrolls sideways */
.scroll .sticky-r { position: sticky; right: 0; z-index: 1; background: #f4f7fa; box-shadow: -10px 0 10px -10px rgba(16, 24, 40, .2); }

/* Overview right column: Signals card */
.sig-group { margin: 12px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sig-group:first-of-type { margin-top: 8px; }
.sig-group.good { color: var(--green); }
.sig-group.bad { color: var(--red); }
.sig { display: grid; gap: 2px; min-width: 0; margin-top: 6px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; color: var(--ink-2); font-size: 12px; line-height: 1.35; text-decoration: none; }
.sig.good { background: var(--green-soft); border-color: #bbf7d0; }
.sig.bad { background: var(--red-soft); border-color: #fecaca; }
a.sig:hover { box-shadow: 0 0 0 2px rgba(47, 111, 237, .2); }
.sig-t { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sig-d { color: var(--ink-2); font-size: 11.5px; overflow-wrap: anywhere; }
.sig-d.clamp { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sig-more { display: block; margin-top: 6px; color: var(--blue); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.sig-more:hover { text-decoration: underline; }
.sig-ok { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Overview right column: Breakdown / Live tabs */
.tabs button:disabled { opacity: .5; cursor: default; }
.live-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.live-bar button { padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--blue); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.live-bar button:hover { background: var(--blue-soft); }
.live-bar button:disabled { opacity: .5; cursor: default; }
.live-pulse { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); vertical-align: 1px; }
.live-pulse.stale { background: var(--faint); box-shadow: 0 0 0 3px var(--line-2); }
.live-err { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--amber-soft); color: #92400e; font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.live-err.bad { background: var(--red-soft); color: #991b1b; }
.live-list { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 2px; }
.live-grp { margin: 6px 0 -2px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.live-grp:first-child { margin-top: 0; }
.live-item { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .7); }
.live-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.live-top .thumb { flex: none; width: 34px; height: 34px; margin: 0; }
.live-t { flex: 1; min-width: 0; }
.live-cap { display: block; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.live-cap:hover { color: var(--blue); }
.live-sub { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.live-r { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; }
.live-age { color: var(--ink-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.live-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.lm { min-width: 0; }
.lm .lk { display: block; color: var(--faint); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lm b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.ld { display: block; min-height: 13px; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ld.up { color: var(--green); }
.ld.down { color: var(--red); }
.ld.zero { color: var(--faint); font-weight: 500; }
.live-stored { padding: 0 5px; border-radius: 999px; background: var(--line-2); color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: help; }

/* Handbook */
.hb-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .hb-layout { grid-template-columns: 1fr; } .hb-toc { position: static; max-height: none; } }
/* overflow: clip (instead of hidden) keeps the rounded corners but lets the contents stick to the viewport */
.hb-page .window { overflow: clip; }
.hb-toc { position: sticky; top: 12px; max-height: calc(100vh - 48px); overflow: auto; }
.hb-toc h4 { margin: 14px 0 4px; color: var(--faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hb-toc h4:first-child { margin-top: 0; }
.hb-toc a { display: block; padding: 3px 6px; border-radius: 6px; color: var(--ink-2); font-size: 12px; text-decoration: none; }
.hb-toc a:hover { background: var(--line-2); color: var(--blue); }
.hb-toc [hidden] { display: none; }
.hb-main { display: grid; gap: 14px; min-width: 0; }
.hb-group { display: grid; gap: 12px; }
.hb-group[hidden], .hb[hidden] { display: none; }
.hb-group > h2 { margin: 12px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hb-intro { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.hb { scroll-margin-top: 16px; }
.hb:target { box-shadow: 0 0 0 2px var(--blue), var(--card-shadow); }
.hb h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 15px; letter-spacing: -.01em; }
.hb h3 .hb-a { color: var(--faint); font-size: 12px; font-weight: 500; text-decoration: none; opacity: 0; }
.hb:hover h3 .hb-a, .hb:target h3 .hb-a, .hb h3 .hb-a:focus-visible { opacity: 1; }
.hb .hb-where { margin: 0 0 8px; color: var(--muted); font-size: 11.5px; }
.hb dl { display: grid; gap: 9px; margin: 0; }
.hb dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hb dd { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.hb dd ul { margin: 4px 0 0; padding-left: 18px; }
.hb dd li { margin: 2px 0; }
.hb code { padding: 1px 5px; border-radius: 5px; background: var(--line-2); font-size: 12px; }
.hb a { color: var(--blue); }
.hb .pill { margin-right: 2px; }
.hb-empty { padding: 24px; color: var(--muted); text-align: center; }
.hb-count { color: var(--faint); font-size: 11px; font-weight: 500; }

/* V3 inbox */
/* Two-pane inbox page (public/inbox.html) and the comments drawer (public/comments-drawer.js). Prefixes: ibx-, cdr- */
.banner.bad { background: var(--red-soft); color: #991b1b; border-color: #fecaca; }
.ibx-banners { display: grid; gap: 10px; margin-bottom: 14px; }
.ibx-banners:empty { display: none; }
.ibx-banners .banner { margin-bottom: 0; align-items: flex-start; line-height: 1.5; }
.ibx-banners .banner > span { flex: 1; min-width: 0; }
.ibx-banners .banner .pillbtn { flex: none; padding: 6px 10px; font-size: 11.5px; }
.ibx-detail { margin-top: 6px; font-size: 11.5px; opacity: .85; }
.ibx-detail summary { cursor: pointer; font-weight: 600; }
.ibx-detail code { display: block; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.65); white-space: pre-wrap; word-break: break-word; font-size: 11.5px; }
.ibx-note { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.ibx-note:empty { display: none; }

.ibx { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 14px; height: max(540px, calc(100vh - 250px)); min-height: 0; }
.ibx > .card { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
@media (max-width: 900px) {
  .ibx { grid-template-columns: 1fr; height: auto; }
  .ibx > .card { height: max(520px, calc(100vh - 230px)); }
  .ibx .ibx-thread { display: none; }
  .ibx.show-thread .ibx-feed { display: none; }
  .ibx.show-thread .ibx-thread { display: flex; }
}
/* phones: the shared layout lets the sidebar row push the page wider than the screen; keep the inbox inside it */
@media (max-width: 720px) {
  .page-inbox .window { grid-template-columns: minmax(0, 1fr); }
  .page-inbox .side { overflow-x: auto; scrollbar-width: none; }
  .page-inbox .side .spacer { display: none; }
}
.ibx-back { display: none; }
@media (max-width: 900px) { .ibx-back { display: inline-flex; } }

/* feed */
.ibx-filters { display: grid; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line-2); }
.ibx-filters .tabs { margin: 0; }
.ibx-filters-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ibx-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; }
.ibx-chk input { accent-color: var(--blue); width: 15px; height: 15px; margin: 0; }
.ibx-list { flex: 1; min-height: 0; overflow-y: auto; }
.ibx-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 11px 14px 11px 18px; cursor: pointer; }
.ibx-item:hover { background: rgba(255,255,255,.75); }
.ibx-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ibx-item.active { background: #eef4ff; box-shadow: inset 3px 0 0 var(--blue); }
.ibx-item.unread .ibx-name { font-weight: 700; color: var(--ink); }
.ibx-item.unread::before { content: ""; position: absolute; left: 6px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.ibx-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; color: #fff; background: var(--av, #94a3b8); box-shadow: 0 1px 2px rgba(16,24,40,.15); }
.ibx-av.me { background: linear-gradient(135deg, #2f6fed, #6ea0ff); }
.ibx-main { min-width: 0; display: grid; gap: 2px; }
.ibx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ibx-name { font-weight: 600; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ibx-time { flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ibx-snip { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ibx-latest { font-size: 11.5px; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.ibx-meta .tag { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.tag.dm { background: #ede9fe; color: #6d28d9; }
.ibx-acct { font-weight: 600; color: var(--ink-2); }
.ibx-on { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-win { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--green-soft); color: var(--green); white-space: nowrap; }
.ibx-win.low { background: var(--amber-soft); color: var(--amber); }
.ibx-win.closed { background: var(--line-2); color: var(--muted); }
.ibx-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--line); flex: none; }
.ibx-more { padding: 12px; text-align: center; font-size: 11.5px; color: var(--muted); }
.ibx-empty { padding: 34px 22px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.ibx-empty b { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 4px; }

/* thread */
.ibx-th-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,.55); }
.ibx-th-head:empty { display: none; }
.ibx-post { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ibx-post img, .ibx-post .ph { width: 44px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--line); flex: none; }
.ibx-post-t { min-width: 0; }
.ibx-post-cap { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ibx-post-meta { margin-top: 3px; font-size: 11px; color: var(--muted); }
.ibx-post-meta a { color: var(--blue); text-decoration: none; font-weight: 600; }
.ibx-post-meta a:hover { text-decoration: underline; }
.ibx-th-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ibx-th-who b { font-size: 14px; }
.ibx-th-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg, rgba(244,247,250,.7), rgba(244,247,250,.25)); }
.ibx-empty-thread { margin: auto; text-align: center; color: var(--muted); max-width: 320px; line-height: 1.55; }
.ibx-empty-thread svg { width: 40px; height: 40px; color: var(--faint); margin-bottom: 8px; }
.ibx-daysep { align-self: center; margin: 8px 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ibx-row { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.ibx-row.me { align-items: flex-end; }
.ibx-row.reply { margin-left: 30px; }
.ibx-row.reply.me { margin-left: 0; margin-right: 0; }
.ibx-b { max-width: min(82%, 560px); padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.ibx-row.me .ibx-b { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 14px 14px 4px 14px; }
.ibx-row.top .ibx-b { max-width: min(92%, 640px); border-radius: 14px; }
.ibx-row.hid .ibx-b { opacity: .6; border-style: dashed; }
.ibx-bh { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; }
.ibx-row.me .ibx-bh { color: rgba(255,255,255,.9); }
.ibx-bm { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 10.5px; color: var(--faint); }
.ibx-bm button { font: inherit; font-size: 10.5px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; }
.ibx-bm button:hover { color: var(--blue); }
.ibx-bm button.danger:hover { color: var(--red); }
.ibx-bm button:disabled { opacity: .5; cursor: default; }

.ibx-compose { display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line-2); background: rgba(255,255,255,.75); }
.ibx-compose:empty { display: none; }
.ibx-compose textarea { width: 100%; min-width: 0; resize: vertical; min-height: 54px; max-height: 220px; line-height: 1.45; font-family: inherit; background: #fff; border-color: var(--line); }
.ibx-compose textarea:disabled { background: var(--line-2); color: var(--muted); cursor: not-allowed; }
.ibx-crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ibx-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ibx-count.over { color: var(--red); font-weight: 700; }
.ibx-cmsg { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.ibx-cmsg.err { color: var(--red); font-weight: 600; }
.ibx-cmsg.ok { color: var(--green); font-weight: 600; }
.ibx-cnote { font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; background: var(--line-2); color: var(--ink-2); }
.ibx-cnote.warn { background: var(--amber-soft); color: #92400e; }
.ibx-cnote.bad { background: var(--red-soft); color: #991b1b; }

/* comments drawer (window.openComments) */
body.cdr-open { overflow: hidden; }
.cdr-overlay { position: fixed; inset: 0; z-index: 1050; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: flex-end; animation: cdr-fade .15s ease-out; }
.cdr-panel { position: relative; width: min(560px, 100%); height: 100%; background: #f4f7fa; border-radius: 20px 0 0 20px; box-shadow: -30px 0 80px -20px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; outline: 0; animation: cdr-slide .2s ease-out; }
@keyframes cdr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdr-slide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) { .cdr-panel { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .cdr-overlay, .cdr-panel { animation: none; } }
.cdr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.cdr-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdr-btns { display: flex; align-items: center; gap: 8px; }
.cdr-post { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.cdr-post:empty { display: none; }
.cdr-post img, .cdr-post .ph { width: 44px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--line); flex: none; }
.cdr-notice { margin: 12px 20px 0; }
.cdr-notice:empty { display: none; }
.cdr-notice .banner { margin-bottom: 0; align-items: flex-start; line-height: 1.5; }
.cdr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 24px; display: grid; gap: 12px; align-content: start; }
.cdr-thread { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.cdr-thread.hid { opacity: .75; border-style: dashed; }
.cdr-c { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.cdr-c .ibx-av { width: 30px; height: 30px; font-size: 12px; }
.cdr-ch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; }
.cdr-ch b { font-weight: 700; }
.cdr-ct { margin-top: 2px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cdr-ca { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; color: var(--faint); }
.cdr-ca button { font: inherit; font-size: 11px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; }
.cdr-ca button:hover { color: var(--blue); }
.cdr-ca button.danger:hover { color: var(--red); }
.cdr-ca button:disabled { opacity: .5; cursor: default; }
.cdr-replies { margin: 10px 0 0 40px; padding-left: 12px; border-left: 2px solid var(--line-2); display: grid; gap: 10px; }
.cdr-replies .cdr-c.me .cdr-ct { color: var(--ink); }
.cdr-replies .cdr-c.me { background: #f4f8ff; border-radius: 10px; padding: 6px 8px; margin-left: -8px; }
.cdr-rbox { display: grid; gap: 8px; margin: 10px 0 0 40px; }
.cdr-rbox[hidden] { display: none; }
.cdr-rbox textarea { width: 100%; min-width: 0; resize: vertical; min-height: 48px; line-height: 1.45; font-family: inherit; }
.cdr-rrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdr-rrow .ibx-cmsg { flex: 1; }
.cdr-empty { padding: 30px 10px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
/* end V3 inbox */

/* V3 composer */
/* "On Instagram" / "Internal" badges, the legend, help lines */
.cmp-lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-bdg { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; line-height: 1.55; padding: 0 7px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; }
.cmp-bdg.ig { background: var(--blue-soft); color: var(--blue); }
.cmp-bdg.int { background: var(--line-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11.5px; color: var(--muted); padding: 8px 12px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 10px; }
.cmp-legend .cmp-bdg { font-size: 10px; }
.cmp-legend .cmp-bdg + span { margin-right: 10px; }
.cmp-help { font-size: 11px; font-weight: 400; color: var(--faint); text-transform: none; letter-spacing: 0; line-height: 1.4; }
.cmp-fld .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cmp-pin { margin-bottom: 0; align-items: flex-start; line-height: 1.45; }
.cmp-pin a { color: inherit; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.cmp-pin .cmp-help { display: block; color: inherit; opacity: .8; margin-top: 3px; }
.cmp-title .cmp-bdg { font-size: 9.5px; }
.wf-settings summary .cmp-bdg { margin-left: 6px; }

/* reel cover chooser */
.cmp-covbox { display: grid; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--ink); }
.cmp-covmode { justify-self: start; max-width: 100%; }
.cmp-covmode button:disabled { opacity: .45; cursor: default; }
.cmp-cvframe, .cmp-cvimage { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 520px) { .cmp-cvframe, .cmp-cvimage { grid-template-columns: 1fr; } }
.cmp-cvvid, .cmp-cvimg { position: relative; width: 104px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #1e293b; }
.cmp-cvvid video, .cmp-cvvid img, .cmp-cvimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-cvtime { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 2; font-size: 10px; font-weight: 600; text-align: center; color: #fff; background: rgba(15,23,42,.72); padding: 2px 4px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.cmp-cvctl { display: grid; gap: 8px; min-width: 0; align-content: start; }
.cmp-cvctl input[type=range] { width: 100%; margin: 0; accent-color: var(--blue); }
.cmp-cvrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cmp-cvsum { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cmp-cvsum .pillbtn { padding: 5px 9px; font-size: 11px; }
.cmp-help.cmp-todo { color: var(--blue); font-weight: 600; }

/* phone preview: playing video, carousel track */
.cmp-phone .cmp-screen { cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cmp-phone .cmp-screen:focus-visible { outline: 2px solid var(--blue-2); outline-offset: -2px; }
.cmp-track { position: absolute; inset: 0; z-index: 0; display: flex; transition: transform .25s ease; }
.cmp-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; overflow: hidden; background: #1e293b; -webkit-tap-highlight-color: transparent; }
.cmp-slide img, .cmp-slide video { -webkit-user-drag: none; }
.cmp-grad, .cmp-over { pointer-events: none; }
.cmp-grad { z-index: 1; }
.cmp-pplay { position: absolute; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(15,23,42,.55); display: none; pointer-events: none; }
.cmp-pplay::before { content: ""; position: absolute; left: 17px; top: 12px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.cmp-slide.hasvid:not(.playing):not(.failed) .cmp-pplay { display: block; }
.cmp-prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255,255,255,.28); display: none; pointer-events: none; }
.cmp-slide.hasvid .cmp-prog { display: block; }
.cmp-prog i { display: block; height: 100%; width: 0; background: #fff; }
.cmp-perr { position: absolute; left: 10px; right: 10px; top: 50%; z-index: 3; transform: translateY(-50%); display: none; text-align: center; font-size: 11px; line-height: 1.35; color: #fff; background: rgba(15,23,42,.78); padding: 8px 10px; border-radius: 8px; }
.cmp-slide.failed .cmp-perr { display: block; }
.cmp-pmute { position: absolute; right: 8px; bottom: 10px; z-index: 5; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(15,23,42,.62); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cmp-pmute:hover { background: rgba(15,23,42,.85); }
.cmp-pmute svg { width: 14px; height: 14px; }
.cmp-parr { position: absolute; top: 50%; z-index: 4; width: 24px; height: 24px; margin-top: -12px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--ink); font-size: 17px; line-height: 22px; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cmp-parr.prev { left: 6px; }
.cmp-parr.next { right: 6px; }
.cmp-parr:disabled { display: none; }
.cmp-dots i { transition: background .15s; }

/* Google Drive date filter */
.drv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.drv-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.drv-chip { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.drv-chip:hover { border-color: var(--blue); color: var(--blue); }
.drv-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.drv-dates { display: inline-flex; align-items: center; gap: 6px; }
.drv-dates input[type=date] { font: inherit; font-size: 12px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; min-width: 0; }
.drv-dates.active input[type=date] { border-color: var(--blue); }
.drv-sort { padding: 6px 10px; background: #fff; border-color: var(--line); }
.drv-count { margin-left: auto; }
.drv-dt { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* end V3 composer */

/* V3 advice */
.adv-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.adv-card .card-head { align-items: flex-start; }
.adv-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.adv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adv-tools .pillbtn { padding: 6px 10px; font-size: 11.5px; border-color: var(--line); }
.adv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.adv-item { --adv-c: var(--faint); --adv-soft: var(--line-2); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--adv-c); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.adv-item.adv-high { --adv-c: var(--red); --adv-soft: var(--red-soft); }
.adv-item.adv-medium { --adv-c: var(--amber); --adv-soft: var(--amber-soft); }
.adv-item.adv-low { --adv-c: var(--blue-2); --adv-soft: var(--blue-soft); }
.adv-item.adv-good { --adv-c: var(--green); --adv-soft: var(--green-soft); }
.adv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adv-sev { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--adv-soft); color: var(--adv-c); white-space: nowrap; }
.adv-cat { font-size: 11px; color: var(--muted); font-weight: 600; }
.adv-title { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; overflow-wrap: anywhere; }
.adv-detail, .adv-action { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.adv-action b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.adv-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.adv-btns .pillbtn { padding: 6px 10px; font-size: 11.5px; border-color: var(--line); }
.adv-btns .pillbtn.primary { border-color: var(--blue); }
.adv-status { font-size: 11.5px; color: var(--muted); }
.adv-evidence { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.adv-evidence summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.adv-evidence summary:hover { color: var(--ink-2); }
.adv-evidence dl { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 3px 12px; margin: 8px 0 0; }
.adv-evidence dt { color: var(--faint); text-transform: capitalize; }
.adv-evidence dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: pre-line; overflow-wrap: anywhere; }

/* weekly report */
.adv-week-title { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.adv-headline { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.adv-weekly-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.adv-weekly .banner { margin: 0; }
.adv-numgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adv-num { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; justify-items: start; min-width: 0; }
.adv-num .label { font-size: 10px; }
.adv-num-v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.adv-num-p { font-size: 11px; color: var(--faint); }
.adv-posted { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.adv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 800px) { .adv-cols { grid-template-columns: 1fr; } }
.adv-weekly h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adv-wins, .adv-problems, .adv-actions-box, .adv-best { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.adv-wins { border-left: 4px solid var(--green); }
.adv-problems { border-left: 4px solid var(--red); }
.adv-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adv-points li, .adv-actions li { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.45; }
.adv-points li b, .adv-actions li b { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.adv-points li span, .adv-actions li span { color: var(--ink-2); overflow-wrap: anywhere; }
.adv-none { font-size: 12.5px; color: var(--faint); }
.adv-actions { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.adv-actions li { padding-left: 2px; }
.adv-actions li a { color: var(--blue); font-weight: 600; font-size: 11.5px; }
.adv-actions .adv-sev { justify-self: start; }
.adv-sev-high { --adv-soft: var(--red-soft); --adv-c: var(--red); }
.adv-sev-medium { --adv-soft: var(--amber-soft); --adv-c: var(--amber); }
.adv-sev-low { --adv-soft: var(--blue-soft); --adv-c: var(--blue-2); }
.adv-sev-good { --adv-soft: var(--green-soft); --adv-c: var(--green); }
.adv-best-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.adv-best-card .adv-thumb { width: 56px; height: 72px; margin: 0; flex: none; }
.adv-best-body { min-width: 0; display: grid; gap: 4px; }
.adv-best-hook { font-weight: 700; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.adv-best-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.adv-best-stats b { font-weight: 700; color: var(--ink); }
@media print { .adv-noprint { display: none !important; } .adv-card, .adv-num, .adv-wins, .adv-problems, .adv-actions-box, .adv-best, .adv-item { break-inside: avoid; box-shadow: none; } }
/* end V3 advice */

/* V3 links */
.lk-card .card-head { margin-bottom: 2px; }
.lk-via { margin-left: 6px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--faint); }
.lk-tools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lk-tools .pillbtn { padding: 5px 10px; font-size: 11px; }
.lk-loading { padding: 26px 0; text-align: center; color: var(--muted); }

.lk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin-top: 12px; }
.lk-kpi { min-width: 0; }
.lk-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lk-kpi.big .lk-num { font-size: 32px; }
.lk-kpi .label { display: block; margin-top: 3px; }
.lk-sub { margin-top: 2px; font-size: 11px; color: var(--muted); }
.lk-adult { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.lk-adult b { color: var(--ink-2); }
@media (max-width: 640px) { .lk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lk-kpi.big .lk-num { font-size: 28px; } }
.lk-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 16px; }
.lk-chart { margin-top: 6px; }
.lk-svgwrap { display: flex; flex-direction: column; height: 100%; }
.lk-svg { flex: 1; min-height: 0; width: 100%; display: block; border-bottom: 1px solid var(--line-2); }
.lk-svg rect { fill: var(--blue-2); }
.lk-svg rect:hover { fill: var(--blue); }
.lk-axis { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; font-size: 10px; color: var(--faint); }

.lk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.lk-ig { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--ink-2); background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(236,72,153,.16)); }
.lk-bars { display: grid; gap: 7px; margin-top: 8px; }
.lk-bar { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.lk-bar .n { min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-bar .n a { color: inherit; text-decoration: none; }
.lk-bar .n a:hover { color: var(--blue); }
.lk-bar .t { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.lk-bar .f { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.lk-bar .v { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lk-bar .v small { margin-left: 6px; font-size: 10.5px; font-weight: 500; color: var(--faint); }
.lk-bar.ig .n { color: var(--ink); font-weight: 700; }
.lk-bar.ig .f { background: linear-gradient(90deg, #f59e0b, #ec4899); }

.lk-setup { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--line-2); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.lk-setup > b { display: block; font-size: 13.5px; color: var(--ink); }
.lk-setup p { margin: 6px 0 0; }
.lk-setup ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.lk-setup a { color: var(--blue); }
.lk-setup code, .lk-ed code { background: #fff; padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }

.lk-ed { display: grid; gap: 10px; }
.lk-ed .banner { margin-bottom: 0; }
.lk-src-list { display: grid; gap: 8px; }
.lk-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.7); }
.lk-src-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lk-src-name { font-weight: 600; font-size: 13px; }
.lk-src-main code { color: var(--muted); background: var(--line-2); overflow-wrap: anywhere; }
.lk-src-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.lk-src-meta.err { color: var(--red); font-weight: 600; }
.lk-x { grid-row: 1; grid-column: 2; border: 0; background: transparent; color: var(--faint); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px 2px; border-radius: 6px; }
.lk-x:hover { color: var(--red); background: var(--red-soft); }
.lk-none { padding: 4px 0; font-size: 12.5px; color: var(--muted); }
.lk-add { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.lk-add .search { min-width: 0; width: 100%; }
@media (max-width: 640px) { .lk-add { grid-template-columns: 1fr; } }
.lk-msg { font-size: 12px; color: var(--muted); }
.lk-msg:empty { display: none; }
.lk-msg.ok { color: var(--green); font-weight: 600; }
.lk-msg.err { color: var(--red); font-weight: 600; }
/* end V3 links */

/* V3 integration: phone-width menu scrolls sideways instead of pushing the page wider */
@media (max-width: 720px) {
  .window { min-width: 0; }
  .side { justify-content: flex-start; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; }
  .side::-webkit-scrollbar { display: none; }
  .side .nav { flex: none; }
  .side .spacer { display: none; }
  .bell-panel { position: fixed; top: 70px; left: 10px; right: 10px; }
}

/* Connect by link (models page) */
.mdl-steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.mdl-steps code { font-size: 11.5px; background: var(--line-2); padding: 1px 5px; border-radius: 5px; }

/* T1 */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.pager .pager-info { min-width: 110px; text-align: center; }
.pager .pillbtn[disabled] { opacity: .4; cursor: default; }
.pager select { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card, #fff); color: inherit; }
.lk-legend { margin-top: 8px; }

/* T2 */
.adv2 .adv-high { --adv-c: var(--red); --adv-soft: var(--red-soft); }
.adv2 .adv-medium { --adv-c: var(--amber); --adv-soft: var(--amber-soft); }
.adv2 .adv-low { --adv-c: var(--blue-2); --adv-soft: var(--blue-soft); }
.adv2 .adv-good { --adv-c: var(--green); --adv-soft: var(--green-soft); }
.adv-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-chip { --adv-c: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.adv-chip b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.adv-chip .adv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--adv-c); }
.adv-chip:hover:not(:disabled) { border-color: var(--adv-c); }
.adv-chip.on { background: var(--adv-soft, var(--line-2)); border-color: var(--adv-c); color: var(--ink); }
.adv-chip:disabled { opacity: .45; cursor: default; }
.adv-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.adv-listcol { display: grid; gap: 10px; min-width: 0; align-content: start; }
.adv-list2 { display: grid; gap: 8px; }
.adv-c { --adv-c: var(--faint); --adv-soft: var(--line-2); display: grid; gap: 5px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--adv-c); border-radius: 12px; padding: 10px 12px; min-width: 0; cursor: pointer; }
.adv-c:hover { border-color: var(--adv-c); }
.adv-c:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.adv-c.is-sel { background: var(--adv-soft); border-color: var(--adv-c); }
.adv-c-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adv-key { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.adv-key b { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.adv-c-title { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adv-c-action { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adv-c-action b { color: var(--ink); margin-right: 4px; }
.adv-c .adv-btns { margin-top: 0; }
.adv-pager { display: flex; align-items: center; justify-content: center; gap: 10px; }
.adv-pager .pillbtn { padding: 3px 12px; font-size: 14px; line-height: 1.2; border-color: var(--line); }
.adv-pager .pillbtn:disabled { opacity: .4; cursor: default; }
.adv-pager-info { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }
.adv-pane { position: sticky; top: 12px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; max-height: 70vh; overflow: auto; }
.adv-pane-empty { padding: 22px 16px; font-size: 12.5px; color: var(--faint); text-align: center; }
.adv-pane-in { --adv-c: var(--faint); display: grid; gap: 8px; padding: 12px 14px; border-top: 4px solid var(--adv-c); border-radius: 12px; }
.adv-pane-close { margin-left: auto; padding: 3px 9px !important; font-size: 11px !important; border-color: var(--line) !important; }
.adv-evlabel { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.adv-ev { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 11.5px; }
.adv-ev dt { color: var(--faint); }
.adv-ev dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .adv-split { grid-template-columns: minmax(0, 1fr); }
  .adv-split:not(.has-sel) .adv-pane { display: none; }
  .adv-pane { position: static; max-height: none; }
}
.adv-postlist { background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; min-width: 0; display: grid; gap: 8px; }
.adv-postlist h4 { margin: 0; }
.adv-count { font-weight: 600; color: var(--faint); margin-left: 4px; }
.adv-tablewrap { overflow-x: auto; }
.adv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adv-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adv-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.adv-table .adv-pn { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-pt { max-width: 340px; overflow-wrap: anywhere; }
.adv-pt a { color: var(--ink); font-weight: 600; text-decoration: none; }
.adv-pt a:hover { text-decoration: underline; }
.adv-kind { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* end T2 */

/* V4 auth */
.auth-wrap { min-height: calc(100vh - 48px); display: grid; place-items: center; }
.auth-card { width: min(420px, 100%); padding: 26px 26px 22px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); box-shadow: 0 30px 80px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8); }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.auth-brand .ico { cursor: default; }
.auth-card h1 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.auth-card p.lead { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.auth-field { display: grid; gap: 5px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.auth-field input, .auth-field select, .auth-inline input { font: inherit; font-size: 13px; font-weight: 500; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.9); color: var(--ink); width: 100%; }
.auth-field input:focus, .auth-field select:focus, .auth-inline input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.auth-field input.code { letter-spacing: .35em; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.auth-submit { width: 100%; justify-content: center; padding: 11px 14px; font-size: 13px; font-weight: 600; }
.auth-msg { min-height: 18px; margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--red); }
.auth-msg.ok { color: var(--green); }
.auth-hint { margin: 0 0 14px; padding: 11px 13px; border-radius: 12px; background: var(--amber-soft); border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; line-height: 1.5; }
.auth-hint code, .auth-secret code, .auth-newpw code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 6px; user-select: all; }
.auth-link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; } }
.auth-card-inner .auth-field { max-width: 360px; }
.auth-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.auth-inline .auth-field { margin: 0; flex: 1 1 150px; }
.auth-secret { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.auth-qr { background: #fff; padding: 8px; border-radius: 12px; line-height: 0; border: 1px solid var(--line); }
.auth-qr:empty { display: none; }
.auth-newpw { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); border: 1px solid #bbf7d0; color: #166534; font-size: 12.5px; line-height: 1.6; }
.auth-newpw code { font-size: 14px; font-weight: 700; }
.auth-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.auth-actions .pillbtn { padding: 5px 9px; font-size: 11.5px; }
.auth-actions .pillbtn.danger { color: var(--red); }
.tag.admin { background: var(--blue-soft); color: var(--blue); }
.tag.off { background: var(--red-soft); color: var(--red); }
.tag.on { background: var(--green-soft); color: #166534; }
.auth-audit td { font-size: 12px; }
.auth-audit td.detail { white-space: normal; min-width: 220px; color: var(--ink-2); }
.side .nav[hidden] { display: none; }
.side .nav.userbox { margin-top: 2px; }
.side .nav.userbox .lbl { color: var(--ink-2); font-weight: 600; font-size: 12px; }
.side .nav.logout { font: inherit; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.side .nav.logout:hover { color: var(--red); }
/* Admin-only controls stay hidden until the role is known (common.js puts role-admin / role-manager on <body>). */
body:not(.role-admin) .admin-only,
body:not(.role-admin) .mdl-card [data-act="delete"],
body:not(.role-admin) .mdl-card [data-act="retoken"] { display: none !important; }

/* V4 f2f */
.f2f-card .card-head { margin-bottom: 2px; }
.f2f-via { margin-left: 6px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--faint); }
.f2f-tools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f2f-tools .pillbtn { padding: 5px 10px; font-size: 11px; }
.f2f-loading { padding: 26px 0; text-align: center; color: var(--muted); }
.f2f-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin-top: 12px; }
.f2f-kpi { min-width: 0; }
.f2f-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.f2f-kpi.big .f2f-num { font-size: 32px; }
.f2f-kpi .label { display: block; margin-top: 3px; }
.f2f-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.f2f-missing { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: #92400e; font-size: 12px; }
.f2f-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.f2f-empty { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--line-2); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.f2f-empty > b { display: block; font-size: 13.5px; color: var(--ink); }
.f2f-empty p { margin: 6px 0 0; }
.f2f-empty a { color: var(--blue); }
.f2f-funnel { display: grid; gap: 6px; }
.f2f-step { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; align-items: center; }
.f2f-bar { width: var(--w, 100%); min-width: 190px; max-width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); color: #fff; font-size: 12.5px; }
.f2f-step:nth-child(2) .f2f-bar { filter: saturate(.92) brightness(1.04); }
.f2f-step:nth-child(3) .f2f-bar { background: linear-gradient(90deg, #d97706, #f59e0b); }
.f2f-step:nth-child(4) .f2f-bar { background: linear-gradient(90deg, #15803d, #22c55e); }
.f2f-n { font-weight: 600; }
.f2f-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.f2f-keep { font-size: 11.5px; color: var(--muted); }
.f2f-keep b { color: var(--ink); }
@media (max-width: 640px) { .f2f-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f2f-kpi.big .f2f-num { font-size: 28px; } .f2f-step { grid-template-columns: 1fr; gap: 2px; } }

/* F2F grid on the Takenlijst */
.f2f-grid-wrap { overflow-x: auto; margin-top: 8px; }
.f2f-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.f2f-grid th { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; text-align: center; white-space: nowrap; }
.f2f-grid th small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.f2f-grid th:first-child, .f2f-grid td:first-child { text-align: left; padding-left: 0; }
.f2f-grid td { padding: 5px 4px; text-align: center; border-top: 1px solid var(--line-2); }
.f2f-grid .yday { background: var(--blue-soft); }
.f2f-grid thead .yday { border-radius: 10px 10px 0 0; color: var(--blue); }
.f2f-grid tfoot td { font-weight: 700; color: var(--ink-2); }
.f2f-model { display: flex; align-items: center; gap: 9px; min-width: 130px; font-weight: 600; }
.f2f-model img, .f2f-model .ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--line); flex: none; }
.f2f-cell { position: relative; display: inline-block; }
.f2f-in { width: 62px; padding: 7px 4px; text-align: center; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.f2f-in::-webkit-outer-spin-button, .f2f-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f2f-in:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.f2f-in.saving { opacity: .6; }
.f2f-in.ok { border-color: var(--green); background: var(--green-soft); }
.f2f-in.bad { border-color: var(--red); background: var(--red-soft); }
.f2f-tick { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--green); pointer-events: none; opacity: 0; transition: opacity .25s; }
.f2f-in.ok + .f2f-tick { opacity: 1; }
.f2f-tick svg { width: 100%; height: 100%; }
.f2f-rowtotal { font-weight: 700; font-variant-numeric: tabular-nums; }
.f2f-paste { padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.f2f-err { margin: 8px 0 0; font-size: 12px; color: var(--red); min-height: 1em; }
.f2f-panel { width: min(680px, 100%); max-height: min(92vh, 780px); }
.f2f-text { width: 100%; min-height: 150px; resize: vertical; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.f2f-text:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.f2f-prev { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.f2f-prev th { text-align: left; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.f2f-prev td { padding: 5px 6px; border-bottom: 1px solid var(--line-2); }
.f2f-prev .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.f2f-prev .over { color: var(--amber); font-size: 11.5px; }
.f2f-prev-scroll { max-height: 230px; overflow: auto; }
.f2f-skip { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: #92400e; font-size: 12px; }
.f2f-skip ul { margin: 4px 0 0; padding-left: 18px; max-height: 120px; overflow: auto; }
.f2f-skip code { background: #fff; padding: 0 4px; border-radius: 4px; }
.f2f-sum { margin: 10px 0 0; font-weight: 600; }
/* F2F tile on the Overzicht */
.f2f-tile .f2f-num { font-size: 32px; }
.f2f-tile .f2f-line { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.f2f-tile .f2f-line b { color: var(--ink); font-size: 14px; }
/* end V4 f2f */

/* V5 storage */
.sto-card { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sto-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-2); border: 1px solid var(--line); }
.sto-seg { display: block; height: 100%; }
.sto-seg.cache, .sto-dot.cache { background: var(--blue); }
.sto-seg.own, .sto-dot.own { background: var(--green); }
.sto-seg.bak, .sto-dot.bak { background: #f59e0b; }
.sto-seg.rest { background: var(--faint); }
.sto-line { font-size: 13px; color: var(--ink-2); }
.sto-split { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); }
.sto-split b { color: var(--ink); }
.sto-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.sto-last { font-size: 12px; color: var(--muted); }
.sto-low { color: var(--red); }
/* end V5 storage */

/* V5 accounts */
/* login / welkom */
.auth-wrap { padding: 8px 0; }
.auth-card-wide { width: min(460px, 100%); }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-logo .ico { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; cursor: default; }
.auth-logo-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.auth-card h1 { font-size: 20px; }
.auth-card .auth-field label { font: inherit; }
.auth-pw { position: relative; }
.auth-pw input { padding-right: 42px; }
.auth-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; }
.auth-eye:hover { color: var(--ink); background: var(--line-2); }
.auth-eye svg { width: 18px; height: 18px; }
.auth-eye .slash { display: none; }
.auth-eye.on .slash { display: inline; }
.auth-note { margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; background: var(--green-soft); border: 1px solid #bbf7d0; color: #166534; font-size: 12.5px; line-height: 1.5; }
.auth-msg.lock { padding: 9px 12px; border-radius: 10px; background: var(--amber-soft); border: 1px solid #fde68a; color: #92400e; }
.auth-forgot { margin-top: 16px; font-size: 12px; color: var(--muted); }
.auth-forgot summary { cursor: pointer; color: var(--blue); font-weight: 600; list-style: none; }
.auth-forgot summary::-webkit-details-marker { display: none; }
.auth-forgot summary:hover { text-decoration: underline; }
.auth-forgot p { margin: 8px 0 0; line-height: 1.55; }
.auth-fine { margin: 18px 0 0; text-align: center; font-size: 11px; color: var(--faint); }
.auth-fine-row { margin: 14px 0 0; }
.auth-fine-row .pillbtn, a.pillbtn.auth-submit { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.pillbtn.auth-submit { width: 100%; }
.auth-who { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; background: var(--line-2); }
.auth-who b { font-size: 14px; }
.auth-steps { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.auth-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-meter { margin-top: -4px; }
.pw-meter i { display: block; height: 5px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.pw-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--faint); transition: width .2s, background .2s; }
.pw-meter[data-score="1"] i::after { width: 25%; background: var(--red); }
.pw-meter[data-score="2"] i::after { width: 50%; background: var(--amber); }
.pw-meter[data-score="3"] i::after { width: 75%; background: #65a30d; }
.pw-meter[data-score="4"] i::after { width: 100%; background: var(--green); }
.pw-meter span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.auth-match { min-height: 16px; margin: 6px 0 12px; font-size: 11.5px; color: var(--muted); }
.auth-match.ok { color: var(--green); }
@media (max-width: 480px) {
  .auth-card { padding: 22px 18px 18px; border-radius: 20px; }
  .auth-field input, .auth-field select { font-size: 16px; } /* no zoom on iOS */
}

/* avatars, chips */
.avatar-i { --h: 210; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: hsl(var(--h) 55% 28%); background: hsl(var(--h) 80% 90%); border: 1px solid hsl(var(--h) 60% 82%); }
.avatar-i.lg { width: 52px; height: 52px; font-size: 17px; }
.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--line-2); color: var(--muted); }
.chip.active { background: var(--green-soft); color: #166534; }
.chip.invited { background: var(--amber-soft); color: #92400e; }
.chip.expired { background: var(--red-soft); color: #991b1b; }
.chip.disabled { background: #e5e7eb; color: #4b5563; }
.chip.mute { background: var(--line-2); color: var(--muted); }
.pillbtn.danger { color: var(--red); }
.pillbtn.danger:not(:disabled):hover { background: var(--red-soft); }

/* users page */
.acc-tabs { max-width: 320px; }
.acc-tabs button { text-transform: none; letter-spacing: 0; font-size: 12px; }
.acc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.acc-toolbar .search { flex: 1 1 240px; }
.acc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.acc-table td { padding: 10px 8px; }
.acc-row { cursor: pointer; }
.acc-row:hover, .acc-row:focus-visible { background: rgba(47,111,237,.06); outline: 0; }
.acc-who { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.acc-who .muted { font-size: 11.5px; }
.acc-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15,23,42,.42); backdrop-filter: blur(2px); }
.acc-panel { position: fixed; z-index: 91; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: #f8fafc; box-shadow: -20px 0 60px -20px rgba(0,0,0,.45); animation: accIn .18s ease-out; }
.acc-overlay[hidden], .acc-panel[hidden] { display: none; }
@keyframes accIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.acc-lock { overflow: hidden; }
.acc-phead { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.acc-ptitle { flex: 1; min-width: 0; }
.acc-ptitle h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--line-2); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.acc-x:hover { background: var(--line); }
.acc-pbody { flex: 1; overflow-y: auto; padding: 16px 18px 28px; }
.acc-pbody .auth-field { max-width: none; }
.acc-status { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acc-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: 12.5px; }
.acc-facts dt { color: var(--muted); }
.acc-facts dd { margin: 0; }
.acc-h { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acc-h.danger { color: var(--red); }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.link-box { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); border: 1px solid #bbf7d0; }
.link-box .label { color: #166534; }
.link-row { display: flex; gap: 8px; margin-top: 6px; }
.link-row input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.link-box textarea { width: 100%; margin-top: 6px; font: 12.5px/1.5 Inter, system-ui, sans-serif; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); resize: vertical; }
.ses-list, .act-list { list-style: none; margin: 0; padding: 0; }
.ses { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.ses:first-child { border-top: 0; }
.ses-ico { font-size: 20px; }
.ses-main { flex: 1; min-width: 0; line-height: 1.5; }
.ses .pillbtn { flex: none; padding: 5px 10px; font-size: 11.5px; }
.act-list li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.act-list li:first-child { border-top: 0; }
.act-list li.bad > span:first-child { color: var(--red); font-weight: 600; }

/* profiel */
.auth-card-inner > .card-head { margin-bottom: 10px; }
.prof-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.prof-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.side .nav.userbox { align-items: center; }
.side .nav.userbox .lbl { display: flex; flex-direction: column; line-height: 1.25; }
.side .nav.userbox .lbl small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.side .nav.userbox.active { color: var(--blue); }
@media (max-width: 720px) { .acc-panel { width: 100%; } .acc-who { min-width: 150px; } }
/* end V5 accounts */

/* V6 brand */
/* Ascend look: warm cream canvas, brown/champagne accents. Data colours (charts, deltas, status chips) are untouched. */
:root {
  --brand-cream: #F4EEE4; --brand-cream-2: #F5F0EA; --brand-sand: #D6C9B8; --brand-taupe: #8A7B68;
  --brand-champagne: #B2967E; --brand-gold: #A8874E; --brand-brown: #7D5A44; --brand-brown-2: #5C4A38;
  --brand-dark: #32251E; --brand-ink: #2A2420;
  --bg-1: var(--brand-cream); --bg-2: var(--brand-cream-2); --bg-3: var(--brand-sand);
  --glass: rgba(251,248,243,.78); --glass-border: rgba(178,150,126,.28);
  --card: rgba(255,255,255,.84); --card-border: rgba(178,150,126,.25);
  --card-shadow: 0 1px 2px rgba(80,55,35,.05), 0 12px 32px -14px rgba(80,55,35,.2);
  --ink: var(--brand-ink); --ink-2: #4A3F36; --muted: #66584B; --faint: #74655A; --line: #e6ddd0; --line-2: #f1eae0;
  /* UI accent = brand brown. The old blue lives on as the data colour. */
  --blue: var(--brand-brown); --blue-2: var(--brand-champagne); --blue-soft: #efe4d6;
  --data-blue: #2f6fed; --data-blue-2: #6ea0ff; --data-blue-soft: #dbe7ff;
  --serif: "Bodoni Moda", "Playfair Display", Georgia, serif;
}
body {
  background: radial-gradient(1100px 700px at 12% -5%, rgba(214,201,184,.55), transparent 62%),
              radial-gradient(900px 600px at 100% 100%, rgba(178,150,126,.28), transparent 60%),
              var(--brand-cream);
  background-attachment: fixed; color: var(--ink);
}
/* faint A watermark, bottom right (mask: nothing shows if the file is missing) */
body::before {
  content: ""; position: fixed; right: -6vw; bottom: -8vh; width: 62vh; height: 68vh; z-index: 0; pointer-events: none;
  background: var(--brand-taupe); opacity: .07;
  -webkit-mask: url(/brand/a.svg) center / contain no-repeat; mask: url(/brand/a.svg) center / contain no-repeat;
}
.window { position: relative; z-index: 1; box-shadow: 0 30px 80px -34px rgba(80,55,35,.35), inset 0 1px 0 rgba(255,255,255,.8); }
@media (max-width: 720px) { body::before { display: none; } }
:focus-visible { outline: 2px solid var(--brand-champagne); outline-offset: 2px; }
::selection { background: rgba(178,150,126,.35); }

h1, .topbar .title > span:not(.crumb) { font-family: var(--serif); font-weight: 600; letter-spacing: .005em; }
.topbar .title { font-size: 18px; }
.topbar .title .crumb { font-family: Inter, system-ui, sans-serif; font-size: 14px; }

/* Sidebar */
.side { border-right-color: rgba(178,150,126,.28); background: rgba(244,238,228,.5); }
@media (max-width: 720px) { .side { border-bottom-color: rgba(178,150,126,.28); } }
.ico, .pillbtn, select.pillbtn, .seg, .dates input[type=date] { border-color: rgba(178,150,126,.3); }
.ico { background: rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(80,55,35,.08); }
.ico.logo { background: transparent; border-color: transparent; box-shadow: none; color: var(--brand-dark); font-family: var(--serif); font-weight: 600; font-size: 22px; }
.ico.logo.has-a { width: 38px; }
.ico.logo svg { width: auto; height: 28px; display: block; fill: currentColor; }
.side .nav.logo { color: var(--brand-dark); margin-bottom: 4px; }
.side .nav.logo .lbl { font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; }
.side .nav:hover { background: rgba(214,201,184,.4); color: var(--ink); }
.side .nav.active { background: var(--brand-dark); color: var(--brand-cream); box-shadow: 0 6px 14px -8px rgba(50,37,30,.7); }
.side .nav.active .ico { background: transparent; border-color: transparent; box-shadow: none; color: var(--brand-cream); outline: 0; }
.side .nav.active:hover { background: var(--brand-dark); color: var(--brand-cream); }
.side .nav.userbox { margin: 0 0 8px; padding: 6px 8px; background: rgba(255,255,255,.6); border: 1px solid rgba(178,150,126,.3); }
.side .nav.userbox .lbl { color: var(--ink); font-size: 12.5px; }
.side .nav.userbox .lbl small { color: var(--muted); }
.side .nav.userbox .avatar-i { background: var(--brand-sand); color: var(--brand-dark); border-color: var(--brand-champagne); }
.side .nav.userbox.active { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-cream); }
.side .nav.userbox.active .lbl, .side .nav.userbox.active .lbl small { color: var(--brand-cream); }
.side .nav.userbox.active .lbl small { color: var(--brand-sand); }
@media (max-width: 900px) { .side .nav.userbox { padding: 3px; background: transparent; border-color: transparent; } .side .nav.userbox.active { background: transparent; } }
.side .nav.logout:hover { color: var(--red); background: rgba(220,38,38,.07); }

@media (min-width: 721px) and (max-width: 900px) { .side .nav.userbox .lbl { display: none; } }

/* Buttons */
.pillbtn, select.pillbtn { background: rgba(255,251,246,.9); color: var(--brand-brown-2); box-shadow: 0 1px 2px rgba(80,55,35,.08); }
.pillbtn:hover { background: #fff; }
.pillbtn.primary, .cmp-btns .pillbtn.primary { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-cream); }
.pillbtn.primary:hover, .cmp-btns .pillbtn.primary:hover { background: #4a372c; border-color: #4a372c; }
.adv-btns .pillbtn.primary { border-color: var(--brand-dark); }
.drv-chip.active { background: var(--brand-dark); border-color: var(--brand-dark); }
.seg { background: rgba(255,251,246,.75); }
.seg button.active, .tabs button.active { color: var(--brand-dark); }
.tabs button.active { color: var(--brand-brown-2); }
.f2f-bar { background: linear-gradient(90deg, var(--brand-brown-2), var(--brand-brown)); }
.ibx-row.me .ibx-b { background: var(--brand-brown); border-color: var(--brand-brown); }
.mdl-av.ph, .ibx-av.me { background: linear-gradient(135deg, var(--brand-brown), var(--brand-champagne)); }
.ico.active { outline-color: var(--blue-soft); }

/* Focus rings: champagne */
.auth-field input:focus, .auth-field select:focus, .auth-inline input:focus, .mdl-tgt input:focus, .f2f-in:focus, .f2f-text:focus {
  border-color: var(--brand-champagne); box-shadow: 0 0 0 3px rgba(178,150,126,.3);
}
.search:focus, .kadd input:focus { border-color: var(--brand-champagne); }

/* Warm replacements for the cold blue/slate tints */
.banner.info { color: var(--brand-brown-2); border-color: var(--brand-sand); }
.bn.unread, .mdl-tgt input.dirty, .cdr-replies .cdr-c.me { background: #f7f0e6; }
.ibx-item.active { background: #f4ebde; }
.kcol.over { background: rgba(239,228,214,.6); }
.acc-row:hover, .acc-row:focus-visible { background: rgba(178,150,126,.12); }
.acc-panel { background: #faf6f1; }
.acc-phead { background: #fff; }
.cmp-right { background: linear-gradient(160deg, #efe7da, #e4d9c8); }
.acc-overlay, .cmp-overlay, .mdlm-overlay, .cdr-overlay { background: rgba(42,36,32,.5); }
.auth-hint code, .auth-secret code, .auth-newpw code { background: rgba(255,255,255,.8); }
.tag.admin, .pill.blue, .cmp-bdg.ig { background: var(--blue-soft); color: var(--brand-brown-2); }
.tag { color: var(--brand-brown-2); }
.tabs button.active .count { color: var(--brand-brown-2); }
.f2f-grid thead .yday { color: var(--brand-brown-2); }
.avatar-i { background: hsl(var(--h) 35% 91%); border-color: hsl(var(--h) 30% 80%); }

/* Data colours stay blue */
.bar .f, .lk-bar .f { background: linear-gradient(90deg, var(--data-blue), var(--data-blue-2)); }
.lk-svg rect { fill: var(--data-blue-2); } .lk-svg rect:hover { fill: var(--data-blue); }
.heat .c.top { outline-color: var(--data-blue); }
.sto-seg.cache, .sto-dot.cache { background: var(--data-blue); }
.adv-item.adv-low, .adv-sev-low, .adv2 .adv-low { --adv-c: var(--data-blue-2); --adv-soft: var(--data-blue-soft); }
a.sig:hover { box-shadow: 0 0 0 2px rgba(178,150,126,.35); }

/* Login + welkom: dark brown screen, faint A, sand wordmark above a cream card */
body.brand-auth {
  background: var(--brand-dark); padding: 24px; min-height: 100vh; position: relative; overflow-x: hidden;
}
body.brand-auth::before {
  content: ""; position: fixed; right: -14vh; top: 50%; transform: translateY(-50%); width: 100vh; height: 110vh; max-width: none;
  background: #3b2d26; opacity: 1; z-index: 0;
  -webkit-mask: url(/brand/a.svg) center / contain no-repeat; mask: url(/brand/a.svg) center / contain no-repeat;
}
body.brand-auth .auth-wrap { position: relative; z-index: 1; min-height: calc(100vh - 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 0; }
.auth-top { text-align: center; margin: 0 0 26px; color: var(--brand-sand); }
.auth-wm { display: block; width: min(300px, 72vw); aspect-ratio: 827.91 / 150.2; margin: 0 auto; position: relative; }
.auth-wm::before { content: ""; position: absolute; inset: 0; background: var(--brand-sand); opacity: 0; -webkit-mask: url(/brand/ascend.svg) center / contain no-repeat; mask: url(/brand/ascend.svg) center / contain no-repeat; }
.auth-wm.ok::before { opacity: 1; }
.auth-wm span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 40px; letter-spacing: .2em; color: var(--brand-sand); }
.auth-wm.ok span { display: none; }
.auth-sub { margin: 16px 0 0; font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--brand-champagne); display: flex; align-items: center; justify-content: center; gap: 12px; }
.auth-sub::before, .auth-sub::after { content: ""; width: 28px; height: 1px; background: var(--brand-champagne); opacity: .7; }
body.brand-auth .auth-card {
  background: var(--brand-cream); border: 1px solid rgba(178,150,126,.55); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), inset 0 0 0 4px var(--brand-cream), inset 0 0 0 5px rgba(178,150,126,.35); border-radius: 20px;
}
body.brand-auth .auth-card h1 { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: 0; color: var(--brand-dark); }
body.brand-auth .auth-field input { background: #fffdfa; border-color: var(--brand-sand); }
body.brand-auth .auth-link, body.brand-auth .auth-forgot summary { color: var(--brand-brown); }
body.brand-auth .auth-fine { color: var(--muted); }
body.brand-auth .auth-who { background: rgba(214,201,184,.3); }
@media (max-width: 480px) { body.brand-auth { padding: 14px; } body.brand-auth::before { right: -30vw; width: 120vw; height: 120vh; } body.brand-auth .auth-wrap { min-height: calc(100vh - 28px); } .auth-top { margin-bottom: 18px; } }
/* end V6 brand */

/* V7 health */
.hl-card { margin-bottom: 14px; }
.hl-card h3 { margin: 0; font-size: 15px; }
.hl-card h4 { margin: 0 0 4px; font-size: 13px; }
.hl-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 10px 0 12px; }
.hl-score { display: flex; align-items: baseline; gap: 4px; padding: 10px 16px; border-radius: 16px; border: 2px solid var(--brand-sand); background: rgba(255,251,246,.8); }
.hl-score .hl-num { font-family: var(--serif, Georgia, serif); font-size: 44px; font-weight: 600; line-height: 1; color: var(--brand-dark); }
.hl-score .hl-of { font-size: 12px; color: var(--muted); }
.hl-score.healthy { border-color: var(--green); } .hl-score.watch { border-color: var(--amber); } .hl-score.risk { border-color: var(--red); }
.hl-meta { flex: 1; min-width: 200px; } .hl-meta p { margin: 6px 0 0; }
.hl-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--line-2); color: var(--muted); }
.hl-chip.healthy { background: var(--green-soft); color: #166534; } .hl-chip.watch { background: var(--amber-soft); color: #92400e; } .hl-chip.risk { background: var(--red-soft); color: #991b1b; }
.hl-trend { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.hl-spark { width: 220px; max-width: 100%; height: 44px; }
.hl-spark .hl-g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.hl-spark .hl-line { stroke: var(--brand-brown); stroke-width: 2; stroke-linejoin: round; } .hl-spark .hl-dot { fill: var(--brand-brown); }
.hl-restrict { border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; background: var(--amber-soft); border: 1px solid #f3d38a; }
.hl-restrict.confirmed { background: var(--red-soft); border-color: #f5b5b5; }
.hl-restrict ul { margin: 6px 0 0; padding-left: 18px; } .hl-restrict p { margin: 6px 0 0; }
.hl-comps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.hl-comp-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.hl-comp-pts { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.hl-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 4px 0; }
.hl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.hl-comp.warn .hl-bar i { background: var(--amber); } .hl-comp.bad .hl-bar i { background: var(--red); } .hl-comp.unknown .hl-bar i { background: var(--faint); }
.hl-comp-detail { line-height: 1.4; }
.hl-check { border-top: 1px solid var(--line); padding-top: 12px; }
.hl-check p { margin: 4px 0; }
.hl-check-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.hl-note { flex: 1; min-width: 180px; font: inherit; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--brand-sand); background: #fffdfa; }
.hl-hist { margin: 6px 0 0; padding-left: 18px; }
.hl-foot { margin: 12px 0 0; line-height: 1.45; } .hl-foot a { color: var(--brand-brown); }
.hl-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hl-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; background: rgba(255,251,246,.7); border: 1px solid transparent; }
.hl-row:hover { border-color: var(--brand-sand); background: #fff; }
.hl-row .hl-chip { min-width: 42px; text-align: center; font-size: 14px; }
.hl-row-main { display: flex; flex-direction: column; min-width: 0; } .hl-row-main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .hl-comps { grid-template-columns: 1fr; }
  .hl-score .hl-num { font-size: 38px; }
  .hl-check-form .pillbtn { flex: 1; }
}
/* end V7 health */

/* V7 stock */
.pillbtn[hidden] { display: none; }
.ops-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.ops-row > div:empty { display: none; }
.ops-row:not(:has(> div:not(:empty))) { display: none; }
@media (max-width: 900px) { .ops-row { grid-template-columns: minmax(0, 1fr); } }
.stk-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
@media (max-width: 560px) { .stk-gauges { grid-template-columns: minmax(0, 1fr); } }
.stk-g { --stk-c: var(--faint); padding: 12px 14px; border-radius: 12px; background: var(--line-2); min-width: 0; }
.stk-g.lv-ok { --stk-c: var(--green); }
.stk-g.lv-warning { --stk-c: var(--amber); }
.stk-g.lv-critical { --stk-c: var(--red); }
.stk-g-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stk-big { font-size: 26px; font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stk-big small { font-size: 13px; font-weight: 500; color: var(--muted); }
.stk-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.stk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--stk-c); }
.stk-sub { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.stk-warn { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--amber-soft); color: #92400e; font-size: 12px; }
.stk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.stk-actions a.pillbtn { text-decoration: none; }
.stk-meta { margin-left: auto; }
.stk-list { display: grid; gap: 6px; margin-top: 10px; }
.stk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--line-2); color: var(--ink); text-decoration: none; font-size: 13px; }
.stk-row:hover { background: #fff; }
.stk-user { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-mini { white-space: nowrap; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 6px; background: var(--line-2); }
.stk-mini small { color: var(--muted); }
.stk-mini.lv-ok { background: var(--green-soft); color: var(--green); }
.stk-mini.lv-warning { background: var(--amber-soft); color: var(--amber); }
.stk-mini.lv-critical { background: var(--red-soft); color: var(--red); }
.stk-more { margin-top: 8px; }
@media (max-width: 480px) { .stk-row { grid-template-columns: minmax(0, 1fr) auto; } .stk-row .stk-user { grid-column: 1 / -1; } }
/* models page: content settings */
.mdl-stock .card-head { min-height: 18px; }
.stk-msg { font-size: 12px; color: var(--muted); }
.stk-msg.ok { color: var(--green); }
.stk-msg.err { color: var(--red); }
.stk-set-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.stk-set-row select.pillbtn { max-width: 100%; }
.stk-set-row input[type=number] { font: inherit; font-size: 13px; width: 70px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: center; }
.stk-set-row input.dirty { border-color: var(--blue-2); }
.stk-set-row input.bad { border-color: var(--red); background: var(--red-soft); }
.stk-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.stk-fname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.stk-fname.none { font-weight: 500; color: var(--muted); }
@media (max-width: 460px) { .stk-set-row { grid-template-columns: minmax(0, 1fr); } }
.fld-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 8px; font-size: 12.5px; }
.fld-crumbs .drv-crumb { border: 0; background: none; padding: 2px 4px; font: inherit; color: var(--blue); cursor: pointer; border-radius: 6px; }
.fld-crumbs .drv-crumb:hover { background: var(--line-2); }
.fld-list { max-height: 320px; overflow: auto; display: grid; gap: 4px; }
.fld-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fld-open { flex: 1; min-width: 0; text-align: left; border: 0; background: var(--line-2); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fld-open:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
/* end V7 stock */

/* V7 planner */
.pl-ty-reel { --ty: #7D5A44; --ty-soft: #efe4d6; }
.pl-ty-trial_reel { --ty: #A8874E; --ty-soft: #f5ecd9; }
.pl-ty-story { --ty: #3F7F78; --ty-soft: #dcefec; }
.pl-ty-story_link { --ty: #B5563F; --ty-soft: #f8e3dc; }
.pl-ty-carousel { --ty: #4C6A92; --ty-soft: #e0e8f3; }
.pl-ty-post { --ty: #6E7F4B; --ty-soft: #e8eed9; }
.pl-types-card { padding: 10px 14px; margin-bottom: 14px; display: grid; gap: 8px; }
.pl-typerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-typerow > .label { min-width: 92px; }
.pl-types { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-tbtn, .pl-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ty); color: var(--ty); background: #fff; cursor: pointer; }
.pl-tbtn svg, .pl-chip svg, .pl-tag svg, .pl-menu svg, .pl-t svg { width: 14px; height: 14px; flex: none; }
.pl-tbtn:hover { background: var(--ty); color: #fff; }
.pl-chip { background: var(--ty-soft); }
.pl-chip.off { background: transparent; border-style: dashed; opacity: .55; text-decoration: line-through; }
.cal-post[class*="pl-ty-"] { border-left: 4px solid var(--ty); }
.cal-post .pl-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--ty-soft); color: var(--ty); }
.cal-dn { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pl-plus { font: inherit; font-size: 14px; line-height: 1; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; padding: 0; }
.pl-plus:hover { border-color: var(--blue); color: var(--blue); }
.pl-cnts, .pl-daycnt { display: flex; flex-wrap: wrap; gap: 3px; }
.pl-daycnt { padding: 0 0 10px 62px; }
.pl-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-cnt.ok { background: var(--green-soft); color: #166534; }
.pl-cnt.gap { background: var(--amber-soft); color: #92400e; }
.pl-cnt.gap.past { background: var(--red-soft); color: #991b1b; }
.pl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ty); display: inline-block; }
.pl-menu { position: fixed; z-index: 1200; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(16,24,40,.35); padding: 6px; display: grid; gap: 2px; min-width: 170px; }
.pl-menu button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ty); cursor: pointer; text-align: left; }
.pl-menu button:hover { background: var(--ty-soft); }
.pl-item[class*="pl-ty-"] { border-left: 3px solid var(--ty); padding-left: 9px; }
.pl-item .pl-t { display: inline-flex; align-items: center; gap: 6px; }
.pl-item.pl-due { background: var(--amber-soft); border-radius: 10px; }
.pl-linkline { word-break: break-all; }
.pl-btns a.pillbtn { text-decoration: none; }
.cmp-storylink .cmp-manual { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; margin: 0; }
.cmp-storylink a.pillbtn { text-decoration: none; }
@media (max-width: 720px) {
  .pl-typerow > .label { min-width: 0; width: 100%; }
  .pl-tbtn, .pl-chip { padding: 6px 9px; font-size: 11.5px; }
  .pl-daycnt { padding-left: 0; }
  .cal.month .pl-cnt { font-size: 9px; padding: 0 4px; }
}
/* end V7 planner */

/* V7 alerts */
.side .nav .nav-badge { position: absolute; top: 2px; left: 28px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--brand-brown, #7D5A44); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; line-height: 1; }
.side .nav .nav-badge.crit { background: var(--red); }
.side .nav .nav-badge[hidden] { display: none; }
@media (max-width: 900px) { .side .nav .nav-badge { left: auto; right: 0; } }
.right-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.al-sum { padding: 12px 16px; }
.al-num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.al-sum-critical .al-num { color: var(--red); }
.al-group { margin-bottom: 18px; }
.al-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.al-gh small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.al-gh .count { font-size: 11px; font-weight: 600; background: var(--line-2); color: var(--muted); padding: 1px 8px; border-radius: 999px; }
.al-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.al-critical .al-dot { background: var(--red); }
.al-warning .al-dot { background: var(--amber); }
.al-info .al-dot { background: var(--data-blue, #2f6fed); }
.al-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; border-left: 4px solid var(--faint); }
.al-card.al-critical { border-left-color: var(--red); }
.al-card.al-warning { border-left-color: var(--amber); }
.al-card.al-info { border-left-color: var(--data-blue, #2f6fed); }
.al-card.al-done { opacity: .72; }
.al-main { min-width: 0; flex: 1; }
.al-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-title { font-size: 14px; }
.al-body { margin-top: 4px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.al-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.al-esc { color: var(--red); }
.al-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; max-width: 330px; }
.al-actions a.pillbtn { text-decoration: none; }
.al-hist { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; }
.al-ev { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.al-err { color: var(--red); }
.al-formbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.al-esclist { display: grid; gap: 4px; }
.al-escrow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line-2); cursor: pointer; }
.al-escrow:first-child { border-top: 0; }
.al-escwho { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .al-card { flex-direction: column; gap: 10px; }
  .al-actions { justify-content: flex-start; max-width: none; }
  .al-summary { gap: 8px; }
  .al-sum { padding: 10px 12px; }
  .right-tools { width: 100%; }
}
/* end V7 alerts */