/* Berchtold token snapshot from app/globals.css. Native Studio only. */
:root,
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-elev-1: #111111;
  --bg-elev-2: #222222;
  --bg-elev-3: #2a2a2a;
  --border: #2a2a2a;
  --text: #e8e4e0;
  --text-muted: #bababa;
  --accent: #af88ff;
  --accent-strong: #c4adff;
  --on-accent: #0a0a0a;
  --danger: #f04567;
  --success-text: #6ade8e;
  --warn-text: #ffc36a;
  --error-text: #ff8fa3;
  --focus-ring: #c4adff;
  
  --blue: #38beff;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.6);
  --overlay: rgba(0, 0, 0, 0.7);
  --success-soft-bg: rgba(106, 222, 142, 0.08);
  --success-soft-border: rgba(106, 222, 142, 0.35);
  --error-soft-bg: rgba(255, 143, 163, 0.08);
  --error-soft-border: rgba(255, 143, 163, 0.4);
  
  --warn-soft-bg: rgba(255, 195, 106, 0.1);
  --warn-soft-border: rgba(255, 195, 106, 0.4);
  
  --funnel-1: #d8c7ff;
  --funnel-2: #c9b3ff;
  --funnel-3: #ba9ffb;
  --funnel-4: #ab8bf4;
  --funnel-5: #9c78ec;
  --funnel-ink: #0a0a0a;
  --accent-soft-bg: rgba(155, 109, 255, 0.1);
  --accent-soft-border: rgba(155, 109, 255, 0.3);
  --danger-soft-bg: rgba(240, 69, 103, 0.08);
  --parchment: #b8b0a6;
  
  --text-tertiary: #8f8f8f;
  --surface-hover: #1a1a1a;
  --border-strong: #6a6a6a;
  --accent-wash: rgba(175, 136, 255, 0.14);
  
  --input-border: #757575;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f0eeeb;
  --bg-elev-1: #ffffff;
  --bg-elev-2: #e2e0db;
  --bg-elev-3: #d2cfca;
  --border: #c8c4be;
  --text: #1a1a1a;
  --text-muted: #3a3a3a;
  
  --accent: #5324c4;
  --accent-strong: #3b1aa1;
  --on-accent: #ffffff;
  --danger: #a3122a;
  --success-text: #0f5026;
  --warn-text: #6d3a00;
  --error-text: #a3122a;
  --focus-ring: #5324c4;
  
  --blue: #1466a8;
  --shadow-card: 0 8px 24px rgba(20, 20, 30, 0.08);
  --shadow-menu: 0 12px 32px rgba(20, 20, 30, 0.18);
  --overlay: rgba(20, 20, 30, 0.45);
  --success-soft-bg: rgba(15, 80, 38, 0.08);
  --success-soft-border: rgba(15, 80, 38, 0.4);
  --error-soft-bg: rgba(163, 18, 42, 0.08);
  --error-soft-border: rgba(163, 18, 42, 0.4);
  --warn-soft-bg: rgba(109, 58, 0, 0.1);
  --warn-soft-border: rgba(109, 58, 0, 0.4);
  --funnel-1: #7c5bd9;
  --funnel-2: #6b45d0;
  --funnel-3: #5a31c6;
  --funnel-4: #4a20b4;
  --funnel-5: #3b1699;
  --funnel-ink: #ffffff;
  --accent-soft-bg: rgba(91, 43, 217, 0.1);
  --accent-soft-border: rgba(91, 43, 217, 0.35);
  --danger-soft-bg: rgba(163, 18, 42, 0.08);
  --parchment: #6b6660;
  
  --text-tertiary: #6b6660;
  --surface-hover: #f4f2ef;
  --border-strong: #8b857d;
  --accent-wash: rgba(91, 43, 217, 0.12);
  --input-border: #818181;
  color-scheme: light;
}
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  
  --page-gap: var(--sp-5);
  --page-padding-block: var(--sp-8);
  
  --container-max: 1400px;
  --container-gutter: var(--sp-6);
  
  --topbar-h: 77px;
  
  --ws-sidebar-w: 268px;

  
  --fs-caption: 12px;   
  --fs-body-sm: 13px;   
  --fs-body: 14px;      
  --fs-body-lg: 15px;   
  --fs-h3: 17px;
  --fs-h2: 20px;
  --fs-h1: 26px;
  --fs-display: 32px;

  
  
  --radius-xs: 4px;     
  --radius-sm: 8px;     
  --radius-md: 10px;    
  --radius-lg: 14px;    
  --radius-full: 999px; 
  
  --radius-button: var(--radius-full);
  


 --font-text: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
 --font-display: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
 --font-eyebrow: "trade-gothic-next", "Arial Narrow", sans-serif;
 --font-mono: "source-code-pro", ui-monospace, monospace;
 --motion-fast: 150ms;
}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-body);
  line-height:1.5}
