/* =========================================================
   MLBB Unity Tools — Smooth Dark Blue UI
   Black-blue theme, refined motion, clean hierarchy
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Deep black-blue palette */
    --bg-primary: #03060c;
    --bg-secondary: #070c16;
    --bg-surface: #0b1220;
    --bg-elevated: #101a2c;
    --bg-hover: #152238;

    --border-color: #1c2d45;
    --border-soft: #15253a;
    --border-strong: #2a4060;

    --text-primary: #e8f0fa;
    --text-secondary: #8fa3bd;
    --text-muted: #5c7190;

    --accent: #3d9ef0;
    --accent-bright: #5cb0ff;
    --accent-dim: #1a4a7a;
    --accent-glow: rgba(61, 158, 240, 0.18);
    --accent-soft: rgba(61, 158, 240, 0.08);

    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;

    --shadow: 0 8px 32px rgba(0, 4, 16, 0.55);
    --shadow-lg: 0 16px 48px rgba(0, 4, 20, 0.6);
    --shadow-glow: 0 0 24px rgba(61, 158, 240, 0.12);

    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.15, 0.64, 1);

    /* sys aliases (used by later rules) */
    --sys-bg: var(--bg-primary);
    --sys-panel: var(--bg-secondary);
    --sys-panel-2: var(--bg-surface);
    --sys-panel-3: var(--bg-elevated);
    --sys-line: var(--border-color);
    --sys-line-soft: var(--border-soft);
    --sys-text: var(--text-primary);
    --sys-muted: var(--text-secondary);
    --sys-dim: var(--text-muted);
    --sys-accent: var(--accent);
    --sys-accent-2: var(--accent-bright);
    --sys-ok: var(--success);
    --sys-warn: var(--warning);
    --sys-danger: var(--danger);
    --sys-radius: var(--radius);
    --sys-shadow: var(--shadow);
    --sys-mono: var(--mono);
}

html {
    background: var(--bg-primary);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(1000px 600px at 92% -10%, rgba(40, 100, 200, 0.14), transparent 55%),
        radial-gradient(700px 450px at 5% 15%, rgba(30, 90, 180, 0.08), transparent 50%),
        radial-gradient(500px 400px at 50% 110%, rgba(20, 60, 140, 0.06), transparent 45%),
        var(--bg-primary);
}

/* subtle grid — restrained */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, black 10%, transparent 70%);
    z-index: 0;
}

/* scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #243a55 transparent;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #243a55;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #355578;
}

/* ---------- layout ---------- */
.container {
    max-width: 1480px;
    width: 100%;
    padding: 24px 28px 48px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---------- header ---------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 64px;
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: rgba(10, 16, 28, 0.82);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-left-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.header-left h1 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.header-left h1 span {
    color: var(--accent-bright);
}
.header-left p {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-secondary);
    margin: 3px 0 0;
    letter-spacing: 0.02em;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- hamburger menu button (three strips) ---------- */
.menu-strip-btn {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
}
.menu-strip-btn:hover {
    border-color: rgba(61, 158, 240, 0.45);
    background: var(--bg-hover);
    box-shadow: 0 0 16px rgba(61, 158, 240, 0.12);
}
.menu-strip-btn:active {
    transform: scale(0.94);
}
.menu-strip-btn span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--text-secondary);
    transition: transform 0.28s var(--ease-out), opacity 0.2s ease, background 0.2s ease, width 0.2s ease;
    transform-origin: center;
}
.menu-strip-btn:hover span {
    background: var(--accent-bright);
}
.menu-strip-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-strip-btn.is-open span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.menu-strip-btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.menu-strip-btn.is-open {
    border-color: rgba(61, 158, 240, 0.4);
    background: var(--bg-hover);
}
.menu-strip-btn.is-open span {
    background: var(--accent-bright);
}

.login-user-badge {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
}

.sys-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 6px 12px 6px 10px;
    font: 600 10px var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--success);
}
.sys-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: sysPulse 2s ease-out infinite;
}
@keyframes sysPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ---------- menu tabs ---------- */
.menu-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    width: fit-content;
    max-width: 100%;
}

.menu-tab {
    padding: 10px 16px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    cursor: pointer;
    font: 600 11px var(--mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary) !important;
    transition: background 0.2s var(--ease-soft), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}

.menu-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-surface) !important;
}

.menu-tab:active:not(.active) {
    transform: scale(0.98);
}

.menu-tab.active {
    background: linear-gradient(180deg, #152a42, #0e1c30) !important;
    border-color: #2a4a6a !important;
    color: var(--accent-bright) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.menu-tab.active::before {
    content: "● ";
    font-size: 8px;
    vertical-align: 1px;
    opacity: 0.9;
}

/* ---------- panels ---------- */
.menu-panel {
    display: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(12, 18, 30, 0.96), rgba(8, 13, 22, 0.98));
    box-shadow: var(--shadow);
    padding: 22px;
    transition: opacity 0.28s var(--ease-soft), transform 0.28s var(--ease-out);
}

.menu-panel.active {
    display: block;
    animation: panelIn 0.35s var(--ease-out) both;
}

.menu-panel::before {
    content: "SYSTEM / MODULE";
    display: block;
    margin: -4px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-muted);
    font: 9px var(--mono);
    letter-spacing: 0.14em;
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- buttons ---------- */
.btn {
    min-height: 36px;
    padding: 8px 14px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font: 600 11px var(--mono) !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out), box-shadow 0.2s ease !important;
    box-shadow: none !important;
}

.btn:hover:not(:disabled) {
    background: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 8, 24, 0.3) !important;
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: none !important;
}

.btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(160deg, #154870, #0f3558) !important;
    border-color: #2a6a9e !important;
    color: var(--accent-bright) !important;
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg, #1a5a88, #144568) !important;
    border-color: #3d8ac8 !important;
    box-shadow: 0 4px 18px rgba(50, 130, 210, 0.2) !important;
}

.btn-success {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
    color: var(--success) !important;
}
.btn-success:hover:not(:disabled) {
    background: rgba(52, 211, 153, 0.22) !important;
    border-color: var(--success) !important;
}

.btn-warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: var(--warning) !important;
}
.btn-warning:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.2) !important;
}

.btn-danger {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: var(--danger) !important;
}
.btn-danger:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.2) !important;
}

.btn-sm {
    min-height: 28px;
    padding: 4px 10px !important;
    font-size: 10px !important;
}

.btn-toggle {
    background: var(--bg-secondary) !important;
}
.btn-toggle:hover:not(:disabled) {
    border-color: var(--accent) !important;
    color: var(--accent-bright) !important;
}

.btn-music {
    min-width: 90px;
}
.btn-music.playing {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    color: var(--success) !important;
}
.btn-music.playing:hover:not(:disabled) {
    background: rgba(52, 211, 153, 0.25) !important;
    color: #fff !important;
}

.btn-apply {
    background: var(--accent-dim) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.btn-apply:hover {
    background: var(--accent) !important;
    color: #041018 !important;
}

/* ---------- upload zone ---------- */
.upload-zone {
    position: relative;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    padding: 28px 20px;
    text-align: center;
    margin-bottom: 16px;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.upload-zone.dragover {
    border-color: var(--accent) !important;
    border-style: solid;
    background: var(--accent-soft) !important;
    box-shadow: 0 0 0 3px var(--accent-glow), 0 8px 28px rgba(0, 10, 30, 0.25) !important;
}

.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* Tombol di dalam zona upload harus di atas input file */
.upload-zone .action-row,
.upload-zone .btn,
.upload-zone label.btn {
    position: relative;
    z-index: 2;
}

.upload-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.9;
    transition: transform 0.3s var(--ease-out);
}
.upload-zone:hover .upload-icon {
    transform: scale(1.06);
}

.upload-zone .file-name {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
}
.upload-zone .file-name.has-file {
    color: var(--text-primary);
    font-weight: 500;
}
.upload-zone .file-size {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.upload-zone .action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

/* ---------- progress ---------- */
.progress-wrap {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    height: 22px;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    display: none;
    position: relative;
}
.progress-wrap.active {
    display: block;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-bright));
    border-radius: var(--radius-sm);
    transition: width 0.3s var(--ease-soft);
    box-shadow: 0 0 12px var(--accent-glow);
}
.progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- stats ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--border-color);
}
.stat-item .label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    display: block;
    margin-bottom: 3px;
}
.stat-item .value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    font-family: var(--mono);
}

