. */
background: var(--media-bed);
}
[data-theme="band"] .media__t {
font-size: clamp(1.375rem, 2.4vw, 1.875rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--accent);
max-width: 12ch;
}
[data-theme="band"] .media__plate {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding: var(--s-4);
border-radius: var(--r-md);
background: rgba(11, 11, 12, 0.62);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
color: var(--on-fill);
}
[data-theme="band"] .media__q { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
[data-theme="band"] .media__by { font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.66); margin-top: var(--s-1); }
/* ---------------------------------------------------------------------------
10. TABLE
------------------------------------------------------------------------ */
[data-theme="band"] .tbl { font-size: var(--fs-sm); }
[data-theme="band"] .tbl th {
text-align: left;
padding: var(--s-3) var(--s-4);
font-size: var(--fs-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t-low);
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
[data-theme="band"] .tbl td {
padding: var(--s-4);
border-bottom: 1px solid var(--line-2);
color: var(--t-mid);
vertical-align: middle;
}
[data-theme="band"] .tbl tbody tr:hover td { background: var(--line-2); }
[data-theme="band"] .tbl tbody tr[aria-selected="true"] td { background: var(--recess-fill); color: var(--t-hi); }
[data-theme="band"] .tbl .num { color: var(--t-hi); font-weight: 600; }
[data-theme="band"] .tbl__nm { color: var(--t-hi); font-weight: 600; }
/* ---------------------------------------------------------------------------
11. SIDEBAR NAV
------------------------------------------------------------------------ */
[data-theme="band"] .side { display: grid; gap: var(--s-1); align-content: start; }
[data-theme="band"] .side__g {
padding: var(--s-4) var(--s-3) var(--s-2);
font-size: var(--fs-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--t-faint);
}
[data-theme="band"] .side__i {
display: flex;
align-items: center;
gap: var(--s-3);
height: 38px;
padding-inline: var(--s-3);
border-radius: var(--r-md);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--t-mid);
cursor: pointer;
}
[data-theme="band"] .side__i:hover { color: var(--t-hi); background: var(--line-2); }
[data-theme="band"] .side__i[aria-current="page"] {
background: var(--recess-fill);
box-shadow: var(--recess-in);
color: var(--t-hi);
font-weight: 600;
}
[data-theme="band"] .side__i .badge { margin-left: auto; }
/* ---------------------------------------------------------------------------
12. AVATAR
------------------------------------------------------------------------ */
[data-theme="band"] .avatar {
display: grid;
place-items: center;
width: 36px; height: 36px;
flex: none;
border-radius: var(--r-pill);
background: var(--recess-fill);
color: var(--t-mid);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.02em;
overflow: hidden;
}
[data-theme="band"] .avatar--lg { width: 52px; height: 52px; font-size: var(--fs-sm); }
[data-theme="band"] .avatar--sm { width: 30px; height: 30px; font-size: var(--fs-xs); }
[data-theme="band"] .avatar--accent { background: var(--accent); color: var(--ink); }
[data-theme="band"] .stackx { display: flex; }
[data-theme="band"] .stackx .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--canvas); }
[data-theme="band"] .stackx .avatar:first-child { margin-left: 0; }
/* ---------------------------------------------------------------------------
13. METER + WAVEFORM
------------------------------------------------------------------------ */
[data-theme="band"] .meter {
height: 8px;
border-radius: var(--r-pill);
background: var(--recess-fill);
box-shadow: var(--recess-in);
overflow: hidden;
}
[data-theme="band"] .meter__v {
height: 100%;
border-radius: var(--r-pill);
background: var(--act-fill);
}
[data-theme="band"] .meter--accent .meter__v { background: var(--accent); }
[data-theme="band"] .wave {
display: flex;
align-items: center;
gap: 3px;
height: 32px;
}
[data-theme="band"] .wave i {
display: block;
width: 3px;
border-radius: var(--r-pill);
background: var(--t-faint);
}
[data-theme="band"] .wave i.on { background: var(--accent); }
/* ---------------------------------------------------------------------------
14. TOAST, MODAL, COMMAND PALETTE, TOOLTIP
------------------------------------------------------------------------ */
[data-theme="band"] .toast {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--raised-border);
background: var(--raised-fill);
box-shadow: var(--raised-hi), var(--raised-drop);
font-size: var(--fs-sm);
color: var(--t-hi);
max-width: 420px;
backdrop-filter: var(--raised-filter);
-webkit-backdrop-filter: var(--raised-filter);
}
[data-theme="band"] .toast__x { margin-left: auto; color: var(--t-low); }
[data-theme="band"] .toast--accent { background: var(--accent); border-color: transparent; color: var(--ink); }
[data-theme="band"] .toast--accent .toast__x { color: rgba(11, 11, 12, 0.62); }
[data-theme="band"] .scrim {
position: relative;
display: grid;
place-items: center;
padding: var(--s-7) var(--s-4);
border-radius: var(--r-lg);
background: rgba(11, 11, 12, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
[data-theme="band"] .modal {
width: min(440px, 100%);
border-radius: var(--r-lg);
border: 1px solid var(--raised-border);
background: var(--raised-fill);
box-shadow: var(--raised-hi), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
overflow: hidden;
backdrop-filter: var(--raised-filter);
-webkit-backdrop-filter: var(--raised-filter);
}
[data-theme="band"] .cmdk {
width: min(520px, 100%);
border-radius: var(--r-lg);
border: 1px solid var(--raised-border);
background: var(--raised-fill);
box-shadow: var(--raised-hi), 0 40px 80px -30px rgba(0, 0, 0, 0.6);
overflow: hidden;
backdrop-filter: var(--raised-filter);
-webkit-backdrop-filter: var(--raised-filter);
}
[data-theme="band"] .cmdk__q {
width: 100%;
height: 52px;
padding-inline: var(--s-5);
border: 0;
border-bottom: 1px solid var(--line-2);
background: none;
outline: none;
color: var(--t-hi);
font-size: var(--fs-body);
}
[data-theme="band"] .cmdk__q::placeholder { color: var(--t-faint); }
[data-theme="band"] .cmdk__list { padding: var(--s-2); display: grid; gap: 2px; }
[data-theme="band"] .cmdk__i {
display: flex;
align-items: center;
gap: var(--s-3);
height: 40px;
padding-inline: var(--s-3);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
color: var(--t-mid);
cursor: pointer;
}
[data-theme="band"] .cmdk__i[aria-selected="true"] {
background: var(--recess-fill);
box-shadow: var(--recess-in);
color: var(--t-hi);
}
[data-theme="band"] .kbd {
margin-left: auto;
display: inline-grid;
place-items: center;
min-width: 26px;
height: 26px;
padding-inline: 8px;
border-radius: var(--r-sm);
border: 1px solid var(--line);
font-size: var(--fs-micro);
font-weight: 600;
color: var(--t-low);
}
[data-theme="band"] .tip {
display: inline-block;
padding: 6px var(--s-3);
border-radius: var(--r-sm);
background: var(--t-hi);
color: var(--canvas);
font-size: var(--fs-micro);
font-weight: 500;
}
/* ---------------------------------------------------------------------------
15. UPLOAD + EMPTY STATE
------------------------------------------------------------------------ */
[data-theme="band"] .drop {
display: grid;
place-items: center;
gap: var(--s-3);
padding: var(--s-7) var(--s-5);
border-radius: var(--r-lg);
border: 1px dashed var(--line);
background: var(--recess-fill);
box-shadow: var(--recess-in);
text-align: center;
}
[data-theme="band"] .empty {
display: grid;
place-items: center;
gap: var(--s-3);
padding: var(--s-8) var(--s-5);
text-align: center;
}
[data-theme="band"] .empty .ico { color: var(--t-faint); }
/* ---------------------------------------------------------------------------
16. MARKETING BLOCKS
------------------------------------------------------------------------ */
/* hero: display line / media band / display line — type wraps the imagery */
[data-theme="band"] .hero { padding-block: var(--s-6) var(--s-9); text-align: center; }
[data-theme="band"] .hero__band {
display: flex;
gap: var(--s-3);
margin-block: var(--s-4);
overflow: hidden;
}
[data-theme="band"] .hero__band > * {
flex: 1 0 190px;
height: var(--hero-band-h);
border-radius: var(--r-lg);
width: 100%;
object-fit: cover; /* the band can hold a