button,input,select,textarea {
  font:inherit}
a {
  color:var(--accent);
  text-decoration:none}
button,.upload-button {
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-2) var(--sp-4);
  background:var(--bg-elev-2);
  color:var(--text);
  cursor:pointer;
  font-weight:550}
button:hover:not(:disabled) {
  border-color:var(--accent)}
button:disabled {
  opacity:.45;
  cursor:not-allowed}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px}
.primary {
  background:var(--accent);
  color:var(--on-accent);
  border-color:transparent;
  border-radius:var(--radius-full);
  padding:var(--sp-3) var(--sp-5)}
.icon {
  background:none;
  border:0;
  padding:var(--sp-1) var(--sp-2);
  font-size:var(--fs-h2)}
.muted,small {
  color:var(--text-muted)}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:var(--fs-display);
  line-height:1.15;
  letter-spacing:-1.3px;
  font-weight:650}
h2 {
  font-size:var(--fs-h2);
  letter-spacing:-.4px}
label {
  display:block}
input,select,textarea {
  background:var(--bg-elev-1);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:var(--sp-2) var(--sp-3);
  width:100%}
textarea {
  resize:vertical;
  min-height:140px}
input[type=checkbox] {
  width:17px;
  height:17px;
  accent-color:var(--accent)}
.eyebrow {
  display:block;
  font-size:var(--fs-caption);
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:750;
  color:var(--accent);
  margin-bottom:var(--sp-3)}
.shell {
  display:flex;
  min-height:100vh}
.rail {
  position:sticky;
  top:0;
  height:100vh;
  width:104px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:var(--sp-5) var(--sp-2);
  border-right:1px solid var(--border);
  background:var(--bg-elev-1)}
.rail img {
  width:44px;
  height:44px;
  object-fit:contain}
.rail-label {
  font-size:var(--fs-caption);
  letter-spacing:2px;
  margin:var(--sp-2) 0 var(--sp-6);
  color:var(--text-muted)}
.rail nav {
  display:grid;
  gap:var(--sp-2);
  width:100%}
.rail nav button {
  border:0;
  background:none;
  font-size:var(--fs-caption);
  padding:var(--sp-3) var(--sp-1);
  display:grid;
  gap:var(--sp-1);
  justify-items:center}
.rail nav button span {
  font-size:var(--fs-h1);
  line-height:1.2}
.rail nav .active {
  background:var(--accent);
  color:var(--on-accent)}
.app-link {
  margin-top:auto;
  text-align:center;
  font-size:var(--fs-h2);
  color:var(--text-muted)}
.app-link span {
  display:block;
  font-size:var(--fs-caption)}
.workspace {
  min-width:0;
  flex:1}
.topbar {
  height:86px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  padding:0 var(--sp-6)}
.brand-control label {
  font-size:var(--fs-caption);
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--text-muted)}
.brand-control select {
  font-weight:650;
  max-width:310px;
  padding:var(--sp-1) var(--sp-5) var(--sp-1) 0;
  border:none;
  background:none;
  font-size:var(--fs-body-lg)}
.top-actions {
  display:flex;
  gap:var(--sp-4);
  align-items:center}
