/* ============================================================
   NOX LIVE — NEON // 裏配信 Theme (v0.7.0)
   ダイナー／アーケード／サイバーパンクのネオン看板。ロゴのピンク
   をホットネオンまで伸ばし、シアン・イエロー・ライム・パープルで
   アクセント。スキャンライン、グリッド床、ひまわり雨で「深夜の
   裏通り」感を演出。

   設計原則:
   - 既存の CSS 変数名 (--primary / --bg-main / --text-primary /
     --wood-500 / --hay-100 / --carrot-500 / --ink-700 / --gold-400
     など) は全て温存し、値だけ Neon パレットにリマップ。
     既存のページ専用 CSS / inline スタイルが自動追従する。
   - 既存のクラス名 (.card / .top-bar / .sidebar / .stream-card /
     .notice-item / .status-badge / .btn-primary …) は保持、
     見た目だけ Neon 化。
   - 追加: Neon 専用装飾 (CRT overlay, seed rain, ticker, neon-sign,
     sched-grid, sign, live-chip, seedbox, open-badge)
   - prefers-reduced-motion で全 anim 停止
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Monoton&family=Rubik+Mono+One&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* === Neon palette (canonical) === */
    --bg-0: #0b0312;
    --bg-1: #130620;
    --bg-2: #1b0a2e;
    --ink: #ffe8f4;
    --ink-dim: #c89cc8;
    --ink-mute: #7b5a80;
    --pink: #ff3ea0;
    --pink-glow: #ff6ec7;
    --cyan: #00e7ff;
    --cyan-dim: #1aa3b8;
    --yellow: #ffd447;
    --purple: #9b4dff;
    --lime: #c1ff72;
    --blood: #b2184d;

    /* === Mapped to legacy variable names === */
    --primary: var(--pink);
    --primary-light: var(--pink-glow);
    --primary-dark: var(--blood);

    --bg-main: var(--bg-0);
    --bg-sidebar: var(--bg-1);
    --bg-card: var(--bg-2);
    --bg-hover: rgba(255, 62, 160, 0.08);
    --bg-input: #0a0310;
    --bg-dark: #050108;

    --text-primary: var(--ink);
    --text-secondary: var(--ink-dim);
    --text-muted: var(--ink-mute);
    --text-light: #ffffff;

    --border-light: rgba(255, 62, 160, 0.25);
    --border-medium: rgba(255, 62, 160, 0.40);

    --live: var(--pink);
    --offline: #3a2030;
    --scheduled: var(--cyan);
    --success: var(--lime);
    --warning: var(--yellow);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.8), 0 0 22px rgba(255, 62, 160, 0.3);

    --glow-pink: 0 0 0 2px rgba(255, 62, 160, 0.3), 0 0 22px rgba(255, 62, 160, 0.55);
    --glow-cyan: 0 0 0 2px rgba(0, 231, 255, 0.3), 0 0 22px rgba(0, 231, 255, 0.55);
    --glow-gold: 0 0 0 2px rgba(255, 212, 71, 0.3), 0 0 22px rgba(255, 212, 71, 0.55);

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --sidebar-width: 270px;
    --header-height: 76px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

    /* === Legacy Midnight/Burrow vars (page-CSS 互換) === */
    --ink-900: #050108;
    --ink-800: var(--bg-0);
    --ink-700: var(--bg-1);
    --ink-600: var(--bg-2);
    --ink-500: #2a1640;
    --ink-400: #3a2050;
    --ink-300: #5a3875;

    --cream-50: var(--ink);
    --cream-100: #ffd5e8;
    --cream-200: #ffb8d8;

    --pop-pink-300: #ffb8d8;
    --pop-pink-400: var(--pink-glow);
    --pop-pink-500: var(--pink);
    --pop-pink-600: var(--blood);
    --pop-pink-700: #7a0f34;

    --gold-300: #fff29c;
    --gold-400: var(--yellow);
    --gold-500: #c89a0a;
    --gold-600: #9a7a0a;

    --apricot-400: #ff9970;
    --apricot-500: #ff6e40;
    --apricot-600: #c94a20;

    --r18-500: #ff3e5e;
    --r18-600: var(--blood);
    --r18-700: #7a0f34;

    --leaf-500: var(--lime);
    --seed-500: #4b2878;

    --hay-50: var(--bg-2);
    --hay-100: rgba(255, 62, 160, 0.12);
    --hay-200: rgba(255, 62, 160, 0.25);
    --hay-300: var(--yellow);
    --hay-400: #c89a0a;

    --wood-100: #2a1640;
    --wood-200: #3a2050;
    --wood-300: #5a3875;
    --wood-400: #7b5a80;
    --wood-500: var(--ink-dim);
    --wood-600: #050108;

    --carrot-400: var(--pink-glow);
    --carrot-500: var(--pink);
    --carrot-600: var(--blood);

    --berry-500: var(--pink);
    --berry-600: var(--blood);

    /* === Textures === */
    --hay-texture: repeating-linear-gradient(45deg,
        rgba(255, 62, 160, 0.04) 0 10px,
        transparent 10px 20px);
    --wood-grain: repeating-linear-gradient(90deg,
        rgba(255, 62, 160, 0.12) 0 1px,
        transparent 1px 4px);
    --crt-line: rgba(255, 62, 160, 0.04);
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --sidebar-width: 240px;
    }
}

/* ============================================================
   Global base + neon backdrop + grid floor + CRT overlay
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Zen Kaku Gothic New', 'Inter', system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg-0);
    min-height: 100vh;
    overflow-x: hidden;
    font-feature-settings: "palt";
    letter-spacing: 0.01em;
    line-height: 1.6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(900px 520px at 15% 0%, rgba(255, 62, 160, 0.28), transparent 60%),
        radial-gradient(800px 500px at 95% 10%, rgba(155, 77, 255, 0.22), transparent 65%),
        radial-gradient(700px 500px at 50% 100%, rgba(0, 231, 255, 0.16), transparent 60%),
        linear-gradient(180deg, #0b0312, #050108);
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, rgba(255, 62, 160, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 231, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}

.crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: repeating-linear-gradient(0deg,
        var(--crt-line) 0 1px,
        transparent 1px 3px);
    pointer-events: none;
    mix-blend-mode: overlay;
}

.seed-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.seed-rain span {
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: var(--pink);
    opacity: 0.08;
    animation: seed-drop 8s linear infinite;
}
@keyframes seed-drop {
    0% { transform: translateY(-20vh); }
    100% { transform: translateY(120vh); }
}

@media (prefers-reduced-motion: reduce) {
    .seed-rain { display: none; }
    .ticker-track,
    .sign-name,
    .neon-sign,
    .flicker,
    .status-badge.live,
    .open-badge .d,
    .sign-open .d,
    .live-chip .dot { animation: none !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   App shell & Layout
   ============================================================ */
.app-container {
    /* position:fixed の sidebar + top-bar と、その下に流れる main-content
       を block flow で組む。grid だと fixed sidebar が column を空ける
       だけで main-content が狭い column 1 に押し込まれるバグになる。 */
    position: relative;
    min-height: 100vh;
    z-index: 1;
}
.hidden { display: none !important; }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    position: relative;
    padding: 18px 18px 40px;
    background: linear-gradient(180deg,
        rgba(19, 6, 32, 0.9),
        rgba(11, 3, 18, 0.98));
    border-right: 1px solid rgba(255, 62, 160, 0.25);
    box-shadow: inset -10px 0 30px -20px rgba(255, 62, 160, 0.5);
    min-height: 100vh;
    overflow-y: auto;
}
.sidebar::before {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        transparent,
        var(--pink),
        var(--cyan),
        var(--pink),
        transparent);
    box-shadow: 0 0 12px var(--pink);
    opacity: 0.8;
    pointer-events: none;
}
.sidebar.with-top-bar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    z-index: 100;
    overflow-y: auto;
}

/* Top Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(180deg,
        rgba(19, 6, 32, 0.92),
        rgba(11, 3, 18, 0.88));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 62, 160, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    z-index: 150;
}
.top-bar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--pink),
        var(--cyan),
        var(--pink),
        transparent);
    box-shadow: 0 0 10px var(--pink);
    opacity: 0.7;
}

.main-content {
    padding: 26px 34px 80px;
}
.main-content.with-top-bar {
    margin-top: var(--header-height);
    /* fixed sidebar 分を左に避ける */
    margin-left: var(--sidebar-width);
}
/* no-sidebar なレイアウト (maintenance / verify-complete 等) では
   margin-left を取り払い、本文をフル幅で使う */
.app-container.no-sidebar .main-content,
.app-container.no-sidebar .main-content.with-top-bar { margin-left: 0; }

/* ============================================================
   Top Bar internals
   ============================================================ */
.top-bar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Monoton', 'Rubik Mono One', cursive;
    font-weight: 400;
    color: #fff;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-shadow:
        0 0 4px #fff,
        0 0 10px var(--pink),
        0 0 22px var(--pink);
}
.top-bar .logo::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}
.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.version-badge {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    letter-spacing: 0.15em;
    margin-left: 6px;
    opacity: 0.85;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 14px;
}
.crumbs .lead {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 4px 8px;
    border-radius: 2px;
    text-transform: uppercase;
}
.crumbs .page {
    font-family: 'Monoton', cursive;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink), 0 0 16px var(--pink-glow);
}

.live-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--lime);
    border-radius: 999px;
    background: rgba(193, 255, 114, 0.08);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--lime);
    text-shadow: 0 0 4px var(--lime);
    text-transform: uppercase;
}
.live-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    animation: neon-blink 1s infinite;
}
@keyframes neon-blink { 50% { opacity: 0.35; } }

.seedbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    border: 1px solid rgba(255, 212, 71, 0.5);
    border-radius: 4px;
    background: linear-gradient(180deg,
        rgba(255, 212, 71, 0.08),
        rgba(0, 0, 0, 0.4));
    box-shadow:
        inset 0 0 10px rgba(255, 212, 71, 0.12),
        0 0 14px rgba(255, 212, 71, 0.15);
}
.seedbox .seed {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 40% 35%,
        #fff2a0,
        #ffd447 55%,
        #7a5a0a);
    border-radius: 50% 50% 50% 60% / 60% 50% 50% 50%;
    transform: rotate(-20deg);
    box-shadow: 0 0 8px rgba(255, 212, 71, 0.8);
}
.seedbox .seed::after {
    content: "";
    width: 10px;
    height: 6px;
    background: #2a1a03;
    border-radius: 50%;
    transform: rotate(20deg);
}
.seedbox .v {
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: var(--yellow);
    text-shadow: 0 0 6px var(--yellow);
    line-height: 1;
}
.seedbox .l {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    text-transform: uppercase;
}

.btn-header-logout,
.btn-logout {
    padding: 7px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    background: #0a0310;
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}
.btn-header-logout:hover,
.btn-logout:hover {
    color: var(--pink);
    border-color: var(--pink);
    text-shadow: 0 0 4px var(--pink);
}
.btn-header-logout:disabled,
.btn-logout:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-mobile-menu,
.btn-mobile-menu-bare {
    display: none;
    font-size: 1.5rem;
    color: var(--pink);
    background: transparent;
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    text-shadow: 0 0 6px var(--pink);
}
@media (max-width: 768px) {
    .btn-mobile-menu,
    .btn-mobile-menu-bare { display: inline-block; }
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 1, 8, 0.75);
    backdrop-filter: blur(4px);
    z-index: 90;
    display: none;
}
.sidebar-overlay.show { display: block; }

/* ============================================================
   Sidebar internals
   ============================================================ */
.user-section {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.3);
}
.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), var(--blood));
    display: grid;
    place-items: center;
    box-shadow: 0 0 14px rgba(255, 62, 160, 0.5);
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.user-name {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.user-points-row {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    text-transform: uppercase;
}
.user-points-link,
.user-points-link-btn {
    font-family: 'VT323', monospace;
    color: var(--yellow);
    text-shadow: 0 0 4px var(--yellow);
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}
.nav-section-title {
    margin: 16px 6px 6px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-section-title::before {
    content: "";
    width: 12px;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-dim);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.nav-item-icon {
    width: 20px;
    display: grid;
    place-items: center;
    color: var(--pink);
    filter: drop-shadow(0 0 3px var(--pink));
    flex-shrink: 0;
}
.nav-item:hover {
    color: var(--ink);
    background: rgba(255, 62, 160, 0.08);
}
.nav-item.active {
    color: #fff;
    background: linear-gradient(90deg,
        rgba(255, 62, 160, 0.25),
        rgba(155, 77, 255, 0.05));
    border-color: var(--pink);
    box-shadow:
        inset 3px 0 0 var(--cyan),
        0 0 18px rgba(255, 62, 160, 0.35);
    text-shadow: 0 0 6px var(--pink);
}
.nav-item.active .nav-item-icon {
    color: var(--cyan);
    filter: drop-shadow(0 0 4px var(--cyan));
}

.sidebar-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--pink);
    color: #0a0310;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px var(--pink);
}

/* Neon OPEN badge */
.open-badge,
.sign-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.35em;
    color: var(--lime);
    border: 1px solid rgba(193, 255, 114, 0.5);
    padding: 3px 8px;
    border-radius: 2px;
    margin-bottom: 10px;
    background: rgba(193, 255, 114, 0.06);
    text-transform: uppercase;
}
.open-badge .d,
.sign-open .d {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    animation: neon-blink 1.1s infinite;
}

/* Sidebar neon sign panel */
.sign {
    position: relative;
    padding: 16px 10px 18px;
    border: 1px solid rgba(255, 62, 160, 0.4);
    border-radius: 10px;
    background:
        radial-gradient(200px 120px at 50% 0%, rgba(255, 62, 160, 0.35), transparent 70%),
        linear-gradient(180deg, #1a0528, #0e0416);
    box-shadow:
        inset 0 0 40px rgba(255, 62, 160, 0.18),
        0 0 24px rgba(255, 62, 160, 0.25);
    text-align: center;
    overflow: hidden;
    margin-bottom: 18px;
}
.sign::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
    pointer-events: none;
}
.sign-hamster {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background: radial-gradient(circle at 30% 28%,
        #ffafd8,
        #ff3ea0 55%,
        #6a1240);
    box-shadow:
        0 0 0 2px #ff3ea0,
        0 0 0 4px rgba(255, 62, 160, 0.25),
        0 0 28px rgba(255, 62, 160, 0.8),
        inset 0 0 18px rgba(0, 0, 0, 0.6);
    position: relative;
    display: grid;
    place-items: center;
}
.sign-hamster::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--cyan);
    box-shadow: 0 0 12px var(--cyan), inset 0 0 10px var(--cyan);
    opacity: 0.7;
}
.sign-hamster img {
    width: 76px;
    height: 76px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
    image-rendering: pixelated;
}
.sign-name {
    font-family: 'Monoton', 'Rubik Mono One', cursive;
    font-size: 26px;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow:
        0 0 4px #fff,
        0 0 10px var(--pink),
        0 0 22px var(--pink),
        0 0 40px var(--pink);
    margin-top: 2px;
    animation: flicker 5s infinite;
}
@keyframes flicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.4; }
    94% { opacity: 1; }
    95% { opacity: 0.6; }
    96% { opacity: 1; }
}
.sign-sub {
    font-family: 'VT323', monospace;
    color: var(--cyan);
    text-shadow: 0 0 6px var(--cyan);
    font-size: 16px;
    letter-spacing: 0.18em;
    margin-top: 2px;
}
.sign-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    color: var(--yellow);
    text-shadow: 0 0 6px var(--yellow);
    font-size: 10px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.3em;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(255, 62, 160, 0.4);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover {
    border-color: var(--pink);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 62, 160, 0.4);
}
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.btn-sm { padding: 6px 12px; font-size: 0.72rem; }

