/* New UI (owner preview): the Claude Design redesign. Rides on the looks in
   encore.css ([data-look] stage / house) and adds the few extra tokens and the
   layout classes the redesigned pages share. Nothing here loads on classic pages. */
:root[data-look] { --surface-3: var(--surface-2); --hot: var(--warn); --hot-tint: var(--warn-tint); --r-pill: 999px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --tilt: 0deg; }
:root[data-look="stage"] { --tilt: -4deg; --hl-style: normal; --r-md: 16px; --r-sm: 12px; --r-lg: 28px; --hot: oklch(0.75 0.19 350); --hot-tint: oklch(0.75 0.19 350 / .15); --stat-bg: oklch(0.75 0.19 350); --stat-ink: #0B0B0F; --stat-line: rgba(0,0,0,.15); --day-on: #0B0B0F; --day-off: rgba(0,0,0,.14); --accent-ink: oklch(0.9 0.2 125); }
:root[data-look="stage"][data-theme="dark"] { --surface-3: #262631; --card-border: 1px solid rgba(255,255,255,.07); --sh: 0 30px 60px -40px oklch(0.9 0.2 125 / .35); --nav-on: #F5F5F2; --nav-on-ink: #0B0B0F; }
:root[data-look="stage"][data-theme="light"] { --surface-3: #E7E7E0; --card-border: 2px solid #111114; --sh: 5px 5px 0 #111114; --hot: oklch(0.55 0.21 350); --accent-ink: oklch(0.5 0.15 135); --nav-on: #111114; --nav-on-ink: #F4F4EF; --stat-ink: #111114; --day-on: #111114; --day-off: rgba(0,0,0,.12); }
:root[data-look="house"] { --hl-style: italic; --r-md: 10px; --r-sm: 8px; --r-lg: 14px; --stat-bg: var(--surface); --stat-ink: var(--ink); --stat-line: var(--line); --day-on: var(--accent); --day-off: var(--surface-2); --accent-ink: var(--accent-soft); }
:root[data-look="house"][data-theme="light"] { --surface-3: #ECE4D7; --card-border: 1px solid #E5DCCD; --sh: 0 18px 40px -32px rgba(60,30,40,.35); --hot: #8A5A14; --nav-on: #EFE6D8; --nav-on-ink: #1F1A1E; --day-off: #EFE6D8; }
:root[data-look="house"][data-theme="dark"] { --surface-3: #2F2930; --card-border: 1px solid #2F2930; --sh: 0 18px 40px -30px rgba(0,0,0,.6); --hot: #D9B26E; --nav-on: #2F2930; --nav-on-ink: #F1EBE4; --day-off: #2F2930; }

body.nu { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); min-height: 100vh; display: flex; flex-direction: column; }
.nu a { color: inherit; text-decoration: none; }
.nu .display, .nu h1, .nu h2, .nu h3 { font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--ls-display); }
.nu-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nu-logo { display: flex; align-items: center; gap: 10px; }
.nu-logo b { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; transform: rotate(var(--tilt)); }
.nu-logo span { font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--ls-display); font-size: 1.2rem; }
.nu-tabs { display: flex; gap: 4px; margin-left: 12px; }
.nu-tabs a { font-size: .92rem; font-weight: 500; color: var(--ink-soft); padding: 8px 16px; border-radius: var(--r-pill); }
.nu-tabs a:hover { color: var(--ink); }
.nu-tabs a.on { font-weight: 600; color: var(--nav-on-ink); background: var(--nav-on); }
.nu-sp { flex: 1; }
.nu-chip { font-size: .8rem; font-weight: 700; padding: 7px 12px; border-radius: var(--r-pill); background: var(--hot-tint); color: var(--hot); }
.nu-exit { white-space: nowrap; font-size: .82rem; font-weight: 700; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink); background: none; cursor: pointer; font-family: inherit; }
.nu-look { font-size: .82rem; font-weight: 600; padding: 7px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.nu-av { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); font-family: var(--f-display); font-weight: 700; color: var(--ink); padding: 0; cursor: pointer; }
.nu-main { width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 40px) 96px; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; gap: 32px; }
.nu-soft { color: var(--ink-soft); }
.nu-h1 { font-size: clamp(38px, 7vw, 68px); line-height: .95; margin: 0; text-wrap: balance; }
.nu-h1 em { color: var(--accent-ink); font-style: var(--hl-style); }
.nu-card { border-radius: var(--r-lg); background: var(--surface); border: var(--card-border); box-shadow: var(--sh); overflow: hidden; }
.nu-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.nu-art { position: relative; min-height: 260px; background: linear-gradient(152deg, #2E6BA8, #7FC9E0); }
.nu-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nu-art i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(8,8,12,.88)); }
.nu-art .tag { position: absolute; top: 18px; left: 18px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); transform: rotate(var(--tilt)); }
.nu-art .cap { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; display: flex; flex-direction: column; gap: 6px; }
.nu-art .cap strong { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(28px, 4vw, 40px); line-height: 1; letter-spacing: var(--ls-display); }
.nu-pad { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.nu a.nu-btn, .nu-btn { display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; border: 0; cursor: pointer; font-family: inherit; }
.nu a.nu-btn.ghost, .nu-btn.ghost { background: none; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: 15px; }
.nu-btn:hover { filter: brightness(1.08); }
.nu-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.nu-tools a { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--r-md); background: var(--surface-2); font-size: .9rem; font-weight: 600; }
.nu-tools a:hover { background: var(--surface-3); }
.nu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.nu-sec { display: flex; flex-direction: column; gap: 14px; }
.nu-sec > h2 { font-size: 1.5rem; margin: 0; }
.nu-row { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: var(--card-border); }
.nu-row .top { display: flex; align-items: center; gap: 14px; }
.nu-row .thumb { width: 52px; height: 52px; border-radius: var(--r-sm); flex: none; background: linear-gradient(150deg, #5B7FB8, #C7DDF2); }
.nu-row .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nu-row .meta b { font-size: 1rem; }
.nu-row .meta span { font-size: .86rem; color: var(--ink-soft); }
.nu-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nu-pills a { white-space: nowrap; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: .84rem; font-weight: 600; }
.nu-pills a.main { background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 0 14px; }
.nu-stat { border-radius: var(--r-lg); padding: 22px; background: var(--stat-bg); color: var(--stat-ink); border: var(--card-border); display: flex; flex-direction: column; gap: 18px; }
.nu-stat .big { display: flex; align-items: flex-end; gap: 12px; }
.nu-stat .big strong { font-family: var(--f-display); font-weight: var(--w-display); font-size: 72px; line-height: .85; letter-spacing: -.03em; }
.nu-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nu-days div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; }
.nu-days span { width: 100%; height: 30px; border-radius: var(--r-sm); background: var(--day-off); }
.nu-days span.on { background: var(--day-on); }
.nu-bottom { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); }
.nu-bottom a { display: flex; align-items: center; justify-content: center; height: 44px; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.nu-bottom a.on { font-weight: 800; color: var(--accent-ink); }
@media (max-width: 720px) { .nu-tabs { display: none; } .nu-bottom { display: grid; } .nu-chip { display: none; } }
@media (max-width: 520px) { .nu-nav { gap: 8px; padding: 10px 14px; } .nu-logo span { display: none; } .nu-exit { padding: 6px 10px; } }
@media (max-width: 720px) { .nu-adminlink { display: none; } }
.nu-adminlink { text-decoration: none; }

.nu-adminlink.on { background: var(--nav-on); color: var(--nav-on-ink); border-color: transparent; }

/* Profile dropdown (avatar menu) */
.nu-pop { position: fixed; z-index: 90; min-width: 230px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto; padding: 8px; border-radius: var(--r-md, 12px); background: var(--surface); border: 1px solid var(--line-strong, var(--line)); box-shadow: 0 14px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px; }
.nu-pop a, .nu-pop button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; }
.nu-pop a:hover, .nu-pop button:hover, .nu-pop a:focus-visible, .nu-pop button:focus-visible { background: var(--surface-2); outline: none; }
.nu-pop button:disabled { opacity: .5; }
.nu-pop b { width: 14px; flex: none; color: var(--accent); font-weight: 700; }
.nu-pop .nu-pop-h { padding: 8px 12px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.nu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }

.nu-song { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.nu-song .play { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-size: .7rem; flex: none; }
.nu-song .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nu-song .meta b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-song .meta span { font-size: .8rem; color: var(--ink-soft); }