.user-email {
  color:var(--text-muted);
  font-size:var(--fs-caption)}
main {
  padding:var(--sp-6) var(--sp-6);
  max-width:1900px;
  margin:auto}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-4);
  margin:var(--sp-1) 0 var(--sp-5)}
.page-heading p {
  margin-top:var(--sp-2);
  color:var(--text-muted)}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-4);
  margin-bottom:var(--sp-5)}
.stats>div {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg-elev-1)}
.stats span {
  color:var(--text-muted);
  font-size:var(--fs-caption);
  display:block}
.stats strong {
  display:block;
  font-size:var(--fs-h1);
  font-weight:550;
  letter-spacing:-1px;
  margin-top:var(--sp-1);
  font-variant-numeric:tabular-nums}
.toolbar,.calendar-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-bottom:var(--sp-4)}
.tabs {
  display:flex;
  gap:var(--sp-1);
  flex-wrap:wrap}
.tabs button {
  font-size:var(--fs-caption);
  background:none;
  border-color:transparent;
  padding:var(--sp-2) var(--sp-3)}
.tabs .selected {
  background:var(--bg-elev-2);
  color:var(--accent)}
.search {
  width:220px;
  font-size:var(--fs-caption)}
.calendar {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-elev-1);
  overflow:hidden}
.calendar-tools {
  padding:var(--sp-4) var(--sp-4);
  margin:0}
.calendar-tools>div {
  display:flex;
  align-items:center;
  gap:var(--sp-3)}
.calendar-tools h2 {
  min-width:150px}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))}
.weekday {
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:var(--fs-caption);
  text-transform:uppercase;
  letter-spacing:1px}
.day {
  min-height:126px;
  border-top:1px solid var(--border);
  border-right:1px solid var(--border);
  padding:var(--sp-2);
  min-width:0}
.day:nth-child(7n) {
  border-right:none}
.day.outside {
  background:var(--bg)}
.outside .day-label {
  opacity:.45}
.day-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--fs-caption)}
.day-label>span {
  width:26px;
  height:26px;
  display:grid;
  place-items:center}
.today {
  background:var(--accent);
  color:var(--on-accent);
  border-radius:var(--radius-full)}
.add-day {
  font-size:var(--fs-body-lg);
  opacity:.4;
  padding:0 var(--sp-1)}
.day:hover .add-day {
  opacity:1}
.week .day {
  min-height:400px}
.calendar-bottom {
  display:flex;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);
  font-size:var(--fs-caption);
  color:var(--text-muted)}
.post-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp-4)}
.post-card {
  display:block;
  text-align:left;
  white-space:normal;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-elev-1);
  padding:var(--sp-3);
  width:100%;
  overflow:hidden}
.post-card>img {
  width:100%;
  height:150px;
  object-fit:cover;
  margin-top:var(--sp-3);
  border-radius:var(--radius-sm)}
.post-card p {
  margin:var(--sp-3) 0;
  font-weight:400;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere}
.post-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-1);
  font-size:var(--fs-caption)}
.status {
  font-size:var(--fs-caption);
  text-transform:capitalize;
  padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius-lg);
  background:var(--bg-elev-2)}
.status.scheduled {
  color:var(--accent)}
.status.published {
  color:var(--success-text)}
.status.unknown,.status.failed,.status.partial {
  color:var(--error-text)}
.post-networks {
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1);
  font-size:var(--fs-caption);
  color:var(--text-muted)}
.compact {
  padding:var(--sp-2);
  margin-top:var(--sp-2);
  background:var(--bg-elev-2)}
.compact p {
  font-size:var(--fs-caption);
  margin:var(--sp-1) 0;
  -webkit-line-clamp:2}
.compact>img {
  display:none}
.compact .status {
  padding:0}
.compact .post-meta {
  font-size:var(--fs-caption)}
.media-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--sp-4)}
.media-card {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-elev-1)}
.media-card>img,.media-card>video {
  width:100%;
  height:200px;
  object-fit:cover}