.btn-primary {
    font-family: 'Rubik Mono One', 'Monoton', cursive;
    letter-spacing: 0.18em;
    color: #0a0310;
    background: linear-gradient(180deg, var(--pink), var(--blood));
    border: 1px solid #ffb8dc;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 62, 160, 0.55),
        0 0 40px rgba(255, 62, 160, 0.35);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 0 32px var(--pink),
        0 0 60px var(--pink);
    color: #0a0310;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
    background: linear-gradient(180deg, #5a2048, #2a1020);
    color: var(--ink-mute);
    border-color: var(--ink-mute);
    box-shadow: none;
}

.btn-secondary {
    color: var(--cyan);
    background: transparent;
    border: 1px solid var(--cyan-dim);
    text-shadow: 0 0 4px var(--cyan);
}
.btn-secondary:hover {
    background: rgba(0, 231, 255, 0.08);
    box-shadow: 0 0 16px rgba(0, 231, 255, 0.35);
    color: var(--cyan);
}

.btn-outline {
    color: var(--pink);
    border: 2px solid var(--pink);
    background: transparent;
    text-shadow: 0 0 4px var(--pink);
}
.btn-outline:hover {
    background: var(--pink);
    color: #0a0310;
    box-shadow: 0 0 18px var(--pink);
}

.btn-success {
    color: #0a1a03;
    background: linear-gradient(180deg, var(--lime), #6a8a1a);
    border: 1px solid var(--lime);
    box-shadow: 0 0 16px rgba(193, 255, 114, 0.5);
}
.btn-success:hover {
    box-shadow: 0 0 24px var(--lime);
    color: #0a1a03;
}

.btn-danger {
    color: #fff;
    background: linear-gradient(180deg, var(--blood), #5a0f28);
    border: 1px solid var(--blood);
    box-shadow: 0 0 14px rgba(178, 24, 77, 0.5);
}
.btn-danger:hover { box-shadow: 0 0 22px var(--blood); }

.btn-favorite {
    color: var(--pink);
    background: rgba(255, 62, 160, 0.08);
    border: 1px solid var(--pink);
    border-radius: var(--radius-pill);
    text-shadow: 0 0 4px var(--pink);
}
.btn-favorite:hover {
    background: var(--pink);
    color: #0a0310;
    box-shadow: 0 0 20px var(--pink);
}

/* Tier 1-C: 通報ボタン (視聴中の瞬時通報) */
.btn-report {
    color: #ffb74d;
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid #ff9800;
    border-radius: var(--radius-pill);
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-report:hover {
    background: #ff9800;
    color: #1a0f00;
    box-shadow: 0 0 14px rgba(255, 152, 0, 0.6);
}

/* 通報モーダル */
.report-help {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 12px;
    line-height: 1.5;
}
.report-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}
.report-error {
    color: #e74c3c;
    font-size: 0.85rem;
    min-height: 20px;
    margin-bottom: 8px;
}
.report-success {
    color: #4caf50;
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-radius: 6px;
}
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
}

.btn-danger-outline {
    color: var(--pink);
    background: transparent;
    border: 1px solid var(--pink);
    border-radius: var(--radius-pill);
}
.btn-danger-outline:hover {
    background: rgba(255, 62, 160, 0.1);
    box-shadow: 0 0 14px rgba(255, 62, 160, 0.4);
}

.btn-point-purchase,
.btn-point-purchase.primary {
    width: 100%;
    padding: 12px 24px;
    font-family: 'Rubik Mono One', 'Monoton', cursive;
    letter-spacing: 0.2em;
    color: #0a0310;
    background: linear-gradient(180deg, var(--yellow), #c89a0a);
    border: 1px solid var(--yellow);
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow:
        0 0 20px rgba(255, 212, 71, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-point-purchase:hover {
    box-shadow: 0 0 32px var(--yellow);
    transform: translateY(-1px);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    position: relative;
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.75),
        rgba(11, 3, 18, 0.95));
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.7),
        inset 0 0 22px rgba(255, 62, 160, 0.08);
    margin-bottom: 20px;
}
.card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--pink));
    box-shadow: 0 0 10px var(--pink);
    opacity: 0.8;
}
.card::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 30%;
    right: 30%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 10px var(--cyan);
    opacity: 0.5;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.25);
}
.card-header h2 {
    margin: 0;
    font-family: 'Monoton', 'Rubik Mono One', cursive;
    font-size: 1.1rem;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header,
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 30px 0 14px;
    gap: 12px;
}
.section-title {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: 'Monoton', 'Rubik Mono One', cursive;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink), 0 0 16px var(--pink-glow);
}
.section-title .ja {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    color: var(--cyan);
    text-shadow: 0 0 5px var(--cyan);
    letter-spacing: 0.3em;
}
.section-link,
.section-action {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--yellow);
    text-shadow: 0 0 4px var(--yellow);
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid rgba(255, 212, 71, 0.5);
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
    background: transparent;
    transition: all var(--transition-fast);
}
.section-link:hover,
.section-action:hover {
    background: rgba(255, 212, 71, 0.08);
    box-shadow: 0 0 12px rgba(255, 212, 71, 0.35);
}

/* ============================================================
   Ticker
   ============================================================ */
.ticker {
    height: 40px;
    border: 1px solid rgba(255, 62, 160, 0.4);
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(180deg, #0f041a, #07020c);
    position: relative;
    box-shadow:
        0 0 18px rgba(255, 62, 160, 0.2),
        inset 0 0 16px rgba(255, 62, 160, 0.15);
    margin-bottom: 22px;
}
/* ラベルは absolute で label 領域を占有し、track は全幅で裏を
   流れる。label の z-index を上げて流れる text が label を
   通り抜けて見えないようにする (transform 付き track は stacking
   context を作るため、明示的に z-index を指定しないと label が
   下に潜る)。 */
.ticker-label {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 16px;
    display: grid;
    place-items: center;
    font-family: 'Monoton', cursive;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #fff;
    background: linear-gradient(180deg, var(--pink), var(--blood));
    text-shadow: 0 0 6px var(--pink-glow);
    text-transform: uppercase;
    /* label の右端にフェードを入れて track が吸い込まれるように見せる */
    box-shadow: 6px 0 14px rgba(0, 0, 0, 0.5);
}
.ticker-track {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 48px;
    animation: tick 36s linear infinite;
    white-space: nowrap;
    /* 旧: padding-left でラベル幅を確保していたが、translateX(-50%) で
       前半セットしか padding が効かず、ループ境界で padding 分の jump
       (カクつき) が発生していた。修正: padding を削除し、items を
       `spacer + items × N + spacer + items × N` の構造で並べることで
       前後セットを完全対称にし seam を消す。 */
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: var(--ink-dim);
    letter-spacing: 0.05em;
}
/* ラベル幅相当のスペーサー (gap 48px の分を差し引いて、ラベル右端と
   items[0] 左端がぴったり接するようにする)。両セットの先頭に必須。 */
.ticker-spacer {
    flex-shrink: 0;
    width: calc(20ch + 32px - 48px);
}
.ticker-track b { color: var(--cyan); font-weight: 400; text-shadow: 0 0 6px var(--cyan); }
.ticker-track em { color: var(--pink); font-style: normal; text-shadow: 0 0 6px var(--pink); }
.ticker-track i { color: var(--yellow); font-style: normal; text-shadow: 0 0 6px var(--yellow); }
@keyframes tick {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================================
   Notice board / News rows
   ============================================================ */
.notice-board {
    position: relative;
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.75),
        rgba(11, 3, 18, 0.95));
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.7),
        inset 0 0 22px rgba(255, 62, 160, 0.08);
    margin-bottom: 22px;
}
.notice-board::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--pink));
    box-shadow: 0 0 10px var(--pink);
    opacity: 0.8;
}
.notice-item,
.news-row {
    display: grid;
    grid-template-columns: 130px 110px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 11px 6px;
    border-top: 1px dashed rgba(255, 62, 160, 0.18);
    font-size: 0.88rem;
}
.notice-item:first-of-type,
.news-row:first-of-type { border-top: none; }
.notice-date,
.news-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--ink-mute);
    letter-spacing: 0.12em;
}
.notice-tag,
.news-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    text-align: center;
    font-weight: 700;
}
.notice-tag.info,
.news-tag.info {
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    background: rgba(0, 231, 255, 0.08);
    text-shadow: 0 0 4px var(--cyan);
}
.notice-tag.event,
.notice-tag.campaign,
.news-tag.promo,
.news-tag.event,
.news-tag.campaign {
    color: var(--yellow);
    border: 1px solid rgba(255, 212, 71, 0.6);
    background: rgba(255, 212, 71, 0.08);
    text-shadow: 0 0 4px var(--yellow);
}
.notice-tag.important,
.notice-tag.warning,
.news-tag.vip,
.news-tag.important {
    color: var(--pink);
    border: 1px solid var(--pink);
    background: rgba(255, 62, 160, 0.1);
    text-shadow: 0 0 4px var(--pink);
}
.notice-title,
.news-text { color: var(--ink); font-weight: 500; }
.news-arrow {
    color: var(--pink);
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    text-shadow: 0 0 4px var(--pink);
}

/* ============================================================
   Stream Grid / Cards
   ============================================================ */
.stream-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.stream-card {
    position: relative;
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.stream-card::before {
    content: "";
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--pink),
        var(--cyan),
        transparent);
    box-shadow: 0 0 8px var(--pink);
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 2;
}
.stream-card:hover {
    transform: translateY(-3px);
    border-color: var(--pink);
    box-shadow:
        0 10px 28px -12px rgba(0, 0, 0, 0.8),
        0 0 22px rgba(255, 62, 160, 0.3);
}
.stream-card:hover::before { opacity: 1; }

.stream-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 62, 160, 0.2), transparent 70%),
        linear-gradient(135deg, #1a0528, #050108);
    overflow: hidden;
}
.stream-thumbnail-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0.2;
    background-image: linear-gradient(45deg,
        rgba(255, 62, 160, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 62, 160, 0.2) 50%,
        rgba(255, 62, 160, 0.2) 75%,
        transparent 75%);
    background-size: 30px 30px;
}
.stream-status {
    position: absolute;
    top: 8px;
    left: 8px;
}
.stream-viewers {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 8px;
    background: rgba(5, 1, 8, 0.85);
    color: var(--ink);
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 62, 160, 0.3);
}
.stream-icon-container {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.stream-speech-bubble {
    background: rgba(5, 1, 8, 0.85);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 10px;
    padding: 4px 10px;
    font-family: 'VT323', monospace;
    font-size: 0.82rem;
    text-shadow: 0 0 4px var(--cyan);
    position: relative;
    max-width: 160px;
}
.stream-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--pink);
    box-shadow: 0 0 10px var(--pink);
    overflow: hidden;
    background: #0a0310;
}
.stream-icon img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

.stream-info { padding: 14px 16px 16px; }
.stream-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.stream-meta { display: flex; align-items: center; gap: 10px; }
.streamer-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 62, 160, 0.4);
    flex-shrink: 0;
}
.streamer-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.streamer-name {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.82rem;
}
.stream-time {
    color: var(--ink-mute);
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.status-badge.live {
    color: #fff;
    background: linear-gradient(90deg, var(--pink), var(--blood));
    border: 1px solid var(--pink);
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.6);
    animation: neon-pulse 2s infinite;
}
.status-badge.live::before {
    content: "●";
    font-size: 0.6rem;
    animation: neon-blink 1s infinite;
}
@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 62, 160, 0.6); }
    50% { box-shadow: 0 0 22px rgba(255, 62, 160, 0.9); }
}
.status-badge.scheduled {
    color: var(--cyan);
    background: rgba(0, 231, 255, 0.08);
    border: 1px solid var(--cyan-dim);
    text-shadow: 0 0 4px var(--cyan);
}
.status-badge.offline {
    color: var(--ink-mute);
    background: rgba(42, 26, 12, 0.7);
    border: 1px solid rgba(123, 90, 128, 0.4);
}
.status-badge.ended {
    color: var(--ink-mute);
    background: transparent;
    border: 1px solid var(--ink-mute);
}

/* Admin badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-success { color: var(--lime); border: 1px solid var(--lime); background: rgba(193, 255, 114, 0.08); text-shadow: 0 0 4px var(--lime); }
.badge-warning { color: var(--yellow); border: 1px solid var(--yellow); background: rgba(255, 212, 71, 0.08); text-shadow: 0 0 4px var(--yellow); }
.badge-danger { color: var(--pink); border: 1px solid var(--pink); background: rgba(255, 62, 160, 0.08); text-shadow: 0 0 4px var(--pink); }
.badge-secondary { color: var(--ink-mute); border: 1px solid rgba(123, 90, 128, 0.4); background: rgba(123, 90, 128, 0.08); }
.badge-live { color: #fff; background: var(--pink); box-shadow: 0 0 10px var(--pink); }

.ribbon-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--yellow);
    border-radius: 999px;
    background: rgba(255, 212, 71, 0.08);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--yellow);
    text-shadow: 0 0 4px var(--yellow);
    text-transform: uppercase;
}

/* ============================================================
   Empty states (CLOSED neon sign)
   ============================================================ */
.empty,
.empty-state,
.empty-burrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 18px;
    text-align: center;
}
.neon-sign {
    position: relative;
    padding: 18px 32px;
    border: 2px solid var(--pink);
    border-radius: 8px;
    background: rgba(255, 62, 160, 0.05);
    box-shadow:
        0 0 10px var(--pink),
        inset 0 0 20px rgba(255, 62, 160, 0.3);
    font-family: 'Monoton', cursive;
    font-size: 2.2rem;
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow:
        0 0 4px #fff,
        0 0 12px var(--pink),
        0 0 28px var(--pink),
        0 0 50px var(--pink);
    animation: flicker 6s infinite;
    min-width: 160px;
    text-align: center;
    display: inline-block;
}
.neon-sign::before,
.neon-sign::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 2px;
    background: var(--pink);
    box-shadow: 0 0 6px var(--pink);
}
.neon-sign::before { left: -44px; }
.neon-sign::after { right: -44px; }

.empty-burrow-icon {
    /* when used as an icon (not text), render a small neon circle */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--pink);
    background: radial-gradient(circle, rgba(255,62,160,0.25), transparent 70%);
    box-shadow: 0 0 22px rgba(255, 62, 160, 0.5), inset 0 0 22px rgba(255, 62, 160, 0.3);
}

.empty-title,
.empty-burrow-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    margin-top: 6px;
    letter-spacing: 0.1em;
}
.empty-sub,
.empty-burrow-sub {
    font-family: 'VT323', monospace;
    font-size: 1.05rem;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    letter-spacing: 0.05em;
    max-width: 460px;
    line-height: 1.5;
}
.empty-count {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.empty-count .k {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    color: var(--ink-mute);
}
.empty-count .v {
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: var(--yellow);
    text-shadow: 0 0 6px var(--yellow);
    display: flex;
    align-items: center;
    gap: 4px;
}

.empty-favorites {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    color: var(--ink-dim);
    gap: 12px;
}
.empty-favorites svg {
    color: var(--pink);
    filter: drop-shadow(0 0 8px var(--pink));
}

.empty-transactions {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-mute);
    font-family: 'Space Mono', monospace;
}

