/* ===========================================================================
   8day · ScheduleCloud — styles.css
   Vanilla CSS. Orange brand palettes with light + dark themes via [data-theme].
   =========================================================================== */

/* ----------------------------- Design tokens ----------------------------- */
:root {
  /* Brand orange ramp (shared by both themes) */
  --o-50:  #fff4ec;
  --o-100: #ffe3cf;
  --o-200: #ffc59c;
  --o-300: #ffa066;
  --o-400: #ff7e33;
  --o-500: #f4640f;   /* primary */
  --o-600: #d44e06;
  --o-700: #a83c08;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --gap: 16px;

  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(20,12,4,.06), 0 1px 3px rgba(20,12,4,.08);
  --shadow-md: 0 6px 20px rgba(40,20,4,.10);
  --shadow-lg: 0 18px 50px rgba(40,20,4,.18);

  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

/* Light theme */
[data-theme='light'] {
  --bg:        #f7f3ee;
  --surface:   #ffffff;
  --surface-2: #fbf6f0;
  --elevated:  #ffffff;
  --border:    #ece2d6;
  --border-strong: #e0d2c1;

  --text:      #2a1d12;
  --text-soft: #6b5a49;
  --text-mut:  #9a8978;

  --primary:   var(--o-500);
  --primary-ink: #ffffff;
  --primary-soft: var(--o-50);
  --ring: rgba(244,100,15,.30);

  --sidebar-bg: #fffaf4;
  --good: #1f9d57; --good-bg:#e4f7ec;
  --warn: #b4790a; --warn-bg:#fbefd1;
  --bad:  #d23b34; --bad-bg:#fde6e4;
  --pink: #d6336c; --gold:#c8890b; --blue:#2f6dd0; --green:#1f9d57;
}

/* Dark theme */
[data-theme='dark'] {
  --bg:        #17120d;
  --surface:   #211a13;
  --surface-2: #1a140e;
  --elevated:  #2a2017;
  --border:    #352a1f;
  --border-strong: #43352658;

  --text:      #f6ede2;
  --text-soft: #c4b3a1;
  --text-mut:  #8c7a67;

  --primary:   var(--o-400);
  --primary-ink: #1a0f04;
  --primary-soft: #2c1d10;
  --ring: rgba(255,126,51,.32);

  --sidebar-bg: #1c1610;
  --good:#46c585; --good-bg:#13321f;
  --warn:#e0a93c; --warn-bg:#332611;
  --bad:#ef6b62; --bad-bg:#3a1715;
  --pink:#ef76a2; --gold:#e6b54a; --blue:#6ea2ef; --green:#46c585;
}

/* ------------------------------- Base ----------------------------------- */
* { box-sizing: border-box; }
/* The hidden attribute must always win, even over components that set their own
   display (e.g. .app{display:grid}). Prevents hidden screens leaking through. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}
h1,h2,h3,h4 { font-family: var(--font-head); margin: 0; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--o-200); color: #2a1d12; }

/* ------------------------------- Landing -------------------------------- */
.landing[hidden] { display: none; }
.landing {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: #140d07; color: #f6ede2; display: flex; flex-direction: column;
  font-family: var(--font-body);
  /* Dark token overrides so reused app components (pricing tiers, FAQ,
     inputs) render in the landing's dark theme regardless of app theme. */
  --surface: #211a13; --surface-2: #1a140e; --elevated: #2a2017;
  --border: #352a1f; --border-strong: #463829;
  --text: #f6ede2; --text-soft: #c4b3a1; --text-mut: #8c7a67;
  --primary-soft: #2c1d10; --o-200: #5a3a1e;
}
.lhero[hidden], .lpage[hidden] { display: none; }
.lpage { flex: 1; max-width: 1120px; margin: 0 auto; width: 100%; padding: 3vh 6vw 6vh; }
.lpage__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.lpage__head h2 { font-family: var(--font-head); font-size: 26px; }
.lpage .cycle-card, .lpage .faq, .lpage .legal { max-width: none; }
.landing__bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 12%, rgba(255,126,51,.28), transparent 70%),
    radial-gradient(50% 50% at 12% 88%, rgba(212,78,6,.22), transparent 70%),
    radial-gradient(40% 40% at 85% 85%, rgba(255,160,102,.14), transparent 70%),
    linear-gradient(160deg, #1c120a, #0e0905);
}
.landing__bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px; mix-blend-mode: overlay; opacity: .4;
}