.media-card>div {
  padding:var(--sp-4)}
.media-card strong {
  display:block;
  overflow-wrap:anywhere;
  font-size:var(--fs-body-sm)}
.media-card span {
  display:block;
  color:var(--text-muted);
  font-size:var(--fs-caption);
  margin:var(--sp-2) 0}
.media-card button {
  font-size:var(--fs-caption);
  padding:var(--sp-1) var(--sp-2)}
.upload-button input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0}
.upload-button:focus-within {
  outline:2px solid var(--accent)}
.channel-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--sp-4)}
.channel-card {
  padding:var(--sp-5);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-elev-1)}
.network-heading {
  display:flex;
  gap:var(--sp-3);
  align-items:center;
  margin-bottom:var(--sp-5)}
.network-heading h2 {
  font-size:var(--fs-h3)}
.network-heading .muted {
  font-size:var(--fs-caption)}
.network {
  height:42px;
  width:42px;
  flex-shrink:0;
  border-radius:var(--radius-md);
  display:grid;
  place-items:center;
  background:var(--bg-elev-2);
  font-weight:800;
  font-size:var(--fs-h2)}
.channel-card p {
  color:var(--text-muted);
  font-size:var(--fs-body-sm);
  min-height:42px;
  margin-bottom:var(--sp-4)}
.connected {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  border-top:1px solid var(--border);
  padding:var(--sp-3) 0}
.connected span {
  display:block;
  font-size:var(--fs-caption)}
.connected button {
  padding:var(--sp-1) var(--sp-2);
  font-size:var(--fs-caption)}
.footnote {
  font-size:var(--fs-caption);
  color:var(--text-muted);
  margin-top:var(--sp-5)}
.empty {
  padding:var(--sp-8) var(--sp-5);
  text-align:center;
  grid-column:1/-1}
.empty-symbol {
  display:grid;
  place-items:center;
  margin:0 auto var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  height:58px;
  width:58px;
  font-size:var(--fs-h1);
  color:var(--accent)}
.empty p {
  color:var(--text-muted);
  max-width:430px;
  margin:var(--sp-3) auto var(--sp-4)}
.banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-2) var(--sp-4);
  background:var(--bg-elev-2);
  border-radius:var(--radius-md);
  margin-bottom:var(--sp-4)}
.error {
  color:var(--error-text)}
.sync {
  display:block;
  font-size:var(--fs-caption);
  color:var(--text-muted);
  margin-top:var(--sp-4)}
footer {
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--border);
  font-size:var(--fs-caption);
  color:var(--text-muted);
  display:flex;
  justify-content:space-between}
dialog {
  width:min(600px,calc(100vw - 32px));
  max-height:90vh;
  background:var(--bg-elev-1);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  box-shadow:var(--shadow-menu)}
dialog.wide {
  width:min(1000px,calc(100vw - 32px))}
dialog::backdrop {
  background:var(--overlay);
  backdrop-filter:blur(4px)}
dialog>header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--sp-5)}
dialog>p {
  margin-bottom:var(--sp-4)}
.composer {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--sp-6)}
.composer label {
  font-size:var(--fs-caption);
  color:var(--text-muted);
  margin:var(--sp-4) 0 var(--sp-2)}
.composer input,.composer textarea,.composer select {
  margin-top:var(--sp-2)}
.count {
  display:block;
  text-align:right;
  color:var(--text-muted);
  font-size:var(--fs-caption)}
.channel-options {
  display:grid;
  gap:var(--sp-2);
  margin:var(--sp-3) 0}
.channel-options label {
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  background:var(--bg-elev-2);
  border-radius:var(--radius-sm);
  margin:0;
  color:var(--text)}
.channel-options input {
  margin:0}
.channel-options small {
  display:block}
.preview {
  padding:var(--sp-4);
  background:var(--bg);
  border-radius:var(--radius-lg);
  align-self:start}