/* ============================================================
   Schedule grid
   ============================================================ */
.sched-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.sched-day {
    position: relative;
    aspect-ratio: 1/1.25;
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 5px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #140625, #08020e);
    cursor: pointer;
    transition: all 0.2s;
}
.sched-day:hover {
    border-color: var(--pink);
    box-shadow: 0 0 16px rgba(255, 62, 160, 0.35);
}
.sched-day .dow {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    text-transform: uppercase;
}
.sched-day .date {
    font-family: 'Rubik Mono One', cursive;
    font-size: 1.6rem;
    color: var(--ink);
    line-height: 1;
    margin-top: 4px;
}
.sched-day.today {
    background: linear-gradient(180deg,
        rgba(255, 62, 160, 0.25),
        rgba(11, 3, 18, 0.95));
    border-color: var(--pink);
    box-shadow:
        0 0 22px rgba(255, 62, 160, 0.35),
        inset 0 0 16px rgba(255, 62, 160, 0.18);
}
.sched-day.today .date { color: #fff; text-shadow: 0 0 8px var(--pink); }
.sched-day .pill {
    margin-top: auto;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    padding: 4px 6px;
    border-radius: 2px;
    text-align: center;
    color: var(--ink-dim);
    border: 1px solid rgba(255, 62, 160, 0.3);
    background: rgba(255, 62, 160, 0.05);
    letter-spacing: 0.05em;
}
.sched-day .pill.hot {
    color: #0a0310;
    background: linear-gradient(180deg, var(--yellow), #c89a0a);
    border-color: var(--yellow);
    font-weight: 700;
    box-shadow: 0 0 10px var(--yellow);
}
.sched-day .pill.none { opacity: 0.45; }
.sched-empty-note {
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px dashed rgba(0, 231, 255, 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-dim);
    font-size: 0.85rem;
    background: rgba(0, 231, 255, 0.04);
}
.sched-empty-note .tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 4px 10px;
    border-radius: 2px;
    text-shadow: 0 0 4px var(--cyan);
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .sched-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .sched-grid { grid-template-columns: repeat(2, 1fr); }
}

.refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--cyan);
    background: transparent;
    border: 1px solid var(--cyan-dim);
    border-radius: 3px;
    padding: 6px 10px;
    cursor: pointer;
    text-shadow: 0 0 4px var(--cyan);
    text-decoration: none;
    text-transform: uppercase;
}
.refresh:hover { box-shadow: 0 0 12px rgba(0, 231, 255, 0.4); }

/* ============================================================
   Forms
   ============================================================ */
.form-group { margin-bottom: 14px; }
.form-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="datetime-local"],
input[type="date"],
textarea,
select {
    width: 100%;
    background: #0a0310;
    border: 1px solid rgba(255, 62, 160, 0.35);
    border-radius: 3px;
    color: var(--ink);
    padding: 9px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--ink-mute); }
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--pink);
    box-shadow:
        0 0 0 2px rgba(255, 62, 160, 0.25),
        0 0 10px rgba(255, 62, 160, 0.35);
}
textarea { resize: vertical; min-height: 80px; font-family: 'Zen Kaku Gothic New', sans-serif; }
.form-hint {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    margin-top: 4px;
}
.form-error,
.modal-error {
    color: var(--pink);
    font-size: 0.82rem;
    padding: 8px 12px;
    background: rgba(255, 62, 160, 0.08);
    border-left: 3px solid var(--pink);
    border-radius: 2px;
    margin-bottom: 10px;
    display: none;
}
.form-error.show,
.modal-error:not(:empty) { display: block; }

/* ============================================================
   Modals
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 1, 8, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay:not([style*="display: none"]):not([style*="display:none"]) { display: flex; }
.modal-content {
    background: linear-gradient(180deg, #1a0528, #0a0210);
    border: 1px solid var(--pink);
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow:
        0 30px 80px -20px #000,
        0 0 32px rgba(255, 62, 160, 0.35);
}
.modal-content::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--pink));
    box-shadow: 0 0 10px var(--pink);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.3);
}
.modal-title {
    font-family: 'Monoton', cursive;
    font-size: 1.25rem;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.modal-close,
.modal-close-bare {
    background: transparent;
    border: none;
    color: var(--ink-mute);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 6px;
    transition: color var(--transition-fast);
}
.modal-close:hover,
.modal-close-bare:hover { color: var(--pink); text-shadow: 0 0 6px var(--pink); }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 62, 160, 0.2);
}

/* ============================================================
   Chat
   ============================================================ */
.chat-panel {
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 600px;
}
.pinned-comment {
    background: linear-gradient(90deg,
        rgba(255, 212, 71, 0.15),
        transparent);
    border-bottom: 1px dashed rgba(255, 212, 71, 0.4);
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pinned-icon { color: var(--yellow); flex-shrink: 0; margin-top: 3px; filter: drop-shadow(0 0 4px var(--yellow)); }
.pinned-user { font-weight: 700; color: var(--yellow); font-size: 0.82rem; }
.pinned-text { color: var(--ink); font-size: 0.88rem; line-height: 1.4; }

.chat-messages {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 200px;
    background: rgba(5, 1, 8, 0.3);
}
.chat-message {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.88rem;
    line-height: 1.4;
}
.chat-message-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 62, 160, 0.3);
}
.chat-message-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.chat-message-content { flex: 1; min-width: 0; }
.chat-message-header {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 2px;
}
.chat-message-name { font-weight: 700; color: var(--pink); text-shadow: 0 0 4px var(--pink); font-size: 0.85rem; }
.chat-message-time {
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
}
.chat-message-text { color: var(--ink); word-break: break-word; }
.chat-message.system {
    justify-content: center;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    font-style: italic;
    font-size: 0.82rem;
    padding: 6px 10px;
}

.chat-input-area {
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 62, 160, 0.25);
    background: rgba(11, 3, 18, 0.8);
}
.chat-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}
.chat-input {
    flex: 1;
    background: #0a0310;
    border: 1px solid rgba(255, 62, 160, 0.35);
    color: var(--ink);
    border-radius: 3px;
    padding: 8px 12px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 0.88rem;
    outline: none;
}
.chat-input:focus { border-color: var(--pink); box-shadow: 0 0 10px rgba(255, 62, 160, 0.3); }
.chat-actions { display: flex; gap: 6px; }
.chat-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 62, 160, 0.4);
    background: rgba(11, 3, 18, 0.7);
    color: var(--ink-dim);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.chat-action-btn:hover { color: var(--pink); border-color: var(--pink); }
.chat-action-btn.send {
    background: linear-gradient(135deg, var(--pink), var(--blood));
    color: #0a0310;
    border-color: #ffb8dc;
    box-shadow: 0 0 14px rgba(255, 62, 160, 0.5);
}
.chat-action-btn.send:hover { box-shadow: 0 0 22px var(--pink); }

/* ============================================================
   Ranking
   ============================================================ */
.ranking-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.15);
}
.ranking-card:last-child { border-bottom: none; }
.ranking-position {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Rubik Mono One', cursive;
    font-size: 1.1rem;
    color: #0a0310;
    flex-shrink: 0;
    box-shadow: 0 0 12px currentColor;
}
.ranking-position.gold {
    background: linear-gradient(135deg, #fff29c, var(--yellow), #c89a0a);
    box-shadow: 0 0 18px var(--yellow);
}
.ranking-position.silver {
    background: linear-gradient(135deg, #ffffff, #bfc4cc, #8a8d94);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.6);
}
.ranking-position.bronze {
    background: linear-gradient(135deg, #ffc4a0, #d8805a, #6a3818);
    box-shadow: 0 0 12px rgba(216, 128, 90, 0.6);
}
.ranking-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--pink);
    box-shadow: 0 0 8px rgba(255, 62, 160, 0.4);
    flex-shrink: 0;
}
.ranking-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ranking-info { flex: 1; min-width: 0; }
.ranking-name { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.ranking-desc {
    font-family: 'VT323', monospace;
    color: var(--yellow);
    text-shadow: 0 0 4px var(--yellow);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

/* ============================================================
   Tables
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
th, td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.15);
}
th {
    color: var(--cyan);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 4px var(--cyan);
    border-bottom: 1px solid var(--cyan-dim);
}
td { color: var(--ink-dim); }
tbody tr:hover { background: rgba(255, 62, 160, 0.04); }

/* ============================================================
   Loader
   ============================================================ */
.hamster-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    gap: 10px;
}
.hamster-loader img {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px var(--pink));
}
.hamster-loader-text {
    color: var(--pink);
    font-family: 'VT323', monospace;
    font-size: 1.05rem;
    text-shadow: 0 0 4px var(--pink);
    letter-spacing: 0.1em;
    position: relative;
}
.hamster-loader-text::after {
    content: "…";
    animation: dotdot 1.4s infinite;
    margin-left: 2px;
}
@keyframes dotdot {
    0% { content: "…"; }
    33% { content: "‥"; }
    66% { content: "・"; }
}

/* ============================================================
   Login box
   ============================================================ */
.login-container {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}
.login-box {
    width: 100%;
    max-width: 420px;
    padding: 28px 32px 32px;
    border: 1px dashed rgba(255, 62, 160, 0.45);
    border-radius: 8px;
    background:
        repeating-linear-gradient(45deg, rgba(255, 62, 160, 0.04) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, rgba(27, 10, 46, 0.7), rgba(11, 3, 18, 0.9));
    position: relative;
    box-shadow:
        0 30px 80px -20px #000,
        0 0 32px rgba(255, 62, 160, 0.25);
}
.login-box h1 {
    font-family: 'Monoton', cursive;
    color: var(--pink);
    text-shadow: 0 0 8px var(--pink), 0 0 22px var(--pink-glow);
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0 0 6px;
}
.login-box .subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    letter-spacing: 0.2em;
    text-align: center;
    margin: 0 0 18px;
    text-transform: uppercase;
}
.login-hint {
    text-align: center;
    color: var(--ink-mute);
    font-size: 0.82rem;
    margin-top: 14px;
}
.home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cyan);
    text-decoration: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.15em;
    text-shadow: 0 0 4px var(--cyan);
    text-transform: uppercase;
}
.home-link:hover { color: var(--pink); text-shadow: 0 0 4px var(--pink); }

/* ============================================================
   Market product cards
   ============================================================ */
.product-card,
.product-item {
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--transition-normal);
}
.product-card:hover,
.product-item:hover {
    border-color: var(--pink);
    box-shadow: 0 0 18px rgba(255, 62, 160, 0.3);
    transform: translateY(-2px);
}

.paid-icon,
.paid-btn {
    color: #0a0310 !important;
    background: linear-gradient(180deg, #fff29c, var(--yellow), #c89a0a) !important;
    border: 1px solid var(--yellow) !important;
    box-shadow: 0 0 14px rgba(255, 212, 71, 0.5) !important;
}
.paid-btn:hover {
    box-shadow: 0 0 22px var(--yellow) !important;
}

/* ============================================================
   Admin sidebar
   ============================================================ */
.admin-sidebar {
    width: 240px;
    min-height: 100vh;
    background: linear-gradient(180deg,
        rgba(19, 6, 32, 0.95),
        rgba(11, 3, 18, 0.98));
    border-right: 1px solid rgba(255, 62, 160, 0.25);
    padding: 22px 16px 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.admin-sidebar::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--pink), var(--cyan), var(--pink), transparent);
    box-shadow: 0 0 12px var(--pink);
    opacity: 0.8;
}
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    flex: 1;
}
.sidebar-menu li { margin-bottom: 2px; }
.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--ink-dim);
    text-decoration: none;
    font-size: 0.86rem;
    border-radius: 4px;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}
.sidebar-menu a svg {
    width: 18px; height: 18px;
    color: var(--pink);
    filter: drop-shadow(0 0 3px var(--pink));
    flex-shrink: 0;
}
.sidebar-menu a:hover { color: var(--ink); background: rgba(255, 62, 160, 0.08); }
.sidebar-menu a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(255, 62, 160, 0.25), transparent);
    border-color: var(--pink);
    box-shadow: inset 3px 0 0 var(--cyan);
    text-shadow: 0 0 6px var(--pink);
}
.sidebar-menu a.active svg { color: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }

.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 62, 160, 0.3);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}
.admin-badge {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    padding: 2px 6px;
    border-radius: 2px;
    text-shadow: 0 0 4px var(--yellow);
    text-transform: uppercase;
}

/* Dashboard tabs (broadcaster) */
.dashboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 62, 160, 0.25);
    padding-bottom: 0;
    flex-wrap: wrap; /* v0.7.3.a+: 4 タブ化に伴い狭幅で折返し */
}
.dashboard-tab {
    padding: 10px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--ink-dim);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}
.dashboard-tab:hover { color: var(--pink); }
.dashboard-tab.active {
    color: #fff;
    border-color: var(--pink);
    background: linear-gradient(180deg, rgba(255, 62, 160, 0.2), transparent);
    text-shadow: 0 0 6px var(--pink);
}
.dashboard-tab-content { display: none; }
.dashboard-tab-content.active { display: block; }

/* v0.7.3.a+: 配信タブの未実装プレースホルダ (設定タブは Phase 3 で本実装済み) */
.live-tab-placeholder {
    text-align: center;
    padding: 48px 24px;
}
.live-tab-placeholder h2 {
    color: var(--pink);
    margin-bottom: 12px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.live-tab-placeholder p {
    color: var(--ink-dim);
    line-height: 1.8;
    max-width: 520px;
    margin: 0 auto;
}

/* 設定タブの 2 カラムグリッド (狭幅で 1 カラムに折返し) */
.settings-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
    align-items: start;
}

/* ============================================================
   v0.7.3.b+: 操作ドロワー (準備タブの部屋作成 + 配信操作)
   ============================================================ */
.control-drawer-toggle {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    background: var(--pink);
    color: #fff;
    border: none;
    padding: 14px 10px;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.06em;
    box-shadow: 2px 2px 12px rgba(255, 62, 160, 0.4);
    transition: transform 0.2s, left 0.3s;
    writing-mode: vertical-rl;
}
.control-drawer-toggle:hover { transform: translateY(-50%) translateX(2px); }
.control-drawer-toggle svg { writing-mode: horizontal-tb; }
.control-drawer-toggle.drawer-open { left: 380px; }

.control-drawer {
    position: fixed;
    left: -400px;
    top: 0;
    bottom: 0;
    width: 380px;
    background: linear-gradient(180deg, #1a0528, #0a0210);
    border-right: 1px solid var(--pink);
    box-shadow: 4px 0 24px rgba(255, 62, 160, 0.2);
    transition: left 0.3s ease-out;
    overflow-y: auto;
    z-index: 850;
    padding: 16px 20px;
}
.control-drawer.open { left: 0; }
.control-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 62, 160, 0.3);
}
.control-drawer-header h2 {
    margin: 0;
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pink);
}
.control-drawer-close {
    background: transparent;
    color: var(--ink-dim);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 8px;
}
.control-drawer-close:hover { color: var(--pink); }
.control-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.control-drawer-btn { width: 100%; justify-content: center; }
.control-drawer-section-title {
    font-size: 0.75rem;
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 16px 0 8px;
}

