/* Roam: shared palette for desktop and companions. Linen, olive charcoal, stone and soft orange. */
html[data-theme="roam"] {
  color-scheme:dark;
  --tint:#ff8d5b; --accent:#ff8d5b; --accent-2:#b5ad9c; --accent-3:#efebe5;
  --font:"Outfit","Avenir Next",system-ui,sans-serif;
  --bg:#1f221b; --panel:#2a2e25; --panel-2:#343829; --border:#474c3d;
  --text:#efebe5; --muted:#b9b1a0; --input-bg:#24271f; --link:#ffab85;
  --green:#9fd8a4; --red:#ff9f8a; --amber:#f2c66d; --orange:#ffab85;
  --radius:20px; --radius-btn:10px; --radius-input:10px;
  --surface:var(--panel); --surface-border-color:var(--border);
  --grad-brand:linear-gradient(var(--text),var(--text));
  --grad-primary:linear-gradient(#ff8d5b,#ff8d5b);
  --grad-primary-hover:linear-gradient(#ff7a42,#ff7a42);
  --btn-soft:linear-gradient(var(--panel-2),var(--panel-2));
  --btn-soft-hover:linear-gradient(var(--border),var(--border));
  --app-bg:var(--bg); --shadow:0 10px 30px -18px #0009; --shadow-glow:var(--shadow);
}
html[data-theme="roam"][data-mode="light"] {
  color-scheme:light;
  --accent:#ff8d5b; --accent-2:#726a5a; --accent-3:#3c4235;
  --bg:#efebe5; --panel:#ffffff; --panel-2:#f6f3ee; --border:#d7d1c6;
  --text:#3c4235; --muted:#635b4c; --input-bg:#ffffff; --link:#8a3d1c;
  --green:#2f6b3b; --red:#a8321f; --amber:#7a5200; --orange:#8a3d1c;
  --shadow:0 10px 30px -20px #3c423540;
}

/* ---------- Tokens + motion ---------- */
html[data-theme="roam"] {
  --rm-orange:#ff8d5b; --rm-on-orange:#3c4235;
  --rm-stone:#3a3e33; --rm-stone-text:#efebe5;
  --rm-ink:#efebe5; --rm-on-ink:#23261f;
  --rm-seg:#2a2e25; --rm-seg-active:#474c3d;
  --rm-hair:color-mix(in srgb,var(--text) 10%,transparent);
  --rm-mono:"DM Mono",ui-monospace,monospace;
  --rm-ease:cubic-bezier(.25,1,.5,1);
  --gutter:clamp(20px,3vw,56px);
  --cur-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3L4 20.5L8.6 16.6L11.8 23.6L15 22.2L11.9 15.3L18 14.9Z' fill='%233c4235' stroke='%23efebe5' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cellipse cx='21.5' cy='21.5' rx='4.2' ry='3.3' fill='%23ff8d5b' stroke='%23efebe5' stroke-width='1.2' transform='rotate(-18 21.5 21.5)'/%3E%3C/svg%3E") 4 3;
}
html[data-theme="roam"][data-mode="light"] {
  --rm-stone:#d7d1c6; --rm-stone-text:#3c4235;
  --rm-ink:#3c4235; --rm-on-ink:#ffffff;
  --rm-seg:#ffffff; --rm-seg-active:#d7d1c6;
}
@keyframes rm-rise { from { opacity:0; translate:0 18px; } }
@keyframes rm-pop { from { opacity:0; scale:.96; } }

/* ---------- Page + type ---------- */
html[data-theme="roam"][data-mode] body { background:var(--bg); letter-spacing:.005em; }
html[data-theme="roam"][data-mode] :is(h1,h2,h3,h4) { font-family:"Outfit",sans-serif; font-weight:500; letter-spacing:-.035em; color:var(--text); }
html[data-theme="roam"][data-mode] .section-head h2 { font-size:clamp(38px,4.4vw,72px); line-height:1; letter-spacing:-.045em; }
html[data-theme="roam"][data-mode] :is(.stat .label,.themes-eyebrow,.cal .dow) {
  font-family:var(--rm-mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:500;
}
html[data-theme="roam"][data-mode] .station-card .meta { font-family:var(--rm-mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted); }
html[data-theme="roam"] ::selection { background:var(--rm-orange); color:#3c4235; }
html[data-theme="roam"][data-mode] a { color:var(--link); text-underline-offset:.22em; }
html[data-theme="roam"][data-mode] .brand {
  font-family:"Outfit",sans-serif; font-weight:600; font-size:19px; letter-spacing:-.03em;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--text);
}

/* ---------- Header: floating bar with rounded bottom, stone + orange actions ---------- */
html[data-theme="roam"][data-mode][data-style] .topbar {
  position:sticky; top:0; z-index:6; box-sizing:border-box;
  width:calc(min(100%,1600px) - 2 * var(--gutter)); margin:0 auto; padding:10px 14px 10px 20px;
  border:0; border-radius:0 0 18px 18px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 12px 30px -22px #3c423580;
}
html[data-theme="roam"][data-mode] #breadcrumb { gap:2px; }
html[data-theme="roam"][data-mode] #breadcrumb :is(.crumb,.crumb-back,.crumb.current) {
  font-size:15px; font-weight:500; padding:8px 14px; border:1px solid transparent; border-radius:10px; box-shadow:none;
  background:transparent; color:var(--text); transition:background .3s var(--rm-ease),border-color .3s;
}
html[data-theme="roam"][data-mode] #breadcrumb :is(.crumb,.crumb-back):hover { background:var(--rm-seg); border-color:var(--rm-hair); }
html[data-theme="roam"][data-mode] #breadcrumb .crumb-sep { color:var(--muted); }
html[data-theme="roam"][data-mode] .topbar .chip { background:transparent; border:0; color:var(--muted); font-weight:500; }
html[data-theme="roam"][data-mode][data-style] .topbar .btn.ghost { background:transparent; border:1px solid transparent; box-shadow:none; color:var(--text); border-radius:10px; padding:8px 12px; }
html[data-theme="roam"][data-mode][data-style] .topbar .btn.ghost:hover { background:var(--rm-seg); border-color:var(--rm-hair); }
html[data-theme="roam"][data-mode][data-style] .topbar #users-btn { background:var(--rm-stone); color:var(--rm-stone-text); padding:10px 18px; }
html[data-theme="roam"][data-mode][data-style] .topbar #logout-btn { background:var(--rm-orange); color:var(--rm-on-orange); padding:10px 18px; }
html[data-theme="roam"][data-mode][data-style] .topbar :is(#users-btn,#logout-btn):hover { filter:brightness(.96); }
html[data-theme="roam"][data-mode] #content { max-width:1600px; width:auto; margin-inline:auto; padding:32px var(--gutter); }

/* ---------- Station page: centered segmented page bar, stone stat band, full canvas ---------- */
html[data-theme="roam"][data-mode] .station-layout,
html[data-theme="roam"][data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr); gap:20px; }
html[data-theme="roam"][data-mode] .station-rail-left { order:-2; }
html[data-theme="roam"][data-mode] .station-rail-right { order:-1; }
html[data-theme="roam"][data-mode][data-style] .station-rail-left {
  position:sticky; top:74px; z-index:5; justify-self:center; max-width:100%; box-sizing:border-box;
  padding:4px; border:1px solid var(--rm-hair) !important; border-radius:14px !important;
  background:var(--rm-seg) !important; box-shadow:0 10px 26px -20px #3c423566 !important;
  overflow-x:auto; scrollbar-width:none;
}
html[data-theme="roam"][data-mode] .station-rail-left::-webkit-scrollbar { display:none; }
html[data-theme="roam"][data-mode] .tabs.station-tabs-v { flex-direction:row; flex-wrap:nowrap; align-items:center; gap:2px; width:max-content; }
html[data-theme="roam"][data-mode][data-style] .tabs.station-tabs-v .tab {
  width:auto; white-space:nowrap; padding:9px 14px; border:0; border-radius:10px; box-shadow:none !important;
  font-size:14px; font-weight:500; color:var(--text); background:transparent; transition:background .3s var(--rm-ease);
}
html[data-theme="roam"][data-mode][data-style] .tabs.station-tabs-v .tab:hover { background:color-mix(in srgb,var(--rm-seg-active) 45%,transparent); }
html[data-theme="roam"][data-mode][data-style] .tabs.station-tabs-v .tab.active {
  background:var(--rm-seg-active) !important; color:var(--text) !important; animation:rm-pop .35s var(--rm-ease);
}
html[data-theme="roam"][data-mode] .station-tabs-v .station-submenu {
  flex-direction:row; flex-basis:auto; align-items:center; gap:2px; margin:0 4px; padding:2px;
  border-radius:10px; background:color-mix(in srgb,var(--rm-orange) 16%,transparent);
}
html[data-theme="roam"][data-mode][data-style] .station-rail-right {
  padding:8px; border:0 !important; border-radius:var(--radius) !important; box-shadow:none !important; background:var(--rm-stone) !important;
}
html[data-theme="roam"][data-mode] .stats.station-stats-side { flex-direction:row; flex-wrap:wrap; gap:8px; }
html[data-theme="roam"][data-mode][data-style] .stats.station-stats-side .stat {
  flex:1 1 170px; width:auto; padding:16px 20px; border:0 !important; border-radius:14px !important;
  background:color-mix(in srgb,var(--panel) 70%,transparent) !important; box-shadow:none !important;
}
html[data-theme="roam"][data-mode] .stats.station-stats-side .stat + .stat { border-top:0; }
html[data-theme="roam"][data-mode] .stat .label { color:var(--muted); }
html[data-theme="roam"][data-mode] .stat .value { font-family:"Outfit",sans-serif; font-weight:500; font-size:30px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
html[data-theme="roam"][data-mode] .station-main { padding:4px 0 28px; }
html[data-theme="roam"][data-mode] .month-bar { flex-wrap:wrap; row-gap:10px; }

/* ---------- Surfaces: soft, rounded, quiet ---------- */
html[data-theme="roam"][data-mode][data-style] :is(.card,.stat,.modal,.login-card,.status-strip) {
  background:var(--panel) !important; border:1px solid var(--rm-hair) !important; border-radius:var(--radius);
  box-shadow:var(--shadow) !important; -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:translate .5s var(--rm-ease),box-shadow .5s var(--rm-ease);
}
html[data-theme="roam"][data-mode] .card::before { display:none; }
html[data-theme="roam"][data-mode][data-style] .card:hover { transform:none; translate:0 -4px; box-shadow:0 26px 44px -26px #3c423566 !important; }
html[data-theme="roam"][data-mode][data-style] .station-card { padding:28px; border-radius:24px; }
html[data-theme="roam"][data-mode] .station-card h3 { font-size:25px; font-weight:500; letter-spacing:-.04em; }
html[data-theme="roam"][data-mode] .station-card .sc-balance { background:var(--rm-stone) !important; border:0 !important; border-radius:14px; color:var(--rm-stone-text); }
html[data-theme="roam"][data-mode] .station-card .sc-bal-num { font-family:"Outfit",sans-serif; font-weight:500; letter-spacing:-.04em; }
html[data-theme="roam"][data-mode] .add-card { background:transparent !important; border-style:dashed !important; box-shadow:none !important; }

/* ---------- Controls: 10px-rounded buttons — orange primary, olive dark, white outline ---------- */
html[data-theme="roam"][data-mode][data-style] .btn {
  border-radius:10px; font-weight:500; box-shadow:none !important; transition:background .25s,filter .25s,border-color .25s,scale .2s;
}
html[data-theme="roam"][data-mode][data-style] .btn:not(:disabled):active { scale:.97; }
html[data-theme="roam"][data-mode][data-style] .btn:not(.primary):not(.info):not(.danger) { background:var(--panel); border:1px solid var(--rm-hair); color:var(--text); }
html[data-theme="roam"][data-mode][data-style] .btn:not(.primary):not(.info):not(.danger):hover { background:var(--rm-stone); color:var(--rm-stone-text); }
html[data-theme="roam"][data-mode][data-style] .btn.primary { background:var(--rm-orange) !important; color:var(--rm-on-orange) !important; border:0; }
html[data-theme="roam"][data-mode][data-style] .btn.info { background:var(--rm-ink) !important; color:var(--rm-on-ink) !important; border:0; }
html[data-theme="roam"][data-mode][data-style] :is(.btn.primary,.btn.info):hover { filter:brightness(.95); }
html[data-theme="roam"][data-mode][data-style] :is(.tab:not(.active),.seg button:not(.active)) { box-shadow:none !important; }
html[data-theme="roam"][data-mode][data-style] .seg button.active { background:var(--rm-seg-active) !important; color:var(--text) !important; }
html[data-theme="roam"][data-mode][data-style] :is(input,select,textarea) { border-radius:var(--radius-input); border:1px solid var(--rm-hair); background:var(--input-bg); box-shadow:none; }
html[data-theme="roam"][data-mode][data-style] :is(input,select,textarea):focus { outline:2px solid var(--rm-orange); outline-offset:1px; border-color:transparent; }
html[data-theme="roam"][data-mode] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),textarea,[contenteditable="true"]) { cursor:text !important; }
html[data-theme="roam"][data-mode] :disabled { cursor:not-allowed !important; }
html[data-theme="roam"][data-mode] :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--rm-orange); }
html[data-theme="roam"][data-mode][data-style] .cal .day:not(.empty) {
  border-radius:16px !important; background:var(--panel) !important; border:1px solid var(--rm-hair) !important; box-shadow:none !important;
  transition:translate .45s var(--rm-ease),box-shadow .45s var(--rm-ease);
}
html[data-theme="roam"][data-mode][data-style] .cal .day:not(.empty):hover { translate:0 -3px; box-shadow:var(--shadow) !important; }
html[data-theme="roam"][data-mode][data-style] .cal .day.today { background:var(--rm-stone) !important; outline:2px solid var(--rm-orange); outline-offset:-2px; }
html[data-theme="roam"][data-mode] .cal .day.today .num { color:var(--rm-stone-text); }
html[data-theme="roam"][data-mode] .toast:not(.err) { background:var(--rm-ink); color:var(--rm-on-ink); border-radius:999px; font-weight:500; padding:11px 20px; }