.preview-card {
  background:var(--bg-elev-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden}
.preview-author {
  display:flex;
  gap:var(--sp-3);
  align-items:center;
  padding:var(--sp-4)}
.avatar {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:var(--radius-full);
  font-weight:bold}
.preview-author small {
  display:block;
  font-size:var(--fs-caption)}
.preview-card p {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  padding:0 var(--sp-4) var(--sp-4)}
.preview-card>img,.preview-card>video {
  width:100%;
  max-height:300px;
  object-fit:contain}
.preview-reactions {
  display:flex;
  gap:var(--sp-5);
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:var(--fs-caption)}
.delivery {
  font-size:var(--fs-caption);
  margin-top:var(--sp-4);
  overflow-wrap:anywhere}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:var(--sp-2);
  border-top:1px solid var(--border);
  padding-top:var(--sp-4);
  margin-top:var(--sp-5)}
.dialog-actions>span {
  flex:1}
.danger {
  color:var(--error-text)}
.loading {
  min-height:100vh;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:var(--sp-4)}
.loading img {
  width:60px}
.login {
  max-width:none;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(360px,480px) 1fr;
  padding:var(--sp-4);
  gap:var(--sp-4)}
.login-panel {
  padding:var(--sp-8) var(--sp-8);
  background:var(--bg-elev-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  justify-content:center}
.wordmark {
  width:190px;
  height:auto;
  object-fit:contain;
  align-self:start}
.login-panel>.eyebrow {
  margin-top:var(--sp-2);
  margin-bottom:var(--sp-6)}
.login h1 {
  font-size:var(--fs-display);
  margin-bottom:var(--sp-4)}
.login-panel>p {
  color:var(--text-muted);
  margin-bottom:var(--sp-5)}
.login-panel label {
  font-size:var(--fs-caption);
  margin-bottom:var(--sp-3)}
.login-panel input {
  margin-top:var(--sp-2)}
.login-panel form button {
  width:100%;
  margin-top:var(--sp-2)}
.login-panel>a {
  font-size:var(--fs-caption);
  margin-top:var(--sp-5);
  text-align:center}
.divider {
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  font-size:var(--fs-caption);
  color:var(--text-muted);
  margin:var(--sp-5) 0}
.divider:before,.divider:after {
  content:'';
  flex:1;
  height:1px;
  background:var(--border)}
.login-story {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vw}
.login-story h2 {
  font-size:clamp(50px,6vw,100px);
  line-height:1.02;
  letter-spacing:-4px}
.login-story em {
  font-style:normal;
  color:var(--accent)}
.login-story>p {
  margin-top:var(--sp-6);
  font-size:var(--fs-h3);
  color:var(--text-muted);
  max-width:450px}
.story-line {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--border);
  margin-top:var(--sp-8);
  padding-top:var(--sp-4);
  gap:var(--sp-4);
  font-size:var(--fs-caption);
  letter-spacing:1px}
.login-panel .error {
  color:var(--error-text);
  margin-top:var(--sp-4)}