/* v0.7.3.c+: 準備タブ 右カラム — シーン管理 / ウィジェット配置 / 配信予告 を縦並び */
.prep-right-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.prep-right-stack > .card {
    margin-bottom: 0; /* 既存 .card の bottom margin を gap に任せる */
}

/* v0.7.3.e+: シーン編集モーダル (v0.7.3.i+ で行内インライン編集に統合され、
   HTML からは撤去されたが、古いキャッシュ版が描画した場合に表示しないよう display:none を残す) */
.scene-edit-modal { display: none; }
.scene-edit-modal.scene-edit-modal-open { display: none; }
.scene-edit-point-hidden { display: none; }
.scene-edit-bg-disabled { opacity: 0.4; }

/* ============================================================================
   v0.7.3.i+: シーン / ウィジェットの行内インライン編集スタイル
   ============================================================================ */
.scene-row-inline {
    /* v0.7.3.s+: 1 行に収める (nowrap)。シーン列を 360px に拡張済み。
       v0.7.3.w+: overflow:hidden + min-width:0 で flex 子要素が伸びすぎても
       はみ出さない。名前 input が自動 shrink で吸収する。 */
    flex-wrap: nowrap;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
}
.scenes-list {
    /* v0.7.3.w+: 縦スクロールのみ。横はカード幅で必ず収まる前提に */
    overflow-x: hidden;
}
.scene-row-inline .scene-field {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    padding: 3px 6px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.scene-row-inline .scene-field:focus {
    outline: none;
    border-color: var(--pink);
    background: rgba(0, 0, 0, 0.4);
}
.scene-row-inline .scene-field-name {
    /* v0.7.5.f+: タイトル入力欄を広く取る。/分欄を縮めた分を吸収して右へ伸長。
       basis 120 + min 100 で短いシーン名でもしっかり幅を確保。 */
    flex: 1 1 120px;
    min-width: 100px;
    font-weight: 500;
}
.scene-row-inline .scene-field-type {
    flex: 0 0 auto;
    cursor: pointer;
    padding-right: 18px;
}
.scene-row-inline .scene-field-point {
    /* v0.7.5.f+: spinner 非表示 + 3 桁 (例: 999) ギリ収まる 46px に縮小。
       縮めた分の幅は scene-field-name のタイトル欄が吸収する。 */
    width: 46px;
    text-align: right;
    flex: 0 0 46px;
    -moz-appearance: textfield;        /* Firefox: spinner 抑止 */
}
.scene-row-inline .scene-field-point::-webkit-outer-spin-button,
.scene-row-inline .scene-field-point::-webkit-inner-spin-button {
    -webkit-appearance: none;          /* Chrome/Safari/Edge: spinner 非表示 */
    margin: 0;
}
.scene-row-inline .scene-field-point.scene-field-disabled,
.scene-row-inline .scene-field-point:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.15);
}
/* v0.7.3.s+: 「有料」ラベルを明示。アイコン (🪙) 撤去後の textContent を綺麗に表示。 */
.scene-field-toggle span {
    font-size: 0.78rem;
    color: var(--ink-dim, #aaa);
    user-select: none;
    white-space: nowrap;
}
.scene-row-inline .scene-field-toggle input:checked + span {
    color: var(--pink);
    font-weight: 600;
}
.scene-row-inline .scene-field-bg {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}
.scene-row-inline .scene-field-bg.scene-field-bg-unset {
    opacity: 0.35;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.12) 75%),
                      linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.12) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}
.scene-field-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}
.scene-field-toggle input { cursor: pointer; }

/* 2 段クリック削除 (シーン / ウィジェット共通) */
.inline-delete-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.inline-delete-wrap .scene-row-delete-confirm {
    display: none;
    background: var(--danger, #ff5c5c);
    color: white;
    border: 1px solid var(--danger, #ff5c5c);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    animation: inline-delete-pulse 0.3s ease-out;
}
.inline-delete-wrap.confirm .scene-row-delete-confirm {
    display: inline-block;
}
.inline-delete-wrap.confirm .scene-row-delete-btn {
    color: var(--danger, #ff5c5c);
}
@keyframes inline-delete-pulse {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ウィジェット行 (v0.7.3.i+ インライン版) */
.widget-row-inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-template-columns: none; /* 旧 grid を上書き */
    background: rgba(255, 255, 255, 0.02);
}
.widget-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.widget-row-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 62, 160, 0.18);
    color: var(--pink);
    flex: 0 0 auto;
}
.widget-row-tag-image      { background: rgba(95, 200, 255, 0.18); color: #5fc8ff; }
.widget-row-tag-lovense_view { background: rgba(140, 100, 255, 0.18); color: #8c64ff; }
.widget-row-vis {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    color: var(--ink-dim);
    cursor: pointer;
    margin-left: auto;
    user-select: none;
}
.widget-row-vis input { cursor: pointer; }

.widget-row-config,
.widget-row-pos-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.widget-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--ink-dim);
}
.widget-field > span { white-space: nowrap; }
.widget-field input,
.widget-field select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--ink, #fff);
    font: inherit;
    font-size: 0.8rem;
    padding: 3px 6px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.widget-field input:focus,
.widget-field select:focus {
    outline: none;
    border-color: var(--pink);
    background: rgba(0, 0, 0, 0.4);
}
.widget-field-text input { width: 180px; }
.widget-field-num input  { width: 56px; text-align: right; }
.widget-field-pct        { font-family: 'Space Mono', monospace; }
.widget-field-pct input  { width: 52px; text-align: right; }
.widget-field-pct .widget-field-suffix {
    color: var(--ink-dim);
    font-size: 0.72rem;
}
.widget-field-color input {
    width: 28px;
    height: 24px;
    padding: 0;
    cursor: pointer;
}
.widget-field-check {
    cursor: pointer;
    user-select: none;
}
.widget-field-check input { cursor: pointer; }

/* ============================================================================
   v0.7.3.j+: ウィジェットビジュアル配置オーバーレイ
   ============================================================================ */
.video-preview-wrap,
.live-video-wrap {
    position: relative;
    width: 100%;
    line-height: 0; /* video inline gap 除去 */
    /* v0.7.3.u+: 親 col の高さ余裕に合わせて伸ばす + 16:9 を保つ。
       container query (cqh) で widget サイズが連動する。 */
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}
.video-preview-wrap video,
.live-video-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 0; /* wrap 側で角丸を持つので video は無し */
    border: none;
}
.widget-overlay {
    position: absolute;
    inset: 0;
    /* v0.7.4.o+: 編集モードのオーバーレイは pointer-events:auto (= drag-drop の dragover を
       空エリア上でも受ける)。それ以外 (live / mobile preview / boxes-hidden) は none で
       下層 (video など) に events を素通り。 */
    pointer-events: none;
    overflow: hidden;            /* 万一はみ出した widget を切る */
    line-height: normal;
    /* v0.7.3.u+: container query で widget サイズを実映像エリアに比例させる。 */
    container-type: size;
    container-name: stage;
}
.widget-overlay[data-editable="1"]:not(.boxes-hidden) {
    pointer-events: auto;
}
.widget-overlay-item {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;        /* read-only モードは透過 */
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* v0.7.4.f+: overflow:hidden 撤去 → リサイズハンドル外側拡張ヒットエリアが clip されない。
       テロップのマーキースクロールは .widget-overlay-telop.scrolling 側で overflow:hidden する。 */
    overflow: visible;
}
.widget-overlay-item.editable {
    pointer-events: auto;
    cursor: move;
    border: 1px dashed rgba(255, 62, 160, 0.55);
    background: rgba(255, 62, 160, 0.04);
    transition: border-color 0.15s, background 0.15s;
}
.widget-overlay-item.editable:hover {
    border-color: var(--pink);
    background: rgba(255, 62, 160, 0.08);
}
.widget-overlay-item.editable.dragging,
.widget-overlay-item.editable.resizing {
    border-color: var(--pink);
    background: rgba(255, 62, 160, 0.18);
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.5);
}
.widget-overlay-telop {
    /* v0.7.4.e+: widget box 全域に伸ばして bg が widget 全面を塗れるように */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow: 0 0 4px #000, 0 0 4px #000, 0 1px 2px rgba(0,0,0,0.7);
    line-height: 1.15;
    font-weight: 600;
    pointer-events: none; /* drag は親に委譲 */
    padding: 4px;
}
/* v0.7.4.q+: テロップの横/縦 アライメント. cfg.alignH ∈ {left,center,right} / alignV ∈ {top,middle,bottom} */
.widget-overlay-telop.alignH-left   { justify-content: flex-start; text-align: left; }
.widget-overlay-telop.alignH-center { justify-content: center;     text-align: center; }
.widget-overlay-telop.alignH-right  { justify-content: flex-end;   text-align: right; }
.widget-overlay-telop.alignV-top    { align-items: flex-start; }
.widget-overlay-telop.alignV-middle { align-items: center; }
.widget-overlay-telop.alignV-bottom { align-items: flex-end; }
/* v0.7.5.o+: scrolling モードでも flex 維持 → alignV-* の align-items が効き、
   テロップ文字が全体的に上に寄る問題を解消。横方向だけ scroll に支配される。 */
/* v0.7.4.f+: テロップ自動スクロール (マーキー)。scrollSpeed > 0 で .scrolling 付与。 */
.widget-overlay-telop.scrolling {
    /* 旧: display: block → 縦中央寄せが効かなくなっていた。
       flex を維持し、justify-content: flex-start で track を左端から始める。
       white-space: nowrap + overflow: hidden で 1 行マーキー化。 */
    display: flex;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}
.widget-overlay-telop-track {
    display: inline-block;
    flex-shrink: 0;          /* v0.7.5.o+: flex 子要素が padding-left:100% で巨大化するので squash させない */
    padding-left: 100%;      /* 開始位置 = widget の右端 */
    animation: telop-scroll var(--scroll-dur, 10s) linear infinite;
    will-change: transform;
}
@keyframes telop-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.widget-overlay-image {
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
}
.widget-overlay-empty {
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    text-align: center;
    padding: 4px;
}
.widget-overlay-lovense {
    background: rgba(140, 100, 255, 0.25);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

/* v0.7.5.t+: 非選択ウィジェットの handles を完全非表示にする
   (編集ボックスの枠だけは widget-overlay-item.editable のスタイルで残る)。
   - 配信プレビューが handles だらけになるのを防ぐ
   - .boxes-hidden の時はそもそも全部非表示 (4048 行の既存ルール) */
.widget-overlay[data-editable="1"]:not(.boxes-hidden) .widget-overlay-item:not(.selected) .widget-resize-handle,
.widget-overlay[data-editable="1"]:not(.boxes-hidden) .widget-overlay-item:not(.selected) .widget-rotate-handle,
.widget-overlay[data-editable="1"]:not(.boxes-hidden) .widget-overlay-item:not(.selected) .widget-rotate-line,
.widget-overlay[data-editable="1"]:not(.boxes-hidden) .widget-overlay-item:not(.selected) .widget-overlay-close {
    display: none !important;
}

/* リサイズハンドル: コーナー (circle) + 辺 (bar)
   v0.7.4.f+: 視覚的に 18×18, ::before で hit area を +12px ずつ拡張 (= ~42×42 タッチ域)
   v0.7.4.h+: 4 辺 (N/S/E/W) bar handle を追加。縦・横を独立リサイズ可能 */
.widget-resize-handle {
    position: absolute;
    background: var(--pink);
    border: 2.5px solid #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.65);
    pointer-events: auto;
    z-index: 3;
    box-sizing: border-box;
}
.widget-resize-handle::before {
    content: '';
    position: absolute;
    inset: -12px;            /* 透明な拡張ヒットエリア */
}

/* コーナー (右下) — 円形 */
.widget-resize-se {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    right: -9px;
    bottom: -9px;
    cursor: nwse-resize;
}

/* 辺 — 短い bar */
.widget-resize-n,
.widget-resize-s {
    width: 28px;
    height: 6px;
    border-radius: 3px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}
.widget-resize-n { top: -4px; }
.widget-resize-s { bottom: -4px; }

.widget-resize-e,
.widget-resize-w {
    width: 6px;
    height: 28px;
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}
.widget-resize-e { right: -4px; }
.widget-resize-w { left: -4px; }

/* v0.7.4.k+: 回転ハンドル (cyan、上部) + 接続線 */
.widget-rotate-handle {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #5fc8ff;
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.65), 0 0 8px rgba(95, 200, 255, 0.5);
    cursor: grab;
    pointer-events: auto;
    z-index: 4;
    box-sizing: border-box;
}
.widget-rotate-handle::before {
    content: '';
    position: absolute;
    inset: -10px;            /* ヒット域拡張 */
}
.widget-rotate-handle:active,
.widget-overlay-item.rotating .widget-rotate-handle {
    cursor: grabbing;
}
.widget-rotate-line {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 2px;
    height: 22px;
    background: rgba(95, 200, 255, 0.8);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
}
/* 回転中の widget は ring 強調 */
.widget-overlay-item.rotating {
    outline: 2px dashed #5fc8ff;
    outline-offset: 2px;
}

/* 削除ボタン: 右上 × */
.widget-overlay-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    background: #2a0512;
    color: #fff;
    border: 1.5px solid var(--pink);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.widget-overlay-item.editable:hover .widget-overlay-close,
.widget-overlay-item.editable.dragging .widget-overlay-close,
.widget-overlay-item.editable.resizing .widget-overlay-close {
    opacity: 1;
}
.widget-overlay-close.confirm {
    background: var(--danger, #ff5c5c);
    color: #fff;
    border-color: #fff;
    width: 48px;
    border-radius: 12px;
    font-size: 0.65rem;
    opacity: 1;
    animation: inline-delete-pulse 0.25s ease-out;
}

/* 配信タブの timeline hint (alert 撤廃の代替) */
.live-timeline-hint {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 184, 74, 0.12);
    border: 1px solid rgba(255, 184, 74, 0.35);
    border-radius: 4px;
    color: #ffb84a;
    font-size: 0.78rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.live-timeline-hint.show { opacity: 1; }

/* 配信前の row は dim 表示 */
.live-scene-row.offline {
    opacity: 0.55;
    cursor: default;
}
.live-scene-row.offline:hover {
    background: transparent;
}

/* v0.7.3.x+: 緊急暗転 / 配信終了 ボタンを配信ビューカードの最下端
   (映像の外 / カード両端) に小さく配置。
   カードを flex column 化して margin-top:auto で押し下げ、左右の端に小ピル状で表示。 */
.live-tab-col-main > .live-preview-card {
    display: flex;
    flex-direction: column;
}
.live-emergency-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;        /* card flex の末尾に push */
    padding-top: 8px;
    font-size: 0.72rem;
}
.live-emergency-btn {
    flex: 0 0 auto;          /* stretch しない、内容幅 */
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.4;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.1s;
}
.live-emergency-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* v0.7.3.v+: 配信タブ各 col の下部を揃えるための flex-fill。
   - left col: シーン進行カードを col 高さフィット、内部 timeline を flex:1
   - main col: ステータスカードは下端固定 (自然 flow)、preview card は flex:1 で高さ取る
   - right col: チャットカードを flex:1、ranking は固定
   align-items: stretch (grid 既定) で 3 col の高さは同じ → 各カード末尾が自動で揃う。 */