/* ---------- hero picker ---------- */
.hero-picker-wrap {
    margin: 14px 0 16px;
    padding: 16px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
}
.hero-picker-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}
.hero-picker-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-search,
.hero-select {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-search {
    flex: 1;
    min-width: 140px;
}
.hero-search::placeholder {
    color: var(--text-muted);
}
.hero-search:focus,
.hero-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.hero-picker-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.global-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.global-toggle-row .label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ---------- hero cards ---------- */
.hero-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s var(--ease-out);
}
.hero-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 16px rgba(0, 8, 24, 0.25);
}
.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--bg-elevated);
}
.hero-header .hero-name {
    font-weight: 600;
    font-size: 13px;
}
.hero-header .badge {
    font-size: 10px;
    font-family: var(--mono);
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-bright);
    border: 1px solid rgba(61, 158, 240, 0.25);
}
.hero-body {
    display: none;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-soft);
}
.hero-body.open {
    display: block;
    animation: panelIn 0.25s var(--ease-out) both;
}
.hero-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.hero-body th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-soft);
}
.hero-body td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-soft);
}
.hero-body tr:hover td {
    background: var(--accent-soft);
}
.hero-empty-hint {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* ---------- login ---------- */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s var(--ease-soft), visibility 0.4s var(--ease-soft);
}
.login-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-card {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(165deg, rgba(14, 22, 38, 0.95), rgba(8, 14, 26, 0.98));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 28px 24px;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(40, 100, 200, 0.08);
    animation: cardIn 0.55s var(--ease-out) both;
    transition: transform 0.28s var(--ease-soft), box-shadow 0.28s ease;
}
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-brand {
    text-align: center;
    margin-bottom: 22px;
}
.login-icon {
    font-size: 32px;
    margin-bottom: 6px;
    display: inline-block;
    transition: transform 0.35s var(--ease-out);
}
.login-card:hover .login-icon {
    transform: scale(1.08);
}
.login-brand h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.login-brand p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.login-field {
    margin-bottom: 14px;
}
.login-field label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    letter-spacing: 0.03em;
}
.login-field input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.login-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-secondary);
}

.login-error {
    font-size: 12px;
    color: var(--danger);
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    margin-bottom: 12px;
}

.login-btn {
    width: 100%;
    margin-top: 6px;
    padding: 11px !important;
    font-size: 13px !important;
}

.login-note {
    margin-top: 18px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}
.login-note code {
    font-family: var(--mono);
    color: var(--text-secondary);
}

.login-spinner {
    display: none;
    text-align: center;
    margin-top: 14px;
}
.login-spinner.active {
    display: block;
}
.login-spinner .spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.login-spinner.success .spinner {
    animation: none;
    border-color: var(--success);
    border-top-color: var(--success);
    position: relative;
}
.login-spinner.success .spinner::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 14px;
}
.login-spinner p {
    font-size: 12px;
    color: var(--text-secondary);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* secure pill */
.login-secure-pill {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border-color);
    background: rgba(7, 12, 22, 0.9);
    border-radius: 20px;
    padding: 6px 12px 6px 10px;
    font: 600 10px var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--success);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    user-select: none;
    backdrop-filter: blur(8px);
}
.login-secure-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: sysPulse 2s ease-out infinite;
}
.login-overlay.hidden .login-secure-pill {
    display: none;
}

/* ---------- side menu ---------- */
.side-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 4, 12, 0.55);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-soft), visibility 0.3s var(--ease-soft);
    backdrop-filter: blur(4px);
}
.side-menu-backdrop:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.side-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 92vw);
    height: 100%;
    height: 100dvh;
    background: linear-gradient(180deg, #0c1424, #080e18);
    border-left: 1px solid var(--border-color);
    z-index: 9001;
    transform: translateX(100%);
    transition: transform 0.34s var(--ease-out);
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
    padding: 0 0 28px;
    display: flex;
    flex-direction: column;
}
.side-menu-panel[aria-hidden="false"],
.side-menu-panel.is-open {
    transform: translateX(0);
}

.side-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: rgba(12, 20, 36, 0.95);
    backdrop-filter: blur(10px);
    z-index: 2;
}
.side-menu-title {
    font: 600 13px var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.side-menu-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.side-menu-close:hover {
    border-color: var(--danger);
    color: var(--danger);
    transform: rotate(90deg);
}
.side-menu-close:active {
    transform: rotate(90deg) scale(0.94);
}

.side-menu-section {
    padding: 16px 18px 8px;
}
.side-menu-section-label {
    font: 600 10px var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.dev-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    margin-bottom: 12px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease, background 0.22s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
a.dev-profile-card {
    text-decoration: none;
    color: inherit;
}
.dev-profile-card:hover {
    border-color: rgba(61, 158, 240, 0.45);
    box-shadow: 0 4px 20px rgba(0, 8, 24, 0.35), 0 0 0 1px rgba(61, 158, 240, 0.12);
    background: var(--bg-hover);
    transform: translateY(-1px);
}
.dev-profile-card:active {
    transform: translateY(0) scale(0.99);
}
.dev-profile-card .dev-profile-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 16px;
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dev-profile-card:hover .dev-profile-arrow {
    opacity: 1;
    color: var(--accent-bright);
    transform: translateX(3px);
}
.dev-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.dev-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dev-name {
    font-weight: 600;
    font-size: 14px;
}
.dev-role {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.dev-info-list {
    list-style: none;
}
.dev-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    margin-bottom: 6px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.dev-info-list li:hover {
    border-color: rgba(61, 158, 240, 0.2);
    background: var(--bg-surface);
}
.dev-info-key {
    font: 600 10px var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dev-info-val {
    font-size: 12px;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}
.dev-info-val.is-expired { color: var(--danger); }
.dev-info-val.is-ok { color: var(--success); }

body.side-menu-open {
    overflow: hidden;
}

/* ---------- lang switch ---------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
}
.lang-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 7px;
    font: 600 11px var(--mono);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease;
}
.lang-btn:hover {
    color: var(--accent-bright);
}
.lang-btn.lang-active {
    background: var(--accent-soft);
    color: var(--accent-bright);
}
.lang-btn:active {
    transform: scale(0.97);
}
.lang-switch-menu {
    width: 100%;
    justify-content: stretch;
}
.lang-switch-menu .lang-btn {
    flex: 1;
    text-align: center;
}
#loginLangSwitch {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}

/* ---------- music float ---------- */
.music-float {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}
.music-float > * {
    pointer-events: auto;
}
.music-fab {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: linear-gradient(145deg, #152238, #0c1420);
    color: var(--text-primary);
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    user-select: none;
    outline: none;
}
.music-fab:hover {
    transform: scale(1.07);
    border-color: var(--accent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
}
.music-fab:active {
    transform: scale(0.95);
}
.music-fab.playing {
    border-color: var(--success);
    animation: musicPulse 1.8s ease-in-out infinite;
}
@keyframes musicPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(52, 211, 153, 0.3); }
    50% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(52, 211, 153, 0); }
}

/* ---------- toast ---------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 11000;
    padding: 12px 20px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
    color: var(--text-primary);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-out), visibility 0.3s;
    max-width: 90vw;
}
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

/* ---------- file list ---------- */
.file-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    margin: 12px 0;
}
.file-list .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
    transition: background 0.15s ease;
}
.file-list .file-item:last-child {
    border-bottom: none;
}
.file-list .file-item:hover {
    background: var(--accent-soft);
}
.file-list .file-item .fname {
    font-family: var(--mono);
    color: var(--text-primary);
}
.file-list .file-item .fsize {
    color: var(--text-muted);
    font-size: 11px;
}
.file-list .file-item .fedit {
    margin-left: 8px;
}

/* ---------- admin ---------- */
.admin-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    padding: 20px;
    margin-bottom: 16px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.admin-card h2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
#adminRoleField {
    grid-column: 1 / -1;
}
.admin-role-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.admin-role-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-role-option:hover {
    border-color: var(--accent-bright);
}
.admin-role-option input {
    margin: 0;
    accent-color: var(--accent-bright);
}
.admin-role-option:has(input:checked) {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
}
.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-top: 12px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}
.admin-table th {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-table tbody tr {
    transition: background 0.15s ease;
}
.admin-table tbody tr:hover {
    background: var(--accent-soft);
}
.admin-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--mono);
}
.admin-badge.managed {
    background: var(--accent-soft);
    color: var(--accent-bright);
}
.admin-badge.hardcoded {
    background: rgba(251, 191, 36, 0.12);
    color: var(--warning);
}
.admin-badge.admin {
    background: rgba(52, 211, 153, 0.12);
    color: var(--success);
}
.admin-hint,
.admin-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: 10px;
}
.admin-note ul {
    margin: 8px 0 0 18px;
}
.admin-note code {
    font-family: var(--mono);
    color: var(--accent-bright);
}
.admin-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.admin-section {
    margin-bottom: 20px;
}
.admin-card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.admin-card-header-row h2 {
    margin-bottom: 0;
}
.pwd-mask {
    font-family: var(--mono);
    letter-spacing: 0.1em;
}

/* ---------- edit inputs ---------- */
.edit-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--mono);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.edit-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ---------- footer ---------- */
.footer {
    margin-top: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    letter-spacing: 0.03em;
}