@media(min-width:1600px) {
  .day {
  min-height:160px}
}
@media(max-width:1000px) {
  main {
  padding:var(--sp-5)}
.topbar {
  padding:0 var(--sp-5)}
.user-email {
  display:none}
.stats {
  gap:var(--sp-2)}
.stats>div {
  padding:var(--sp-3)}
.toolbar {
  flex-wrap:wrap}
.calendar-grid {
  min-width:650px}
.calendar-scroll {
  overflow-x:auto}
.login-story {
  padding:var(--sp-6)}
.login-story h2 {
  font-size:var(--fs-display)}
.composer {
  grid-template-columns:1fr}
.preview {
  display:none}
}
@media(max-width:700px) {
  .rail {
  width:70px;
  padding:var(--sp-4) var(--sp-1)}
.rail nav button {
  font-size:var(--fs-caption)}
.rail-label {
  font-size:var(--fs-caption)}
.rail img {
  width:35px;
  height:35px}
.topbar {
  padding:0 var(--sp-4);
  height:75px;
  gap:var(--sp-2)}
.brand-control select {
  max-width:175px;
  font-size:var(--fs-body)}
.top-actions {
  gap:0}
.top-actions>button:last-child {
  font-size:var(--fs-caption);
  padding:var(--sp-2)}
.page-heading {
  align-items:flex-start;
  flex-direction:column}
h1 {
  font-size:var(--fs-display)}
main {
  padding:var(--sp-5) var(--sp-4)}
.stats {
  grid-template-columns:repeat(2,1fr)}
.stats strong {
  font-size:var(--fs-h1)}
.tabs button {
  padding:var(--sp-2);
  font-size:var(--fs-caption)}
.calendar-tools {
  padding:var(--sp-3);
  flex-wrap:wrap}
.calendar-tools>div {
  gap:var(--sp-1)}
.calendar-tools h2 {
  min-width:120px;
  font-size:var(--fs-body-lg)}
.calendar-bottom {
  display:block;
  font-size:var(--fs-caption)}
.calendar-bottom span {
  display:block}
.search {
  width:100%}
.channel-grid {
  grid-template-columns:1fr}
.dialog-actions {
  flex-wrap:wrap}
.login {
  display:block;
  padding:var(--sp-3)}
.login-panel {
  padding:var(--sp-6) var(--sp-5);
  min-height:calc(100vh - 24px)}
.login-story {
  display:none}
footer {
  padding:var(--sp-4) var(--sp-4)}
footer span {
  display:none}
.media-grid {
  grid-template-columns:1fr}
}


.generation-panel {
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  margin-bottom:var(--sp-5)}
.generation-panel textarea {
  width:100%;
  box-sizing:border-box}
.generation-panel label {
  display:block}
.generation-panel .toolbar {
  justify-content:flex-start;
  gap:var(--sp-4)}
.generation-panel .delivery {
  margin-top:var(--sp-3);
  overflow-wrap:anywhere}


body {
  font-family:var(--font-text);
  font-size:var(--fs-body)}

h1,h2,h3 {
  font-family:var(--font-display);
  letter-spacing:-.025em}

.eyebrow,.rail-label,.weekday,.brand-control label {
  font-family:var(--font-eyebrow);
  font-size:var(--fs-caption);
  letter-spacing:.09em}

button,.upload-button {
  border-radius:var(--radius-button);
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-weight:600;
  transition:background var(--motion-fast),border-color var(--motion-fast)}

button:hover:not(:disabled) {
  background:var(--surface-hover)}

button.primary:hover:not(:disabled) {
  background:var(--accent-strong);
  color:var(--on-accent)}

input,select,textarea {
  border-color:var(--input-border);
  border-radius:var(--radius-sm)}

:focus-visible {
  outline-color:var(--focus-ring)}

.ui-icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle}

.icon {
  width:40px;
  height:40px;
  padding:var(--sp-2);
  flex-shrink:0}

.rail {
  width:112px;
  padding:var(--sp-5) var(--sp-2)}

.rail nav button {
  border-radius:var(--radius-md);
  font-size:var(--fs-caption);
  min-height:64px;
  gap:var(--sp-2)}

.rail nav button .ui-icon {
  width:24px;
  height:24px}

.rail nav .active:hover {
  background:var(--accent);
  color:var(--on-accent)}

.app-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2)}

.app-link span {
  font-size:var(--fs-caption)}

.topbar {
  min-height:80px;
  height:auto;
  padding:var(--sp-4) var(--sp-6)}

.brand-control select {
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  padding:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-1);
  min-width:200px}

main {
  padding:var(--sp-6);
  max-width:var(--container-max)}

.page-heading {
  margin-bottom:var(--page-gap)}

.stats strong {
  font-family:var(--font-mono);
  font-size:var(--fs-h1);
  letter-spacing:0}

.tabs {
  padding:var(--sp-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-elev-1)}

.tabs button {
  border-radius:var(--radius-sm);
  font-size:var(--fs-body-sm)}

.tabs .selected {
  background:var(--accent-soft-bg);
  color:var(--accent)}