.live-tab-col-left {
    display: flex;
    flex-direction: column;
}
.live-tab-col-left > .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.live-tab-col-left .live-scene-timeline {
    flex: 1;
    max-height: none;             /* 列高さに応じて伸びる */
    min-height: 120px;
}
.live-tab-col-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* preview card は 16:9 を維持 (中の widget overlay 位置がずれないよう)。
   ステータスカードを col の最下端に push して、各 col の下部 (シーン進行底 / ステータス底 /
   応援ランキング底) が揃うようにする。 */
.live-tab-col-main > .card:last-child {
    margin-top: auto;
}
.live-tab-col-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.live-tab-col-right > .live-chat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.live-tab-col-right > .live-chat-card .live-chat-messages {
    flex: 1;
    min-height: 80px;
}

/* v0.7.3.x+: チャット送信エリアを最小高さに。
   .chat-input は (歴史的事情で) 配信タブの「div ラッパー」と viewer/別ページの
   「input そのもの」両方に使われており、ここでは div ラッパー側を上書き。 */
.live-chat-card > .chat-input {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
    background: transparent !important;
    border: none !important;
    padding: 6px 0 0 0 !important;
    margin: 4px 0 0 0;
    font-size: 0.78rem;
    height: auto;
}
.live-chat-card > .chat-input > input[type="text"] {
    flex: 1;
    min-width: 0;
    background: #0a0310;
    border: 1px solid rgba(255, 62, 160, 0.35);
    color: var(--ink, #fff);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: inherit;
    font-size: 0.78rem;
    outline: none;
    height: 26px;
    line-height: 1;
    box-sizing: border-box;
}
.live-chat-card > .chat-input > input[type="text"]:focus {
    border-color: var(--pink);
    box-shadow: 0 0 6px rgba(255, 62, 160, 0.3);
}
.live-chat-card > .chat-input > .btn {
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 0.75rem;
    height: 26px;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 4px;
}

/* ============================================================================
   v0.7.3.s+: スマホモードプレビュー (シーン管理の下、9:16 縦長フレーム)
   v0.7.3.u+: chat dummy + bottom actions を追加し、実際のスマホ視聴画面に近づける。
              video-area の右側 widget-overlay は container-type:size で
              cqh ベースの font-size を実映像エリアに比例させる。
   ============================================================================ */
.mobile-preview-frame {
    /* v0.7.5.i+: 視聴者サイト (Bubblegum: 白カード + 淡ピンク bg + dark wine 輪郭) に合わせる。
       端末本体も白カード風にして、視聴者の体感色に統一。 */
    position: relative;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    background: var(--b-card, #ffffff);
    border: 2.5px solid var(--b-ink, #4a1f2e);
    border-radius: 28px;
    box-shadow:
        3px 3px 0 var(--b-ink, #4a1f2e),
        0 6px 14px rgba(74, 31, 46, 0.18);
    overflow: hidden;
    box-sizing: border-box;
}
.mobile-preview-notch {
    /* v0.7.5.f+: video の上に重ねる (実機と同じ挙動)。 */
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 13px;
    background: var(--b-ink, #4a1f2e);
    border-radius: 0 0 9px 9px;
    z-index: 4;
}
.mobile-preview-home {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: var(--b-ink3, #b88aa0);
    border-radius: 2px;
    z-index: 4;
}
.mobile-preview-screen {
    /* v0.7.5.i+: 画面範囲はそのまま inset で明示 (内側 ring も維持)。
       bg を視聴者サイトの淡ピンク (--b-bg) に変更 → 視聴者の体感色そのまま。 */
    position: absolute;
    inset: 8px;
    background: var(--b-bg, #fff8fb);
    border-radius: 22px;
    box-shadow: inset 0 0 0 1.5px rgba(255, 62, 160, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-preview-video-area {
    /* v0.7.5.f+: margin-top を撤去。video は screen の最上端にぴったり貼り付ける。
       ノッチは z-index 4 で video の上に重なるので、配信プレビュー (16:9 のみ) と
       widget 位置の見た目齟齬がなくなる。 */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;       /* 実機: 16:9 動画。下にチャット領域 */
    background: #000;
    overflow: hidden;
    flex-shrink: 0;
}
.mobile-preview-video-area video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}
.mobile-preview-video-area .widget-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;        /* スマホプレビューは read-only */
}

/* チャットダミー (見た目だけ) — v0.7.5.i+: 視聴者サイト Bubblegum 配色に統一。
   白カード + dark wine テキスト + hot pink 名前ラベルで、視聴者が実際に見る画面に近づける。 */
.mobile-preview-chat {
    flex: 1;
    overflow: hidden;
    padding: 6px 6px 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    font-size: 0.5rem;          /* スマホ枠が小さいので極小フォント */
    line-height: 1.25;
    color: var(--b-ink, #4a1f2e);
}
.mobile-preview-chat-msg {
    background: var(--b-card, #ffffff);
    border: 1px solid var(--b-ink4, #d9bdc8);
    border-radius: 8px;
    padding: 2px 6px;
    word-break: break-all;
    max-width: 100%;
}
.mobile-preview-chat-name {
    color: var(--b-pinkD, #d6075e);
    font-weight: 700;
    margin-right: 3px;
}
.mobile-preview-chat-gift {
    background: var(--b-yelS, #fff0b8);
    border-color: var(--b-yel, #ffd24a);
}
.mobile-preview-chat-gift .mobile-preview-chat-name { color: #b87900; }

/* 下部アクションバー (♡ 💬 🎁 ⋯ ダミー) — v0.7.5.i+: 淡ピンク帯 + dark wine アイコン */
.mobile-preview-actions {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 8px 12px 8px;
    font-size: 0.85rem;
    color: var(--b-ink, #4a1f2e);
    background: linear-gradient(to top, var(--b-pinkS, #ffe1ec), transparent);
}
.mobile-preview-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    line-height: 1;
}

/* ============================================================================
   v0.7.3.k+: 準備タブ レイアウト v2
   v0.7.3.l+: 3 列 (scenes 240px / preview 1fr / widgets 300px)
   v0.7.3.m+: ブレークポイントを 900px に下げ、デスクトップ全域で 3 列を表示
   v0.7.3.s+: scenes 360px に拡張 (シーン行 1 行化 + スマホプレビュー収容)
   ============================================================================ */
.prep-v2-grid {
    /* v0.7.5.e+: 3 列レイアウト v3。各列は独立して 2 枚カード縦スタック。
       Col1 [scenes]  : シーン管理 (上) / ウィジェット配置 (下)
       Col2 [preview] : 配信プレビュー (上) / 選択中ウィジェット編集 (下)
       Col3 [mobile]  : スマホ表示プレビュー (上) / デバイス設定 (下)
       - scenes 320px / preview 1fr / mobile 320px
       - 全列 flex column + gap 14px、align-items:stretch で全列の下端揃い */
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 320px;
    grid-template-areas:
        "scenes preview mobile";
    gap: 12px;
    align-items: stretch;
}
.prep-scenes-col   { grid-area: scenes;  min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.prep-preview-col  { grid-area: preview; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.prep-mobile-col   { grid-area: mobile;  min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* v0.7.5.e+: 各列内の 2 カード — 1 枚目は内容自然サイズ、2 枚目 (下段) を flex:1 で
   列の余白を埋め、全列の下端が揃う。すべてカードに margin-bottom: 0。 */
.prep-scenes-col > .card,
.prep-preview-col > .card,
.prep-mobile-col > .card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.prep-scenes-col > .card:last-child,
.prep-preview-col > .card:last-child,
.prep-mobile-col > .card:last-child  { flex: 1; min-height: 0; }
.prep-scenes-col > .card:not(:last-child),
.prep-preview-col > .card:not(:last-child),
.prep-mobile-col > .card:not(:last-child)  { flex-shrink: 0; }

/* v0.7.5.e+: prep-drawer-host は操作ドロワー (絶対配置) のホスト領域。
   グリッドの外に配置 (display:contents で grid item 化を抑止)。 */
.prep-drawer-host { display: contents; }

/* 旧 prep-widgets-row 互換 (削除後の no-op) */
.prep-widgets-row { display: contents; }

@media (max-width: 1280px) {
    /* ノート: scenes / mobile 列を 280px に詰める */
    .prep-v2-grid {
        grid-template-columns: 280px minmax(0, 1fr) 280px;
    }
}
@media (max-width: 900px) {
    /* タブレット / 小型ノート: 完全縦積み (scenes → preview → mobile の順) */
    .prep-v2-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "scenes"
            "preview"
            "mobile";
    }
}

/* シーン管理カードの行 (簡素化版: 名前+ツマミ+有料+ルビー+削除) はそのまま .scene-row-inline を流用 */

/* ヘルプルビー (? アイコン + ツールルビー) — h2 内インライン */
.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--ink-dim, #aaa);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: help;
    user-select: none;
    vertical-align: middle;
    position: relative;
    transition: background 0.15s, color 0.15s;
}
.help-tip:hover,
.help-tip:focus {
    background: var(--pink);
    color: #fff;
    outline: none;
}
.help-tip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #0a0210;
    color: #fff;
    padding: 10px 12px;
    border-radius: 4px;
    width: 280px;
    max-width: 90vw;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 62, 160, 0.3);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    z-index: 1000;
    white-space: pre-wrap;
}
.help-tip:hover::after,
.help-tip:focus::after {
    opacity: 1;
    transform: translateY(0);
}

/* ウィジェットパネル v2 (v0.7.3.l+: プレビュー右の縦長カラム配置 — flex column stack)
   v0.7.4.p+: 編集ペインは別カード化したので widget-panel-v2 はパレット + 一覧のみ収容。 */
.widget-panel-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 220px;
    flex: 1;
}
.widget-panel-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.widget-panel-right {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 12px;
    min-height: 160px;
    flex: 1;
    overflow-y: auto;
}
/* v0.7.3.m+: prep-v2-grid を 900px 以下まで 3 列維持にしたので、
   widget-panel-v2 は常に縦 stack。900px 以下の完全縦積みでも問題なく動く。 */
.widget-editor-placeholder {
    margin: 0;
    line-height: 1.6;
}

/* パレット */
.widget-palette {
    /* v0.7.5.g+: 2 列グリッド化。アイコンを撤去して横幅を文言に使う。 */
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.widget-palette-title {
    /* v0.7.5.g+: タイトルは 2 列に跨ぐ。 */
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: var(--ink-dim, #aaa);
    padding: 2px 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}
.widget-palette-item {
    /* v0.7.5.g+: アイコン非表示前提で中央寄せ + パディング微減。 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink, #fff);
    font-size: 0.85rem;
    cursor: grab;
    user-select: none;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.widget-palette-item:hover {
    background: rgba(255, 62, 160, 0.12);
    border-color: var(--pink);
}
.widget-palette-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}
.widget-palette-icon {
    /* v0.7.5.g+: 2 列化のためアイコンを非表示。HTML は互換のため残置。
       戻したいときはこの 1 行を削除すれば元の絵文字付きに復活。 */
    display: none;
}

/* このシーンのウィジェット一覧 (コンパクト) */
.widget-list-compact {
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px;
    flex: 1;
    overflow-y: auto;
    max-height: 260px;
}
.widget-list-compact-title {
    font-size: 0.72rem;
    color: var(--ink-dim, #aaa);
    padding: 2px 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}
.widget-list-compact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 0.8rem;
    transition: background 0.15s, border-color 0.15s;
}
.widget-list-compact-item:hover {
    background: rgba(255, 62, 160, 0.08);
}
.widget-list-compact-item.selected {
    background: rgba(255, 62, 160, 0.18);
    border-color: var(--pink);
}
.widget-list-compact-item.hidden-widget {
    opacity: 0.5;
}
.widget-list-compact-icon { flex-shrink: 0; font-size: 1rem; }
/* v0.7.5.n+: 種別タグ (ﾃﾛｯﾌﾟ) 等の半角カナ表記 — アイコンの代わりに使う */
.widget-list-compact-type {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--ink-dim, #aaa);
    letter-spacing: 0.01em;
}
.widget-list-compact-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-list-compact-vis {
    background: transparent;
    border: none;
    color: var(--ink-dim, #aaa);
    cursor: pointer;
    padding: 0 4px;
    font-size: 0.95rem;
}
.widget-list-compact-vis:hover { color: var(--pink); }
/* v0.7.5.n+: 削除ボタン (確認ダイアログ付き) */
.widget-list-compact-del {
    background: transparent;
    border: none;
    color: var(--ink-dim, #aaa);
    cursor: pointer;
    padding: 0 4px;
    font-size: 0.95rem;
    transition: color 0.15s, transform 0.08s;
}
.widget-list-compact-del:hover {
    color: #e74c3c;
    transform: scale(1.1);
}

/* v0.7.4.q+: 並び替えハンドル + drop indicator */
.widget-list-compact-handle {
    flex-shrink: 0;
    color: var(--ink-dim, #888);
    cursor: grab;
    user-select: none;
    font-size: 0.95rem;
    letter-spacing: -2px;
    padding: 0 2px;
}
.widget-list-compact-handle:active { cursor: grabbing; }
.widget-list-compact-item.dragging { opacity: 0.45; }
.widget-list-compact-item.drag-above {
    box-shadow: 0 -3px 0 var(--pink);
}
.widget-list-compact-item.drag-below {
    box-shadow: 0 3px 0 var(--pink);
}

/* エディタペイン内の編集行: hidden 旧 widget-editor との競合避けで widget-row-editor 明示 */
.widget-row-editor {
    background: transparent;
    padding: 0;
}

/* ============================================================================
   v0.7.3.p+: 選択中ウィジェット エディタペイン (縦スタック、整ったレイアウト)
   ============================================================================ */
.widget-editor-pane {
    /* v0.7.5.f+: 縦幅を詰めるためセクション間 gap を 14 → 8 に。 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--ink, #fff);
}
.widget-editor-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;            /* v0.7.5.f+: 10 → 6 */
    border-bottom: 1px solid rgba(255, 62, 160, 0.15);
}
.widget-editor-vis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--ink-dim, #aaa);
    cursor: pointer;
    user-select: none;
}
.widget-editor-vis input { cursor: pointer; }

.widget-editor-section {
    display: flex;
    flex-direction: column;
    gap: 6px;                       /* v0.7.5.f+: 10 → 6 (フィールド間) */
}
.widget-editor-section-title {
    font-size: 0.7rem;
    color: var(--ink-dim, #aaa);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 2px;            /* v0.7.5.f+: 4 → 2 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.widget-editor-delete-section {
    margin-top: 2px;                /* v0.7.5.f+: 4 → 2 */
    padding-top: 6px;               /* v0.7.5.f+: 10 → 6 */
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.widget-editor-field {
    display: flex;
    flex-direction: column;
    gap: 2px;                       /* v0.7.5.f+: 4 → 2 (label↔input) */
}
.widget-editor-field-label {
    font-size: 0.72rem;
    color: var(--ink-dim, #aaa);
}
.widget-editor-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--ink, #fff);
    font: inherit;
    font-size: 0.84rem;             /* v0.7.5.f+: 0.88 → 0.84 */
    padding: 4px 7px;               /* v0.7.5.f+: 6 8 → 4 7 */
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.widget-editor-input:focus {
    outline: none;
    border-color: var(--pink);
    background: rgba(0, 0, 0, 0.45);
}

/* 2 列 (文字サイズ + 文字色 など) */
.widget-editor-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;                       /* v0.7.5.f+: 8 → 6 */
}

/* 位置とサイズの 2x2 グリッド */
.widget-editor-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;                       /* v0.7.5.f+: 8 → 6 */
}
.widget-editor-pct-inner {
    display: flex;
    align-items: center;
    gap: 4px;
}
.widget-editor-pct-inner input { flex: 1; }
.widget-editor-pct-suffix {
    font-size: 0.78rem;
    color: var(--ink-dim, #aaa);
    width: 14px;
}

/* v0.7.4.r+: 画像 / 動画 アップローダー UI (image / video widget editor) */
.widget-editor-uploader {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
}
.widget-editor-uploader-label {
    font-size: 0.72rem;
    color: var(--ink-dim, #aaa);
    font-weight: 600;
}
.widget-editor-uploader-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget-editor-uploader-preview img,
.widget-editor-uploader-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.widget-editor-uploader-preview-video {
    /* video には controls があるのでアスペクトを少し低めにしない */
}
.widget-editor-uploader-actions {
    display: flex;
    gap: 6px;
}
.widget-editor-uploader-pick {
    flex: 1;
    font-size: 0.78rem;
    padding: 6px 10px;
    font-weight: 600;
}
.widget-editor-uploader-clear {
    font-size: 0.78rem;
    padding: 6px 10px;
    flex-shrink: 0;
}
.widget-editor-uploader-status {
    font-size: 0.72rem;
    color: var(--pink);
    min-height: 1em;
}
.widget-editor-uploader-hint {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.3;
}

/* v0.7.4.g+: ウィンドウキャプチャ widget editor */
.widget-editor-windowcap-status {
    font-size: 0.78rem;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--ink, #fff);
    word-break: break-all;
}
.widget-editor-windowcap-btn,
.widget-editor-windowcap-stop {
    width: 100%;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 5px;
}
.widget-editor-windowcap-note {
    margin: 4px 0 0 0;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.3;
}

/* v0.7.4.g+: エディタペインの目立つ削除ボタン (2 段クリック) */
.widget-editor-delete-prominent {
    width: 100%;
}
.widget-editor-delete-btn,
.widget-editor-delete-confirm-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.widget-editor-delete-confirm-btn {
    background: var(--danger, #ff5c5c);
    color: #fff;
    border-color: var(--danger, #ff5c5c);
    animation: delete-confirm-pulse 0.8s ease-in-out infinite alternate;
    box-shadow: 0 0 14px rgba(255, 92, 92, 0.5);
}
.widget-editor-delete-icon {
    font-size: 1.1rem;
    line-height: 1;
}
@keyframes delete-confirm-pulse {
    from { transform: scale(1);    }
    to   { transform: scale(1.03); }
}

/* v0.7.4.d+: 不透明度スライダー (telop 背景アルファ) */
.widget-editor-opacity-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.widget-editor-opacity-slider {
    flex: 1;
    accent-color: var(--pink, #ff3ea0);
    cursor: pointer;
    min-width: 0;
}
.widget-editor-opacity-val {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: var(--ink-dim, #aaa);
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* 色 picker */
.widget-editor-color-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.widget-editor-color-input {
    width: 44px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}
.widget-editor-color-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    color: var(--ink-dim, #aaa);
}

/* チェックボックス */
.widget-editor-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}
.widget-editor-check input { cursor: pointer; }

/* 回転スライダー */
.widget-editor-rotation {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.widget-editor-rotation-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.widget-editor-rotation-slider {
    flex: 1;
    accent-color: var(--pink);
}
.widget-editor-rotation-val {
    width: 48px;
    text-align: right;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: var(--pink);
}
/* v0.7.4.p+: 回転 number input (スライダー隣) */
.widget-editor-rotation-num-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
}
.widget-editor-rotation-num {
    width: 52px;
    background: transparent;
    border: none;
    color: var(--pink);
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
}
.widget-editor-rotation-num::-webkit-outer-spin-button,
.widget-editor-rotation-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.widget-editor-rotation-suffix {
    color: var(--ink-dim, #aaa);
    font-size: 0.75rem;
}
.widget-editor-rotation-reset {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ink-dim, #aaa);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.widget-editor-rotation-reset:hover {
    border-color: var(--pink);
    color: var(--pink);
}

/* v0.7.4.a+: 「編集」トグル — プレビュー card の h2 右端に配置
   v0.7.4.c+: button → checkbox switch UI に変更、label「編集ボックス表示」 */
.preview-card-h2 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.preview-card-h2 .widget-box-toggle {
    margin-left: auto;        /* h2 内右端に push */
}
.widget-box-toggle {
    /* v0.7.5.h+: 白カード背景で OFF 時に埋もれないようラベル色を ink2 系に変更。 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--b-ink2, #7e3a55);
    transition: color 0.15s;
}
.widget-box-toggle:hover { color: var(--pink, #ff3ea0); }
.widget-box-toggle input[type="checkbox"] {
    /* native checkbox を非表示。track + knob で switch を描く */
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.widget-box-toggle-track {
    /* v0.7.5.h+: OFF 状態でも識別できるよう pink-tint + 明確な pink ボーダー。
       (白カード上で透明白だと埋没していた問題の修正) */
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: rgba(255, 62, 160, 0.18);
    border: 1px solid rgba(255, 62, 160, 0.55);
    border-radius: 10px;
    transition: background 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
.widget-box-toggle-track::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s;
}
.widget-box-toggle input[type="checkbox"]:checked + .widget-box-toggle-track {
    background: var(--pink, #ff3ea0);
    border-color: var(--pink, #ff3ea0);
}
.widget-box-toggle input[type="checkbox"]:checked + .widget-box-toggle-track::after {
    transform: translateX(14px);
}
.widget-box-toggle input[type="checkbox"]:focus-visible + .widget-box-toggle-track {
    box-shadow: 0 0 0 2px rgba(255, 62, 160, 0.4);
}
.widget-box-toggle-label {
    white-space: nowrap;
}
.widget-box-toggle input[type="checkbox"]:checked ~ .widget-box-toggle-label {
    color: var(--pink, #ff3ea0);
    font-weight: 600;
}

/* v0.7.4.c+: マイク入力レベルメーター (プレビュー中表示) */
.mic-level-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-size: 0.72rem;
}
.mic-level-icon { font-size: 0.9rem; line-height: 1; }
.mic-level-bar-track {
    position: relative;
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: hidden;
}
.mic-level-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(
        to right,
        #4ade80 0%,
        #4ade80 55%,
        #facc15 75%,
        #ef4444 95%
    );
    border-radius: 5px;
    transition: width 50ms linear;
}
.mic-level-bar-peak {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 0%;
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    transition: left 80ms linear;
    pointer-events: none;
}
.mic-level-status {
    color: var(--ink-dim, #aaa);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* ============================================================================
   v0.8.3.n: 美顔フィルタ パネル (broadcaster 準備タブ / デバイス設定カード内)
   ============================================================================ */
.beauty-panel {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-size: 0.78rem;
}
.beauty-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.beauty-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}
.beauty-panel-body {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.beauty-slider-row {
    display: grid;
    grid-template-columns: 44px 1fr 30px;
    align-items: center;
    gap: 8px;
}
.beauty-slider-row label {
    color: var(--ink-dim, #aaa);
    white-space: nowrap;
}
.beauty-slider-row input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: #ff4d8d;
}
.beauty-slider-row input[type="range"]:disabled {
    opacity: 0.4;
}
.beauty-slider-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim, #aaa);
}
.beauty-face-sec {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.beauty-face-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.beauty-face-status {
    color: var(--ink-dim, #aaa);
    font-size: 0.72rem;
    white-space: nowrap;
}
.beauty-note {
    margin: 4px 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--ink-dim, #888);
}

/* v0.8.3.o: シーンの beauty widget が優先適用中のヒント (パネル head 直下) */
.beauty-override-hint {
    margin-top: 6px;
    padding: 5px 8px;
    font-size: 0.7rem;
    line-height: 1.5;
    color: #ffd9e6;
    background: rgba(214, 7, 94, 0.18);
    border: 1px solid rgba(255, 77, 141, 0.35);
    border-radius: 4px;
}

/* v0.8.3.o: 美顔フィルタ widget — エディタプレビュー上のチップ表示
   (配信映像には描画されない。枠だけの選択用ハンドル) */
.widget-overlay-beauty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #ffd9e6;
    background: rgba(214, 7, 94, 0.22);
    border: 1px dashed rgba(255, 77, 141, 0.6) !important;
    border-radius: 8px;
}

/* v0.8.3.o: widget editor 内の beauty 説明ノート */
.widget-editor-beauty-note {
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--ink-dim, #aaa);
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid rgba(255, 77, 141, 0.6);
    border-radius: 3px;
}

/* boxes-hidden: 枠 / 当たり判定を全部消す ＝ 配信ビュー同等の見た目に。
   widget の中身 (telop テキスト、image 等) は引き続き表示される。 */
.widget-overlay.boxes-hidden .widget-overlay-item {
    border: none !important;
    background: transparent !important;
    pointer-events: none !important;
    box-shadow: none !important;
}
.widget-overlay.boxes-hidden .widget-overlay-item.selected {
    box-shadow: none !important;
    background: transparent !important;
}
.widget-overlay.boxes-hidden .widget-resize-handle,
.widget-overlay.boxes-hidden .widget-overlay-close,
.widget-overlay.boxes-hidden .widget-rotate-handle,
.widget-overlay.boxes-hidden .widget-rotate-line {
    display: none !important;
}

/* オーバーレイ: パレットドラッグオーバー時のフィードバック */
.widget-overlay.palette-drag-over {
    background: rgba(255, 62, 160, 0.1);
    outline: 2px dashed var(--pink);
    outline-offset: -4px;
}

/* オーバーレイ上の選択中 widget ハイライト */
.widget-overlay-item.editable.selected {
    border-color: var(--pink);
    background: rgba(255, 62, 160, 0.12);
    box-shadow: 0 0 0 2px var(--pink), 0 0 14px rgba(255, 62, 160, 0.4);
}

/* hidden ヘルパー (既存) を念のため明示 */
.hidden { display: none !important; }

/* 操作ドロワーの「配信情報を変更」details スタイル */
.control-drawer-advanced {
    margin-top: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}
.control-drawer-advanced summary {
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    color: var(--ink-dim, #aaa);
    padding: 2px 0;
}
.control-drawer-advanced summary:hover {
    color: var(--pink);
}
.control-drawer-advanced[open] summary {
    margin-bottom: 8px;
    color: var(--ink, #fff);
}

/* シーン管理カード (Phase 5 → v0.7.3.d インラインボタン + drag/drop) */
.scenes-list { margin: 12px 0; max-height: 360px; overflow-y: auto; }
.scene-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: grab;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                opacity var(--transition-fast);
    font-size: 0.85rem;
    user-select: none;
}
.scene-row:hover { background: rgba(255, 62, 160, 0.08); }
.scene-row.selected {
    background: rgba(255, 62, 160, 0.15);
    border-color: var(--pink);
}
.scene-row.paid { border-left: 3px solid var(--pink); }
.scene-row.dragging { opacity: 0.35; cursor: grabbing; }
/* v0.7.4.b+: 並び替え drag 中の挿入位置インジケーター。
   行の上半分にホバー時 = .drag-above (上端に太い pink ライン)、
   下半分にホバー時 = .drag-below (下端に太い pink ライン)。
   実際の挿入位置とラインが完全一致する。 */
.scene-row.drag-above,
.scene-row.drag-below {
    position: relative;
}
.scene-row.drag-above::before,
.scene-row.drag-below::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    height: 4px;
    background: var(--pink);
    border-radius: 2px;
    box-shadow: 0 0 12px var(--pink), 0 0 4px var(--pink);
    z-index: 20;
    pointer-events: none;
}
.scene-row.drag-above::before { top: -4px; }
.scene-row.drag-below::after  { bottom: -4px; }
/* 旧 .drag-over は互換のため軽い枠だけ残す (もう使われていない) */
.scene-row.drag-over { border-top: 2px solid var(--pink); }
@keyframes scene-row-flash {
    0%   { background: rgba(255, 184, 74, 0.45); }
    100% { background: transparent; }
}
.scene-row.just-added {
    animation: scene-row-flash 1.6s ease-out;
}
.scene-row-handle {
    color: var(--ink-dim);
    font-size: 0.9rem;
    cursor: grab;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.scene-row:hover .scene-row-handle { color: var(--pink); }
.scene-row-name { flex: 1; }
.scene-row-tag {
    font-size: 0.7rem;
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.scene-row-paid {
    font-size: 0.7rem;
    color: var(--pink);
    font-weight: 600;
}
.scene-row-action {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-dim);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}
.scene-row-action:hover { background: rgba(255, 62, 160, 0.15); color: var(--pink); }
.scene-row-delete-btn:hover { color: var(--danger, #ff5c5c); }
.scenes-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.scenes-toolbar .btn { flex: 1 1 auto; }

/* ============================================================================
   配信タブ (Phase 6)
   ============================================================================ */
.live-tab-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 1100px) {
    .live-tab-grid {
        grid-template-columns: 1fr;
    }
}
.live-tab-col-left,
.live-tab-col-main,
.live-tab-col-right { display: flex; flex-direction: column; gap: 12px; }

.live-scene-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0;
    max-height: 320px;
    overflow-y: auto;
}
.live-scene-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.live-scene-row:hover { background: rgba(255, 62, 160, 0.08); }
.live-scene-row.current {
    background: rgba(255, 62, 160, 0.18);
    border-color: var(--pink);
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.3);
}
.live-scene-row.done { color: var(--ink-dim); }
.live-scene-row.paid { border-left: 3px solid var(--pink); }
.live-scene-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ink-dim);
    flex-shrink: 0;
}
.live-scene-row.current .live-scene-icon {
    background: var(--pink);
    border-color: var(--pink);
}
.live-scene-row.done .live-scene-icon {
    background: #4ade80;
    border-color: #4ade80;
}
.live-scene-name { flex: 1; }
.live-scene-paid-tag {
    font-size: 0.7rem;
    color: var(--pink);
    font-weight: 600;
}
.live-scene-current-marker {
    font-size: 0.7rem;
    color: var(--pink);
    letter-spacing: 0.1em;
}

.live-scene-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.live-next-scene-btn {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.live-divider {
    border: none;
    border-top: 1px solid rgba(255, 62, 160, 0.15);
    margin: 12px 0;
}
/* v0.7.3.ac+: シーン進行カード末尾のヒント文を最小サイズに */
.live-scene-back-hint {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 6px 0 0 0;
    line-height: 1.3;
}

/* v0.7.3.ab+: 旧 .live-emergency-row 縦並びルールは廃止。
   現行: v0.7.3.x で定義した「最下端 + space-between (左右端横並び)」を採用 (2882 行付近)。 */
.live-emergency-help {
    margin-top: 8px;
    font-size: 0.7rem;
}

.live-current-scene-badge {
    margin-left: 12px;
    font-size: 0.7rem;
    color: var(--pink);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.08em;
}

/* 配信ビュー内のカメラプレビュー */
.live-preview-card { display: flex; flex-direction: column; }
.live-video-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1a0528, #0a0210);
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    margin: 8px 0;
    object-fit: cover;
}
.live-preview-hint {
    margin-top: 4px;
    font-size: 0.75rem;
}

/* チャットを縦方向に大きく取る */
.live-chat-card {
    display: flex;
    flex-direction: column;
    min-height: 480px;
    max-height: calc(100vh - 220px);
}
.live-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 320px;
    padding: 8px 4px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.live-ranking-card { min-height: 0; }


.btn-warn {
    background: #c97a1d;
    color: white;
    border: 1px solid #c97a1d;
}
.btn-warn:hover { background: #e89030; }

/* ウィジェット配置カード */
.widget-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 62, 160, 0.15);
}
.widget-editor-meta { font-size: 0.75rem; color: var(--ink-dim); }
.widget-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.widget-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(255, 62, 160, 0.12);
    border-radius: 4px;
    font-size: 0.85rem;
}
.widget-row-label { font-weight: 500; }
.widget-row-pos {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--ink-dim);
}
.widget-row-btn { padding: 4px 10px; font-size: 0.75rem; }
.widget-add-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.broadcaster-container {
    padding: 24px 28px;
    /* v0.7.4.s+: 1400 → 1700px に拡大。
       v0.7.5.c+: 1700 → 1850px に再拡大 + scenes 280 / widgets 500 に詰めて
       preview 列が約 880×495 まで広がる (旧 720×405 比 ~1.22 倍)。 */
    max-width: 1850px;
    margin: 0 auto;
}
.broadcaster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 62, 160, 0.25);
    margin-bottom: 22px;
}

/* v0.7.3.aa+: 配信者ダッシュボード ヘッダー右にバージョン chip。
   ぱっと見でデプロイ反映を確認できる視認性 (pink ring + monospace)。 */
.broadcaster-version-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: rgba(255, 62, 160, 0.12);
    color: var(--pink, #ff3ea0);
    border: 1px solid rgba(255, 62, 160, 0.5);
    border-radius: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    cursor: default;
    user-select: text;
}
.broadcaster-header h1 {
    /* v0.7.4.b+: chip を inline で並べるため flex 化 */
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Monoton', cursive;
    color: var(--pink);
    text-shadow: 0 0 8px var(--pink), 0 0 22px var(--pink-glow);
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.user-info { display: flex; align-items: center; gap: 10px; }

.stream-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* v0.7.3.u+: 旧 max-height: 400px は撤去 (配信プレビューが小さくなる原因)。
   個別の wrap 要素 (.video-preview-wrap / .live-video-wrap / .mobile-preview-video-area)
   が aspect-ratio + 親 col 高さで video のサイズを制御する。 */
video {
    width: 100%;
    background: #0a0310;
    border-radius: 4px;
}
#videoPreview {
    border: 1px solid rgba(255, 62, 160, 0.3);
}

.points-card {
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: 6px;
    padding: 18px 22px;
}

.free-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 212, 71, 0.06);
    border: 1px solid rgba(255, 212, 71, 0.3);
    border-radius: 4px;
    margin-bottom: 8px;
}
.free-method-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yellow), #c89a0a);
    display: grid;
    place-items: center;
    box-shadow: 0 0 10px rgba(255, 212, 71, 0.5);
}
.free-method-name { color: var(--ink); font-weight: 700; font-size: 0.9rem; }
.free-method-points { color: var(--yellow); text-shadow: 0 0 4px var(--yellow); font-family: 'VT323', monospace; font-size: 1rem; }

/* ============================================================
   Logo banner
   ============================================================ */
.logo.logo-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-decoration: none;
    color: inherit;
}
.top-bar .logo.logo-banner::after,
.admin-sidebar .logo.logo-banner::after { display: none; }
.logo-banner-img {
    /* NOX LIVE neon ロゴ:
       画像内に余白 + 自己発光が含まれているため、
       (1) 高さを 66 → 84 に引き上げて視認性を確保。
       (2) drop-shadow は弱め (0.25) にして二重光の白飛び防止。 */
    height: 84px;
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 0 12px rgba(91, 192, 235, 0.25))
            drop-shadow(0 0 18px rgba(255, 62, 160, 0.18));
}
.admin-sidebar .logo-banner-img { height: 64px; max-width: 100%; }
.admin-sidebar .logo.logo-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.admin-sidebar .logo.logo-banner .admin-badge { margin-top: 2px; }
@media (max-width: 768px) {
    .logo-banner-img { height: 68px; }
    .admin-sidebar .logo-banner-img { height: 54px; }
}

/* ============================================================
   Footer (Neon strip)
   ============================================================ */
.footer-burrow {
    background:
        linear-gradient(180deg, rgba(19, 6, 32, 0.95), rgba(5, 1, 8, 1));
    color: var(--ink-dim);
    text-align: center;
    padding: 24px 20px 28px;
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    border-top: 2px solid var(--pink);
    position: relative;
    box-shadow: 0 -2px 22px rgba(255, 62, 160, 0.25);
}
.footer-burrow::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--pink), var(--cyan), var(--pink), transparent);
    box-shadow: 0 0 10px var(--pink);
}
.footer-burrow-links {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 4px;
}
.footer-burrow-link {
    color: var(--cyan);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    transition: all var(--transition-fast);
    font-size: 0.72rem;
    text-shadow: 0 0 4px var(--cyan);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.footer-burrow-link:hover {
    color: #0a0310;
    background: var(--cyan);
    box-shadow: 0 0 16px var(--cyan);
    text-shadow: none;
}
.footer-burrow-copy {
    color: var(--ink-mute);
    font-size: 0.68rem;
    margin-top: 6px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .footer-burrow { padding: 18px 12px 22px; }
    .footer-burrow-link { font-size: 0.68rem; padding: 3px 8px; }
}

/* ============================================================
   Toast + misc utilities
   ============================================================ */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
.toast {
    font-family: 'Space Mono', monospace !important;
    letter-spacing: 0.05em !important;
    border: 1px solid currentColor !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 18px currentColor !important;
}

.u-cursor-pointer { cursor: pointer; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 16px; }
.mt-2 { margin-top: 10px; }

/* Mobile */
@media (max-width: 768px) {
    .notice-item,
    .news-row { grid-template-columns: auto auto 1fr auto; font-size: 0.78rem; gap: 10px; }
    /* サイドバーは常に左から slide-in する overlay 的挙動 */
    .sidebar,
    .sidebar.with-top-bar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .sidebar.open,
    .sidebar.with-top-bar.open { transform: translateX(0); }
    .main-content,
    .main-content.with-top-bar { margin-left: 0; padding: 18px 16px 60px; }
    .section-title { font-size: 1.2rem; }
    .section-title .ja { font-size: 0.72rem; }
    .crumbs .page { font-size: 1.1rem; }
    .top-bar { padding: 8px 16px; }
    .admin-layout { grid-template-columns: 1fr; }
    .broadcaster-header h1 { font-size: 1.1rem; }
}

/* ============================================================
   Market Product Cards (旧マーケットタブ用 — 現在は未使用)
   ============================================================ */
.market-product-card {
    position: relative;
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.market-product-card:hover {
    border-color: var(--pink);
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(255, 62, 160, 0.3);
}
.market-product-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: radial-gradient(circle, rgba(255, 62, 160, 0.15), transparent 70%), #0a0310;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.market-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.market-product-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255, 62, 160, 0.4);
    background-image:
        linear-gradient(45deg, rgba(255, 62, 160, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 62, 160, 0.1) 50%, rgba(255, 62, 160, 0.1) 75%, transparent 75%);
    background-size: 30px 30px;
}
.market-product-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 2px;
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 4px var(--cyan);
}
.market-product-purchased-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    background: linear-gradient(180deg, var(--lime), #6a8a1a);
    color: #0a1a03;
    border-radius: 2px;
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.market-product-info {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.market-product-title {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.market-product-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.market-product-broadcaster {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
    font-size: 0.78rem;
}
.market-product-broadcaster-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 62, 160, 0.4);
    flex-shrink: 0;
}
.market-product-broadcaster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    display: block;
}
.market-product-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--yellow);
    font-family: 'VT323', monospace;
    font-size: 1.15rem;
    text-shadow: 0 0 4px var(--yellow);
    letter-spacing: 0.05em;
}
.market-product-price img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}
.market-product-sales {
    color: var(--ink-mute);
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    margin-left: auto;
}

/* ============================================================
   Cast Grid / Cards (キャスト一覧)
   ============================================================ */
.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.cast-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
    cursor: pointer;
}
.cast-card:hover {
    border-color: var(--pink);
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(255, 62, 160, 0.3);
}
.cast-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--pink);
    box-shadow: 0 0 10px rgba(255, 62, 160, 0.4);
    flex-shrink: 0;
    background: #0a0310;
}
.cast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    display: block;
}
.cast-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cast-name {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cast-bio {
    color: var(--ink-mute);
    font-size: 0.74rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cast-search {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
}
.cast-search-input {
    flex: 1;
}
.cast-count {
    color: var(--ink-mute);
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.filter-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 4px var(--cyan);
}
.filter-btn:hover { box-shadow: 0 0 12px rgba(0, 231, 255, 0.4); }

/* ============================================================
   Tabs / Ranking tabs
   ============================================================ */
.tab-content { display: none; }
.tab-content.active { display: block; }

.ranking-tabs,
.ranking-period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ranking-tab,
.ranking-period-tab {
    padding: 8px 14px;
    background: transparent;
    color: var(--ink-dim);
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ranking-tab:hover,
.ranking-period-tab:hover {
    color: var(--pink);
    border-color: var(--pink);
    text-shadow: 0 0 4px var(--pink);
}
.ranking-tab.active,
.ranking-period-tab.active {
    color: #fff;
    background: linear-gradient(180deg, var(--pink), var(--blood));
    border-color: var(--pink);
    box-shadow: 0 0 14px rgba(255, 62, 160, 0.4);
    text-shadow: 0 0 6px var(--pink-glow);
}
.ranking-section { margin-bottom: 24px; }
.ranking-section.u-c-f2892a2e { display: block; }
.ranking-grid {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    padding: 14px 18px;
}
.text-secondary { color: var(--ink-dim); font-size: 0.82rem; }

/* ============================================================
   Product Detail Modal (商品詳細)
   ============================================================ */
.product-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 1, 8, 0.88);
    backdrop-filter: blur(6px);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.product-detail-content {
    background: linear-gradient(180deg, #1a0528, #0a0210);
    border: 1px solid var(--pink);
    border-radius: 10px;
    max-width: 760px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow:
        0 40px 80px -20px #000,
        0 0 32px rgba(255, 62, 160, 0.4);
}
.product-detail-content::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--pink));
    box-shadow: 0 0 10px var(--pink);
}
/* Header はフルワイド。preview は中で絶対配置ナシで通常フロー、
   close ボタンだけ absolute top-right に浮かせる。
   v0.7.0.e まで display:flex + justify-content:space-between だったため
   close ボタンと preview 枠が横並びになり、preview が右上に小さく押し
   つぶされていた (壊れ icon 表示の原因)。 */
.product-detail-header {
    display: block;
    position: relative;
    padding: 0;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.3);
}
.product-detail-title {
    font-family: 'Monoton', cursive;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    margin: 0;
    line-height: 1.35;
}
.product-detail-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    background: rgba(5, 1, 8, 0.7);
    border: 1px solid rgba(255, 62, 160, 0.35);
    color: var(--ink-dim);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.product-detail-close:hover {
    color: var(--pink);
    border-color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.4);
}
.product-detail-body {
    padding: 20px 26px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.product-detail-broadcaster {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-dim);
    font-size: 0.88rem;
}
.product-detail-broadcaster-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--pink);
    box-shadow: 0 0 8px rgba(255, 62, 160, 0.3);
}
.product-detail-broadcaster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}
.product-detail-broadcaster-name {
    color: var(--ink);
    font-weight: 700;
}
.product-detail-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    color: var(--yellow);
    text-shadow: 0 0 6px var(--yellow);
}
.product-detail-description {
    color: var(--ink);
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(5, 1, 8, 0.4);
    border: 1px dashed rgba(255, 62, 160, 0.25);
    border-radius: 4px;
    padding: 16px 18px;
    min-height: 160px;
    font-size: 0.92rem;
}
.product-detail-thumbnail-section { margin-top: 6px; }
.product-detail-thumbnail-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    text-transform: uppercase;
    margin-bottom: 6px;
}
/* サムネ表示はコンテナを固定サイズにし、画像は contain で中央揃え。
   ピクセルアート画像 (64x64) が 400px 高まで拡大されていた問題を
   修正 (max-height 240 + width:auto 優先)。 */