.lnav { display: flex; align-items: center; justify-content: space-between; padding: 20px 6vw; }
.lnav__brand { display: flex; align-items: center; gap: 11px; }
.lnav__name { font-family: var(--font-head); font-weight: 800; font-size: 17px; }
.lnav__name b { color: var(--o-300); font-weight: 800; }
.lnav__links { display: flex; align-items: center; gap: 24px; }
.lnav__links a { font-size: 14px; color: #c4b3a1; font-weight: 500; cursor: pointer; }
.lnav__links a:hover { color: #fff; }
.btn--scoutline { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.btn--scoutline:hover { border-color: var(--o-400); color: var(--o-300); }

.lhero {
  flex: 0 0 auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center;
  padding: 5vh 6vw 4vh; max-width: 1280px; margin: 0 auto; width: 100%;
}

/* Trust indicators */
.trust { max-width: 1280px; margin: 0 auto 3vh; width: 100%; padding: 0 6vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trust__item { background: rgba(32, 22, 14, .5); border: 1px solid rgba(255, 160, 102, .14); border-radius: 16px; padding: 22px; backdrop-filter: blur(8px); transition: border-color var(--transition), transform var(--transition); }
.trust__item:hover { border-color: var(--o-400); transform: translateY(-2px); }
.trust__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(255, 126, 51, .14); border: 1px solid rgba(255, 160, 102, .22); margin-bottom: 14px; }
.trust__item h3 { font-family: var(--font-head); font-size: 16.5px; margin-bottom: 8px; }
.trust__item p { font-size: 13.5px; color: #c4b3a1; line-height: 1.6; margin: 0; }
@media (max-width: 880px) { .trust { grid-template-columns: 1fr; } }
.lhero__eyebrow { font-size: 13px; letter-spacing: .04em; color: var(--o-300); font-weight: 600; margin: 0 0 18px; text-transform: uppercase; }
.lhero h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.lhero .grad { background: linear-gradient(100deg, var(--o-300), var(--o-500) 60%, #ff4d8d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lhero__sub { font-size: 17px; line-height: 1.6; color: #c4b3a1; max-width: 520px; margin: 22px 0 0; }
.lhero__stats { display: flex; gap: 34px; margin-top: 34px; }
.lhero__stats b { font-family: var(--font-head); font-size: 26px; display: block; }
.lhero__stats span { font-size: 12.5px; color: #8c7a67; }

.lcard {
  background: rgba(32, 22, 14, .72); border: 1px solid rgba(255,160,102,.18);
  border-radius: 20px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
}
.lcard h2 { font-family: var(--font-head); font-size: 24px; }
.lcard__sub { font-size: 14px; color: #c4b3a1; margin: 6px 0 22px; }
.lcard .btn { width: 100%; justify-content: center; }
.btn--sc { background: #ff5500; color: #fff; font-size: 15px; padding: 13px 16px; box-shadow: 0 8px 24px rgba(255,85,0,.35); }
.btn--sc:hover { background: #ff6a1f; }
.sc-mark { font-size: 17px; }
.lcard__or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #8c7a67; font-size: 12px; }
.lcard__or::before, .lcard__or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.lcard__email-toggle { background: transparent; color: #f6ede2; border-color: rgba(255,255,255,.18); }
.lcard__email-toggle:hover { border-color: var(--o-400); color: var(--o-300); }
.lcard__email { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lcard__email[hidden] { display: none; }
.lcard__email label { font-size: 13px; font-weight: 600; color: #c4b3a1; }
.lcard__email .input { background: rgba(0,0,0,.32); border-color: rgba(255,255,255,.16); color: #fff; }
.lcard__email .input::placeholder { color: #9a8978; }
.lcard__email .input:focus { background: rgba(0,0,0,.45); color: #fff; border-color: var(--o-400); box-shadow: 0 0 0 3px rgba(255,126,51,.25); }
.lcard__fine { font-size: 11.5px; color: #8c7a67; margin: 16px 0 0; text-align: center; }
.lcard__fine a { color: var(--o-300); cursor: pointer; text-decoration: underline; }

.lfoot { display: flex; align-items: center; justify-content: space-between; padding: 16px 6vw; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: #8c7a67; }
.lfoot__status { display: flex; align-items: center; gap: 8px; color: #46c585; font-weight: 600; }

@media (max-width: 880px) {
  .lhero { grid-template-columns: 1fr; gap: 28px; padding-top: 2vh; }
  .lhero__stats { gap: 22px; }
  .lnav__links a { display: none; }
}

.lfoot__admin { color: #8c7a67; opacity: .25; cursor: pointer; font-weight: 700; padding: 0 6px; transition: opacity var(--transition); }
.lfoot__admin:hover { opacity: 1; color: var(--o-300); }

/* -------------------------------- Admin --------------------------------- */
.admin[hidden] { display: none; }
.admin {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  background: #0e0b08; color: #f1e9df; display: flex; flex-direction: column; font-family: var(--font-body);
  --surface: #1a1510; --surface-2: #15110c; --elevated: #221a12; --border: #2c241b; --border-strong: #3a2f23;
  --text: #f1e9df; --text-soft: #c4b3a1; --text-mut: #8c7a67; --primary-soft: #281a0e; --o-200: #5a3a1e;
}
.anav { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid #2c241b; background: linear-gradient(180deg, #16110b, #0e0b08); }
.anav__brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 800; font-size: 16px; }
.abadge { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--o-300); background: #281a0e; border: 1px solid #5a3a1e; border-radius: 999px; padding: 3px 9px; }
.abody { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 28px; }
.admin-lock { max-width: 380px; margin: 12vh auto 0; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 34px 28px; box-shadow: var(--shadow-lg); }
.admin-lock__mark { font-size: 38px; margin-bottom: 10px; }
.admin-lock h2 { font-family: var(--font-head); font-size: 20px; }
.admin-lock p { color: var(--text-soft); font-size: 13.5px; margin: 6px 0 20px; }
.admin-lock__form { display: flex; flex-direction: column; gap: 10px; }
.admin-lock__form .btn { justify-content: center; }
.apage-title { font-family: var(--font-head); font-size: 24px; }
.apage-sub { color: var(--text-soft); font-size: 13.5px; margin: 4px 0 22px; }
.agrid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 880px) { .agrid2 { grid-template-columns: 1fr; } }

/* Column chart */
.acols { display: flex; align-items: stretch; gap: 6px; height: 170px; padding-top: 8px; }
.acol { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.acol i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--o-400), var(--o-600)); min-height: 4px; transition: height var(--transition); }
.acol span { text-align: center; font-size: 10px; color: var(--text-mut); margin-top: 5px; height: 14px; }

/* ----------------------------- Announcement ----------------------------- */
.announce {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  background: linear-gradient(90deg, var(--o-600), var(--o-400));
  color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 8px 16px; position: relative; z-index: 30;
}
.announce a { text-decoration: underline; opacity: .95; }
.announce__close {
  position: absolute; right: 12px; background: transparent; border: 0;
  color: #fff; font-size: 20px; line-height: 1; opacity: .85;
}
.announce[hidden] { display: none; }

/* ------------------------------- Layout --------------------------------- */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  height: calc(100vh - 37px);
}
.main { display: flex; flex-direction: column; min-width: 0; }

/* ------------------------------- Sidebar -------------------------------- */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 12px; overflow-y: auto;
}
.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 16px; width: 100%; border: 0; background: transparent;
  cursor: pointer; text-align: left; border-radius: var(--radius-sm);
  transition: opacity var(--transition);
}
.sidebar__brand:hover { opacity: .82; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-family: var(--font-head);
  font-weight: 800; color: var(--primary-ink);
  background: linear-gradient(135deg, var(--o-400), var(--o-600));
  box-shadow: var(--shadow-sm);
}
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 17px; line-height: 1; color: var(--text); }
.brand__name b { color: var(--primary); font-weight: 800; }

/* Brand logo mark (injected image) */
.brand-logo { display: inline-flex; align-items: center; flex: none; }
.brand-logo .sc-mark-svg { height: 30px; width: auto; display: block; object-fit: contain; }
.lnav__brand .brand-logo .sc-mark-svg { height: 34px; }
.anav__brand .brand-logo .sc-mark-svg { height: 28px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mut); padding: 14px 10px 6px;
}
.nav__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; border: 0; background: transparent;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 14px; font-weight: 500; text-align: left;
  transition: background var(--transition), color var(--transition);
}
.nav__item:hover { background: var(--primary-soft); color: var(--text); }
.nav__item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav__item.is-active .nav__icon { color: var(--primary); }
.nav__icon { width: 18px; text-align: center; font-size: 15px; color: var(--text-mut); }
.sidebar__footer { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }

/* ------------------------------- Topbar --------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar__menu { display: none; }
.topbar__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.topbar__spacer { flex: 1; }

.iconbtn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); font-size: 16px; display: grid; place-items: center;
  transition: var(--transition);
}
.iconbtn:hover { border-color: var(--primary); color: var(--primary); }

.account {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none;
  transition: var(--transition);
}
.account:hover { border-color: var(--primary); }
.account img { border-radius: 50%; }
.account__caret { color: var(--text-mut); font-size: 11px; }

/* Account dropdown menu */
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 232px; background: var(--elevated); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-lg); padding: 6px; cursor: default;
  animation: pop var(--transition);
}
.account-menu[hidden] { display: none; }
.account-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.account-menu__head img { border-radius: 9px; }
.account-menu__name { font-weight: 700; font-size: 13.5px; }
.account-menu__sub { font-size: 12px; color: var(--text-mut); font-weight: 500; }
.account-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--text-soft); text-align: left;
}
.account-menu__item span { width: 16px; text-align: center; color: var(--text-mut); }
.account-menu__item:hover { background: var(--primary-soft); color: var(--text); }
.account-menu__item--danger { color: var(--bad); }
.account-menu__item--danger:hover { background: var(--bad-bg); color: var(--bad); }
.account-menu__item--danger span { color: var(--bad); }
.account-menu__sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Demo toggle */
.demo-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.demo-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.demo-toggle__track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong);
  position: relative; transition: var(--transition); flex: none;
}
.demo-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.demo-toggle input:checked + .demo-toggle__track { background: var(--primary); }
.demo-toggle input:checked + .demo-toggle__track .demo-toggle__thumb { transform: translateX(18px); }
.demo-toggle__label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
@media (max-width: 720px){ .demo-toggle__label { display: none; } }

/* ------------------------------ Content --------------------------------- */
.content { padding: 22px; overflow-y: auto; flex: 1; min-height: 0; }

/* ------------------------------- Footer --------------------------------- */
.appfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 22px; border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.appfoot__left { display: flex; align-items: center; gap: 14px; }
.appfoot__copy { font-size: 12px; color: var(--text-mut); font-weight: 500; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--good); background: var(--good-bg); color: var(--good);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700;
  transition: var(--transition);
}
.status-pill:hover { filter: brightness(1.05); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  animation: statpulse 2.2s infinite;
}
@keyframes statpulse {
  0% { box-shadow: 0 0 0 0 rgba(70, 197, 133, .55); }
  70% { box-shadow: 0 0 0 7px rgba(70, 197, 133, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 197, 133, 0); }
}
.appfoot__links { display: flex; gap: 18px; flex-wrap: wrap; }
.appfoot__links a { font-size: 12.5px; color: var(--text-soft); font-weight: 500; cursor: pointer; transition: color var(--transition); }
.appfoot__links a:hover { color: var(--primary); }
@media (max-width: 620px) { .appfoot { justify-content: center; } .appfoot__copy { display: none; } }

/* Status page */
.status-hero {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px; max-width: 900px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.status-hero__icon { width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 26px; background: var(--good-bg); color: var(--good); }
.status-hero h2 { font-size: 20px; }
.status-hero p { margin: 3px 0 0; font-size: 13px; color: var(--text-soft); }
.status-hero__up { margin-left: auto; text-align: right; }
.status-hero__up b { font-family: var(--font-head); font-size: 22px; }
.status-list { max-width: 900px; }
.status-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.status-row:last-child { border-bottom: 0; }
.status-row__name { font-weight: 600; font-size: 14px; }
.status-row__bar { display: flex; gap: 2px; margin: 0 16px; flex: 1; max-width: 280px; }
.status-row__bar i { flex: 1; height: 22px; border-radius: 2px; background: var(--good); opacity: .85; }
.status-note { text-align: center; padding: 28px; color: var(--text-soft); max-width: 900px; }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary { padding: 15px 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--primary); font-size: 18px; font-weight: 700; }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq p { padding: 14px 16px; color: var(--text-soft); font-size: 14px; margin: 0; line-height: 1.6; }

/* Legal pages */
.legal { max-width: 820px; }
.legal__meta { font-size: 12.5px; color: var(--text-mut); margin-bottom: 18px; }
.legal h3 { font-size: 16px; margin: 24px 0 8px; }
.legal p { color: var(--text-soft); font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.legal li { color: var(--text-soft); font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.view-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.view-head h1 { font-size: 22px; }
.view-head p { margin: 2px 0 0; color: var(--text-soft); font-size: 13.5px; }
.view-head__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Buttons */
.btn {
  border: 1px solid transparent; border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; transition: var(--transition);
}
.btn--primary {
  background: linear-gradient(180deg, var(--o-400), var(--o-500) 55%, var(--o-600));
  color: var(--primary-ink); border-color: rgba(0,0,0,.04);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px rgba(212,78,6,.28);
}
.btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px rgba(212,78,6,.34); }
.btn--primary:active { transform: translateY(0); filter: brightness(.98); }
.btn--ghost { background: var(--surface); color: var(--text-soft); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-sm); }
.btn--danger { background: var(--bad-bg); color: var(--bad); }
.btn--sm { padding: 6px 11px; font-size: 13px; }

/* Segmented control (week/month) */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.segmented button { border: 0; background: transparent; color: var(--text-soft); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 7px; }
.segmented button.is-active { background: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow-sm); }

/* ----------------------------- Stat cards ------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.stat__label { font-size: 12px; color: var(--text-mut); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat__value { font-family: var(--font-head); font-size: 24px; font-weight: 800; margin-top: 8px; }
.stat__sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* ------------------------------ Calendar -------------------------------- */
.cal-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-toolbar__nav { display: flex; align-items: center; gap: 6px; }
.cal-range { font-family: var(--font-head); font-weight: 700; font-size: 16px; min-width: 220px; }

.calendar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}

/* Week grid — all-day stacked columns */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wk > *:nth-child(7n+1) { border-left: 0; }
.wk__head {
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface-2); padding: 9px 6px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text-soft);
}
.wk__head.is-today { background: var(--primary-soft); color: var(--primary); }
.wk__col {
  border-left: 1px solid var(--border); min-height: 340px; min-width: 0;
  padding: 5px; display: flex; flex-direction: column; gap: 5px;
  transition: background var(--transition);
}
.wk__col.is-today { background: var(--primary-soft); }
.wk__col.drop-hover { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }

/* Day view */
.day-view__head {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: 10px; text-align: center; font-family: var(--font-head);
  font-weight: 700; font-size: 14px; color: var(--primary);
}
.day-col { min-height: 320px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: background var(--transition); }
.day-col.drop-hover { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }

/* Target filter */
.cal-target { max-width: 320px; }
.cal-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

/* Action glyph legend (↻ ♥ ★ ↓ ◉ ⟲) — compact 3-column card, premium feel */
.legend {
  display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px;
  margin-left: auto; padding: 9px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; color: var(--text-soft); }
.legend__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; flex: none;
  color: var(--evt, var(--primary)); background: var(--evt-soft, var(--surface-2));
}
.legend__label { white-space: nowrap; }
@media (max-width: 760px) { .legend { margin-left: 0; grid-template-columns: repeat(2, auto); } }
@media (max-width: 420px) { .legend { grid-template-columns: 1fr 1fr; width: 100%; } }

/* Month grid */
.month { display: grid; grid-template-columns: repeat(7,1fr); }
.month__dow { background: var(--surface-2); padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-soft); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.month__cell {
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  height: 122px; overflow: hidden; /* fixed size regardless of event count */
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
  transition: background var(--transition);
}
.month__cell:nth-child(7n+1) { border-left: 0; }
.month__cell.is-out { background: var(--surface-2); opacity: .55; }
.month__cell.drop-hover { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.month__date { font-size: 12.5px; font-weight: 700; color: var(--text-soft); align-self: flex-end; }
.month__cell.is-today .month__date { background: var(--primary); color: var(--primary-ink); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.month__more { font-size: 11px; color: var(--primary); font-weight: 600; cursor: pointer; }

/* Event card */
.event {
  display: flex; gap: 7px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--evt, var(--primary));
  border-radius: 8px; padding: 5px 7px; cursor: grab;
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.event:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.event.dragging { opacity: .45; cursor: grabbing; }
.event--mini { font-size: 11.5px; padding: 3px 6px; }
.event__art { width: 28px; height: 28px; border-radius: 6px; flex: none; object-fit: cover; background: var(--surface-2); }
.event--mini .event__art { width: 20px; height: 20px; }
.event__body { min-width: 0; flex: 1; }
.event__title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event__meta { font-size: 11px; color: var(--text-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event__chan { display: flex; align-items: center; gap: 4px; margin-top: 2px; min-width: 0; }
.event__chan-av { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2, rgba(0,0,0,.06)); }
.event__chan-name { font-size: 11px; font-weight: 600; color: var(--text-soft, var(--text-mut)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event--mini .event__chan-av { width: 12px; height: 12px; }
.event__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-size: 12px; flex: none;
  color: var(--evt, var(--primary)); background: var(--evt-soft, var(--surface-2));
}
.event--mini .event__glyph { width: 18px; height: 18px; font-size: 11px; }

/* tones */
/* Each tone sets its accent (--evt) and a soft tint (--evt-soft) for chip
   backgrounds. Explicit rgba so it works everywhere (no color-mix needed). */
.tone-accent { --evt: var(--primary); --evt-soft: rgba(244,100,15,.14); }
.tone-pink   { --evt: var(--pink);    --evt-soft: rgba(214,51,108,.14); }
.tone-gold   { --evt: var(--gold);    --evt-soft: rgba(200,137,11,.16); }
.tone-green  { --evt: var(--green);   --evt-soft: rgba(31,157,87,.14); }
.tone-blue   { --evt: var(--blue);    --evt-soft: rgba(47,109,208,.14); }
.tone-muted  { --evt: var(--text-mut); --evt-soft: rgba(140,122,103,.16); }

/* Agenda (mobile / list) */
.agenda { display: flex; flex-direction: column; gap: 18px; }
.agenda__day h3 { font-size: 14px; margin-bottom: 8px; color: var(--text-soft); }
.agenda__list { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------- Table ---------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 12px; color: var(--text-mut); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.th-sort { cursor: pointer; user-select: none; transition: color var(--transition); }
.th-sort:hover { color: var(--primary); }
.th-caret { color: var(--text-mut); font-size: 11px; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--primary-soft); }
.cell-media { display: flex; align-items: center; gap: 10px; }
.cell-media img { width: 34px; height: 34px; border-radius: 7px; }
.cell-media__t { font-weight: 600; }
.cell-media__s { font-size: 12px; color: var(--text-mut); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge--good { background: var(--good-bg); color: var(--good); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--bad  { background: var(--bad-bg);  color: var(--bad); }
.badge--muted{ background: var(--surface-2); color: var(--text-mut); }
.badge--info { background: rgba(47,109,208,.14); color: var(--blue); }

.table-foot { padding: 12px 4px; font-size: 12.5px; color: var(--text-mut); font-weight: 600; }

.chan { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.chan img { width: 22px; height: 22px; border-radius: 6px; }

/* ------------------------------- Modal ---------------------------------- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,12,4,.5); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; width: min(720px, 100%); max-height: 90vh; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: pop var(--transition);
}
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 12px; }
.modal__head h2 { font-size: 19px; }
.modal__sub { color: var(--text-soft); font-size: 13px; margin: 3px 0 0; }
.modal__body { padding: 8px 22px 18px; overflow-y: auto; }
.modal__foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }

/* Stepper */
.stepper { list-style: none; display: flex; gap: 6px; margin: 4px 22px 0; padding: 0; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-mut); position: relative; }
.stepper li::after { content: ''; flex: 1; height: 2px; background: var(--border); border-radius: 2px; }
.stepper li:last-child::after { display: none; }
.step__chip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.stepper li.is-active { color: var(--primary); }
.stepper li.is-active .step__chip,
.stepper li.is-done .step__chip { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.stepper li.is-done { color: var(--text-soft); }

/* Forms */
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-soft); }
.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font-size: 14px; font-family: inherit; transition: var(--transition);
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.check.is-disabled { opacity: .5; cursor: not-allowed; }

/* Media URL entry (wizard step 1) */
.media-url-row { display: flex; align-items: center; gap: 10px; }
.media-url-row .input { flex: 1; }
.media-count { font-size: 12.5px; font-weight: 700; color: var(--text-mut); white-space: nowrap; }
.media-drop {
  margin-top: 12px; min-height: 190px; max-height: 320px; overflow-y: auto;
  border: 1.5px dashed var(--border-strong); border-radius: 14px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.media-empty {
  margin: auto; text-align: center; color: var(--text-mut); padding: 24px;
}
.media-empty__mark { font-size: 34px; margin-bottom: 8px; }
.media-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.media-row.is-error { border-color: var(--bad); background: var(--bad-bg); }
.media-row img { width: 40px; height: 40px; border-radius: 9px; flex: none; object-fit: cover; }
.media-row__body { min-width: 0; flex: 1; }
.media-row__body .pick__s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-row__x {
  border: 0; background: transparent; color: var(--text-mut); font-size: 22px;
  line-height: 1; width: 30px; height: 30px; border-radius: 8px; flex: none;
}
.media-row__x:hover { background: var(--bad-bg); color: var(--bad); }

.media-pick { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.pick {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
  cursor: pointer; transition: var(--transition);
}
.pick:hover { border-color: var(--primary); }
.pick.is-sel { border-color: var(--primary); background: var(--primary-soft); }
.pick img { width: 38px; height: 38px; border-radius: 8px; }
.pick__t { font-weight: 600; font-size: 13.5px; }
.pick__s { font-size: 12px; color: var(--text-mut); }
.pick input { margin-left: auto; width: 18px; height: 18px; accent-color: var(--primary); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 600; border: 1px solid var(--o-200); }
.chip img { width: 18px; height: 18px; border-radius: 5px; }

.overview-grid { display: grid; gap: 10px; }
.ov-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.ov-row b { font-weight: 700; }

/* Scheduled medias modal */
.sched-list { display: flex; flex-direction: column; }
.sched-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.sched-row:last-child { border-bottom: 0; }
.sched-row__art { width: 40px; height: 40px; border-radius: 8px; flex: none; object-fit: cover; display: block; }
.sched-row__art-link { flex: none; display: block; border-radius: 8px; overflow: hidden; transition: opacity .15s; }
.sched-row__art-link:hover { opacity: .8; }
.sched-row__t { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-row__actions { display: flex; gap: 14px; flex: none; }
.linkbtn { border: 0; background: transparent; color: var(--primary); font-weight: 600; font-size: 13px; padding: 4px 2px; }
.linkbtn:hover { text-decoration: underline; }

/* Scheduled action detail modal */
.sa-label { font-size: 13px; font-weight: 700; color: var(--text-soft); margin: 16px 0 8px; }
.sa-label:first-child { margin-top: 0; }
.sa-pill-row { display: flex; align-items: center; gap: 12px; }
.sa-pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--o-200); border-radius: 11px; background: var(--primary-soft);
}
.sa-pill img { width: 30px; height: 30px; border-radius: 7px; flex: none; object-fit: cover; }
.sa-pill__t { font-weight: 600; font-size: 13px; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-arrow { color: var(--primary); font-size: 18px; flex: none; }
.sa-actions { display: flex; flex-direction: column; gap: 9px; }
.sa-action { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 500; }
.sa-action__glyph { color: var(--evt, var(--primary)); font-size: 16px; width: 18px; text-align: center; }

/* Per-media schedule summary card */
.sched-summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.sched-summary img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.sched-summary__artlink { flex: none; display: block; border-radius: 10px; overflow: hidden; transition: opacity .15s; }
.sched-summary__artlink:hover { opacity: .82; }
.sched-summary__art { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; }
.sched-summary__body { flex: 1; min-width: 200px; }
a.sched-summary__t { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--primary); text-decoration: none; }
a.sched-summary__t:hover { text-decoration: underline; }
.sched-summary__t { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--primary); }
.sched-summary__m { font-size: 13px; color: var(--text-soft); margin: 3px 0; }
.sched-summary__by { display: flex; flex-direction: column; gap: 4px; text-align: right; }

/* Full-width SoundCloud embed under the schedule summary */
.sched-player { margin-bottom: 16px; }
.sched-player .sc-player { height: 166px; border-radius: 12px; border: 1px solid var(--border); }

/* Invite links */
.invite-url { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.iconlink { border: 0; background: transparent; color: var(--text-mut); font-size: 14px; padding: 2px 4px; border-radius: 6px; }
.iconlink:hover { color: var(--primary); background: var(--primary-soft); }
.enabled-yes { color: var(--good); font-weight: 800; font-size: 15px; }
.enabled-no { color: var(--text-mut); font-weight: 800; font-size: 15px; }

.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px; max-width: 920px;
}
.form-card__title { font-size: 15px; margin-bottom: 14px; }

/* "How it works" cards (empty invite-links tab) */
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.info-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px;
}
.info-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.info-card__step {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 800; flex: none;
}
.info-card__ic { font-size: 15px; }
.info-card__title { font-size: 14px; margin: 0; }
.info-card__msg { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0; }

/* Download gate 3-step flow */
.gate-steps { display: flex; align-items: center; margin: 8px 0 22px; flex-wrap: wrap; gap: 4px; }
.gate-step {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-mut);
  font-weight: 600; font-size: 13.5px; white-space: nowrap;
}
.gate-step.is-active { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.gate-step.is-done { background: var(--primary-soft); color: var(--primary); border-color: var(--o-200); cursor: pointer; }
.gate-step__ic { font-size: 12px; }
.gate-step__connector { flex: 1; min-width: 24px; height: 2px; background: var(--border); margin: 0 2px; }
.gate-step__connector.is-filled { background: var(--primary); }

.gate-hint { color: var(--text-soft); font-size: 14px; margin: 0 0 16px; }

.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.track-card {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface); cursor: pointer;
  transition: var(--transition);
}
.track-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.track-card.is-sel { border-color: var(--primary); background: var(--primary-soft); }
.track-card img { width: 50px; height: 50px; border-radius: 9px; flex: none; object-fit: cover; }
.track-card__body { flex: 1; min-width: 0; }
.track-card__radio { color: var(--primary); font-size: 16px; flex: none; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1.5px dashed var(--border-strong); border-radius: 18px; padding: 48px 24px;
  text-align: center; background: var(--surface-2); cursor: pointer; transition: var(--transition);
}
.dropzone:hover { border-color: var(--primary); }
.dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone__mark { font-size: 40px; margin-bottom: 4px; }

.gate-actions { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.gate-actions .check { padding: 6px 0; }

.gate-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; max-width: 920px; }

/* Billing — management view (subscribed) */
.billing-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; max-width: 1000px; }
.plan-card, .bill-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.plan-card__lead { margin: 0 0 14px; font-size: 14.5px; color: var(--text-soft); }
.plan-name { color: var(--primary); font-weight: 800; }

/* Billing — pricing page */
.cycle-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); margin-bottom: 22px; max-width: 1120px;
}
.cycle-card h3 { font-size: 15px; }
.cycle-card p { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1120px; align-items: start; }
.tier {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.tier--rec { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
.tier__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tier__name { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.tier__rec { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--o-200); padding: 3px 9px; border-radius: 999px; }
.tier__price { font-family: var(--font-head); font-weight: 800; font-size: 34px; margin-top: 14px; }
.tier__per { font-size: 15px; font-weight: 600; color: var(--text-mut); }
.tier__sub { font-size: 12.5px; color: var(--text-soft); margin: 2px 0 16px; min-height: 16px; }

.plan-btn { width: 100%; justify-content: center; margin-bottom: 18px; }
.plan-btn--sub { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.plan-btn--sub:hover { border-color: var(--primary); color: var(--primary); }
.plan-btn--current { background: var(--surface-2); color: var(--text-mut); border-color: var(--border); cursor: default; }

.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-features li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.plan-features li:last-child { border-bottom: 0; }
.plan-features__chev { color: var(--text-mut); font-weight: 700; }

.billing-col { display: flex; flex-direction: column; gap: 14px; }
.bill-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bill-row:last-child { margin-bottom: 0; }
.bill-label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.usage-pct { font-family: var(--font-head); font-weight: 700; font-size: 13px; margin: 10px 0 4px; }
.usage-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--o-400), var(--o-600)); }
.usage-legend { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-soft); margin-top: 10px; }
.usage-legend .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
.bill-card--portal { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bill-card--portal p { margin: 0; font-size: 13px; color: var(--text-soft); }
.bill-card--portal .btn { flex: none; }

.field-hint { font-size: 12px; color: var(--text-mut); margin-top: 6px; }
.opt-divider { height: 1px; background: var(--border); margin: 14px 0 10px; }

@media (max-width: 820px) { .billing-grid { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .plans { grid-template-columns: 1fr; } }

/* Account settings */
.acct-group { font-size: 17px; margin: 26px 0 14px; }
.acct-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; margin-bottom: 18px; max-width: 1100px; }
.acct-section__intro h3 { font-size: 15px; margin-bottom: 6px; }
.acct-section__intro p { margin: 0; font-size: 13px; color: var(--text-soft); line-height: 1.5; }

.genre-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.genre-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.genre-chip {
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-soft);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; transition: var(--transition);
}
.genre-chip:hover { border-color: var(--primary); color: var(--primary); }
.genre-chip.is-active { background: var(--primary-soft); color: var(--primary); border-color: var(--o-200); cursor: default; }
.genre-selected { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; }
.genre-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
.genre-tag__x { border: 0; background: transparent; color: var(--text-mut); font-size: 15px; padding: 0; line-height: 1; }
.genre-tag__x:hover { color: var(--bad); }