/* ---------- tutorial modal ---------- */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(2, 5, 12, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    pointer-events: auto;
}
.tutorial-overlay.show {
    opacity: 1;
    visibility: visible;
}
.tutorial-modal {
    position: relative;
    z-index: 12001;
    background: linear-gradient(165deg, rgba(14, 22, 38, 0.98), rgba(8, 14, 26, 0.99));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    max-width: 440px;
    width: 100%;
    max-height: min(90vh, 640px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 4, 20, 0.6));
    pointer-events: auto;
}
.tutorial-header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--border-soft, var(--border-color));
    text-align: center;
}
.tutorial-icon {
    font-size: 28px;
    line-height: 1;
}
.tutorial-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 6px 0 2px;
}
.tutorial-header p {
    font-size: 12px;
    color: var(--text-secondary);
}
.tutorial-steps {
    padding: 14px 20px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tutorial-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.step-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-content strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.step-content span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.step-content span b,
.step-content b {
    color: var(--text-primary);
    font-weight: 600;
}
.tutorial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-soft, var(--border-color));
}
.tutorial-dont-show {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.tutorial-dont-show input {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}
#tutorialCloseBtn {
    min-width: 110px;
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
    cursor: pointer !important;
}

/* ---------- main app entrance ---------- */
#mainApp {
    animation: appIn 0.42s var(--ease-out) both;
}
@keyframes appIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- focus a11y ---------- */
:focus-visible {
    outline: 2px solid rgba(61, 158, 240, 0.55);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .login-card,
    .menu-panel.active,
    #mainApp {
        animation: none !important;
    }
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
    .container {
        padding: 16px 14px 36px;
    }
    .header {
        padding: 12px 14px;
    }
    .menu-tabs {
        width: 100%;
    }
    .menu-tab {
        flex: 1;
        text-align: center;
        padding: 10px 8px !important;
        font-size: 10px !important;
    }
    .menu-panel {
        padding: 16px;
    }
    .login-secure-pill {
        top: 12px;
        right: 12px;
        padding: 5px 10px 5px 8px;
        font-size: 9px;
    }
}

/* misc leftover from original structure */
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- support badges (side menu footer) ---------- */
.side-menu-support {
    margin-top: auto !important;
    padding: 16px 18px 8px !important;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(180deg, transparent, rgba(8, 14, 26, 0.9));
}


.support-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-surface);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.18s var(--ease-out);
}

.support-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 8, 24, 0.28);
}

.support-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.support-logo svg {
    display: block;
}

.support-logo-grok {
    background: linear-gradient(145deg, #1a2838, #0e1828);
    border-color: rgba(61, 158, 240, 0.35);
    color: #5cb0ff;
}

.support-logo-gemini {
    background: linear-gradient(145deg, #1e1a32, #141028);
    border-color: rgba(168, 130, 255, 0.35);
    color: #c4a8ff;
}

.support-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.support-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.support-sub {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.support-grok:hover {
    border-color: rgba(61, 158, 240, 0.4);
    background: rgba(61, 158, 240, 0.06);
}

.support-gemini:hover {
    border-color: rgba(168, 130, 255, 0.4);
    background: rgba(168, 130, 255, 0.06);
}

.support-note {
    margin-top: 10px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.03em;
    opacity: 0.85;
}

/* ---------- Maintenance banner (login) ---------- */
.maintenance-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.maintenance-banner-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.maintenance-banner-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.45;
}
.maintenance-banner-body strong {
    font-size: 13px;
    color: #fcd34d;
}

/* ---------- Admin: Mode Update Website ---------- */
.admin-maintenance-card {
    border: 1px solid rgba(251, 191, 36, 0.25);
}
.admin-maint-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
}
.admin-maint-status.is-on {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}
.admin-maint-toggle-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.btn-maint-off,
.btn-maint-on {
    min-width: 120px;
}
.btn-maint-off.is-active {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
    color: #4ade80;
}
.btn-maint-on.is-active {
    background: rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fbbf24;
}

/* IP address in admin table */
.admin-ip {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent-bright);
    background: rgba(61, 158, 240, 0.08);
    border: 1px solid rgba(61, 158, 240, 0.2);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* =========================================================
   Login LAMP theme — SCOPED under .login-overlay only
   (admin panel & main app keep original dark-blue styles)
   ========================================================= */
.login-overlay {
    --lamp-on: 0;
    --opening: hsl(270, calc((10 + var(--lamp-on) * 70) * 1%), calc((18 + var(--lamp-on) * 68) * 1%));
    --base-top: hsl(270, calc(var(--lamp-on) * 25%), calc((30 + var(--lamp-on) * 38) * 1%));
    --base-side: hsl(270, calc(var(--lamp-on) * 25%), calc((15 + var(--lamp-on) * 35) * 1%));
    --post: hsl(270, calc(var(--lamp-on) * 20%), calc((18 + var(--lamp-on) * 35) * 1%));
    --shade-l: hsl(270, calc(var(--lamp-on) * 35%), calc((28 + var(--lamp-on) * 55) * 1%));
    --shade-m: hsl(270, calc(var(--lamp-on) * 35%), calc((16 + var(--lamp-on) * 32) * 1%));
    --shade-d: hsl(270, calc(var(--lamp-on) * 35%), calc((9 + var(--lamp-on) * 18) * 1%));
    --blend-a: hsla(270, calc(var(--lamp-on) * 30%), calc((45 + var(--lamp-on) * 50) * 1%), 0.85);
    --blend-b: hsla(270, calc(var(--lamp-on) * 30%), calc((18 + var(--lamp-on) * 28) * 1%), 0.25);
    --blend-c: hsla(270, calc(var(--lamp-on) * 30%), calc((18 + var(--lamp-on) * 28) * 1%), 0.50);
    --glow-a: hsla(270, calc(var(--lamp-on) * 40%), calc((40 + var(--lamp-on) * 55) * 1%), 0.85);
    --cord-l: calc((38 + var(--lamp-on) * 52) * 1%);
    --lamp-ease: 0.88s cubic-bezier(0.22, 1, 0.36, 1);

    background: transparent !important;
    flex-direction: column;
    overflow: hidden;
}
.login-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 65% at 55% 50%,
        rgba(100, 20, 180, 0.38) 0%,
        rgba(40, 5, 80, 0.12) 52%,
        transparent 75%);
    opacity: var(--lamp-on);
    transition: opacity 0.9s ease;
    pointer-events: none;
    z-index: 0;
}
.login-overlay .login-scene {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
}
.login-overlay .lamp {
    height: 42vmin;
    min-height: 260px;
    max-height: 400px;
    overflow: visible !important;
    flex-shrink: 0;
    z-index: 2;
}
.login-overlay .lamp-cord {
    stroke: hsl(270, 0%, var(--cord-l));
    transition: stroke 0.1s;
}
.login-overlay .lamp-light { opacity: var(--lamp-on); }
.login-overlay .fill-opening { fill: var(--opening); }
.login-overlay .fill-base-top { fill: var(--base-top); }
.login-overlay .fill-base-side { fill: var(--base-side); }
.login-overlay .fill-post { fill: var(--post); }
.login-overlay .fill-shade { fill: var(--shade-d); }
.login-overlay .lamp-hit { cursor: grab; fill: transparent; }
.login-overlay .lamp-hit:active { cursor: grabbing; }

/* Card starts hidden until lamp on */
.login-overlay .login-card {
    width: 100%;
    max-width: 340px;
    padding: 28px 26px 22px;
    background: rgba(26, 4, 50, 0.72) !important;
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    border-radius: 22px !important;
    border: 1px solid rgba(140, 50, 200, 0.28) !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.72) !important;
    opacity: 0;
    transform: scale(0.9) translateX(12px);
    transition:
        opacity var(--lamp-ease),
        transform var(--lamp-ease),
        border-color var(--lamp-ease),
        box-shadow var(--lamp-ease);
    pointer-events: none;
    position: relative;
    overflow: hidden;
    z-index: 3;
    animation: none !important;
}
.login-overlay .login-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient(138deg, rgba(255, 255, 255, 0.05) 0%, transparent 55%);
    pointer-events: none;
}
.login-overlay .login-card.is-active {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    border-color: rgba(170, 65, 255, 0.38) !important;
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.65),
        0 0 44px 3px rgba(118, 30, 192, 0.16),
        0 0 80px 12px rgba(55, 7, 110, 0.10) !important;
}