.product-detail-thumbnail-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-detail-thumbnail-img {
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #0a0310;
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

/* Hero container (購入モーダル上部): 固定 aspect-ratio で常に同じ
   大きさの枠を確保し、中の画像は contain で上下バー付き中央表示。
   これで 1px 画像も 2000px 画像も同じ枠に収まる ("強制的に同じ
   大きさで並べて表示" の要件)。 */
.product-detail-preview {
    position: relative;
    width: 100%;
    background: transparent;
    padding: 0;
    border: none;
    font-style: normal;
    color: inherit;
    border-radius: 0;
}
.product-hero-carousel,
.product-detail-hero-empty {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 360px;
    min-height: 200px;
    background: #0a0310;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.product-detail-hero-empty {
    color: var(--ink-mute);
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    gap: 8px;
}
.product-detail-hero-empty svg {
    width: 48px;
    height: 48px;
    opacity: 0.35;
}
.product-detail-hero-empty::after {
    content: "no preview";
    display: block;
    color: var(--ink-mute);
    opacity: 0.6;
}

/* Carousel slide: 全 slide を絶対配置で重ね、.is-active だけ
   opacity:1 にする。画像は contain fit でどのサイズでも同じ枠内に
   収まる。 */
.product-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.product-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.product-hero-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 購入モーダル内の「購入すると実際のコンテンツが見られます」注意書き */
.product-detail-preview-notice {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    color: var(--ink);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    background: rgba(5, 1, 8, 0.8);
    border: 1px solid rgba(255, 212, 71, 0.5);
    border-left: 3px solid var(--yellow);
    border-radius: 2px;
    text-shadow: 0 0 4px var(--yellow);
    text-align: center;
    z-index: 4;
    pointer-events: none;
}

.product-detail-image-count {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: var(--cyan);
    letter-spacing: 0.12em;
    text-shadow: 0 0 4px var(--cyan);
    margin-top: 4px;
}
.product-hero-counter {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 2px;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 4px var(--cyan);
    z-index: 5;
}

/* カルーセル左右ナビゲーション */
.product-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(5, 1, 8, 0.7);
    border: 1px solid rgba(255, 62, 160, 0.4);
    color: var(--ink);
    font-size: 1.2rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
    transition: all var(--transition-fast);
    padding: 0;
    line-height: 1;
}
.product-hero-nav:hover {
    background: rgba(255, 62, 160, 0.3);
    border-color: var(--pink);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.5);
}
.product-hero-prev { left: 10px; }
.product-hero-next { right: 10px; }
.product-detail-footer {
    padding: 14px 26px 22px;
    border-top: 1px dashed rgba(255, 62, 160, 0.3);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================================
   Broadcaster-side product cards (配信者管理画面)
   ============================================================ */
.broadcaster-product-card {
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
}
.broadcaster-product-card:hover {
    border-color: var(--pink);
    box-shadow: 0 0 18px rgba(255, 62, 160, 0.3);
}
.broadcaster-product-thumb {
    aspect-ratio: 16/9;
    background: radial-gradient(circle, rgba(255, 62, 160, 0.15), transparent 70%), #0a0310;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.broadcaster-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.broadcaster-product-info {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.broadcaster-product-title {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.35;
}
.broadcaster-product-price {
    color: var(--yellow);
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    text-shadow: 0 0 4px var(--yellow);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.broadcaster-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(255, 62, 160, 0.1);
    border: 1px solid rgba(255, 62, 160, 0.4);
    color: var(--pink);
    border-radius: 999px;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 4px var(--pink);
}
.broadcaster-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-decoration: none;
}
.broadcaster-social-btn:hover { box-shadow: 0 0 12px rgba(0, 231, 255, 0.35); }

