/* ==========================================================================
   DJ Mode — djfunmode.com
   One stylesheet, one source of truth, front and back.

   Palette: ink (a dark room), rose (the light on the floor), gold (the warm
   moment). Everything is full-width and fluid; sections manage their own
   inner rhythm. There is no fixed max-width on any page shell.
   ========================================================================== */

:root {
    /* Brand */
    --ink:          #14111f;
    --ink-2:        #1e1a2d;
    --ink-3:        #2b2540;
    --rose:         #e0457b;
    --rose-hi:      #f05a8d;
    --rose-dim:     #b8365f;
    --gold:         #f2b544;
    --gold-hi:      #ffc963;

    /* Surfaces */
    --bg:           #ffffff;
    --bg-soft:      #f7f5fa;
    --bg-sunk:      #efecf4;
    --line:         #e4e0ec;
    --line-soft:    #f0edf5;

    /* Text */
    --text:         #1a1726;
    --text-mid:     #4e4860;
    --text-soft:    #7d768f;
    --text-invert:  #ffffff;

    /* Feedback */
    --ok:           #17915f;
    --ok-soft:      #e7f6ef;
    --warn:         #b06a00;
    --warn-soft:    #fdf3e0;
    --bad:          #c62828;
    --bad-soft:     #fdecec;

    /* Rhythm */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(20,17,31,.08);
    --shadow-md: 0 4px 18px rgba(20,17,31,.10);
    --shadow-lg: 0 18px 48px rgba(20,17,31,.18);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Georgia", "Iowan Old Style", "Times New Roman", serif;

    /* Fluid type — scales with the viewport, no breakpoints needed */
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: clamp(18px, 1.2vw + 14px, 21px);
    --fs-xl: clamp(23px, 1.6vw + 17px, 30px);
    --fs-2xl: clamp(28px, 2.4vw + 20px, 44px);
    --fs-3xl: clamp(36px, 4.4vw + 20px, 76px);

    --gutter: clamp(18px, 4vw, 64px);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--s4); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 var(--s4); }