.login-overlay .login-brand { text-align: center; margin-bottom: 16px; }
.login-overlay .login-icon { font-size: 28px; margin-bottom: 4px; }
.login-overlay .login-brand h1 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(130deg, #e0a8ff, #c678f5 55%, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.login-overlay .login-brand p { font-size: 0.78rem; color: #a07ec0; margin-top: 4px; }

.login-overlay .login-field { margin-bottom: 12px; }
.login-overlay .login-field label {
    display: block;
    font-size: 0.64rem;
    font-weight: 500;
    color: #a07ec0;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.login-overlay .field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-overlay .field-icon {
    position: absolute;
    left: 11px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}
.login-overlay .field-wrap input,
.login-overlay .login-field input {
    width: 100%;
    padding: 10px 38px 10px 34px;
    background: rgba(255, 255, 255, 0.043) !important;
    border: 1px solid rgba(180, 100, 255, 0.18) !important;
    border-radius: 10px;
    color: #f0e4ff !important;
    font-family: var(--font);
    font-size: 0.88rem;
    outline: none;
    box-sizing: border-box;
}
.login-overlay .field-wrap input::placeholder,
.login-overlay .login-field input::placeholder {
    color: rgba(160, 126, 192, 0.35);
}
.login-overlay .field-wrap input:focus,
.login-overlay .login-field input:focus {
    border-color: #bf5af2 !important;
    background: rgba(140, 47, 201, 0.07) !important;
    box-shadow: 0 0 0 3px rgba(140, 47, 201, 0.12);
}
.login-overlay .field-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    opacity: 0.75;
    z-index: 1;
}
.login-overlay .field-toggle:hover { opacity: 1; }

.login-overlay .login-btn {
    width: 100%;
    margin-top: 4px;
    padding: 11px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #3d0070, #8b2fc9) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(85, 13, 165, 0.42);
}
.login-overlay .login-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(85, 13, 165, 0.55);
}
.login-overlay .login-note {
    margin-top: 14px;
    font-size: 11px;
    color: #a07ec0;
    text-align: center;
}
.login-overlay .login-error {
    font-size: 12px;
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 12px;
}
.login-overlay .lang-switch {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 14px;
}
.login-overlay .lang-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(180, 100, 255, 0.2);
    color: #a07ec0;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
}
.login-overlay .lang-btn:hover,
.login-overlay .lang-btn.active {
    border-color: #bf5af2;
    color: #e0a8ff;
}
.login-overlay .login-lamp-hint {
    position: relative;
    z-index: 10;
    margin-top: 18px;
    font-size: 0.72rem;
    color: #a07ec0;
    letter-spacing: 0.04em;
    text-align: center;
    opacity: 0.85;
    transition: opacity 0.4s ease;
}
.login-overlay .login-lamp-hint.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.login-overlay .login-secure-pill {
    border-color: rgba(140, 50, 200, 0.35);
    background: rgba(7, 0, 13, 0.9);
}

@media (max-width: 720px) {
    .login-overlay .login-scene {
        gap: 28px;
        flex-direction: column;
    }
    .login-overlay .lamp {
        height: 32vmin;
        min-height: 180px;
        max-height: 240px;
    }
    .login-overlay .login-card { max-width: 300px; }
}

/* ---------- Global animated background (mp4 video) — login + app ---------- */
.app-bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    background: var(--bg-primary);
}

html, body {
    background: var(--bg-primary);
}

body::before {
    opacity: 0.02;
}

/* Dim overlay so UI / login stay readable over the video */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(3, 6, 12, 0.32), rgba(3, 6, 12, 0.68) 75%),
        rgba(3, 6, 12, 0.25);
}

/* Smooth entrance for main / admin panels after login */
#mainApp.app-enter,
#adminApp.app-enter {
    animation: appPanelEnter 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes appPanelEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-bg-video {
        opacity: 0.45;
    }
    #mainApp.app-enter,
    #adminApp.app-enter {
        animation: none;
    }
}


/* =========================================================
   UI POLISH — presentation-only refinement
   Keeps existing IDs, classes, events and state logic intact.
   ========================================================= */

:root {
    --ui-fast: 140ms;
    --ui-hover: 180ms;
    --ui-panel: 280ms;
    --ui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ui-ease-state: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive controls: crisp, deliberate feedback */
button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
label.btn,
a.dev-profile-card {
    -webkit-tap-highlight-color: transparent;
}

button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    touch-action: manipulation;
}

.btn,
.menu-tab,
.lang-btn,
.side-menu-close,
.music-fab,
.profile-nav-back,
.admin-role-option,
.hero-header,
.upload-zone label.btn {
    will-change: transform;
}

/* Keep the press state immediate without adding bounce. */
.btn:active:not(:disabled),
.menu-tab:active,
.lang-btn:active,
.side-menu-close:active,
.music-fab:active,
.profile-nav-back:active,
.admin-role-option:active,
.upload-zone label.btn:active {
    transition-duration: var(--ui-fast) !important;
}

/* Tabs: quieter hover, stronger active hierarchy. */
.menu-tabs {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.menu-tab {
    position: relative;
    overflow: hidden;
}

.menu-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: center;
    transition: opacity var(--ui-hover) var(--ui-ease-state),
                transform var(--ui-panel) var(--ui-ease);
}

.menu-tab.active::after {
    opacity: 0.9;
    transform: scaleX(1);
}

.menu-tab.active::before {
    color: var(--accent);
    transition: opacity var(--ui-hover) ease;
}

/* Panel entry stays subtle: no blur/filter on content transitions. */
.menu-panel.active {
    animation: panelInPolished var(--ui-panel) var(--ui-ease) both;
}

@keyframes panelInPolished {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons: slightly tighter elevation and a tactile release. */
.btn {
    transition:
        background var(--ui-hover) var(--ui-ease-state),
        border-color var(--ui-hover) var(--ui-ease-state),
        color var(--ui-hover) var(--ui-ease-state),
        transform var(--ui-fast) var(--ui-ease),
        box-shadow var(--ui-hover) var(--ui-ease-state) !important;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}

/* Form controls: shared focus language without changing validation behavior. */
.hero-search,
.hero-select,
.edit-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
    transition:
        border-color var(--ui-hover) var(--ui-ease-state),
        background-color var(--ui-hover) var(--ui-ease-state),
        box-shadow var(--ui-hover) var(--ui-ease-state),
        transform var(--ui-fast) var(--ui-ease) !important;
}

.hero-search:hover,
.hero-select:hover,
.edit-input:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: var(--border-strong);
}

.hero-search:focus,
.hero-select:focus,
.edit-input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    background-color: var(--bg-surface);
}

/* Clickable content gets a restrained lift; no layout movement. */
.hero-card {
    transition:
        border-color var(--ui-hover) var(--ui-ease-state),
        box-shadow var(--ui-hover) var(--ui-ease-state),
        transform var(--ui-fast) var(--ui-ease) !important;
}

.hero-card:hover {
    transform: translateY(-1px);
}

.hero-header {
    transition:
        background var(--ui-hover) var(--ui-ease-state),
        color var(--ui-hover) var(--ui-ease-state);
}

.hero-header:active {
    transform: scale(0.995);
}

/* Upload area responds to hover/focus without competing with drag state. */
.upload-zone {
    transition:
        border-color var(--ui-hover) var(--ui-ease-state),
        background var(--ui-hover) var(--ui-ease-state),
        box-shadow var(--ui-hover) var(--ui-ease-state),
        transform var(--ui-fast) var(--ui-ease) !important;
}

.upload-zone:hover {
    border-color: var(--border-strong);
}

/* Side menu: faster backdrop, controlled panel motion, no heavy effects. */
.side-menu-backdrop {
    transition: opacity 240ms var(--ui-ease-state), visibility 240ms var(--ui-ease-state);
}

.side-menu-panel {
    transition: transform 280ms var(--ui-ease);
}

.side-menu-close {
    transition:
        border-color var(--ui-hover) var(--ui-ease-state),
        color var(--ui-hover) var(--ui-ease-state),
        background var(--ui-hover) var(--ui-ease-state),
        transform var(--ui-fast) var(--ui-ease) !important;
}

.side-menu-close:hover {
    transform: rotate(8deg);
}

.side-menu-close:active {
    transform: rotate(0deg) scale(0.94);
}

.dev-profile-card {
    transition:
        border-color var(--ui-hover) var(--ui-ease-state),
        box-shadow var(--ui-hover) var(--ui-ease-state),
        transform var(--ui-fast) var(--ui-ease),
        background var(--ui-hover) var(--ui-ease-state) !important;
}

.dev-profile-card:active {
    transform: scale(0.985);
}

/* Music control remains expressive, but the active pulse is less dominant. */
.music-fab {
    transition:
        transform var(--ui-fast) var(--ui-ease),
        box-shadow var(--ui-hover) var(--ui-ease-state),
        border-color var(--ui-hover) var(--ui-ease-state),
        background var(--ui-hover) var(--ui-ease-state) !important;
}

.music-fab:hover {
    transform: scale(1.04);
}

.music-fab:active {
    transform: scale(0.96);
}