/* ============================================================
   Chat (stamp/gift付き)
   ============================================================ */
.chat-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 62, 160, 0.3); flex-shrink: 0; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.chat-body { flex: 1; min-width: 0; }
.chat-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.chat-name { font-weight: 700; color: var(--pink); text-shadow: 0 0 4px var(--pink); font-size: 0.85rem; }
.chat-time { font-family: 'Space Mono', monospace; font-size: 0.66rem; color: var(--ink-mute); letter-spacing: 0.08em; }
.chat-text { color: var(--ink); word-break: break-word; }
.chat-stamp-img,
.chat-gift-img { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 0 4px var(--pink)); }
.chat-stamp-cost,
.chat-gift-cost {
    font-family: 'VT323', monospace;
    color: var(--yellow);
    text-shadow: 0 0 4px var(--yellow);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ============================================================
   Transaction / history rows
   ============================================================ */
.transaction-list {
    display: flex;
    flex-direction: column;
}
.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.15);
    font-size: 0.88rem;
    color: var(--ink);
    gap: 10px;
}
.transaction-item:last-child { border-bottom: none; }
.transaction-desc { flex: 1; min-width: 0; color: var(--ink); }
.transaction-date { color: var(--ink-mute); font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; }
.transaction-amount {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: var(--yellow);
    text-shadow: 0 0 4px var(--yellow);
}
.transaction-amount.negative,
.transaction-amount.consumed { color: var(--pink); text-shadow: 0 0 4px var(--pink); }
.transaction-amount.positive { color: var(--lime); text-shadow: 0 0 4px var(--lime); }