.post-card {
  display:block;
  border-radius:var(--radius-lg)}

.status {
  border-radius:var(--radius-xs);
  font-size:var(--fs-caption)}

.status.published {
  background:var(--success-soft-bg);
  color:var(--success-text)}

.status.submitted,.status.partial,.status.unknown {
  background:var(--warn-soft-bg);
  color:var(--warn-text)}

.status.failed {
  background:var(--error-soft-bg);
  color:var(--error-text)}

.banner.error {
  background:var(--error-soft-bg);
  border:1px solid var(--error-soft-border)}

.day-label .icon {
  min-height:32px;
  width:32px;
  height:32px;
  opacity:1}

.dialog-actions {
  flex-wrap:wrap}

.channel-card {
  display:flex;
  flex-direction:column;
  gap:var(--sp-4)}

.channel-card>button {
  align-self:flex-start;
  margin-top:auto}

.network-heading,.channel-card p {
  margin-bottom:0}

.network .ui-icon {
  width:24px;
  height:24px}

.generation-panel {
  background:var(--bg-elev-1);
  border-radius:var(--radius-lg)}

.generation-panel form {
  display:grid;
  gap:var(--sp-4);
  margin-top:var(--sp-5)}

.generation-panel form>button {
  justify-self:start}

.generation-panel label {
  font-size:var(--fs-body-sm);
  font-weight:600}

.generation-panel textarea,.generation-panel select {
  margin-top:var(--sp-2)}

.generation-panel .toolbar {
  margin:0;
  align-items:end;
  flex-wrap:wrap}

.generation-panel .toolbar label {
  flex:1;
  min-width:160px}

.generation-panel .muted {
  font-size:var(--fs-body-sm);
  font-weight:400}

.generation-panel .delivery {
  padding-top:var(--sp-4);
  border-top:1px solid var(--border)}

summary {
  cursor:pointer;
  padding:var(--sp-3) 0;
  color:var(--accent);
  font-size:var(--fs-body-sm)}

.login-story h2 {
  font-size:clamp(32px,5vw,72px);
  letter-spacing:-.04em}

.login-panel .wordmark {
  background:transparent;
  padding:var(--sp-2);
  border-radius:var(--radius-sm)}

.preview-reactions {
  align-items:center}

@media(max-width:1000px) {
  .preview {
  display:block}
.composer {
  grid-template-columns:1fr}
.topbar {
  padding:var(--sp-4) var(--sp-5)}
}

@media(max-width:700px) {
  .rail {
  width:88px;
  padding:var(--sp-4) var(--sp-1)}
.rail nav button {
  font-size:var(--fs-caption)}
.rail-label {
  font-size:var(--fs-caption)}
.topbar {
  padding:var(--sp-3);
  flex-wrap:wrap}
.brand-control {
  min-width:0;
  flex:1}
.brand-control select {
  min-width:0;
  width:100%;
  max-width:220px}
.top-actions {
  gap:var(--sp-1)}
main {
  padding:var(--sp-5) var(--sp-3)}
.generation-panel {
  padding:var(--sp-4)}
.tabs button {
  font-size:var(--fs-caption)}
.dialog-actions button {
  flex-grow:1}
.calendar-tools {
  align-items:flex-start}
.stats {
  gap:var(--sp-2)}
}

@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important;
  scroll-behavior:auto!important}
}


@media(max-width:700px){button,.icon,.upload-button{min-height:44px}.icon{min-width:44px}.day-label .icon{min-width:32px;min-height:32px}}