/* Focus remains visible and consistent across keyboard interaction. */
.btn:focus-visible,
.menu-tab:focus-visible,
.lang-btn:focus-visible,
.side-menu-close:focus-visible,
.music-fab:focus-visible,
.profile-nav-back:focus-visible,
.admin-role-option:focus-within,
.hero-header:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(92, 176, 255, 0.62);
    outline-offset: 2px;
}

/* Avoid accidental text selection on controls while preserving form editing. */
.btn,
.menu-tab,
.lang-btn,
.side-menu-close,
.music-fab,
.profile-nav-back,
.admin-role-option,
.hero-header {
    user-select: none;
}

/* Responsive touch targets: preserve existing layout while making taps comfortable. */
@media (max-width: 640px) {
    .btn {
        min-height: 40px;
    }

    .menu-tab {
        min-height: 40px;
    }

    .side-menu-close {
        width: 38px;
        height: 38px;
    }

    .music-fab {
        width: 52px;
        height: 52px;
    }
}

/* Motion preference remains authoritative. */
@media (prefers-reduced-motion: reduce) {
    .menu-panel.active {
        animation: none !important;
    }

    .menu-tab::after {
        transition: none !important;
    }

    .btn,
    .menu-tab,
    .lang-btn,
    .side-menu-close,
    .music-fab,
    .profile-nav-back,
    .admin-role-option,
    .hero-header,
    .hero-card,
    .upload-zone,
    .side-menu-backdrop,
    .side-menu-panel,
    .dev-profile-card,
    .hero-search,
    .hero-select,
    .edit-input,
    input,
    textarea,
    select {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   VISUAL REFINEMENT 2026 — presentation only
   Dark utility-product language inspired by compact mobile apps.
   Existing IDs, event hooks and component structure are untouched.
   ========================================================= */
:root {
    --bg-primary: #05080d;
    --bg-secondary: #0a1018;
    --bg-surface: #0e1621;
    --bg-elevated: #131d2a;
    --bg-hover: #182535;
    --border-color: #1c2b3d;
    --border-soft: #142235;
    --border-strong: #2b4059;
    --text-primary: #edf3f8;
    --text-secondary: #9aaabd;
    --text-muted: #63758b;
    --accent: #6fa9d8;
    --accent-bright: #a7cfee;
    --accent-dim: #31506c;
    --accent-glow: rgba(111,169,216,.15);
    --accent-soft: rgba(111,169,216,.07);
    --shadow: 0 14px 36px rgba(0, 4, 10, .34);
    --shadow-lg: 0 20px 54px rgba(0, 3, 9, .48);
}

body {
    background:
        radial-gradient(800px 480px at 90% -10%, rgba(74, 116, 150, .10), transparent 60%),
        radial-gradient(720px 520px at 0% 30%, rgba(41, 76, 106, .08), transparent 62%),
        var(--bg-primary);
}
body::after {
    background:
        linear-gradient(180deg, rgba(2, 6, 11, .50), rgba(2, 6, 11, .72)),
        radial-gradient(ellipse 100% 78% at 50% 38%, rgba(4, 9, 15, .18), rgba(4, 9, 15, .72) 82%);
}
.app-bg-video { opacity: .42; }

.container {
    max-width: 1180px;
    padding: 22px 22px 54px;
}

.header {
    min-height: 60px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    border-color: rgba(122, 157, 188, .16);
    background: rgba(8, 13, 20, .84);
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-left { gap: 10px; }
.header-left h1 { font-size: 16px; font-weight: 650; }
.header-left p {
    max-width: 720px;
    font-size: 10px;
    color: #75879a;
}
.header-right { gap: 6px; }
.menu-strip-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 26, 38, .76);
    border-color: rgba(122,157,188,.18);
    animation: none;
}
.menu-strip-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.menu-strip-btn:active { transform: scale(.96); }

.menu-tabs {
    width: 100%;
    max-width: none;
    margin-bottom: 12px;
    padding: 4px;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(8, 13, 20, .82);
    border-color: rgba(122,157,188,.13);
    border-radius: 12px;
}
.menu-tabs::-webkit-scrollbar { display:none; }
.menu-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 9px 13px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    letter-spacing: .045em;
    color: #8395a8 !important;
}
.menu-tab:hover { background: rgba(20,32,46,.72) !important; color: #dbe6ef !important; }
.menu-tab.active {
    background: linear-gradient(180deg, rgba(41,65,88,.88), rgba(24,42,59,.92)) !important;
    border-color: rgba(111,169,216,.26) !important;
    color: #c8e1f5 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.18) !important;
}
.menu-tab.active::before { content: ""; }
.menu-tab::after { left: 14px; right: 14px; bottom: 2px; height: 1px; }

.menu-panel {
    border-radius: 15px;
    border-color: rgba(122,157,188,.15);
    background: rgba(8, 14, 22, .90);
    box-shadow: 0 16px 42px rgba(0,0,0,.26);
    padding: 20px;
}
.menu-panel::before {
    content: "UTILITY MODULE";
    margin: -2px 0 15px;
    padding-bottom: 10px;
    color: #55697f;
    border-bottom-color: rgba(122,157,188,.10);
    font-size: 8px;
    letter-spacing: .16em;
}

.btn {
    min-height: 38px;
    padding: 8px 13px !important;
    border-radius: 9px !important;
    border-color: rgba(122,157,188,.18) !important;
    background: #0d1722 !important;
    color: #d8e2eb !important;
    font-size: 10px !important;
}
.btn:hover:not(:disabled) {
    background: #142333 !important;
    border-color: rgba(151,187,217,.34) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,.20) !important;
}
.btn-primary {
    background: linear-gradient(180deg, #294964, #20394f) !important;
    border-color: #4b7699 !important;
    color: #d9ebfa !important;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg,#335873,#27465e) !important; }
.btn-success { background: rgba(53,130,104,.12) !important; }
.btn-warning { background: rgba(142,111,46,.11) !important; }
.btn-danger { background: rgba(142,61,61,.11) !important; }

.upload-zone {
    min-height: 168px;
    margin-bottom: 14px;
    padding: 30px 20px 24px;
    border-radius: 13px;
    border-color: rgba(122,157,188,.20);
    background: linear-gradient(180deg, rgba(14,23,34,.86), rgba(8,14,22,.86));
}
.upload-zone:hover {
    background: linear-gradient(180deg, rgba(18,30,43,.90), rgba(9,16,25,.90));
    border-color: rgba(151,187,217,.32);
    transform: translateY(-1px);
}
.upload-zone.dragover { background: rgba(111,169,216,.08) !important; }
.upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid rgba(122,157,188,.18);
    background: rgba(122,157,188,.07);
    color: #9bb7ce;
    font: 600 9px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.upload-zone .file-name { color: #9aaabd; }
.upload-zone .file-size { color: #596d83; }

.progress-wrap {
    height: 20px;
    margin-bottom: 14px;
    border-radius: 7px;
    background: #08111a;
    border-color: rgba(122,157,188,.14);
}
.progress-bar {
    background: linear-gradient(90deg, #365873, #6fa9d8);
    box-shadow: none;
}

.stats-grid {
    gap: 1px;
    padding: 0;
    margin-bottom: 15px;
    border-radius: 12px;
    border-color: rgba(122,157,188,.14);
    background: rgba(122,157,188,.10);
    overflow: hidden;
}
.stat-item {
    min-height: 64px;
    padding: 12px 14px;
    background: rgba(9,16,24,.94);
}
.stat-item .label { color: #5f7389; font-size: 9px; letter-spacing: .08em; }
.stat-item .value { font-size: 14px; color: #dbe6ef; }

.hero-picker-wrap,
#panel-go > div[style*="background:var(--bg-secondary)"],
#panel-py > div[style*="background:var(--bg-secondary)"] {
    background: rgba(10,17,26,.82) !important;
    border-color: rgba(122,157,188,.14) !important;
    border-radius: 11px !important;
}
.hero-picker-wrap { border-left: 2px solid #5d8aad; }
.hero-search, .hero-select,
.login-field input, textarea, select, .edit-input {
    border-color: rgba(122,157,188,.18) !important;
    background: #070d14 !important;
    border-radius: 9px;
}
.hero-search:focus, .hero-select:focus,
.login-field input:focus, textarea:focus, select:focus, .edit-input:focus {
    border-color: rgba(111,169,216,.65) !important;
    box-shadow: 0 0 0 3px rgba(111,169,216,.10) !important;
}

.hero-card {
    border-radius: 11px;
    border-color: rgba(122,157,188,.14);
    background: rgba(11,19,28,.82);
}
.hero-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.hero-header { background: rgba(17,28,40,.88); }
.hero-body { background: rgba(7,13,20,.70); }

.file-list { background: rgba(8,14,21,.78); border-color: rgba(122,157,188,.14); }
.file-list .file-item { border-bottom-color: rgba(122,157,188,.09); background: transparent; }
.file-list .file-item:hover { background: rgba(111,169,216,.05); }

.footer {
    margin-top: 26px;
    color: #53667a;
    border-top-color: rgba(122,157,188,.10);
}

.side-menu-panel {
    width: min(360px, calc(100vw - 20px));
    background: rgba(7, 12, 19, .97);
    border-right-color: rgba(122,157,188,.14);
    box-shadow: 22px 0 60px rgba(0,0,0,.38);
}
.side-menu-backdrop { background: rgba(1,5,9,.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.side-menu-top { padding: 16px 18px; }
.side-menu-title { font-size: 12px; letter-spacing: .10em; }
.side-menu-close { border-radius: 9px; background: #0d1722; }
.dev-profile-card, .support-badge {
    border-color: rgba(122,157,188,.14) !important;
    background: rgba(13,22,32,.76) !important;
    border-radius: 11px !important;
}

.music-fab {
    width: 50px;
    height: 50px;
    border-width: 1px;
    background: #0d1722;
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

/* Profile: compact, editorial and product-like rather than a dashboard of cards. */
.profile-page { color: var(--text-primary); }
.profile-nav {
    padding: 10px 16px;
    background: rgba(5,9,14,.78);
    border-bottom-color: rgba(122,157,188,.12);
}
.profile-nav-back {
    min-height: 38px;
    border-radius: 10px;
    background: rgba(12,20,30,.80);
    border-color: rgba(122,157,188,.16);
}
.profile-nav-brand { color: #64798f; font-size: 9px; letter-spacing: .14em; }
.profile-hero {
    padding: 52px 20px 32px;
    max-width: 700px;
}
.profile-hero::before {
    width: min(460px, 92vw);
    height: 250px;
    background: radial-gradient(ellipse at center, rgba(91,137,172,.11), transparent 70%);
}
.profile-avatar-wrap { width: 116px; height: 116px; margin-bottom: 20px; }
.profile-avatar {
    width: 116px;
    height: 116px;
    border-radius: 24px;
    border-color: rgba(151,187,217,.35);
    box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.profile-avatar-ring { border-color: rgba(111,169,216,.28); animation-duration: 4.2s; }
.profile-avatar-ring::after { border-color: rgba(111,169,216,.08); }
.profile-name {
    font-size: clamp(30px, 7vw, 40px);
    letter-spacing: -.045em;
}
.profile-role { color: #8ea3b8; font-size: 12px; }
.profile-motto {
    padding: 7px 12px;
    border-color: rgba(111,169,216,.20);
    background: rgba(111,169,216,.05);
    color: #a9c8df;
    font-size: 11px;
}
.profile-body { max-width: 700px; padding: 4px 20px 46px; }
.profile-section {
    margin-bottom: 14px;
    border-radius: 13px;
    border-color: rgba(122,157,188,.13);
    background: rgba(8,14,22,.88);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.profile-section-head {
    padding: 12px 15px;
    background: rgba(16,27,39,.48);
    border-bottom-color: rgba(122,157,188,.09);
}
.profile-section-icon {
    width: 27px; height: 27px; border-radius: 8px;
    background: rgba(111,169,216,.07);
    border-color: rgba(111,169,216,.14);
    font-size: 12px;
}
.profile-section-title { font-size: 10px; color: #8497ab; letter-spacing: .12em; }
.profile-section-body { padding: 15px; }
.profile-about { font-size: 13px; line-height: 1.72; color: #9aabbd; }
.profile-info-grid { gap: 6px; }
.profile-info-row {
    padding: 10px 12px;
    border-radius: 9px;
    border-color: rgba(122,157,188,.10);
    background: rgba(4,9,15,.72);
}
.profile-info-row:hover { background: rgba(15,25,36,.92); border-color: rgba(111,169,216,.20); }
.profile-info-key { color: #5e7187; font-size: 9px; }
.profile-info-val { font-size: 12px; color: #d7e1ea; }
.profile-tags { gap: 6px; margin-top: 12px; }
.profile-tag { padding: 5px 9px; background: rgba(4,9,15,.72); border-color: rgba(122,157,188,.12); color: #8497aa; font-size: 10px; }
.profile-tag.accent { background: rgba(111,169,216,.06); border-color: rgba(111,169,216,.20); color: #a5c4dc; }
.profile-footer { color: #5a6e84; }
.profile-footer a { color: #8ea6bb !important; }

@media (max-width: 640px) {
    .container { padding: 12px 10px 34px; }
    .header { border-radius: 12px; padding: 9px 10px; }
    .header-left p { display: none; }
    .header-right .lang-switch { display: none; }
    .login-user-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .menu-tabs { margin-left: -1px; width: calc(100% + 2px); }
    .menu-tab { min-height: 42px; padding: 9px 12px !important; }
    .menu-panel { padding: 15px 13px; border-radius: 13px; }
    .upload-zone { min-height: 156px; padding: 26px 14px 20px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .stat-item { min-height: 62px; }
    .action-row { gap: 7px; }
    .action-row .btn { flex: 1 1 auto; }
    .profile-nav { padding: 9px 12px; }
    .profile-hero { padding: 42px 16px 28px; }
    .profile-body { padding-left: 12px; padding-right: 12px; }
    .profile-section-body { padding: 13px; }
    .profile-info-row { gap: 8px; }
    .profile-info-val { max-width: 68%; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-avatar-ring { animation: none !important; }
    .app-bg-video { opacity: .28; }
}

/* =========================================================
   CARD MENU — UI-only presentation layer
   Existing .menu-tab / data-panel behavior remains untouched.
   ========================================================= */
.tool-card-menu {
    position: relative;
    margin: 0 0 18px;
    padding: 18px 18px 14px;
    border: 1px solid rgba(120, 154, 184, 0.14);
    border-radius: 16px;
    background:
        radial-gradient(500px 240px at 50% 0%, rgba(60, 118, 170, 0.08), transparent 70%),
        rgba(5, 10, 17, 0.78);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,.025);
    overflow: hidden;
}
.tool-card-menu-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 2px 14px;
}
.tool-card-menu-kicker {
    display: block;
    margin-bottom: 4px;
    color: #60748a;
    font: 700 9px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.tool-card-menu-head h2 {
    margin: 0;
    color: #dce8f2;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.025em;
}
.tool-card-menu-head p {
    margin: 3px 0 0;
    color: #71859b;
    font-size: 11px;
}
.tool-card-menu-controls {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}
.tool-card-nav {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(126, 161, 191, .16);
    border-radius: 10px;
    background: rgba(12, 22, 34, .82);
    color: #a9bdcf;
    font: 500 17px/1 var(--font);
    cursor: pointer;
    transition: transform 150ms var(--ease-out), background 180ms var(--ease-soft), border-color 180ms var(--ease-soft), color 180ms var(--ease-soft);
    -webkit-tap-highlight-color: transparent;
}
.tool-card-nav:hover {
    background: #142335;
    border-color: rgba(104, 163, 211, .3);
    color: #d8e7f3;
}
.tool-card-nav:active { transform: scale(.93); }

.tool-card-carousel {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    background: transparent;
    perspective: 1100px;
    isolation: isolate;
    touch-action: pan-y;
}
.tool-card-carousel .menu-tab.tool-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(310px, 62%);
    height: 252px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    padding: 20px !important;
    border: 1px solid rgba(124, 161, 192, .17) !important;
    border-radius: 16px !important;
    overflow: hidden;
    text-align: left;
    color: #dce8f2 !important;
    background:
        linear-gradient(160deg, rgba(24, 43, 60, .94), rgba(7, 14, 23, .98) 72%),
        #0a111a !important;
    box-shadow: 0 20px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
    cursor: pointer;
    transform-origin: center center;
    /* Override the legacy .menu-tab transition (!important) so the
       carousel never falls back to the old 150ms transform snap. */
    transition:
        transform 420ms cubic-bezier(.22,.61,.36,1),
        opacity 360ms cubic-bezier(.4,0,.2,1),
        border-color 220ms ease,
        box-shadow 220ms ease !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}
.tool-card-carousel .menu-tab.tool-card::before,
.tool-card-carousel .menu-tab.tool-card::after { content: none !important; }
.tool-card-carousel .tool-card-icon {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(108, 165, 211, .18);
    border-radius: 12px;
    background: rgba(48, 104, 149, .11);
    color: #8dbce0;
    font: 700 11px/1 var(--mono);
    letter-spacing: .04em;
}
.tool-card-copy { display: block; padding-right: 12px; }
.tool-card-copy strong {
    display: block;
    color: #e3edf5;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.025em;
}
.tool-card-copy small {
    display: block;
    margin-top: 6px;
    color: #8094a8;
    font: 11px/1.5 var(--font);
}
.tool-card-arrow {
    position: absolute;
    right: 18px;
    bottom: 20px;
    color: #688198;
    font-size: 17px;
    transition: transform 180ms var(--ease-out), color 180ms ease;
}
.tool-card-carousel .menu-tab.tool-card:hover:not(.card-pos-center) {
    border-color: rgba(119, 172, 212, .25) !important;
}
.tool-card-carousel .menu-tab.tool-card:hover .tool-card-arrow,
.tool-card-carousel .menu-tab.tool-card.card-pos-center:hover .tool-card-arrow {
    color: #a7cae4;
    transform: translate(2px,-2px);
}
.tool-card-carousel .menu-tab.tool-card.card-pos-center {
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) rotateY(0deg) scale(1);
    opacity: 1;
    filter: none;
    z-index: 5;
    border-color: rgba(104, 163, 211, .34) !important;
    box-shadow: 0 24px 56px rgba(0,0,0,.42), 0 0 0 1px rgba(90, 155, 207, .05), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.tool-card-carousel .menu-tab.tool-card.card-pos-left {
    transform: translate3d(-50%, -50%, 0) translate3d(-285px, 0, 0) rotateY(22deg) scale(.84);
    opacity: .52;
    z-index: 3;
}
.tool-card-carousel .menu-tab.tool-card.card-pos-right {
    transform: translate3d(-50%, -50%, 0) translate3d(285px, 0, 0) rotateY(-22deg) scale(.84);
    opacity: .52;
    z-index: 3;
}
.tool-card-carousel .menu-tab.tool-card.card-pos-left-2 {
    transform: translate3d(-50%, -50%, 0) translate3d(-490px, 0, 0) rotateY(30deg) scale(.68);
    opacity: .15;
    z-index: 1;
    pointer-events: none;
}
.tool-card-carousel .menu-tab.tool-card.card-pos-right-2 {
    transform: translate3d(-50%, -50%, 0) translate3d(490px, 0, 0) rotateY(-30deg) scale(.68);
    opacity: .15;
    z-index: 1;
    pointer-events: none;
}
.tool-card-carousel .menu-tab.tool-card.card-pos-hidden {
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 0) scale(.5);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.tool-card-carousel.is-dragging .menu-tab.tool-card { transition-duration: 180ms; }
.tool-card-carousel:focus-within { outline: none; }

.tool-card-menu-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 12px;
}
.tool-card-dots { display: flex; align-items: center; gap: 6px; }
.tool-card-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #425365;
    cursor: pointer;
    transition: width 180ms var(--ease-out), background 180ms ease, opacity 180ms ease;
}
.tool-card-dot.active {
    width: 20px;
    background: #91b9d8;
}
.tool-card-hint {
    color: #52667b;
    font: 9px/1 var(--mono);
    letter-spacing: .05em;
}

@media (max-width: 760px) {
    .tool-card-menu { padding: 15px 12px 12px; border-radius: 14px; }
    .tool-card-menu-head { align-items: center; padding-bottom: 10px; }
    .tool-card-menu-head h2 { font-size: 16px; }
    .tool-card-menu-head p { display: none; }
    .tool-card-carousel { height: 276px; }
    .tool-card-carousel .menu-tab.tool-card { width: min(260px, 67%); height: 234px; padding: 18px !important; }
    .tool-card-carousel .menu-tab.tool-card.card-pos-left { transform: translate3d(-50%, -50%, 0) translate3d(-138px, 0, 0) rotateY(18deg) scale(.73); opacity: .32; }
    .tool-card-carousel .menu-tab.tool-card.card-pos-right { transform: translate3d(-50%, -50%, 0) translate3d(138px, 0, 0) rotateY(-18deg) scale(.73); opacity: .32; }
    .tool-card-carousel .menu-tab.tool-card.card-pos-left-2,
    .tool-card-carousel .menu-tab.tool-card.card-pos-right-2 { opacity: 0; }
    .tool-card-copy strong { font-size: 16px; }
    .tool-card-copy small { font-size: 10px; }
}
@media (max-width: 430px) {
    .tool-card-menu-head { gap: 8px; }
    .tool-card-menu-controls { gap: 5px; }
    .tool-card-nav { width: 34px; height: 34px; }
    .tool-card-carousel { height: 268px; }
    .tool-card-carousel .menu-tab.tool-card { width: 245px; height: 228px; }
    .tool-card-carousel .menu-tab.tool-card.card-pos-left { transform: translate3d(-50%, -50%, 0) translate3d(-112px, 0, 0) rotateY(16deg) scale(.68); opacity: .22; }
    .tool-card-carousel .menu-tab.tool-card.card-pos-right { transform: translate3d(-50%, -50%, 0) translate3d(112px, 0, 0) rotateY(-16deg) scale(.68); opacity: .22; }
    .tool-card-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tool-card-carousel .menu-tab.tool-card,
    .tool-card-nav,
    .tool-card-dot,
    .tool-card-arrow { transition: none !important; }
}


/* =========================================================
   FINAL UI/UX REFINEMENT — presentation layer only
   FUNCTIONALITY FREEZE: no selectors/IDs/events are removed.
   ========================================================= */

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(92, 176, 255, 0.78);
    outline-offset: 2px;
}

:where(button, a, input, select, textarea) {
    max-width: 100%;
}

.header,
.menu-tabs,
.menu-panel,
.tool-card-menu,
.admin-card,
.login-card {
    isolation: isolate;
}

/* Keep technical values readable while allowing long filenames/IDs to wrap. */
.file-name,
.file-size,
.progress-text,
.stat-item .value,
.profile-info-val,
.dev-info-val,
.admin-table td,
.admin-table th {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Upload zone: clearer affordance and selected-file hierarchy. */
.upload-zone:focus-within {
    border-color: rgba(92, 176, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(61, 158, 240, 0.08), 0 12px 30px rgba(0, 4, 16, 0.22);
}
.upload-zone .file-name.has-file {
    max-width: min(100%, 620px);
    margin-inline: auto;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.45;
}
.upload-zone .file-size {
    margin-top: 3px;
}

/* Stats remain compact but gain a consistent scan rhythm. */
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-item .label,
.stat-item .value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Keep action rows usable when several controls share one line. */
.action-row {
    align-items: center;
    flex-wrap: wrap;
}
.action-row .btn {
    min-width: 0;
}

/* Admin tables preserve their existing horizontal-scroll behavior. */
.admin-table-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
}

/* Mobile: prioritize readable controls over desktop density. */
@media (max-width: 900px) {
    .container { padding-inline: 18px; }
    .header { padding-inline: 14px; }
}

@media (max-width: 640px) {
    .container { padding: 10px 10px 30px; }
    .header {
        min-height: 56px;
        gap: 8px;
        padding: 8px 9px;
    }
    .header-left { min-width: 0; flex: 1 1 auto; }
    .header-left h1 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header-right {
        flex: 0 0 auto;
        max-width: 58%;
    }
    .header-right .logoutBtn { min-width: 38px; }

    .menu-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        width: 100%;
        padding: 4px;
        scroll-snap-type: x proximity;
    }
    .menu-tabs::-webkit-scrollbar { display: none; }
    .menu-tab {
        flex: 0 0 auto;
        min-height: 42px;
        scroll-snap-align: start;
    }

    .menu-panel {
        padding: 14px 12px;
    }
    .menu-panel::before {
        margin-bottom: 13px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stat-item {
        padding: 11px 12px;
    }

    .action-row .btn {
        flex: 1 1 140px;
    }

    .hero-picker-row {
        flex-wrap: wrap;
    }
    .hero-search,
    .hero-select {
        min-width: 0;
    }

    .tool-card-menu {
        margin-bottom: 14px;
    }
}

@media (max-width: 430px) {
    .header-right { gap: 5px; }
    .sys-status-pill { padding-inline: 8px; }
    .sys-status-pill .sys-status-label { display: none; }
    .login-user-badge { max-width: 92px; padding-inline: 8px; }

    .upload-zone {
        min-height: 150px;
        padding: 24px 12px 18px;
    }
    .upload-zone .file-name.has-file {
        font-size: 10px;
    }

    .action-row .btn {
        flex-basis: 100%;
    }

    .tool-card-carousel .menu-tab.tool-card {
        max-width: calc(100vw - 54px);
    }
}

@media (max-width: 360px) {
    .container { padding-inline: 7px; }
    .header-left h1 { font-size: 14px; }
    .header-right .btn { padding-inline: 9px !important; }
    .menu-panel { padding-inline: 10px; }
    .stats-grid { gap: 1px; }
    .stat-item { padding-inline: 9px; }
}

/* Reduced motion is a hard presentation preference; functionality is untouched. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
    .btn:hover:not(:disabled),
    .hero-card:hover,
    .upload-zone:hover,
    .profile-nav-back:hover,
    .profile-info-row:hover,
    .profile-tag:hover,
    .profile-support-badge:hover {
        transform: none !important;
    }
}

/* Card menu stability fixes */
.tool-card-carousel .menu-tab.tool-card {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.tool-card-carousel .menu-tab.tool-card.card-pos-left,
.tool-card-carousel .menu-tab.tool-card.card-pos-right {
    pointer-events: auto;
}
.tool-card-carousel.is-dragging {
    cursor: grabbing;
}
.tool-card-carousel.is-dragging .menu-tab.tool-card {
    transition-duration: 180ms !important;
}
.tool-card-dot[aria-current="true"] {
    width: 20px;
    background: #91b9d8;
}

/* Smooth Japan daylight profile overrides */
.profile-page #webgl{filter:saturate(.94) contrast(.97) brightness(1.06)}
.profile-page .vignette{box-shadow:inset 0 0 14vw 5vw rgba(255,255,255,.14)}
.profile-page .grain{opacity:.035}

/* CARD MENU — Japanese editorial redesign */
.tool-card-carousel{position:relative;isolation:isolate;width:min(1120px,94vw);min-height:430px;margin:0 auto;display:grid;place-items:center;perspective:1400px;touch-action:pan-y}
.tool-card-carousel::before{content:"";position:absolute;inset:12% 4%;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(181,138,74,.14),transparent 45%),radial-gradient(circle at 30% 70%,rgba(62,90,77,.11),transparent 48%);filter:blur(28px);z-index:-2}
.tool-card-carousel .menu-tab.tool-card{position:absolute;left:50%;top:50%;width:min(310px,72vw);min-height:355px;transform-origin:center;border:1px solid rgba(32,40,36,.14);border-radius:4px;overflow:hidden;cursor:pointer;color:#202824;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(244,239,227,.96));box-shadow:0 22px 55px rgba(40,48,42,.12);transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .6s ease,box-shadow .6s ease;will-change:transform,opacity}
.tool-card-carousel .menu-tab.tool-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.45),transparent 25%,transparent 75%,rgba(0,0,0,.03)),radial-gradient(circle at 78% 18%,rgba(168,62,50,.13),transparent 17%)}
.tool-card-carousel .menu-tab.tool-card::after{content:"";position:absolute;width:70px;height:70px;right:-24px;top:-24px;border:1px solid rgba(168,62,50,.35);border-radius:50%}
.tool-card-carousel .card-pos-center{z-index:5;opacity:1;filter:none;transform:translate(-50%,-50%) scale(1);box-shadow:0 30px 70px rgba(40,48,42,.2)}
.tool-card-carousel .card-pos-left{z-index:3;opacity:.78;filter:saturate(.72);transform:translate(calc(-50% - 275px),-50%) rotateY(15deg) rotateZ(-2deg) scale(.86)}
.tool-card-carousel .card-pos-right{z-index:3;opacity:.78;filter:saturate(.72);transform:translate(calc(-50% + 275px),-50%) rotateY(-15deg) rotateZ(2deg) scale(.86)}
.tool-card-carousel .card-pos-left-2{z-index:1;opacity:.18;transform:translate(calc(-50% - 515px),-50%) rotateY(25deg) scale(.72)}
.tool-card-carousel .card-pos-right-2{z-index:1;opacity:.18;transform:translate(calc(-50% + 515px),-50%) rotateY(-25deg) scale(.72)}
.tool-card-carousel .card-pos-hidden{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.5)}
.tool-card-carousel .menu-tab.tool-card strong,.tool-card-carousel .menu-tab.tool-card h3{position:relative;display:block;margin:75px 25px 10px;font:500 clamp(30px,3vw,42px)/.92 "Cormorant Garamond",serif;letter-spacing:-.035em}
.tool-card-carousel .menu-tab.tool-card p{position:relative;margin:0 25px;color:#6a716c;font:10px/1.8 "IBM Plex Mono",monospace}
.card-menu-controls{position:relative;z-index:10;width:min(1120px,94vw);margin:8px auto 0;display:flex;align-items:center;justify-content:space-between}
.card-menu-arrow{width:42px;height:42px;border:1px solid rgba(32,40,36,.14);border-radius:50%;background:rgba(244,239,227,.78);color:#202824;cursor:pointer;transition:.3s ease}
.card-menu-arrow:hover{background:#202824;color:#f4efe3;transform:translateY(-2px)}
[data-card-dots]{display:flex;gap:7px;align-items:center;justify-content:center}
.tool-card-dot{width:6px;height:6px;padding:0;border:0;border-radius:20px;background:#aeb4ae;transition:.45s cubic-bezier(.16,1,.3,1);cursor:pointer}
.tool-card-dot.active{width:24px;background:#a83e32}
@media(max-width:800px){.tool-card-carousel{min-height:390px}.tool-card-carousel .menu-tab.tool-card{width:min(290px,76vw);min-height:340px}.tool-card-carousel .card-pos-left{transform:translate(calc(-50% - 125px),-50%) rotateY(9deg) scale(.76);opacity:.36}.tool-card-carousel .card-pos-right{transform:translate(calc(-50% + 125px),-50%) rotateY(-9deg) scale(.76);opacity:.36}.tool-card-carousel .card-pos-left-2,.tool-card-carousel .card-pos-right-2{opacity:0}}
@media(prefers-reduced-motion:reduce){.tool-card-carousel .menu-tab.tool-card{transition:none}}

/* =========================================================
   FOUR MENU — Japanese Editorial / No Cards
   ========================================================= */
.japan-menu{
  position:relative;
  width:min(1180px,88vw);
  margin:clamp(80px,12vh,150px) auto;
  color:#24302b;
}
.japan-menu-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
  font:500 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.2em;
  color:#66736e;
}
.japan-kicker{white-space:nowrap}
.japan-rule{height:1px;flex:1;background:rgba(36,48,43,.16)}
.japan-index{white-space:nowrap;color:#a13b30}
.japan-menu-grid{
  border-top:1px solid rgba(36,48,43,.16);
}
.japan-menu-item{
  position:relative;
  min-height:116px;
  display:grid;
  grid-template-columns:70px 90px 1fr 45px;
  align-items:center;
  gap:24px;
  padding:18px 10px;
  border-bottom:1px solid rgba(36,48,43,.16);
  overflow:hidden;
  isolation:isolate;
  transition:padding .55s cubic-bezier(.16,1,.3,1), color .35s ease;
}
.japan-menu-item::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-2%;
  right:-2%;
  bottom:-100%;
  height:180%;
  background:#24302b;
  transform:skewY(-3deg);
  transition:bottom .65s cubic-bezier(.16,1,.3,1);
}
.japan-menu-item:hover{
  color:#f5f0e5;
  padding-left:25px;
  padding-right:25px;
}
.japan-menu-item:hover::before{bottom:-38%}
.japan-num{
  font:500 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.18em;
  color:#a13b30;
  transition:color .35s ease;
}
.japan-menu-item:hover .japan-num{color:#d9a26a}
.japan-symbol{
  font:400 44px/1 "Cormorant Garamond",serif;
  opacity:.78;
}
.japan-copy{display:flex;flex-direction:column;gap:8px}
.japan-copy strong{
  font:500 clamp(32px,4vw,58px)/.82 "Cormorant Garamond",serif;
  letter-spacing:-.035em;
}
.japan-copy small{
  font:9px/1.5 "IBM Plex Mono",monospace;
  letter-spacing:.12em;
  color:#7a827e;
  transition:color .35s ease;
}
.japan-menu-item:hover .japan-copy small{color:#c4cbc6}
.japan-arrow{
  width:38px;height:38px;border:1px solid rgba(36,48,43,.18);
  border-radius:50%;display:grid;place-items:center;
  font-size:14px;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s;
}
.japan-menu-item:hover .japan-arrow{transform:rotate(45deg);border-color:rgba(245,240,229,.45)}
.japan-menu-item:nth-child(2) .japan-symbol{color:#a13b30}
.japan-menu-item:nth-child(3) .japan-symbol{color:#49685a}
.japan-menu-item:nth-child(4) .japan-symbol{color:#b28752}
@media(max-width:700px){
  .japan-menu{width:88vw}
  .japan-menu-head{gap:10px}
  .japan-index{display:none}
  .japan-menu-item{grid-template-columns:40px 48px 1fr 34px;gap:12px;min-height:100px;padding:14px 3px}
  .japan-menu-item:hover{padding-left:10px;padding-right:10px}
  .japan-symbol{font-size:34px}
  .japan-copy strong{font-size:35px}
  .japan-copy small{font-size:8px}
  .japan-arrow{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){
  .japan-menu-item,.japan-menu-item::before,.japan-menu-item .japan-arrow{transition:none}
}

/* Legacy Card Menu intentionally disabled */
.tool-card-carousel,.card-menu-controls,.tool-card-dot{display:none!important}