/* ---------- Motion: calm rise on arrival, cards drift up in turn ---------- */
html[data-theme="roam"][data-mode] #content > * { animation:rm-rise .8s var(--rm-ease) backwards; }
html[data-theme="roam"][data-mode] #content > :nth-child(2) { animation-delay:.08s; }
html[data-theme="roam"][data-mode] #content > :nth-child(n+3) { animation-delay:.16s; }
html[data-theme="roam"][data-mode] .station-grid > * { animation:rm-rise .9s var(--rm-ease) backwards; }
html[data-theme="roam"][data-mode] .station-grid > :nth-child(2) { animation-delay:.1s; }
html[data-theme="roam"][data-mode] .station-grid > :nth-child(n+3) { animation-delay:.2s; }

/* ---------- Gallery preview ---------- */
.theme-showcase[data-preset="roam"] .theme-showcase-art { background:#efebe5; }
.theme-showcase[data-preset="roam"] .theme-showcase-orbit { border:0; background:#ff8d5b; border-radius:48% 52% 44% 56% / 56% 44% 56% 44%; opacity:1; }
.theme-showcase[data-preset="roam"] .theme-showcase-pane { background:#ffffff; border:1px solid #3c42351a; border-radius:18px; box-shadow:0 10px 24px -16px #3c423566; }
.theme-showcase[data-preset="roam"] .theme-showcase-pane.back { background:#d7d1c6; }
.theme-showcase[data-preset="roam"] .theme-showcase-type { font-family:"Outfit",sans-serif; font-weight:500; color:#3c4235; letter-spacing:-.05em; }
.theme-showcase[data-preset="roam"] .theme-showcase-mini-button { background:#3c4235; border-radius:6px; }
.theme-showcase[data-preset="roam"] .theme-showcase-caption { color:#635b4c; font-family:"DM Mono",ui-monospace,monospace; }


/* ---------- Small screens + accessibility ---------- */
@media (max-width:700px) {
  html[data-theme="roam"][data-mode][data-style] .station-rail-left { position:relative; top:auto; justify-self:stretch; }
  html[data-theme="roam"][data-mode][data-style] .stats.station-stats-side .stat { flex:1 1 calc(50% - 8px); min-width:0; }
  html[data-theme="roam"][data-mode][data-style] .station-card { padding:24px; }
  html[data-theme="roam"][data-mode][data-style] .topbar { border-radius:0 0 14px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-theme="roam"] *, html[data-theme="roam"] *::before, html[data-theme="roam"] *::after { animation:none !important; transition-duration:.01ms !important; }
}