.empty-history {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-mute);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.1em;
}

/* ============================================================
   Login / signup inline (index sidebar)
   ============================================================ */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-title,
.signup-title {
    font-family: 'Monoton', cursive;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    letter-spacing: 0.1em;
    font-size: 0.95rem;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.login-input,
.signup-input {
    width: 100%;
    background: #0a0310;
    border: 1px solid rgba(255, 62, 160, 0.35);
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 3px;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    outline: none;
    margin-bottom: 2px;
}
.login-input:focus,
.signup-input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 10px rgba(255, 62, 160, 0.3);
}
.login-error,
.signup-error {
    color: var(--pink);
    font-size: 0.78rem;
    min-height: 1.3em;
    padding: 4px 0;
    text-shadow: 0 0 4px var(--pink);
    display: none;
}
.login-error.show,
.signup-error.show,
.login-error:not(:empty),
.signup-error:not(:empty) { display: block; }
.btn-login,
.btn-signup {
    width: 100%;
    padding: 9px;
    font-family: 'Rubik Mono One', cursive;
    letter-spacing: 0.18em;
    color: #0a0310;
    background: linear-gradient(180deg, var(--pink), var(--blood));
    border: 1px solid #ffb8dc;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow:
        0 0 14px rgba(255, 62, 160, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-size: 0.82rem;
}
.btn-login:hover,
.btn-signup:hover {
    box-shadow: 0 0 22px var(--pink);
    transform: translateY(-1px);
}
.btn-signup {
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    text-shadow: 0 0 4px var(--cyan);
    box-shadow: none;
}
.btn-signup:hover {
    box-shadow: 0 0 14px rgba(0, 231, 255, 0.35);
    background: rgba(0, 231, 255, 0.08);
    color: var(--cyan);
}
.login-divider {
    text-align: center;
    color: var(--ink-mute);
    font-family: 'VT323', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.25em;
    margin: 6px 0 4px;
    position: relative;
}
.login-divider::before,
.login-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: rgba(255, 62, 160, 0.3);
}
.login-divider::before { left: 4px; }
.login-divider::after { right: 4px; }
.btn-mobile-login {
    padding: 6px 12px;
    background: linear-gradient(180deg, var(--pink), var(--blood));
    color: #0a0310;
    border: 1px solid #ffb8dc;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: none;
    box-shadow: 0 0 10px rgba(255, 62, 160, 0.4);
}
@media (max-width: 768px) {
    .btn-mobile-login { display: inline-block; }
}

.refresh-btn {
    background: transparent;
    border: 1px solid rgba(255, 62, 160, 0.3);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-mute);
    padding: 0;
}
.refresh-btn:hover { color: var(--pink); border-color: var(--pink); }

/* Notice-title anchor hover */
.notice-title a { color: inherit; text-decoration: none; }
.notice-title a:hover { color: var(--pink); text-shadow: 0 0 4px var(--pink); }

/* Status for profile/watch */
.broadcaster-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--pink);
    box-shadow: 0 0 14px rgba(255, 62, 160, 0.5);
}
.broadcaster-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* Confirm modal used in history delete */
.confirm-modal,
.confirm-dialog {
    background: linear-gradient(180deg, #1a0528, #0a0210);
    border: 1px solid var(--pink);
    border-radius: 8px;
    padding: 22px 26px;
    max-width: 440px;
    box-shadow: 0 30px 80px -20px #000, 0 0 32px rgba(255, 62, 160, 0.35);
}
.confirm-title {
    font-family: 'Monoton', cursive;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.confirm-message {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Settings page section title (different from regular .section-title) */
.settings-section {
    background: linear-gradient(180deg,
        rgba(27, 10, 46, 0.7),
        rgba(11, 3, 18, 0.9));
    border: 1px solid rgba(255, 62, 160, 0.25);
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 18px;
    position: relative;
}
.settings-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--pink));
    box-shadow: 0 0 10px var(--pink);
    opacity: 0.7;
}
.settings-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Monoton', cursive;
    font-size: 1.05rem;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.25);
    text-transform: uppercase;
}
.settings-section-title svg { color: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
    gap: 12px;
}
.history-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================================
   Himatane icon (ルビーアイコン) のグローバル Neon 調 (v0.7.0.h)
   point-icn.png を使うすべての img にゴールドの
   drop-shadow を付け、左メニューのアイコンと調和させる。
   pixelated 描画でシャープに。
   ============================================================ */
img[src*="point-icn"] {
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(255, 212, 71, 0.6));
}
/* コンテキスト別に少し調整:
   - ナビや user-section では発光弱め (背景暗色のため強すぎると眩しい)
   - price/stats など数字と並ぶ箇所は強めの発光 */
.nav-item-icon img[src*="point-icn"],
.sidebar img[src*="point-icn"] {
    filter: drop-shadow(0 0 3px rgba(255, 212, 71, 0.5));
}
.market-product-price img[src*="point-icn"],
.product-detail-price img[src*="point-icn"],
.seedbox img[src*="point-icn"],
.free-method-points img[src*="point-icn"],
.empty-transactions img[src*="point-icn"] {
    filter: drop-shadow(0 0 6px rgba(255, 212, 71, 0.8));
}

/* ============================================================
   Legal Modal (footer 法的ページをモーダルで開く / v0.7.0.g)
   legal-modal.js が .is-open で表示トグル。初期は display:none で
   隠し、.is-open で flex 表示する。中身 (terms/privacy/legal/
   guidelines/contact) のスクロール + Neon 調装飾。
   ============================================================ */
.legal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 1, 8, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: legal-modal-fade-in 0.2s ease;
}
.legal-modal-overlay.is-open { display: flex; }
@keyframes legal-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
body.legal-modal-open { overflow: hidden; }

.legal-modal {
    background: linear-gradient(180deg, #1a0528, #0a0210);
    border: 1px solid var(--pink);
    border-radius: 10px;
    max-width: 820px;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow:
        0 40px 80px -20px #000,
        0 0 32px rgba(255, 62, 160, 0.4);
}
.legal-modal::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--cyan), var(--pink));
    box-shadow: 0 0 10px var(--pink);
    z-index: 2;
}
.legal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px 14px;
    border-bottom: 1px dashed rgba(255, 62, 160, 0.3);
    gap: 14px;
    flex-shrink: 0;
}
.legal-modal-title {
    font-family: 'Monoton', cursive;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    margin: 0;
}
.legal-modal-close {
    background: rgba(5, 1, 8, 0.6);
    border: 1px solid rgba(255, 62, 160, 0.35);
    color: var(--ink-dim);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    transition: all var(--transition-fast);
}
.legal-modal-close:hover {
    color: var(--pink);
    border-color: var(--pink);
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.4);
}
.legal-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px 28px;
    color: var(--ink);
    line-height: 1.7;
    font-size: 0.92rem;
}
.legal-modal-body h1,
.legal-modal-body h2,
.legal-modal-body h3 {
    font-family: 'Monoton', cursive;
    color: var(--pink);
    text-shadow: 0 0 6px var(--pink);
    letter-spacing: 0.05em;
    margin: 1.4em 0 0.6em;
}
.legal-modal-body h1:first-child,
.legal-modal-body h2:first-child,
.legal-modal-body h3:first-child {
    margin-top: 0;
}
.legal-modal-body h1 { font-size: 1.3rem; }
.legal-modal-body h2 { font-size: 1.1rem; }
.legal-modal-body h3 {
    font-size: 0.95rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    letter-spacing: 0.08em;
}
.legal-modal-body p,
.legal-modal-body li {
    color: var(--ink);
    margin: 0.5em 0;
}
.legal-modal-body ul,
.legal-modal-body ol {
    padding-left: 1.5em;
}
.legal-modal-body a {
    color: var(--cyan);
    text-shadow: 0 0 4px var(--cyan);
    text-decoration: underline;
}
.legal-modal-body a:hover { color: var(--pink); text-shadow: 0 0 4px var(--pink); }
.legal-modal-body table {
    width: 100%;
    margin: 0.8em 0;
}
.legal-modal-body code {
    background: rgba(5, 1, 8, 0.5);
    color: var(--yellow);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.88em;
}
.legal-modal-body hr {
    border: 0;
    border-top: 1px dashed rgba(255, 62, 160, 0.25);
    margin: 1.2em 0;
}
/* contact form inside modal */
.legal-modal-body form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}
.legal-modal-body form label {
    display: block;
    color: var(--cyan);
    font-family: 'Space Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 4px var(--cyan);
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .legal-modal { max-height: 94vh; }
    .legal-modal-body { padding: 18px 18px 22px; font-size: 0.88rem; }
    .legal-modal-title { font-size: 1rem; }
}

/* ============================================================
   Sidebar login form (v0.7.0.g) — 縮小版
   下の .nav-item と同等の size 感に合わせる: padding 8px 10px,
   font-size 0.78rem。ボタンのモノスペース書体もやや締める。
   ============================================================ */
#loginSection .login-title,
.sidebar .login-title {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
}
#loginSection .login-input,
.sidebar .login-input {
    padding: 6px 10px;
    font-size: 0.76rem;
    margin-bottom: 6px;
}
#loginSection .login-error,
.sidebar .login-error { font-size: 0.7rem; }
#loginSection .btn-login,
#loginSection .btn-signup,
.sidebar .btn-login,
.sidebar .btn-signup {
    padding: 7px 10px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
}
#loginSection .login-divider,
.sidebar .login-divider {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin: 4px 0 4px;
}
#loginSection .login-divider::before,
#loginSection .login-divider::after,
.sidebar .login-divider::before,
.sidebar .login-divider::after { width: 28%; }

/* Tier 2-A: 配信予告カード (index.html UPCOMING セクション) */
.upcoming-card {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
}
.upcoming-when {
    color: var(--pink, #ff3ea0);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
.upcoming-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-word;
}
.upcoming-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.upcoming-broadcaster {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: auto;
}
.upcoming-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* Tier 2-A: profile.html の「予告」リスト */
.upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.upcoming-list-item {
    padding: 12px;
    border-left: 3px solid var(--pink, #ff3ea0);
    background: rgba(255, 62, 160, 0.05);
    border-radius: 6px;
}
.upcoming-list-item .upcoming-when {
    margin-bottom: 4px;
}

/* Tier 2-C: 配信目標プログレスバー (watch.html) */
.goal-progress-box {
    margin: 12px 0 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 62, 160, 0.08), rgba(112, 38, 215, 0.08));
    border: 1px solid var(--pink, #ff3ea0);
    border-radius: 10px;
}
.goal-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.goal-progress-label {
    font-weight: 700;
    color: var(--pink, #ff3ea0);
}
.goal-progress-amount {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
}
.goal-progress-bar {
    width: 100%;
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border-light, rgba(255,255,255,0.06));
}
.goal-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff3ea0, #7026d7);
    transition: width 600ms ease-out;
    box-shadow: 0 0 12px rgba(255, 62, 160, 0.5);
}
.goal-progress-fill.complete {
    background: linear-gradient(90deg, #ffd54a, #ff8c00);
    box-shadow: 0 0 18px rgba(255, 213, 74, 0.7);
}
.goal-progress-footer {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: right;
}
.goal-progress-footer #goalProgressPercent {
    color: var(--pink, #ff3ea0);
    font-weight: 700;
}

/* Tier 3-F1: サポートチケット */
.support-tickets-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ticket-row {
    background: var(--bg-input, #2a2a2a);
    border: 1px solid var(--border-light, rgba(255,255,255,0.06));
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 150ms;
}
.ticket-row:hover {
    background: var(--bg-hover, #333);
}
.ticket-row-subject {
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}
.ticket-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}
.ticket-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted, #aaa);
}
.ticket-status.open { background: rgba(244, 67, 54, 0.15); color: #f44336; border: 1px solid #f44336; }
.ticket-status.in_progress { background: rgba(255, 152, 0, 0.15); color: #ff9800; border: 1px solid #ff9800; }
.ticket-status.resolved { background: rgba(76, 175, 80, 0.15); color: #4caf50; border: 1px solid #4caf50; }
.ticket-status.closed { background: rgba(120, 120, 120, 0.15); color: #888; border: 1px solid #888; }

.ticket-meta {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06));
    display: flex;
    align-items: center;
    gap: 10px;
}
.ticket-thread {
    margin-bottom: 16px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ticket-msg {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-input, #2a2a2a);
    border-left: 3px solid var(--text-muted, #888);
}
.ticket-msg.from-admin {
    border-left-color: var(--pink, #ff3ea0);
    background: rgba(255, 62, 160, 0.05);
}
.ticket-msg.from-viewer {
    border-left-color: #2196f3;
    background: rgba(33, 150, 243, 0.05);
}
.ticket-msg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}
.ticket-msg-body {
    color: var(--text-primary, #fff);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.support-ticket-body {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}
.support-ticket-closed {
    padding: 12px;
    background: rgba(120, 120, 120, 0.1);
    border: 1px solid #888;
    color: var(--text-muted, #aaa);
    border-radius: 6px;
    text-align: center;
}

/* Tier 3-B: 違反通報リストの処分表示 */
.mod-decision-line {
    color: var(--text-muted, #888);
    font-size: 0.85rem;
    margin-top: 4px;
}
.mod-decision-line strong {
    color: var(--text-primary, #fff);
}