@media (max-width: 820px) { .acct-section { grid-template-columns: 1fr; gap: 12px; } }

/* Analytics bars */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 12px; }
.bar-row__label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row__track { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-row__fill { display: block; height: 100%; border-radius: 999px; background: var(--evt, var(--primary)); transition: width var(--transition); }
.bar-row__val { font-weight: 700; font-size: 13px; text-align: right; }
@media (max-width: 620px) { .bar-row { grid-template-columns: 110px 1fr 32px; } }

/* List toolbar (search + filter) */
.list-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.search-input { max-width: 360px; flex: 1; }

/* Discover (Groover-style) */
.disc-list { display: flex; flex-direction: column; gap: 14px; }
.disc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.disc-card__head { display: flex; align-items: flex-start; gap: 13px; }
.disc-card__avatar { width: 52px; height: 52px; border-radius: 12px; flex: none; object-fit: cover; }
.disc-card__name { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.disc-card__meta { text-align: right; flex: none; font-size: 12.5px; }
.disc-genres { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.disc-genres .genre-chip { padding: 4px 11px; font-size: 12px; cursor: pointer; }
.disc-card__bio {
  margin: 0 0 14px; font-size: 13.5px; color: var(--text-soft); line-height: 1.55;
  border-left: 3px solid var(--primary-soft); padding-left: 12px;
}
.disc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.disc-contact { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--primary); }
@media (max-width: 620px) {
  .disc-card__meta { display: none; }
  .disc-card__foot { flex-direction: column; align-items: stretch; }
}

/* Placeholder views */
.placeholder { text-align: center; padding: 70px 20px; color: var(--text-soft); }
.placeholder .ph-mark { font-size: 46px; margin-bottom: 12px; }
.placeholder h2 { font-size: 20px; margin-bottom: 6px; }

/* ------------------------------- Toasts --------------------------------- */
.toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 80; }
.toast {
  background: var(--elevated); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: 11px; padding: 12px 16px; box-shadow: var(--shadow-lg);
  font-size: 13.5px; font-weight: 500; min-width: 240px; animation: slidein var(--transition);
}
.toast--good { border-left-color: var(--good); }
.toast--bad  { border-left-color: var(--bad); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ------------------------------- Scrim ---------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(20,12,4,.45); z-index: 19; }
.scrim[hidden] { display: none; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 20;
    transform: translateX(-100%); transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .topbar__menu { display: grid; }
}
@media (max-width: 620px) {
  .content { padding: 16px; }
  .account span { display: none; }
  .row2 { grid-template-columns: 1fr; }
}

/* ===================== Invite-link accept (public) ===================== */
.invite-accept[hidden] { display: none; }
.invite-accept { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.invite-accept .lnav__name { color: var(--text); }
.invite-accept__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.invite-card {
  width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-lg); padding: 38px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.invite-card__users { display: flex; align-items: center; justify-content: center; gap: 26px; }
.invite-card__user { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.invite-card__avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--primary); background: var(--surface-2);
}
.invite-card__handle { color: var(--primary); font-weight: 700; font-size: 16px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-card__link-ic { color: var(--primary); font-size: 26px; animation: invitePulse 1.6s ease-in-out infinite; }
@keyframes invitePulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }
.invite-card__title { color: var(--text); font-size: 19px; font-weight: 700; line-height: 1.4; }
.invite-card__sub { color: var(--text-soft); font-size: 14px; line-height: 1.6; max-width: 420px; }
.invite-card__sub strong { color: var(--primary); }
.invite-card__sub .danger { color: var(--danger, #d23b3b); }
.invite-card__foot { color: var(--text-soft); font-size: 13px; }
@media (max-width: 480px) {
  .invite-card__users { gap: 14px; }
  .invite-card__avatar { width: 58px; height: 58px; }
}

/* ===================== SoundCloud embed player ===================== */
/* The widget renders its own (light) chrome, so frame it consistently in both
   themes: a themed border + surface backdrop so it reads as an intentional card
   in dark mode and doesn't flash a clashing colour before the iframe paints. */
.sc-player {
  display: block; width: 100%; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); overflow: hidden;
}
.sc-player-fallback { width: 100%; height: 120px; border-radius: 10px; object-fit: cover; display: block; border: 1px solid var(--border); }
.sc-player-fallback--empty { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-soft); background: var(--surface-2); }
.share-url .input { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }

/* ===================== Public calendar (read-only share) ===================== */
.pubcal[hidden] { display: none; }
.pubcal { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.pubcal .lnav__name { color: var(--text); }
.pubcal__main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 24px 18px 60px; }
.pubcal__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.pubcal__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.pubcal__head h1 { font-family: var(--font-head); font-size: 22px; color: var(--text); }
.pubcal__list { display: flex; flex-direction: column; gap: 16px; }
.pubcal__item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.05)); }
.pubcal__item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pubcal__empty { text-align: center; padding: 60px 20px; color: var(--text-soft); }
.pubcal__empty h2 { font-family: var(--font-head); color: var(--text); margin-bottom: 8px; }

/* Account email verification status row */
.email-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 4px; }

/* Inline notice banner (admin errors, truncation notices) */
.banner { padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border); background: var(--surface-2, rgba(0,0,0,.04)); color: var(--text); }
.banner--warn { border-color: rgba(244,100,15,.4); background: var(--evt-soft, rgba(244,100,15,.10)); color: var(--text); }

/* Public calendar: which channel performs each action */
.pubcal__chan { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-soft, var(--text-mut)); }
.pubcal__chan-av { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2, rgba(0,0,0,.06)); }