:root {
  color-scheme: dark;
  --bg: #15101e;
  --panel: #201729;
  --raised: #2a1d34;
  --border: #48384f;
  --text: #fff6ff;
  --muted: #d1bfd8;
  --pink: #f3a7d0;
  --ink: #271123;
  --mint: #a7eccb;
  --radius: 22px;
  font: 16px/1.55 "Noto Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
:lang(hi) { font-family: "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif; }
:lang(bn) { font-family: "Noto Sans Bengali", "Noto Sans", system-ui, sans-serif; }
:lang(ur) { font-family: "Noto Nastaliq Urdu", "Noto Sans", system-ui, sans-serif; line-height: 2.12; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
a { color: var(--pink); }
p, h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #ffd67b; outline-offset: 4px; }
.wrap { width: min(calc(100% - 32px), 1040px); margin-inline: auto; }
.masthead { background: #1a1322; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-block: 12px; }
.wordmark { display: inline-flex; gap: 10px; align-items: center; min-height: 48px; color: var(--text); text-decoration: none; direction: ltr; }
.wordmark strong { display: block; font: 900 1.18rem/1 system-ui, sans-serif; letter-spacing: .15em; }
.wordmark small { display: block; margin-top: 3px; font: 650 .74rem/1.2 system-ui, sans-serif; color: var(--muted); }
.mark { display: flex; align-items: center; justify-content: center; gap: 3px; width: 39px; height: 39px; color: var(--ink); background: var(--pink); border-radius: 12px; }
.mark i { height: 10px; width: 2px; border-radius: 9px; background: currentColor; }
.mark i:nth-child(2), .mark i:nth-child(4) { height: 16px; }
.mark i:nth-child(3) { height: 23px; }
.languages { display: flex; direction: ltr; flex-wrap: wrap; gap: 3px; }
.languages button { min-height: 44px; border: 1px solid transparent; background: transparent; color: var(--muted); padding: 0 8px; border-radius: 10px; cursor: pointer; font-size: .8rem; }
.languages button[aria-pressed=true] { color: var(--text); background: #372443; border-color: #66486f; }
.main { flex: 1; min-inline-size: 0; padding-block: 32px 46px; }
.footer { color: var(--muted); font-size: .76rem; letter-spacing: .08em; padding-block: 16px 26px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer a { min-height: 44px; display: inline-grid; align-items: center; letter-spacing: 0; }
.skip { position: fixed; z-index: 2; inset-block-start: 8px; inset-inline-start: 8px; background: var(--bg); padding: 12px; }
.skip:not(:focus-visible) { clip-path: inset(50%); inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
.hero, .panel, .card, details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 5vw, 48px); background: radial-gradient(ellipse at 95% 0%, #58294c, transparent 67%), linear-gradient(145deg,#30203d,#20172d 74%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset-block-start: -45%; inset-inline-end: -9%; width: 335px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 11px, #f0a4d019 12px 13px); mask-image: linear-gradient(#0009, #000); pointer-events: none; }
.hero h1 { font-size: clamp(2.15rem, 8vw, 4rem); line-height: 1.06; letter-spacing: -.052em; margin-block: 7px 12px; }
.hero :lang(ur), .hero h1:lang(ur) { line-height: 1.9; letter-spacing: normal; }
.hero :lang(hi), .hero :lang(bn) { letter-spacing: normal; }
.hero p { max-width: 48ch; }
.login { max-width: 790px; margin-inline: auto; }
.login .panel { max-width: 510px; margin: 16px auto 0; }
.kicker { color: var(--pink); font-size: .76rem; font-weight: 800; letter-spacing: .14em; }
:lang(ur) .kicker { letter-spacing: normal; }
.subtle { color: var(--muted); }
.section { margin-block-start: 30px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-block-end: 12px; }
h2 { font-size: 1.47rem; line-height: 1.25; }
h2:lang(ur) { line-height: 2; }
h3 { font-size: 1.05rem; }
.panel, .card { padding: 18px; }
.card { background: linear-gradient(150deg, #251a30, #21182b); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); gap: 12px; }
.stack { display: grid; gap: 12px; min-width: 0; }
.line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.space { justify-content: space-between; }
.code { font: 750 .88rem/1.5 "Noto Sans", system-ui, sans-serif; color: var(--pink); unicode-bidi: isolate; overflow-wrap: anywhere; }
.badge { display: inline-block; color: #f9e5fd; background: #4c335e; padding: 5px 11px; border-radius: 8px; font-weight: 800; overflow-wrap: anywhere; max-width: 100%; }
.badge[data-tone="Part locked"], .badge[data-tone="overdue"] { color: #ffe6aa; background: #5d3c25; }
.badge[data-tone="Clip received"], .badge[data-tone="Posted"], .badge[data-tone="Scheduled"] { color: #d4ffed; background: #265141; }
.badge[data-tone="Editing"] { color: #fce3ff; background: #653661; }
.badge[data-tone="Released"] { color: #e8dce9; background: #493d50; }
.hero .badge { font-size: 1.05rem; }
.hero .stack { gap: 8px; }
.hero .button { width: fit-content; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid transparent; border-radius: 12px; font-weight: 800; text-align: center; overflow-wrap: anywhere; text-decoration: none; background: var(--pink); color: var(--ink); cursor: pointer; }
.button.secondary { background: var(--raised); color: var(--text); border-color: #655071; }
.button.danger { background: #4e2237; color: #ffcfdf; border-color: #89526c; }
.button:disabled { opacity: .62; cursor: default; }
a.button:hover, .button:not(:disabled):hover { filter: brightness(1.12); }
label { display: grid; gap: 5px; font-weight: 680; min-width: 0; }
input:not([type=checkbox]), select, textarea { width: 100%; min-width: 0; min-height: 49px; background: #17111f; border: 1px solid #68516f; color: var(--text); border-radius: 11px; padding: 9px 12px; }
input::placeholder { color: #b7a1bd; }
textarea { resize: vertical; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--pink); margin: 0; flex: none; }
.check { min-height: 48px; display: flex; align-items: center; gap: 12px; background: #21182b; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; overflow-wrap: anywhere; }
.part-label { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.sheet-code { color: #b0a9b3; font-size: .75rem; font-weight: 500; }
.part-time { color: var(--muted); font-variant-numeric: tabular-nums; }
#part-player { margin-block: 20px; }
#part-player[hidden] { display: none; }
#part-player iframe { width: 100%; min-height: 220px; border: 0; }
.taken-card { background: #241f28; color: var(--muted); }
.taken-card .badge { color: #ddd6df; background: #3d3540; }
.queue { list-style: none; padding: 0; margin: 0; }
.queue-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 13px; align-items: center; border-radius: 15px; padding: 13px 15px; border: 1px solid var(--border); background: var(--panel); }
.queue-row .badge { font-size: .81rem; }
.queue-row.you { border-color: var(--pink); background: #39243e; }
.queue-number { align-self: start; min-width: 2.65em; border-radius: 9px; background: #3b2b47; padding: 6px; font-weight: 800; text-align: center; }
.queue-link { grid-column: 2; }
.empty { border-style: dashed; color: var(--muted); }
details summary { min-height: 49px; padding: 13px 18px; cursor: pointer; font-weight: 800; }
details ol { padding-inline: 42px 18px; margin-block: 0 17px; color: var(--muted); }
details li + li { margin-block-start: 5px; }
#notice:not(:empty) { border: 1px solid #88708f; background: #342640; padding: 11px 14px; border-radius: 12px; margin-block-end: 14px; overflow-wrap: anywhere; }
#notice[data-error=true]:not(:empty) { color: #ffcfdf; border-color: #ae6986; }
.overdue { border-color: #d79763; }
.admin-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 14px; }
.admin-nav button[aria-pressed=true] { border-color: var(--pink); color: var(--pink); }
.admin-page { width: 100%; min-inline-size: 0; }
.agreement-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.agreement-list .card { min-inline-size: 0; width: 100%; }
.request-facts { display: grid; gap: 3px; font-size: .875rem; }
.secret-result { padding: 12px; background: #473453; border: 1px solid #8a7097; border-radius: 12px; }
.agreement-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
}
.agreement-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body:has(.agreement-dialog[open]) { overflow: hidden; }
.agreement-dialog::backdrop { background: var(--bg); }
.agreement-dialog .wrap { max-width: 720px; }
.agreement-header, .agreement-footer { padding-block: 12px; background: var(--panel); }
.agreement-header { border-block-end: 1px solid var(--border); }
.agreement-header h1 { font-size: clamp(1.15rem, 4.5vw, 1.65rem); line-height: 1.35; }
.agreement-header h1:lang(ur) { line-height: 2; }
.agreement-body { overflow-y: auto; overscroll-behavior: contain; padding-block: 20px; }
.agreement-body p { white-space: pre-line; }
.agreement-footer { border-block-start: 1px solid var(--border); padding-block-end: max(12px, env(safe-area-inset-bottom)); }
.agreement-footer p { font-size: .85rem; }
#agreement-notice:empty { display: none; }
#agreement-notice { color: #ffcfdf; }
@media (min-width: 700px) {
  .main { padding-block-start: 45px; }
  .member-layout { display: grid; grid-template-columns: 1.25fr .85fr; gap: 24px; align-items: start; }
  .member-layout > .section { grid-column: 1; }
  .member-layout > aside { grid-column: 2; grid-row: 1 / span 2; }
  .queue-row { grid-template-columns: auto minmax(0, 1fr); }
  .panel, .card { padding: 21px; }
  .agreement-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: filter .12s; }
}