a { color: var(--rose-dim); }
a:hover { color: var(--rose); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------- layout --- */
/* Full-width and fluid everywhere. `.wrap` only supplies side gutters; it
   never caps the page. `.measure` caps READING width for prose only. */
.wrap     { width: 100%; padding-inline: var(--gutter); }
.measure  { max-width: 74ch; }
.measure-w{ max-width: 96ch; }
.center   { margin-inline: auto; }
.stack > * + * { margin-top: var(--s4); }

.section        { padding-block: clamp(48px, 7vw, 112px); }
.section--tight { padding-block: clamp(32px, 4.5vw, 64px); }
.section--soft  { background: var(--bg-soft); }
.section--sunk  { background: var(--bg-sunk); }
.section--ink   { background: var(--ink); color: var(--text-invert); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: #cfc9dd; }

.grid { display: grid; gap: clamp(20px, 2.5vw, 40px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }

/* ----------------------------------------------------------- typography - */
.eyebrow {
    font-size: var(--fs-sm); font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--rose); margin: 0 0 var(--s3);
}
.section--ink .eyebrow { color: var(--gold); }
.display   { font-size: var(--fs-3xl); letter-spacing: -0.035em; }
.display em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.h-xl      { font-size: var(--fs-2xl); }
.h-lg      { font-size: var(--fs-xl); }
.lede      { font-size: var(--fs-lg); color: var(--text-mid); }
.section--ink .lede { color: #d6d0e4; }
.muted     { color: var(--text-soft); }
.small     { font-size: var(--fs-sm); }
.tiny      { font-size: var(--fs-xs); }
.nowrap    { white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    border: 1px solid transparent; border-radius: var(--r-md);
    padding: 13px 24px; font-weight: 700; font-size: var(--fs-md);
    cursor: pointer; text-decoration: none; text-align: center;
    transition: background .15s ease, transform .06s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--rose); color: #fff; box-shadow: 0 4px 14px rgba(224,69,123,.28); }
.btn--primary:hover { background: var(--rose-hi); color: #fff; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hi); color: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-3); color: #fff; }
/* No white buttons: the quiet action is a tinted surface, not a white box. */
.btn--ghost { background: var(--bg-sunk); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--line-soft); color: var(--text); }
.btn--outline { background: transparent; color: var(--rose); border-color: var(--rose); }
.btn--outline:hover { background: rgba(224,69,123,.08); color: var(--rose-dim); }
.section--ink .btn--outline { color: var(--gold); border-color: var(--gold); }
.section--ink .btn--outline:hover { background: rgba(242,181,68,.14); color: var(--gold-hi); }
.btn--danger { background: var(--bad); color: #fff; }
.btn--danger:hover { background: #a91f1f; color: #fff; }
.btn--lg { padding: 17px 34px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.btn--sm { padding: 8px 15px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ----------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field > label { font-weight: 600; font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--text-soft); }
.input, input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], select, textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; font-size: var(--fs-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224,69,123,.14); outline: none;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.checkline { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); }
.checkline input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; }

/* ----------------------------------------------------------------- cards */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--pad0 { padding: 0; overflow: hidden; }
.card__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); }
.card__body { padding: var(--s5); }

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-xs); font-weight: 700; padding: 4px 11px;
    border-radius: var(--r-pill); letter-spacing: .02em;
}
.pill--ok   { background: var(--ok-soft);   color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--bad  { background: var(--bad-soft);  color: var(--bad); }
.pill--rose { background: rgba(224,69,123,.11); color: var(--rose-dim); }
.pill--ink  { background: var(--ink); color: #fff; }

.notice {
    border-radius: var(--r-md); padding: var(--s3) var(--s4);
    border-left: 4px solid var(--line); background: var(--bg-soft);
    font-size: var(--fs-sm); margin-bottom: var(--s4);
}
.notice--ok   { border-left-color: var(--ok);   background: var(--ok-soft); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.notice--bad  { border-left-color: var(--bad);  background: var(--bad-soft); }
.notice--info { border-left-color: var(--rose); background: rgba(224,69,123,.07); }

/* ---------------------------------------------------------------- tables */
/* Data reads left-justified; only true numerics get tabular alignment. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
table.data th { font-weight: 700; color: var(--text-mid); background: var(--bg-soft); white-space: nowrap; }
table.data td.num { font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- site nav */
.site-head {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-head--ink {
    background: rgba(20,17,31,.86); border-bottom-color: rgba(255,255,255,.10);
}
.site-head__inner { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -0.02em; font-size: 20px; color: var(--ink); }
.site-head--ink .brand { color: #fff; }
.brand__mark {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(140deg, var(--rose) 0%, var(--gold) 100%);
    display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 900;
}
.nav { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--text-mid); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--r-sm); }
.nav a:hover { background: var(--bg-sunk); color: var(--text); }
.site-head--ink .nav a { color: #c8c2d8; }
.site-head--ink .nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav a.is-cta { background: var(--rose); color: #fff; padding: 10px 18px; }
.nav a.is-cta:hover { background: var(--rose-hi); color: #fff; }

/* --------------------------------------------------------------- footer */
.site-foot { background: var(--ink); color: #a49dba; padding-block: var(--s8) var(--s6); }
.site-foot h4 { color: #fff; font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s3); }
.site-foot a { color: #c9c3da; text-decoration: none; display: block; padding: 4px 0; font-size: var(--fs-sm); }
.site-foot a:hover { color: var(--gold); }
.site-foot__bar { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.10); font-size: var(--fs-xs); }

/* =========================================================== app shell == */
.app-shell { display: flex; min-height: calc(100vh - 68px); align-items: stretch; }
.app-side {
    flex: 0 0 244px; background: var(--bg-soft); border-right: 1px solid var(--line);
    padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s1);
}
.app-side__label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; margin: var(--s4) 0 var(--s2); }
.app-side a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm);
    text-decoration: none; color: var(--text-mid); font-weight: 600; font-size: var(--fs-sm);
}
.app-side a:hover { background: var(--bg-sunk); color: var(--text); }
.app-side a.is-active { background: var(--rose); color: #fff; }
.app-main { flex: 1 1 0; min-width: 0; padding: var(--s5) var(--gutter) var(--s8); }
@media (max-width: 860px) {
    .app-shell { flex-direction: column; }
    .app-side { flex: 1 1 auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s3) var(--s4); gap: var(--s2); }
    .app-side__label { display: none; }
    .app-side a { white-space: nowrap; }
    .app-main { padding-inline: var(--s4); }
}

/* ============================================================== the board */
/* The live surface. Dark on purpose: it sits on a table in a dim room and
   must never blast a white screen at a wedding. */
.board { background: var(--ink); color: #ece9f4; min-height: 100vh; }
.board a { color: var(--gold); }

.board-bar {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(180deg, var(--ink-2) 0%, #1a1628 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: var(--s3) var(--gutter);
}
.board-bar__top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.board-title { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.board-sub { font-size: var(--fs-xs); color: #9a92b3; }

.now {
    display: flex; flex-direction: column; gap: 7px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
.now__track { text-align: center; line-height: 1.25; }
.now__title { display: block; font-weight: 700; font-size: var(--fs-lg); color: #fff; }
.now__pad   { display: block; font-size: var(--fs-sm); color: var(--gold); font-weight: 600; }
.now__prog  { height: 9px; background: #322b48; border-radius: 6px; cursor: pointer; overflow: hidden; }
.now__fill  { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--rose), var(--gold)); transition: width .2s linear; }
.now__times { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: #9a92b3; }
.now__times b { color: #fff; font-weight: 600; }
.now__transport { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tbtn {
    background: transparent; border: 0; color: #fff; width: 46px; height: 46px;
    font-size: 26px; line-height: 1; cursor: pointer; border-radius: var(--r-sm);
    display: grid; place-items: center; transition: color .12s ease, background .12s ease, transform .06s ease;
}
.tbtn:hover { color: var(--gold); background: rgba(255,255,255,.06); }
.tbtn:active { transform: scale(.9); }
.tbtn.is-active { color: var(--gold); }
.tbtn--pause { font-size: 20px; letter-spacing: -3px; }

.board-grid {
    display: grid; gap: clamp(10px, 1.4vw, 18px);
    grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 17vw, 200px), 1fr));
    padding: var(--s5) var(--gutter) var(--s8);
}
.padwrap { display: flex; }
.pad {
    position: relative; width: 100%;
    background: linear-gradient(165deg, #2a2340 0%, #211b33 100%);
    border: 1px solid rgba(255,255,255,.10); color: #fff;
    border-radius: var(--r-lg); padding: 34px 14px 18px;
    min-height: 122px; cursor: pointer; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    font-weight: 700; font-size: var(--fs-md); text-align: center; line-height: 1.25;
    transition: transform .07s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.pad:hover { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224,69,123,.20); color: #fff; }
.pad:active { transform: scale(.975); }
.pad__sub { font-weight: 500; font-size: var(--fs-xs); color: #a39bbb; }
.pad.is-active {
    background: linear-gradient(165deg, var(--rose) 0%, var(--rose-dim) 100%);
    border-color: var(--rose-hi); box-shadow: 0 0 0 4px rgba(224,69,123,.30), 0 8px 30px rgba(224,69,123,.28);
}
.pad.is-active .pad__sub { color: rgba(255,255,255,.88); }
.pad.is-empty { background: rgba(255,255,255,.03); border-style: dashed; color: #8a82a3; }
.pad--add { background: transparent; border: 2px dashed rgba(255,255,255,.20); color: #9a92b3; font-weight: 600; }
.pad--add:hover { border-color: var(--gold); color: var(--gold); box-shadow: none; }
.pad--locked { opacity: .45; }

.pad__gear, .pad__trash {
    position: absolute; top: 7px; font-size: 11px; font-weight: 700; line-height: 1;
    padding: 5px 9px; border-radius: 7px; cursor: pointer; border: 0;
    transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.pad__gear  { left: 8px;  background: rgba(255,255,255,.14); color: #fff; }
.pad__gear:hover { background: var(--gold); color: var(--ink); }
.pad__trash { right: 8px; background: transparent; color: #7f7799; display: flex; padding: 5px; }
.pad__trash:hover { background: var(--bad); color: #fff; }
.board-grid.is-reordering .pad { cursor: move; }
.board-grid.is-reordering .pad__gear,
.board-grid.is-reordering .pad__trash { display: none; }
.board-grid.is-reordering .pad--add { opacity: .3; pointer-events: none; }
.drag-ghost { opacity: .4; }

.board-hint {
    margin: 0 var(--gutter); padding: var(--s3) var(--s4);
    background: rgba(242,181,68,.12); border: 1px solid rgba(242,181,68,.35);
    color: var(--gold-hi); border-radius: var(--r-md); font-size: var(--fs-sm);
}

/* ------------------------------------------------------------ MC scripts */
.mc { padding: var(--s6) var(--gutter) var(--s9); border-top: 1px solid rgba(255,255,255,.08); }
.mc__names {
    display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s5);
}
.mc__field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 250px; }
.mc__field label { font-weight: 600; font-size: var(--fs-sm); color: #cfc9dd; }
.mc__field input { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.14); color: #fff; }
.mc__catbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.mc__catbar select { max-width: 320px; background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.14); color: #fff; }
.mc__list { display: grid; gap: var(--s3); }
.script {
    position: relative;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--gold); border-radius: var(--r-md);
    padding: var(--s4) var(--s5) var(--s4) var(--s4);
}
.script__title { font-weight: 700; color: var(--gold); margin: 0 0 6px; font-size: var(--fs-md); }
.script__body { margin: 0; font-size: var(--fs-lg); line-height: 1.55; color: #ece9f4; }
.script__edit {
    position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,.10); color: #cfc9dd; border: 0;
    border-radius: 6px; padding: 4px 10px; cursor: pointer;
}
.script__edit:hover { background: var(--gold); color: var(--ink); }
.script.is-editing { border-left-color: var(--rose); }
.script input, .script textarea { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.14); color: #fff; margin-bottom: var(--s2); }
.token-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0; }
.token-btn { background: rgba(242,181,68,.14); color: var(--gold); border: 1px solid rgba(242,181,68,.3); border-radius: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.token-btn:hover { background: rgba(242,181,68,.26); }

/* ---------------------------------------------------------------- modals */
.modal-back {
    position: fixed; inset: 0; z-index: 300; display: none;
    background: rgba(10,8,16,.62); backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: var(--s4);
}
.modal-back.is-open { display: flex; }
.modal {
    background: #fff; color: var(--text); border-radius: var(--r-xl);
    width: 100%; max-width: 460px; padding: var(--s5);
    box-shadow: var(--shadow-lg); max-height: 92vh; overflow: auto;
}
.modal--wide { max-width: 1040px; padding: 0; display: flex; flex-direction: column; max-height: 92vh; }
.modal h3 { margin: 0 0 6px; font-size: var(--fs-xl); }
.modal__sub { color: var(--text-soft); font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.modal__actions { display: flex; gap: var(--s2); justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: var(--s5); }

/* -------------------------------------------------------- music picker -- */
.mp__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); }
.mp__close { margin-left: auto; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--text-soft); }
.mp__body { display: flex; flex: 1; min-height: 0; }
.mp__left { flex: 1 1 54%; min-width: 0; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.mp__right { flex: 1 1 46%; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg-soft); }
.mp__tabs { display: flex; gap: var(--s1); padding: var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.mp__tab { border: 0; background: transparent; padding: 9px 15px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mp__tab.is-active { color: var(--rose); border-bottom-color: var(--rose); }
.mp__panel { display: none; flex-direction: column; flex: 1; min-height: 0; padding: var(--s4); overflow: auto; }
.mp__panel.is-active { display: flex; }
.mp__list { display: flex; flex-direction: column; gap: 6px; overflow: auto; flex: 1; }
.mp__rowtitle { padding: var(--s3) var(--s4) var(--s2); font-weight: 700; font-size: var(--fs-sm); }
.mp__foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); }
.song-row {
    display: flex; align-items: center; gap: var(--s2);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 7px 11px; background: #fff; font-size: var(--fs-sm);
}
.song-row__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-row__name span { font-weight: 400; color: var(--text-soft); }
.song-row__time { color: var(--text-soft); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.song-row__handle { cursor: grab; color: var(--text-soft); font-size: 17px; user-select: none; padding: 0 2px; }
.mini {
    border: 0; border-radius: 50%; width: 30px; height: 30px; flex-shrink: 0; cursor: pointer;
    background: rgba(224,69,123,.12); color: var(--rose-dim); font-size: 13px; display: grid; place-items: center;
}
.mini:hover { background: rgba(224,69,123,.22); }
.mini--x { background: transparent; color: var(--bad); font-size: 19px; width: 26px; height: 26px; }
.mini--x:hover { background: var(--bad-soft); }
.addbtn { border: 0; border-radius: var(--r-sm); padding: 7px 14px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; background: var(--rose); color: #fff; flex-shrink: 0; }
.addbtn:hover { background: var(--rose-hi); }
.addbtn[disabled] { background: var(--ok-soft); color: var(--ok); cursor: default; }
.droptarget { border: 2px dashed var(--line); border-radius: var(--r-md); padding: var(--s6) var(--s4); text-align: center; color: var(--text-soft); }
.droptarget.is-over { border-color: var(--rose); background: rgba(224,69,123,.05); color: var(--rose-dim); }
@media (max-width: 780px) {
    .mp__body { flex-direction: column; }
    .mp__left { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ------------------------------------------------------------- home page */
.hero {
    position: relative; background: var(--ink); color: #fff; overflow: hidden;
    padding-block: clamp(64px, 10vw, 148px);
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(1100px 620px at 12% -12%, rgba(224,69,123,.36), transparent 62%),
      radial-gradient(900px 560px at 92% 8%, rgba(242,181,68,.22), transparent 60%),
      radial-gradient(700px 480px at 62% 116%, rgba(122,71,255,.24), transparent 62%);
    pointer-events: none;
}
.hero__inner { position: relative; }
.hero h1 { color: #fff; margin-bottom: var(--s5); }
.hero .lede { color: #ddd7ea; max-width: 62ch; }
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.hero__foot { margin-top: var(--s4); font-size: var(--fs-sm); color: #a9a1c0; }

/* An illustration of the board itself, drawn in CSS — no image to load, and
   it always matches the real thing's styling. */
.board-demo {
    background: linear-gradient(165deg, #241e37, #1a1528);
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl);
    padding: var(--s4); box-shadow: var(--shadow-lg);
}
.board-demo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.board-demo__pad {
    border-radius: var(--r-md); padding: 20px 8px; text-align: center;
    font-size: var(--fs-xs); font-weight: 700; color: #cfc9dd;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.board-demo__pad.on {
    background: linear-gradient(165deg, var(--rose), var(--rose-dim)); color: #fff;
    border-color: var(--rose-hi); box-shadow: 0 0 0 3px rgba(224,69,123,.24);
}

.step { position: relative; padding-top: var(--s5); }
.step__num {
    font-family: var(--font-display); font-size: 46px; line-height: 1;
    color: var(--rose); opacity: .35; font-weight: 700; margin-bottom: var(--s2);
}
.section--ink .step__num { color: var(--gold); opacity: .5; }

.feature { padding: var(--s2) 0; }
.feature h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.feature p { color: var(--text-mid); margin: 0; }
.section--ink .feature p { color: #c2bbd4; }

.quote {
    font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.45;
    font-style: italic; color: var(--text); margin: 0 0 var(--s4);
}
.section--ink .quote { color: #fff; }

.price-card {
    background: linear-gradient(165deg, #fff, #fdf7fa);
    border: 2px solid var(--rose); border-radius: var(--r-xl);
    padding: clamp(26px, 3vw, 44px); box-shadow: var(--shadow-md);
}
.price-card__amount { font-size: clamp(52px, 7vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.price-card__unit { color: var(--text-soft); font-weight: 600; margin-bottom: var(--s5); }
.ticks { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); }
.ticks li::before { content: '✓'; color: var(--ok); font-weight: 900; flex-shrink: 0; }
.section--ink .ticks li { color: #ddd7ea; }
.section--ink .ticks li::before { color: var(--gold); }

.faq { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: var(--fs-lg); list-style: none; display: flex; gap: var(--s3); align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--rose); font-weight: 900; flex-shrink: 0; }
.faq[open] summary::before { content: '−'; }
.faq p { margin: var(--s3) 0 0 22px; color: var(--text-mid); }

/* ------------------------------------------------------------- utilities */
.hide { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}