/* Platform identities use recognizable brand marks, not interface metaphors. */
.platform-icon { width:24px; height:24px; flex-shrink:0; object-fit:contain; }
.network.facebook { color:#0866ff; }
.network.instagram { color:#e4405f; }
.network.linkedin { color:#0a66c2; }
.network.youtube { color:#ff0033; }
.network.gmb .platform-icon { width:32px; height:32px; }

/* Shared Berchtold intelligence and DAM, sized for both desktop and mobile. */
.editor-tool { display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; padding:var(--sp-5); background:var(--bg-elev-1); border:1px solid var(--border); border-radius:var(--radius-lg); margin-block:var(--sp-4); }
.editor-tool h3 { display:flex; align-items:center; gap:var(--sp-2); }
.editor-tool h4 { font-size:var(--fs-body); margin:0; }
.editor-tool p,.editor-tool ul { margin:0; }
.editor-tool>button { align-self:flex-start; }
.editor-tool label { display:block; margin:0; font-size:var(--fs-body-sm); }
.editor-tool input,.editor-tool select { width:100%; margin-top:var(--sp-2); }
.editor-tool li { overflow-wrap:anywhere; }
.tool-error { color:var(--error-text); }
.tool-success { color:var(--success-text); }
.tool-findings { list-style:none; padding:0; display:grid; gap:var(--sp-3); }
.tool-findings li { display:flex; flex-direction:column; gap:var(--sp-2); border-top:1px solid var(--border); padding-top:var(--sp-3); }
.tool-findings button { align-self:flex-start; }
.tool-score { font-family:var(--font-mono); font-size:var(--fs-h1); }
.tool-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.tool-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
.rewrite-preview { padding:var(--sp-4); border:1px solid var(--accent-soft-border); border-radius:var(--radius-md); display:grid; gap:var(--sp-3); }
.preserve-copy { white-space:pre-wrap; overflow-wrap:anywhere; }
.composer-fields { min-width:0; }
.composer details { padding-block:var(--sp-4); border-block:1px solid var(--border); margin-block:var(--sp-4); }
.composer summary { cursor:pointer; padding-block:var(--sp-2); font-weight:600; }
.composer details .editor-tool { padding:var(--sp-4); }
.preview .editor-tool { position:static; }
.preview .avatar .platform-icon { width:24px; height:24px; }
.preview-cta { display:block; text-align:center; padding:var(--sp-3); border-top:1px solid var(--border); color:var(--accent); }
.preview-comment { border-top:1px solid var(--border); }
.dam-filters { display:grid; grid-template-columns:minmax(160px,2fr) minmax(100px,1fr) minmax(120px,1fr) auto; gap:var(--sp-3); align-items:end; }
.dam-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--sp-4); }
.dam-grid article { min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--radius-md); }
.dam-grid article strong { overflow-wrap:anywhere; font-size:var(--fs-body-sm); }
.dam-grid article small { color:var(--text-muted); }
.dam-grid article button { margin-top:auto; }
.dam-grid img,.dam-video { width:100%; height:140px; object-fit:contain; background:var(--bg-elev-2); border-radius:var(--radius-sm); }
.dam-video { display:grid; place-items:center; }
.compact .dam-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
.compact .dam-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:760px){
 .dam-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .editor-tool { padding:var(--sp-4); }
 .tool-columns { grid-template-columns:1fr; }
 .dialog-actions { position:static; }
 .composer input,.composer textarea,.composer select,.dam-filters input,.dam-filters select { font-size:16px; }
}
@media(max-width:480px){ .dam-grid,.compact .dam-grid { grid-template-columns:1fr; } .dam-filters,.compact .dam-filters { grid-template-columns:1fr; } }

.media-sources { display:flex; flex-wrap:wrap; width:fit-content; gap:var(--sp-1); margin-bottom:var(--sp-5); }
.composer .count.tool-error { color:var(--error-text); }
@media(max-width:700px){
 .shell { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
 .rail { position:fixed; top:auto; bottom:0; left:0; height:auto; width:100%; padding:var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--border); z-index:20; }
 .rail>a,.rail-label { display:none; }
 .rail nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-1); }
 .rail nav button { min-height:56px; padding:var(--sp-2) var(--sp-1); }
 .topbar { align-items:center; }
 .brand-control select { max-width:100%; font-size:16px; }
 .workspace { width:100%; }
 dialog.wide { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:var(--sp-4); }
 .dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .dialog-actions>span { display:none; }
 .dialog-actions button { width:100%; }
}