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

:root {
    --gold-light: #fcd9b8;
    --gold-mid: #d4af37;
    --gold-dark: #b8860b;
    --gold-border: rgba(212,175,55,0.55);
    --gold-glow: rgba(212,175,55,0.22);
}



body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #0d1117;
    color: #1a1a2e;
    min-height: 100vh;
    overflow-x: hidden;
}

#bg-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(0px) brightness(1);
    transform: scale(1.0);
    transition: background-image 0.6s ease;
}

#bg-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

#app { position: relative; z-index: 1; }

#navbar {
    display:flex; align-items:center; justify-content:flex-start;
    background: rgba(20,20,50,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding:0 24px; height:52px;
    border-bottom:1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
    position: sticky; top:0; z-index: 100;
}
.nav-brand { margin-right: auto; }
.brand-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold-light); font-size: 1.35em; font-weight: 700;
    text-decoration: none; letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(252,217,184,0.45);
    transition: color 0.2s, text-shadow 0.2s;
}
.brand-link:hover { color: #fff; text-shadow: 0 0 24px rgba(212,175,55,0.6); }
.brand-mascot { flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(212,175,55,0.35)); }
.nav-brand a { color: var(--gold-light); font-size:1.25em; font-weight:700; text-decoration:none; letter-spacing:2px; text-shadow:0 0 20px rgba(252,217,184,0.4); }
#nav-links { display:flex; align-items:center; gap:4px; }
#nav-links a {
    color:#c4c8d4; text-decoration:none; margin-left:12px;
    font-size:0.96em; font-weight:500; padding:6px 12px; border-radius:8px;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
#nav-links a:hover { color:var(--gold-light); background:rgba(212,175,55,0.1); text-shadow:0 0 10px rgba(252,217,184,0.4); }
#nav-links a.nav-active {
    color: var(--gold-light);
    font-weight: 600;
}
.nav-settings-btn { background:none; border:none; color:#c4c8d4; cursor:pointer; font-size:1.1em; padding:4px 8px; margin-left:4px; border-radius:6px; transition:all 0.2s; }
.nav-settings-btn:hover { color:#fcd9b8; background:rgba(255,255,255,0.08); }

.nav-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: center;
    margin-left: 12px; cursor: pointer; flex-shrink: 0;
    border: 2px solid rgba(212,175,55,0.4);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.nav-avatar:hover {
    border-color: var(--gold-mid);
    box-shadow: 0 0 10px rgba(212,175,55,0.3);
}
body.lc-white .nav-avatar {
    border-color: #d9d9d9;
}
body.lc-white .nav-avatar:hover {
    border-color: #1890ff;
    box-shadow: 0 0 8px rgba(24,144,255,0.2);
}

.user-avatar-wrap {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.user-avatar-large {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center;
    border: 3px solid rgba(212,175,55,0.5);
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.user-avatar-large:hover {
    border-color: var(--gold-mid);
    box-shadow: 0 0 14px rgba(212,175,55,0.35);
}
body.lc-white .user-avatar-large {
    border-color: #d9d9d9;
}
body.lc-white .user-avatar-large:hover {
    border-color: #1890ff;
    box-shadow: 0 0 8px rgba(24,144,255,0.2);
}

.setting-row-avatar { margin-top: 2px; }
body.lc-white .setting-row-avatar .btn-upload-bg { background: #f0f4ff !important; color: #7b8fdb !important; border-color: #c5d4ff !important; }
body.lc-white .setting-row-avatar .btn-upload-bg:hover { color: #5b6fd0 !important; border-color: #7b8fdb !important; background: #e0e9ff !important; }
body.lc-white .setting-row-avatar .btn-reset-bg { background: #f0f4ff !important; color: #7b8fdb !important; border-color: #c5d4ff !important; }

#settings-panel {
    position:fixed; top:60px; right:20px; z-index:200;
    background:rgba(25,25,55,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,0.15); border-radius:12px; padding:18px 20px;
    min-width:240px; box-shadow:0 8px 32px rgba(0,0,0,0.3);
    display:none;
}
#settings-panel h4 { color:#fcd9b8; font-size:0.92em; margin-bottom:14px; font-weight:600; letter-spacing:1px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.setting-row:last-child { margin-bottom:0; }
.setting-row label { color:#c4c8d4; font-size:0.88em; cursor:pointer; }
.setting-row input[type="checkbox"] { display:none; }
.toggle-switch { position:relative; width:44px; height:24px; background:rgba(255,255,255,0.2); border-radius:12px; cursor:pointer; transition:background 0.3s; }
.toggle-switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform 0.3s; }
.toggle-switch.on { background:#fdbb2d; }
.toggle-switch.on::after { transform:translateX(20px); }

/* Settings panel toggles — cyan-blue / light-pink bar strip + click trail */
#settings-panel .toggle-switch {
    width: 52px;
    height: 22px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 11px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #67e8f9, #f9a8d4) border-box;
    transition: box-shadow 0.35s ease;
    box-shadow: none;
}
#settings-panel .toggle-switch::before {
    content: '';
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34,211,238,0.6) 35%,
        rgba(251,207,232,0.85) 65%,
        transparent 100%);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 11px;
}
#settings-panel .toggle-switch.toggle-trail-fwd::before {
    animation: settings-toggle-trail-fwd 0.55s ease-out forwards;
}
#settings-panel .toggle-switch.toggle-trail-rev::before {
    animation: settings-toggle-trail-rev 0.55s ease-out forwards;
}
@keyframes settings-toggle-trail-fwd {
    0%   { left: -45%; opacity: 0; }
    12%  { opacity: 1; }
    100% { left: 105%; opacity: 0; }
}
@keyframes settings-toggle-trail-rev {
    0%   { left: 105%; opacity: 0; }
    12%  { opacity: 1; }
    100% { left: -45%; opacity: 0; }
}
#settings-panel .toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 8px;
    background: linear-gradient(90deg, #22d3ee 0%, #67e8f9 40%, #fbcfe8 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: none;
}
#settings-panel .toggle-switch.on {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #67e8f9, #f9a8d4) border-box;
    box-shadow: 0 0 10px rgba(34,211,238,0.22), 0 0 6px rgba(251,207,232,0.18);
}
#settings-panel .toggle-switch.on::after {
    transform: scaleX(1);
}

#content { max-width:1200px; margin:0 auto; padding:24px 20px; }

.auth-container { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; }
.auth-container h1 {
    font-size:2.2em; font-weight:700; margin-bottom:32px;
    background: linear-gradient(135deg, #fcd9b8, #fdbb2d, #fcd9b8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none; letter-spacing:3px;
}
.auth-box {
    background:rgba(255,255,255,0.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:36px 44px; border-radius:16px; width:400px;
    border:1px solid rgba(255,255,255,0.15); box-shadow:0 8px 32px rgba(0,0,0,0.15);
}
.auth-link { text-align:center; margin-top:18px; font-size:0.9em; color:#c4c8d4; }
.auth-link a { color:#fdbb2d; text-decoration:none; transition:all 0.2s; }
.auth-link a:hover { color:#fcd9b8; text-shadow:0 0 8px rgba(253,187,45,0.5); }

.form-group { margin-bottom:18px; }
.form-group label { display:block; margin-bottom:7px; font-size:0.88em; color:#c4c8d4; font-weight:500; }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea {
    width:100%; padding:10px 14px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
    border-radius:8px; color:#e0dcd0; font-size:0.9em;
    transition:border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group textarea:focus { border-color:#fdbb2d; outline:none; box-shadow:0 0 0 3px rgba(253,187,45,0.15); }
.form-group textarea { resize:vertical; font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace; }
.form-row { display:flex; gap:16px; }
.form-row .form-group { flex:1; }

.btn-primary {
    width:100%; padding:11px;
    background:linear-gradient(135deg, var(--gold-mid), var(--gold-dark));
    color:#1a1028; border:none; border-radius:8px;
    font-size:0.95em; cursor:pointer; font-weight:700;
    transition:transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    letter-spacing:1px;
    box-shadow:0 4px 14px rgba(212,175,55,0.28);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(212,175,55,0.38); }
.btn-primary:active { transform:translateY(0); }
.btn-primary.btn-loading { opacity:0.85; cursor:wait; }

.btn-secondary {
    padding:8px 18px;
    background:rgba(255,255,255,0.08); color:#c4c8d4;
    border:1px solid rgba(255,255,255,0.15); border-radius:8px;
    cursor:pointer; font-size:0.88em; transition:all 0.2s;
}
.btn-secondary:hover { background:rgba(255,255,255,0.14); color:#fcd9b8; border-color:rgba(255,255,255,0.25); }
.btn-sm {
    padding:4px 12px; font-size:0.82em; border-radius:6px; text-decoration:none;
    display:inline-block; border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06); color:#c4c8d4;
}
.btn-sm:hover { border-color:#fdbb2d; color:#fdbb2d; }
.btn-danger {
    background:rgba(255,77,79,0.12); color:#ff6b6d; border:1px solid rgba(255,77,79,0.3); cursor:pointer;
    border-radius:8px; padding:8px 16px; font-size:0.88em; transition:all 0.2s;
}
.btn-danger:hover { background:rgba(255,77,79,0.25); }

.error { color:#ff6b6d; font-size:0.85em; margin-bottom:14px; }

.data-table {
    width:100%; border-collapse:collapse; margin-top:14px;
    background:rgba(255,255,255,0.05); border-radius:10px; overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
}
.data-table th, .data-table td { padding:11px 18px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); }
.data-table th {
    background:rgba(255,255,255,0.04); color:#a0a8b4;
    font-weight:600; font-size:0.82em; text-transform:uppercase; letter-spacing:0.8px;
}
.data-table tr:hover td { background:rgba(255,255,255,0.05); }
.data-table tr:last-child td { border-bottom:none; }
.clickable { cursor:pointer; }
.clickable:hover td { background:rgba(253,187,45,0.08) !important; }

.back-link { color:#a0a8b4; text-decoration:none; font-size:0.88em; display:inline-block; margin-bottom:14px; transition:color 0.2s; }
.back-link:hover { color:#fdbb2d; }

.problem-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.problem-header h2 { font-size:1.45em; font-weight:600; color:#fcd9b8; }
.problem-header .btn-primary { width:auto; padding:8px 22px; font-size:0.88em; }

.problem-layout { display:flex; gap:8px; align-items:stretch; }
.problem-left { flex:1; min-width:0; }
.problem-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
.problem-left .section {
    background:rgba(255,255,255,0.05); padding:18px 22px; border-radius:12px;
    margin-bottom:16px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.problem-left .section h3 {
    color:#fcd9b8; margin-bottom:10px; font-size:0.88em; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
}
.problem-left .section div { color:#c4c8d4; line-height:1.7; }
.problem-left .section pre {
    background:rgba(0,0,0,0.2); padding:10px 14px; border-radius:8px;
    margin-top:6px; font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace;
    font-size:0.88em; white-space:pre-wrap; color:#e0dcd0;
    border:1px solid rgba(255,255,255,0.08);
}
.lc-example-section {
    overflow:hidden;
    animation: soft-card-in 0.34s ease both;
}
.lc-example-title-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}
.lc-example-title-row h3 { margin-bottom:0 !important; }
.lc-example-hint {
    color:#8c8c8c;
    font-size:0.78em;
    white-space:nowrap;
}
.lc-example-tabs {
    display:flex;
    gap:8px;
    margin-bottom:12px;
    overflow-x:auto;
    padding-bottom:2px;
}
.lc-example-tab {
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.06);
    color:#a0a8b4;
    border-radius:999px;
    padding:6px 14px;
    cursor:pointer;
    font-size:0.84em;
    transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.lc-example-tab:hover {
    transform:translateY(-1px);
    color:var(--gold-light);
    border-color:rgba(212,175,55,0.35);
}
.lc-example-tab.active {
    color:#1a1028;
    background:linear-gradient(135deg, var(--gold-light), var(--gold-mid));
    border-color:transparent;
    font-weight:700;
}
.lc-example-card {
    display:none;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(0,0,0,0.16);
    padding:14px;
    animation: example-card-in 0.22s ease both;
}
.lc-example-card.active { display:block; }
.lc-example-io + .lc-example-io { margin-top:12px; }
.lc-example-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
    color:#fcd9b8 !important;
    font-weight:700;
    font-size:0.88em;
}
.lc-copy-btn {
    border:none;
    border-radius:6px;
    padding:4px 10px;
    background:rgba(255,255,255,0.08);
    color:#a0a8b4;
    cursor:pointer;
    font-size:0.78em;
    transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.lc-copy-btn:hover {
    transform:translateY(-1px);
    background:rgba(212,175,55,0.16);
    color:var(--gold-light);
}
.lc-copy-btn.copied {
    background:rgba(82,196,26,0.18);
    color:#95de64;
}
.lc-example-pre {
    margin-top:0 !important;
    background:rgba(0,0,0,0.28) !important;
    border:1px solid rgba(212,175,55,0.16) !important;
    border-left:3px solid var(--gold-mid) !important;
    line-height:1.65;
}
.lc-example-empty {
    color:#a0a8b4 !important;
    background:rgba(255,255,255,0.05);
    border:1px dashed rgba(255,255,255,0.14);
    border-radius:10px;
    padding:14px 16px;
}
@keyframes example-card-in {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}
.limit-badge {
    display:inline-block; background:rgba(255,255,255,0.08);
    color:#c4c8d4; padding:5px 14px; border-radius:6px; margin-right:8px;
    font-size:0.82em; border:1px solid rgba(255,255,255,0.1);
}

.editor-wrapper {
    background:rgba(255,255,255,0.05); border-radius:12px;
    border:1px solid rgba(255,255,255,0.08); padding:18px 22px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.editor-wrapper h3 { color:#fcd9b8; font-size:0.88em; font-weight:600; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
#code-editor { width:100%; height:400px; border:1px solid rgba(255,255,255,0.1); border-radius:8px; font-size:14px; }
.editor-actions { margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.editor-actions .btn-primary { width:auto; padding:8px 30px; }

.btn-ac-load {
    padding:8px 16px;
    background:rgba(253,187,45,0.12); color:#fdbb2d;
    border:1px solid rgba(253,187,45,0.3); border-radius:8px;
    cursor:pointer; font-size:0.88em; transition:all 0.2s;
}
.btn-ac-load:hover { background:rgba(253,187,45,0.22); box-shadow:0 0 12px rgba(253,187,45,0.15); }
.btn-ac-load:disabled { opacity:0.5; cursor:not-allowed; }

.btn-undo {
    padding:8px 14px;
    background:rgba(255,255,255,0.06); color:#c4c8d4;
    border:1px solid rgba(255,255,255,0.12); border-radius:8px;
    cursor:pointer; font-size:0.88em; transition:all 0.2s;
}
.btn-undo:hover { background:rgba(255,255,255,0.12); color:#fcd9b8; }

.autocomplete-toggle {
    display:flex; align-items:center; gap:6px; cursor:pointer;
    font-size:0.84em; color:#a0a8b4; margin-left:auto;
    user-select:none;
}
.autocomplete-toggle input[type="checkbox"] { cursor:pointer; accent-color:#fdbb2d; }

.shortcut-hint { font-size:0.80em; color:#8c8c8c; }

.ac-codes-modal { position:relative; }
.ac-codes-backdrop { position:fixed; top:0; left:0; width:100%; height:100%; z-index:300; }
.ac-codes-dropdown {
    position:absolute; top:0; left:0; right:0; z-index:301;
    background:rgba(20,20,50,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.15); border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,0.4); max-height:340px;
    display:flex; flex-direction:column;
}
.ac-codes-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08);
    color:#fcd9b8; font-size:0.88em; font-weight:600;
}
.ac-codes-close {
    background:none; border:none; color:#a0a8b4; cursor:pointer;
    font-size:1.3em; padding:0 4px; line-height:1; transition:color 0.2s;
}
.ac-codes-close:hover { color:#fdbb2d; }
.ac-codes-list { overflow-y:auto; padding:6px 0; }
.ac-code-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; cursor:pointer; transition:background 0.15s;
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.ac-code-item:last-child { border-bottom:none; }
.ac-code-item:hover { background:rgba(253,187,45,0.08); }
.ac-code-meta { display:flex; gap:16px; align-items:center; font-size:0.84em; }
.ac-code-id { color:#fdbb2d; font-weight:600; min-width:50px; }
.ac-code-date { color:#a0a8b4; }
.ac-code-perf { color:#8c8c8c; font-size:0.82em; }
.ac-code-arrow { color:#a0a8b4; font-size:1.1em; }
.ac-codes-loading, .ac-codes-empty { padding:24px; text-align:center; color:#a0a8b4; font-size:0.88em; }

.test-cases-preview {
    background:rgba(255,255,255,0.05); border-radius:12px;
    border:1px solid rgba(255,255,255,0.08); padding:18px 22px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.test-cases-preview h4 {
    color:#fcd9b8; margin-bottom:10px; font-size:0.88em; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
}
.test-case-item {
    background:rgba(0,0,0,0.2); padding:12px 16px; border-radius:8px;
    margin-bottom:8px; font-size:0.84em; border:1px solid rgba(255,255,255,0.06);
    color:#c4c8d4;
}
.test-case-item:last-child { margin-bottom:0; }
.test-case-item pre {
    background:rgba(0,0,0,0.3); padding:8px 12px; border-radius:6px;
    margin-top:4px; font-size:0.85em; white-space:pre-wrap;
    font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace;
    color:#e0dcd0;
}

.page-container { max-width:900px; margin:0 auto; }
.page-container h2 { margin-bottom:18px; font-size:1.35em; font-weight:600; color:#fcd9b8; }
.page-container h3 { margin:22px 0 12px; font-size:1.05em; font-weight:600; color:#c4c8d4; }
.page-container h4 { margin:16px 0 8px; font-size:0.9em; color:#a0a8b4; }

.result-page { max-width:900px; margin:0 auto; }
.result-header { display:flex; gap:16px; align-items:center; flex-wrap:wrap; color:#a0a8b4; font-size:0.88em; margin-bottom:18px; }
.result-summary {
    background:rgba(255,255,255,0.05); padding:18px 22px; border-radius:12px;
    margin-bottom:22px; line-height:1.9; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.result-summary p, .result-summary div { color:#c4c8d4; }

.test-blocks { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.test-block {
    width:80px; height:72px; border-radius:10px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
    font-size:0.78em; font-weight:600; color:white;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.test-block:hover { transform:scale(1.06); box-shadow:0 6px 16px rgba(0,0,0,0.3); }
.test-block.selected { box-shadow:0 0 0 3px #fdbb2d, 0 6px 16px rgba(0,0,0,0.35); transform:scale(1.08); }
.block-status { font-size:0.82em; }
.block-num { font-size:0.7em; opacity:0.85; margin-top:2px; }

.detail-box {
    background:rgba(255,255,255,0.05); padding:18px 22px; border-radius:12px;
    margin-bottom:18px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.detail-box h4 { color:#fcd9b8; margin-bottom:10px; font-size:0.95em; font-weight:600; }
.detail-box p, .detail-box div { color:#c4c8d4; }

.detail-io { margin-top:12px; }
.detail-io pre {
    background:rgba(0,0,0,0.2); padding:10px 14px; border-radius:8px;
    margin-top:4px; font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace;
    font-size:0.84em; white-space:pre-wrap; border:1px solid rgba(255,255,255,0.08);
    color:#e0dcd0;
}

.code-section {
    background:rgba(255,255,255,0.05); border-radius:12px;
    border:1px solid rgba(255,255,255,0.08); margin-top:22px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:hidden;
}
.code-toggle { padding:10px 22px; cursor:pointer; color:#c4c8d4; font-weight:500; user-select:none; font-size:0.88em; transition:background 0.2s; }
.code-toggle:hover { background:rgba(255,255,255,0.06); }
.code-section pre { padding:0 22px 18px; font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace; font-size:0.84em; white-space:pre-wrap; overflow-x:auto; max-height:300px; overflow-y:auto; color:#e0dcd0; }

.user-info {
    background:rgba(255,255,255,0.05); padding:18px 22px; border-radius:12px;
    margin-bottom:22px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.user-info p { color:#c4c8d4; }

#submission-stats { color:#a0a8b4 !important; }

.admin-actions { margin-bottom:22px; }
.admin-actions .btn-primary { width:auto; display:inline-block; text-decoration:none; padding:8px 22px; }

.admin-tabs {
    display:flex; gap:0; margin-bottom:22px;
    border-bottom:2px solid rgba(255,255,255,0.08);
}
.admin-tab {
    padding:10px 20px; color:#a0a8b4; text-decoration:none;
    font-size:0.9em; border-bottom:2px solid transparent;
    margin-bottom:-2px; transition:all 0.2s;
}
.admin-tab:hover { color:#fcd9b8; }
.admin-tab.active { color:#fdbb2d; border-bottom-color:#fdbb2d; }

.admin-stats {
    display:flex; gap:20px; flex-wrap:wrap;
}
.stat-card {
    flex:1; min-width:180px;
    background:rgba(255,255,255,0.05); padding:28px 24px; border-radius:12px;
    text-align:center; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.stat-num { font-size:2.4em; font-weight:700; color:#fdbb2d; }
.stat-label { font-size:0.88em; color:#a0a8b4; margin-top:6px; }

.admin-activity-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:20px; }
.admin-activity-card { background:rgba(255,255,255,0.05); border:1px solid rgba(212,175,55,0.18); border-radius:12px; padding:16px 18px; }
.admin-activity-card h4 { margin:0 0 12px; color:#fcd9b8; font-size:0.95em; }
.admin-activity-card ul { list-style:none; margin:0; padding:0; }
.admin-activity-card li { padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:0.86em; }
.admin-activity-card li:last-child { border-bottom:none; }
.activity-main { display:block; color:#e8e8e8; margin-bottom:3px; }
.activity-meta { color:#8a94a6; font-size:0.92em; }
.activity-empty { color:#8a94a6; }

.admin-wizard-steps { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 20px; }
.wizard-step { padding:6px 14px; border-radius:20px; border:1px solid rgba(212,175,55,0.25); color:#a0a8b4; font-size:0.88em; }
.wizard-step.active { color:#fcd9b8; border-color:#d4af37; background:rgba(212,175,55,0.12); }
.wizard-step.done { color:#73d13d; border-color:rgba(82,196,26,0.35); }
.admin-wizard-panel, .admin-section { background:rgba(255,255,255,0.04); border:1px solid rgba(212,175,55,0.15); border-radius:12px; padding:18px 20px; margin-bottom:20px; }
.admin-section h3 { margin-top:0; color:#fcd9b8; }
.admin-hint { color:#a0a8b4; font-size:0.9em; margin:0 0 14px; }
.admin-warning { background:rgba(255,193,7,0.12); border:1px solid rgba(255,193,7,0.35); color:#ffd666; padding:10px 14px; border-radius:8px; margin-bottom:12px; font-size:0.9em; }
.md-edit-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.md-preview-panel { min-height:160px; padding:12px; border-radius:8px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); overflow:auto; font-size:0.9em; }
.admin-edit-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.user-actions-cell { white-space:nowrap; }
.user-actions-cell .btn-sm { margin:2px 3px 2px 0; }
.admin-replies-box { padding:10px 12px; background:rgba(0,0,0,0.2); border-radius:8px; }
.admin-reply-list { list-style:none; margin:0; padding:0; }
.admin-reply-list li { padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:0.88em; }
.tc-expand-modal { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; }
.tc-expand-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.tc-expand-panel { position:relative; width:min(720px,92vw); max-height:80vh; background:#1a1028; border:1px solid rgba(212,175,55,0.35); border-radius:12px; overflow:hidden; }
.tc-expand-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#fcd9b8; }
.tc-expand-close { background:none; border:none; color:#fff; font-size:1.4em; cursor:pointer; }
.tc-expand-body { margin:0; padding:16px; max-height:60vh; overflow:auto; white-space:pre-wrap; font-size:0.85em; color:#e8e8e8; }

body.lc-white .admin-activity-card { background:#fff; border-color:#e8e8e8; }
body.lc-white .admin-wizard-panel, body.lc-white .admin-section { background:#fff; border-color:#e8e8e8; }
body.lc-white .md-preview-panel { background:#fafafa; border-color:#e8e8e8; color:#262626; }

    display:inline-block; padding:2px 10px; border-radius:4px;
    font-size:0.78em; font-weight:500;
    background:rgba(255,255,255,0.08); color:#c4c8d4;
    border:1px solid rgba(255,255,255,0.12);
}
.badge-green { background:rgba(82,196,26,0.15); color:#73d13d; border-color:rgba(82,196,26,0.3); }
.badge-red { background:rgba(255,77,79,0.15); color:#ff7875; border-color:rgba(255,77,79,0.3); }
.badge-gold { background:rgba(253,187,45,0.15); color:#fdbb2d; border-color:rgba(253,187,45,0.3); }

.pagination { display:flex; gap:4px; flex-wrap:wrap; }
.page-btn {
    min-width:32px; text-align:center; cursor:pointer;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05); color:#c4c8d4;
    border-radius:6px; font-size:0.84em; padding:4px 10px;
}
.page-active {
    background:rgba(253,187,45,0.2); color:#fdbb2d;
    border-color:rgba(253,187,45,0.4);
}

.announce-card {
    background:rgba(255,255,255,0.05); padding:18px 22px; border-radius:12px;
    margin-bottom:14px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.announce-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.announce-title { color:#fcd9b8; font-weight:600; font-size:1em; }
.announce-date { color:#a0a8b4; font-size:0.82em; }
.announce-body { color:#c4c8d4; font-size:0.9em; line-height:1.7; }

.tc-cell pre { margin:0; white-space:pre-wrap; }
.tc-edit-input {
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15);
    border-radius:6px; color:#e0dcd0; padding:6px 10px;
    font-family:'SF Mono','Fira Code',monospace; font-size:0.82em;
    transition:border-color 0.3s;
}
.tc-edit-input:focus { border-color:#fdbb2d; outline:none; }
.tc-preview { color:#c4c8d4; font-size:0.82em; cursor:pointer; max-width:240px; overflow:hidden; text-overflow:ellipsis; }

.data-table td .btn-sm { margin-right:4px; }

.error-page { text-align:center; padding:80px 20px; }
.error-page h2 { font-size:3.5em; color:#fcd9b8; font-weight:300; text-shadow:0 0 30px rgba(252,217,184,0.3); }
.error-page p { color:#a0a8b4; margin:14px 0 22px; }
.error-page a { color:#fdbb2d; text-decoration:none; transition:all 0.2s; }
.error-page a:hover { color:#fcd9b8; text-shadow:0 0 10px rgba(253,187,45,0.5); }

@media (max-width:768px) {
    .problem-layout { flex-direction:column; }
    .layout-resizer { display:none; }
    .auth-box { width:100%; max-width:380px; }
    .test-block { width:60px; height:56px; font-size:0.68em; }
    #navbar { padding:0 16px; }
    #nav-links a { margin-left:12px; font-size:0.82em; }
    #settings-panel { right:8px; min-width:220px; }
    .ac-code-meta { flex-direction:column; gap:2px; }
}

.btn-upload-bg {
    padding: 3px 12px;
    background: rgba(255,255,255,0.08); color: #c4c8d4;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    cursor: pointer; font-size: 0.80em; transition: all 0.2s;
}
.btn-upload-bg:hover { background: rgba(255,255,255,0.14); color: #fcd9b8; }

.setting-row-slider { flex-wrap: wrap; gap: 6px; }
.setting-row-slider label { flex: 1; min-width: 100px; }
.setting-row-slider input[type="range"] {
    width: 100%; margin-top: 4px;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.2); outline: none;
}
.setting-row-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fdbb2d; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.3);
}
body.lc-white .setting-row-slider input[type="range"] {
    background: #e0e0e0;
}
body.lc-white .setting-row-slider input[type="range"]::-webkit-slider-thumb {
    background: #1890ff; border-color: #91d5ff;
}

.setting-row-actions { display:flex; align-items:center; gap:8px; }

.btn-delete-bg {
    padding: 2px 7px;
    background: rgba(255,77,79,0.12); color: #ff7875;
    border: 1px solid rgba(255,77,79,0.20); border-radius: 4px;
    cursor: pointer; font-size: 0.72em; transition: all 0.2s;
    display: none; line-height: 1.4;
}
.btn-delete-bg:hover { background: rgba(255,77,79,0.22); color: #ffa39e; }

body.lc-white .btn-delete-bg {
    background: #fff1f0; color: #ff4d4f; border-color: #ffa39e;
}
body.lc-white .btn-delete-bg:hover { background: #ffd8d7; }

.setting-row-reset {
    justify-content: center; padding-top: 10px; margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
body.lc-white .setting-row-reset { border-top-color: #f0f0f0; }

.btn-reset-bg {
    padding: 3px 16px;
    background: rgba(255,255,255,0.05); color: #a0a8b4;
    border: 1px solid rgba(255,255,255,0.10); border-radius: 6px;
    cursor: pointer; font-size: 0.78em; transition: all 0.2s;
}
.btn-reset-bg:hover { background: rgba(255,255,255,0.12); color: #c4c8d4; }

body.lc-white .btn-reset-bg {
    background: #f0f4ff; color: #7b8fdb; border-color: #c5d4ff;
}
body.lc-white .btn-reset-bg:hover { color: #5b6fd0; background: #e0e9ff; border-color: #7b8fdb; }

body.lc-white { background: #f7f8fa; }
body.lc-white #bg-layer { display: none; }
body.lc-white #bg-overlay { display: none; }
body.lc-white #navbar {
    background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.lc-white .nav-brand a { color: #262626; text-shadow: none; }
body.lc-white #nav-links a { color: #595959; }
body.lc-white #nav-links a:hover { color: #1890ff; text-shadow: none; }
body.lc-white .nav-settings-btn { color: #7b8fdb; }
body.lc-white .nav-settings-btn:hover { color: #5b6fd0; background: rgba(123,143,219,0.10); }
body.lc-white #settings-panel {
    background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid #e8e8e8; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
body.lc-white #settings-panel h4 { color: #262626; }
body.lc-white .setting-row label { color: #595959; }
body.lc-white #settings-panel .toggle-switch {
    background:
        linear-gradient(#f8fafc, #f8fafc) padding-box,
        linear-gradient(90deg, #67e8f9, #f9a8d4) border-box;
    box-shadow: none;
}
body.lc-white #settings-panel .toggle-switch::after {
    background: linear-gradient(90deg, #22d3ee 0%, #67e8f9 40%, #fbcfe8 100%);
}
body.lc-white #settings-panel .toggle-switch.on {
    box-shadow: 0 0 8px rgba(34,211,238,0.28), 0 0 5px rgba(251,207,232,0.22);
}
body.lc-white .btn-upload-bg { background: #f0f4ff; color: #7b8fdb; border-color: #c5d4ff; }
body.lc-white .btn-upload-bg:hover { color: #5b6fd0; border-color: #7b8fdb; background: #e0e9ff; }
body.lc-white .auth-container h1 {
    background: none; -webkit-text-fill-color: #262626; text-shadow: none;
}
body.lc-white .auth-box {
    background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .auth-link { color: #8c8c8c; }
body.lc-white .auth-link a { color: #1890ff; }
body.lc-white .auth-link a:hover { color: #40a9ff; text-shadow: none; }
body.lc-white .form-group label { color: #595959; }
body.lc-white .form-group input[type="text"],
body.lc-white .form-group input[type="password"],
body.lc-white .form-group input[type="number"],
body.lc-white .form-group textarea {
    background: #fff; border: 1px solid #d9d9d9; color: #262626;
}
body.lc-white .form-group input:focus,
body.lc-white .form-group textarea:focus {
    border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.1);
}
body.lc-white .btn-primary { background: #1890ff; color: #fff; }
body.lc-white .btn-primary:hover { box-shadow: 0 4px 12px rgba(24,144,255,0.25); }
body.lc-white .btn-secondary { background: #f5f5f5; color: #595959; border-color: #d9d9d9; }
body.lc-white .btn-secondary:hover { color: #1890ff; border-color: #1890ff; background: #e6f7ff; }
body.lc-white .btn-sm { background: #f5f5f5; color: #595959; border-color: #d9d9d9; }
body.lc-white .btn-sm:hover { color: #1890ff; border-color: #1890ff; }
body.lc-white .btn-danger { background: #fff1f0; color: #ff4d4f; border-color: #ffa39e; }
body.lc-white .btn-danger:hover { background: #ffd8d7; }
body.lc-white .data-table {
    background: #fff; border: 1px solid #f0f0f0; border-radius: 6px;
}
body.lc-white .data-table th { background: #fafafa; color: #595959; }
body.lc-white .data-table td { border-bottom: 1px solid #f0f0f0; }
body.lc-white .data-table tr:hover td { background: #fafafa; }
body.lc-white .clickable:hover td { background: #e6f7ff !important; }
body.lc-white .back-link { color: #8c8c8c; }
body.lc-white .back-link:hover { color: #1890ff; }
body.lc-white .problem-header h2 { color: #262626; }
body.lc-white .problem-left .section {
    background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .problem-left .section h3 { color: #595959; }
body.lc-white .problem-left .section div { color: #262626; }
body.lc-white .problem-left .section pre {
    background: #fafafa; color: #262626; border: 1px solid #f0f0f0;
}
body.lc-white .lc-example-hint { color:#8c8c8c; }
body.lc-white .lc-example-tab {
    background:#f5f5f5;
    color:#595959;
    border-color:#e8e8e8;
}
body.lc-white .lc-example-tab:hover {
    color:#1890ff;
    border-color:#91d5ff;
}
body.lc-white .lc-example-tab.active {
    color:#fff;
    background:#1890ff;
}
body.lc-white .lc-example-card {
    background:#fafafa;
    border-color:#f0f0f0;
}
body.lc-white .lc-example-label {
    color:#262626 !important;
}
body.lc-white .lc-copy-btn {
    background:#fff;
    color:#8c8c8c;
    border:1px solid #e8e8e8;
}
body.lc-white .lc-copy-btn:hover {
    background:#e6f7ff;
    color:#1890ff;
}
body.lc-white .lc-copy-btn.copied {
    background:#f6ffed;
    color:#52c41a;
    border-color:#b7eb8f;
}
body.lc-white .lc-example-pre {
    background:#fff !important;
    color:#262626 !important;
    border-color:#e8e8e8 !important;
    border-left-color:#1890ff !important;
}
body.lc-white .lc-example-empty {
    color:#8c8c8c !important;
    background:#fafafa;
    border-color:#e8e8e8;
}
body.lc-white .limit-badge { background: #fafafa; color: #595959; border-color: #f0f0f0; }
body.lc-white .editor-wrapper {
    background: #fff; border: 1px solid #e8e8e8;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.lc-white .editor-wrapper h3 { color: #595959; }
body.lc-white .btn-ac-load { background: #e6f7ff; color: #1890ff; border-color: #91d5ff; }
body.lc-white .btn-ac-load:hover { background: #bae7ff; box-shadow: none; }
body.lc-white .btn-undo { background: #f5f5f5; color: #595959; border-color: #d9d9d9; }
body.lc-white .btn-undo:hover { background: #fafafa; color: #262626; }
body.lc-white .autocomplete-toggle { color: #8c8c8c; }
body.lc-white .ac-codes-dropdown {
    background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid #e8e8e8; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
body.lc-white .ac-codes-header { color: #262626; border-bottom-color: #f0f0f0; }
body.lc-white .ac-codes-close { color: #8c8c8c; }
body.lc-white .ac-codes-close:hover { color: #ff4d4f; }
body.lc-white .ac-code-item { border-bottom-color: #f0f0f0; }
body.lc-white .ac-code-item:hover { background: #e6f7ff; }
body.lc-white .ac-code-id { color: #1890ff; }
body.lc-white .ac-code-date { color: #8c8c8c; }
body.lc-white .ac-code-perf { color: #bfbfbf; }
body.lc-white .ac-codes-loading, body.lc-white .ac-codes-empty { color: #8c8c8c; }
body.lc-white .test-cases-preview {
    background: #fff; border: 1px solid #e8e8e8;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .test-cases-preview h4 { color: #595959; }
body.lc-white .test-case-item {
    background: #fafafa; border-color: #f0f0f0; color: #262626;
}
body.lc-white .test-case-item pre { background: #f5f5f5; color: #262626; }
body.lc-white .page-container h2 { color: #262626; }
body.lc-white .page-container h3 { color: #595959; }
body.lc-white .page-container h4 { color: #8c8c8c; }
body.lc-white .result-summary {
    background: #fff; border: 1px solid #e8e8e8;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .result-summary p, body.lc-white .result-summary div { color: #262626; }
body.lc-white .detail-box {
    background: #fff; border: 1px solid #e8e8e8;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .detail-box h4 { color: #262626; }
body.lc-white .detail-box p, body.lc-white .detail-box div { color: #595959; }
body.lc-white .code-section {
    background: #fff; border: 1px solid #e8e8e8;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .code-toggle { color: #595959; }
body.lc-white .code-toggle:hover { background: #fafafa; }
body.lc-white .code-section pre { color: #262626; }
body.lc-white .user-info {
    background: #fff; border: 1px solid #e8e8e8;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.lc-white .user-info p { color: #262626; }
body.lc-white .error-page h2 { color: #8c8c8c; text-shadow: none; }
body.lc-white .error-page p { color: #bfbfbf; }
body.lc-white .error-page a { color: #1890ff; }
body.lc-white .error-page a:hover { color: #40a9ff; text-shadow: none; }
body.lc-white .shortcut-hint { color: #bfbfbf; }

::selection { background:rgba(253,187,45,0.3); color:#fff; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:3px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }

#crop-modal {
    position:fixed; top:0; left:0; width:100%; height:100%;
    z-index:500; display:flex; align-items:center; justify-content:center;
}
.crop-backdrop {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.7); cursor:default;
}
.crop-panel {
    position:relative; z-index:1;
    background:rgba(20,20,50,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.15); border-radius:14px;
    box-shadow:0 12px 48px rgba(0,0,0,0.5);
    display:flex; flex-direction:column; max-width:92vw; max-height:92vh;
}
.crop-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.08);
    color:#fcd9b8; font-size:0.95em; font-weight:600;
}
.crop-close {
    background:none; border:none; color:#a0a8b4; cursor:pointer;
    font-size:1.5em; padding:0 6px; line-height:1; transition:color 0.2s;
}
.crop-close:hover { color:#fdbb2d; }
.crop-body {
    padding:16px; display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex:1;
}
#crop-canvas { max-width:100%; max-height:68vh; cursor:crosshair; border-radius:4px; }
.crop-footer {
    display:flex; align-items:center; justify-content:flex-end; gap:10px;
    padding:14px 20px; border-top:1px solid rgba(255,255,255,0.08);
}
.crop-footer .btn-primary { width:auto; }
.crop-footer .btn-secondary { padding:8px 20px; }

body.lc-white .crop-panel {
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:1px solid #e8e8e8; box-shadow:0 8px 32px rgba(0,0,0,0.12);
}
body.lc-white .crop-header { color:#262626; border-bottom-color:#f0f0f0; }
body.lc-white .crop-close { color:#8c8c8c; }
body.lc-white .crop-close:hover { color:#ff4d4f; }
body.lc-white .crop-footer { border-top-color:#f0f0f0; }
body.lc-white .crop-footer .btn-secondary { border-color:#d9d9d9; }

body.lc-white .admin-tabs { border-bottom-color:#f0f0f0; }
body.lc-white .admin-tab { color:#8c8c8c; }
body.lc-white .admin-tab:hover { color:#262626; }
body.lc-white .admin-tab.active { color:#1890ff; border-bottom-color:#1890ff; }
body.lc-white .stat-card {
    background:#fff; border:1px solid #f0f0f0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.lc-white .stat-num { color:#1890ff; }
body.lc-white .stat-label { color:#8c8c8c; }
body.lc-white .badge { background:#fafafa; color:#595959; border-color:#f0f0f0; }
body.lc-white .badge-green { background:#f6ffed; color:#52c41a; border-color:#b7eb8f; }
body.lc-white .badge-red { background:#fff1f0; color:#ff4d4f; border-color:#ffa39e; }
body.lc-white .badge-gold { background:#fffbe6; color:#faad14; border-color:#ffe58f; }
body.lc-white .page-btn { background:#fff; color:#595959; border-color:#d9d9d9; }
body.lc-white .page-active { background:#e6f7ff; color:#1890ff; border-color:#91d5ff; }
body.lc-white .announce-card {
    background:#fff; border:1px solid #f0f0f0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.lc-white .announce-title { color:#262626; }
body.lc-white .announce-date { color:#8c8c8c; }
body.lc-white .announce-body { color:#595959; }
body.lc-white .tc-edit-input { background:#fff; border-color:#d9d9d9; color:#262626; }
body.lc-white .tc-edit-input:focus { border-color:#1890ff; }
body.lc-white .tc-preview { color:#595959; }

/* ── MioOJ: album-mode gold frame, transitions, UX polish ── */
body:not(.lc-white) #navbar {
    border-bottom: none;
    box-shadow:
        inset 0 0 0 1px rgba(212,175,55,0.45),
        inset 0 0 0 3px rgba(8,8,24,0.92),
        0 0 0 1px rgba(212,175,55,0.35),
        0 4px 24px rgba(0,0,0,0.28);
}
body:not(.lc-white) #settings-panel {
    border: 1px solid rgba(212,175,55,0.4);
    box-shadow:
        inset 0 0 0 1px rgba(212,175,55,0.2),
        inset 0 0 0 3px rgba(15,15,40,0.85),
        0 8px 32px rgba(0,0,0,0.35),
        0 0 20px rgba(212,175,55,0.08);
}
body:not(.lc-white) .auth-box {
    border: 1px solid rgba(212,175,55,0.38);
    box-shadow:
        inset 0 0 0 1px rgba(212,175,55,0.18),
        inset 0 0 0 3px rgba(12,12,32,0.75),
        0 8px 32px rgba(0,0,0,0.22),
        0 0 24px rgba(212,175,55,0.1);
}

.auth-title {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-mascot { filter: drop-shadow(0 0 8px rgba(212,175,55,0.4)); }

#content.page-leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.14s ease, transform 0.14s ease; }
#content.page-enter { animation: page-enter 0.38s ease forwards; }
@keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#toast-container {
    position: fixed; top: 68px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
    padding: 10px 16px; border-radius: 8px; font-size: 0.88em;
    background: rgba(20,20,50,0.95); color: #e8e4dc;
    border: 1px solid rgba(212,175,55,0.35);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    opacity: 0; transform: translateX(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto; max-width: 320px;
}
.toast-show { opacity: 1; transform: translateX(0); }
.toast-success { border-color: rgba(76,175,80,0.5); }
.toast-error { border-color: rgba(244,67,54,0.5); }
.toast-warning { border-color: rgba(255,152,0,0.5); }
body.lc-white .toast { background: #fff; color: #262626; border-color: #e8e8e8; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.mio-dialog {
    position: fixed; inset: 0; z-index: 13000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.18s ease;
}
.mio-dialog-show { opacity: 1; }
.mio-dialog-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55);
}
.mio-dialog-panel {
    position: relative; z-index: 1;
    width: min(420px, 92vw);
    background: rgba(20,20,50,0.96);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 14px;
    box-shadow:
        inset 0 0 0 1px rgba(212,175,55,0.2),
        inset 0 0 0 3px rgba(15,15,40,0.85),
        0 12px 40px rgba(0,0,0,0.45);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease;
}
.mio-dialog-show .mio-dialog-panel {
    transform: translateY(0) scale(1);
}
.mio-dialog-panel-wide {
    width: min(720px, 92vw);
}
.mio-dialog-pre {
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
    margin: 0;
}
.mio-dialog-header {
    padding: 14px 20px 10px;
    color: #fcd9b8;
    font-size: 0.95em;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mio-dialog-body { padding: 16px 20px 6px; }
.mio-dialog-message {
    margin: 0;
    color: #e8e4dc;
    font-size: 0.92em;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.mio-dialog-input {
    width: 100%; margin-top: 12px; box-sizing: border-box;
    padding: 9px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #e8e4dc; font-size: 0.9em;
}
.mio-dialog-input:focus {
    outline: none;
    border-color: rgba(212,175,55,0.55);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.15);
}
.mio-dialog-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px 16px;
}
.mio-dialog-footer .btn-primary,
.mio-dialog-footer .btn-secondary,
.mio-dialog-footer .btn-danger {
    width: auto; min-width: 72px; padding: 8px 18px;
}
.mio-dialog-danger .mio-dialog-btn-confirm {
    background: rgba(255,77,79,0.18);
    color: #ff9a9c;
    border: 1px solid rgba(255,77,79,0.45);
}
.mio-dialog-danger .mio-dialog-btn-confirm:hover {
    background: rgba(255,77,79,0.3);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255,77,79,0.25);
}

body.lc-white .mio-dialog-backdrop { background: rgba(0,0,0,0.35); }
body.lc-white .mio-dialog-panel {
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid #e8e8e8;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
body.lc-white .mio-dialog-header {
    color: #262626;
    border-bottom-color: #f0f0f0;
}
body.lc-white .mio-dialog-message { color: #595959; }
body.lc-white .mio-dialog-input {
    background: #fff;
    border-color: #d9d9d9;
    color: #262626;
}
body.lc-white .mio-dialog-input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24,144,255,0.15);
}
body.lc-white .mio-dialog-danger .mio-dialog-btn-confirm {
    background: #ff4d4f;
    color: #fff;
    border-color: #ff4d4f;
}
body.lc-white .mio-dialog-danger .mio-dialog-btn-confirm:hover {
    background: #ff7875;
    border-color: #ff7875;
    box-shadow: 0 4px 12px rgba(255,77,79,0.25);
}

.diff-badge {
    display: inline-block; padding: 2px 9px; border-radius: 4px;
    font-size: 0.78em; font-weight: 600; white-space: nowrap; border: 1px solid;
}
.diff-easy { background: rgba(76,175,80,0.15); color: #81c784; border-color: rgba(76,175,80,0.35); }
.diff-medium { background: rgba(212,175,55,0.15); color: var(--gold-light); border-color: rgba(212,175,55,0.4); }
.diff-hard { background: rgba(244,67,54,0.15); color: #ef9a9a; border-color: rgba(244,67,54,0.35); }
.diff-default { background: rgba(255,255,255,0.08); color: #a0a8b4; border-color: rgba(255,255,255,0.15); }
body.lc-white .diff-easy { background: #f6ffed; color: #237804; border-color: #b7eb8f; }
body.lc-white .diff-medium { background: #fffbe6; color: #ad6800; border-color: #ffe58f; }
body.lc-white .diff-hard { background: #fff1f0; color: #a8071a; border-color: #ffa39e; }
body.lc-white .diff-default { background: #fafafa; color: #595959; border-color: #d9d9d9; }

.filter-bar { display: flex; gap: 12px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.filter-input, .filter-select {
    padding: 8px 12px; border-radius: 8px; font-size: 0.9em;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.1);
    color: #c8c4bc; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.filter-input::placeholder { color: #7a8090; }
.filter-input { width: 220px; }
.filter-input-wide { width: 260px; }
.filter-hint {
    margin: 0 0 14px; font-size: 0.8em; color: #8a909c; line-height: 1.5;
}
.filter-hint code {
    padding: 1px 5px; border-radius: 3px;
    background: rgba(0,0,0,0.25); color: #b0a898;
    font-size: 0.95em;
}
.filter-input:focus, .filter-select:focus {
    outline: none; border-color: var(--gold-mid);
    background: rgba(0,0,0,0.34);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
body.lc-white .filter-input, body.lc-white .filter-select {
    background: #fafafa; border-color: #bfbfbf; color: #262626;
}
body.lc-white .filter-input::placeholder { color: #999; }
body.lc-white .filter-hint { color: #8c8c8c; }
body.lc-white .filter-hint code { background: #f0f0f0; color: #595959; }
body.lc-white .filter-input:focus, body.lc-white .filter-select:focus {
    background: #fff; border-color: #1890ff; box-shadow: 0 0 0 3px rgba(24,144,255,0.12);
}
body.lc-white #nav-links a.nav-active {
    color: #1890ff;
    font-weight: 600;
}

.empty-hint { text-align: center; color: #a0a8b4 !important; padding: 28px 16px !important; font-size: 0.92em; line-height: 1.6; }
.empty-hint-block { color: #a0a8b4; text-align: center; padding: 32px 16px; font-size: 0.92em; }
body.lc-white .empty-hint, body.lc-white .empty-hint-block { color: #8c8c8c; }

.layout-resizer {
    width: 6px; flex-shrink: 0; cursor: col-resize; border-radius: 3px;
    background: rgba(212,175,55,0.15); margin: 0 4px;
    transition: background 0.2s, box-shadow 0.2s;
    align-self: stretch; min-height: 200px;
}
.layout-resizer:hover, .layout-resizer.dragging {
    background: rgba(212,175,55,0.45);
    box-shadow: 0 0 10px rgba(212,175,55,0.3);
}

.editor-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.editor-toolbar h3 { margin-bottom: 0 !important; }
.editor-theme-select {
    padding: 5px 10px; border-radius: 6px; font-size: 0.82em;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    color: #c4c8d4; cursor: pointer;
}
.editor-theme-select:focus { outline: none; border-color: var(--gold-mid); }
body.lc-white .editor-theme-select { background: #fff; border-color: #d9d9d9; color: #262626; }

.sample-pre {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(212,175,55,0.2) !important;
    border-left: 3px solid var(--gold-mid) !important;
}

.result-actions { margin-bottom: 18px; }
.btn-retry { display: inline-block; width: auto; padding: 8px 28px; text-decoration: none; text-align: center; }

.detail-box-animate { animation: detail-expand 0.32s ease forwards; }
@keyframes detail-expand {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 120px; }
}

.stats-cards {
    display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.stats-cards .stat-card { flex: 1; min-width: 120px; }

body:not(.lc-white) .announce-card-pinned {
    border: 1px solid rgba(212,175,55,0.45) !important;
    box-shadow: 0 0 18px rgba(212,175,55,0.15), inset 0 0 0 1px rgba(212,175,55,0.12);
}
body:not(.lc-white) .stats-cards .stat-card {
    border: 1px solid rgba(212,175,55,0.35);
    box-shadow: inset 0 0 0 1px rgba(212,175,55,0.15), 0 4px 16px rgba(0,0,0,0.15);
}

body:not(.lc-white) .back-link:hover { color: var(--gold-mid); }
body:not(.lc-white) .test-block.selected { box-shadow: 0 0 0 3px var(--gold-mid), 0 6px 16px rgba(0,0,0,0.35); }
body:not(.lc-white) .btn-ac-load {
    background: rgba(212,175,55,0.12); color: var(--gold-light);
    border-color: rgba(212,175,55,0.35);
}
body:not(.lc-white) .btn-ac-load:hover { background: rgba(212,175,55,0.22); box-shadow: 0 0 12px rgba(212,175,55,0.15); }
body:not(.lc-white) .ac-code-id { color: var(--gold-mid); }
body:not(.lc-white) .autocomplete-toggle input[type="checkbox"] { accent-color: var(--gold-mid); }

/* ── Discussion / Comment shared styles ── */

.discussions-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.discussions-header h2 { font-size:1.35em; font-weight:600; color:#fcd9b8; }

.discussion-form, .comment-form {
    background:rgba(255,255,255,0.05); padding:16px 20px; border-radius:12px;
    margin-bottom:16px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.discussion-form textarea, .comment-form textarea {
    width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; color:#e0dcd0; padding:10px 14px; font-size:0.9em; resize:vertical;
    font-family: inherit;
}
.discussion-form textarea:focus, .comment-form textarea:focus { border-color:var(--gold-mid); outline:none; }
.discussion-form-actions { display:flex; gap:10px; margin-top:10px; }

.discussion-card {
    background:rgba(255,255,255,0.05); padding:16px 20px; border-radius:12px;
    margin-bottom:12px; border:1px solid rgba(255,255,255,0.08); cursor:pointer;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:border-color 0.2s, box-shadow 0.2s;
}
.discussion-card:hover { border-color:var(--gold-mid); box-shadow:0 0 12px rgba(212,175,55,0.12); }
.discussion-card-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.discussion-card-preview { color:#c4c8d4; font-size:0.92em; line-height:1.5; margin-bottom:8px; white-space:pre-wrap; }
.discussion-card-footer { display:flex; gap:16px; color:#a0a8b4; font-size:0.82em; }
.discussion-username { color:#c4c8d4; font-weight:500; font-size:0.9em; }
.discussion-time { color:#8a909c; font-size:0.8em; margin-left:auto; }

.discussion-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:center; flex-shrink:0; border:1px solid rgba(212,175,55,0.35); }
.discussion-avatar-small { width:22px; height:22px; border-radius:50%; object-fit:cover; object-position:center; flex-shrink:0; border:1px solid rgba(212,175,55,0.3); }

.discussion-detail-post {
    background:rgba(255,255,255,0.05); padding:20px 24px; border-radius:12px;
    margin-bottom:16px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.discussion-detail-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.discussion-detail-body { color:#c4c8d4; font-size:0.95em; line-height:1.8; }
.discussion-detail-actions { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.06); }

.discussion-reply-form, .inline-reply-form {
    background:rgba(255,255,255,0.05); padding:14px 18px; border-radius:10px;
    margin-bottom:14px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.discussion-reply-form textarea, .inline-reply-form textarea {
    width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; color:#e0dcd0; padding:8px 12px; font-size:0.88em; resize:vertical;
    font-family: inherit;
}
.discussion-reply-form textarea:focus, .inline-reply-form textarea:focus { border-color:var(--gold-mid); outline:none; }

.discussion-reply, .comment-reply {
    background:rgba(255,255,255,0.04); padding:12px 16px; border-radius:10px;
    margin-bottom:8px; border:1px solid rgba(255,255,255,0.06);
}
.discussion-reply.reply-indent, .comment-reply.reply-indent { margin-left:28px; }
.discussion-reply-header, .comment-reply-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.discussion-reply-actions, .comment-reply-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }

/* Like buttons */
.btn-like {
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    color:#a0a8b4; border-radius:8px; padding:4px 14px; cursor:pointer;
    font-size:0.85em; transition:all 0.2s;
}
.btn-like:hover { border-color:var(--gold-mid); color:var(--gold-light); }
.btn-like.liked { color:#ef4444; border-color:rgba(239,68,68,0.4); background:rgba(239,68,68,0.12); }

.btn-like-sm {
    background:none; border:none; color:#a0a8b4; cursor:pointer;
    font-size:0.8em; padding:2px 8px; border-radius:4px; transition:all 0.2s;
}
.btn-like-sm:hover { color:var(--gold-light); background:rgba(255,255,255,0.06); }
.btn-like-sm.liked { color:#ef4444; }

.btn-reply-to {
    background:none; border:none; color:#8a909c; cursor:pointer;
    font-size:0.8em; padding:2px 8px; border-radius:4px; transition:all 0.2s;
}
.btn-reply-to:hover { color:var(--gold-light); background:rgba(255,255,255,0.06); }

.btn-delete-discussion { color:#ff7875; border-color:rgba(255,120,117,0.3); background:rgba(255,120,117,0.08); }

/* Comment card */
.comment-card {
    background:rgba(255,255,255,0.05); padding:16px 20px; border-radius:12px;
    margin-bottom:12px; border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.comment-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.comment-actions { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.06); }
.comment-replies { margin-top:10px; }

/* Problem tabs */
.problem-tabs {
    display:flex; gap:0; margin-bottom:14px;
    border-bottom:2px solid rgba(255,255,255,0.08);
}
.problem-tab {
    padding:8px 20px; color:#a0a8b4; background:none; border:none;
    font-size:0.92em; border-bottom:2px solid transparent;
    margin-bottom:-2px; cursor:pointer; transition:all 0.2s;
}
.problem-tab:hover { color:#fcd9b8; }
.problem-tab.active { color:var(--gold-mid); border-bottom-color:var(--gold-mid); }

.problem-comments-panel {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding-right: 4px;
}
.problem-comments-header { margin-bottom: 12px !important; }
.problem-comments-header h3 {
    margin: 0; font-size: 1.05em; font-weight: 600; color: #fcd9b8;
}
.problem-comment-back {
    display: inline-block; margin-bottom: 12px; cursor: pointer;
    background: none; border: none; font: inherit; text-align: left;
    padding: 0;
}

/* Markdown body */
.markdown-body { color:#c4c8d4; line-height:1.8; word-wrap:break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color:#fcd9b8; margin:12px 0 8px; }
.markdown-body h1 { font-size:1.3em; }
.markdown-body h2 { font-size:1.15em; }
.markdown-body h3 { font-size:1.05em; }
.markdown-body p { margin-bottom:8px; }
.markdown-body a { color:var(--gold-mid); }
.markdown-body code {
    background:rgba(0,0,0,0.3); padding:2px 6px; border-radius:4px;
    font-family:'SF Mono','Fira Code','Fira Mono','Roboto Mono',monospace;
    font-size:0.88em; color:var(--gold-light);
}
.markdown-body pre {
    background:rgba(0,0,0,0.35); padding:12px 16px; border-radius:8px;
    overflow-x:auto; margin:8px 0; border:1px solid rgba(255,255,255,0.06);
}
.markdown-body pre code { background:none; padding:0; color:#e0dcd0; }
.markdown-body blockquote { border-left:3px solid var(--gold-mid); padding-left:12px; margin:8px 0; color:#a0a8b4; }
.markdown-body ul, .markdown-body ol { padding-left:24px; margin:8px 0; }
.markdown-body .md-table { border-collapse:collapse; width:100%; margin:8px 0; }
.markdown-body .md-table th, .markdown-body .md-table td { border:1px solid rgba(255,255,255,0.1); padding:6px 12px; text-align:left; }
.markdown-body .md-table th { background:rgba(255,255,255,0.05); }
.markdown-body img { max-width:100%; border-radius:6px; }

/* White mode overrides for discussion */
body.lc-white .discussions-header h2 { color:#262626; }
body.lc-white .discussion-form, body.lc-white .comment-form,
body.lc-white .discussion-card, body.lc-white .discussion-detail-post,
body.lc-white .discussion-reply-form, body.lc-white .inline-reply-form,
body.lc-white .discussion-reply, body.lc-white .comment-card, body.lc-white .comment-reply {
    background:#fff; border:1px solid #e8e8e8; backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
body.lc-white .discussion-card:hover { border-color:#1890ff; box-shadow:0 0 8px rgba(24,144,255,0.1); }
body.lc-white .discussion-form textarea, body.lc-white .comment-form textarea,
body.lc-white .discussion-reply-form textarea, body.lc-white .inline-reply-form textarea {
    background:#fafafa; border-color:#d9d9d9; color:#262626;
}
body.lc-white .discussion-form textarea:focus, body.lc-white .comment-form textarea:focus,
body.lc-white .discussion-reply-form textarea:focus, body.lc-white .inline-reply-form textarea:focus { border-color:#1890ff; }
body.lc-white .discussion-card-preview { color:#595959; }
body.lc-white .discussion-card-footer { color:#8c8c8c; }
body.lc-white .discussion-username { color:#262626; }
body.lc-white .discussion-time { color:#bfbfbf; }
body.lc-white .discussion-avatar { border-color:#d9d9d9; }
body.lc-white .discussion-avatar-small { border-color:#d9d9d9; }
body.lc-white .discussion-detail-body { color:#262626; }
body.lc-white .btn-like { background:#fafafa; border-color:#d9d9d9; color:#8c8c8c; }
body.lc-white .btn-like:hover { color:#ff4d4f; border-color:#ffa39e; }
body.lc-white .btn-like.liked { color:#ff4d4f; border-color:#ffa39e; background:#fff1f0; }
body.lc-white .btn-like-sm { color:#8c8c8c; }
body.lc-white .btn-like-sm:hover { color:#ff4d4f; }
body.lc-white .btn-like-sm.liked { color:#ff4d4f; }
body.lc-white .btn-reply-to { color:#bfbfbf; }
body.lc-white .btn-reply-to:hover { color:#1890ff; }
body.lc-white .btn-delete-discussion { color:#ff4d4f; border-color:#ffa39e; background:#fff1f0; }
body.lc-white .problem-tabs { border-bottom-color:#f0f0f0; }
body.lc-white .problem-tab { color:#8c8c8c; }
body.lc-white .problem-tab:hover { color:#262626; }
body.lc-white .problem-tab.active { color:#1890ff; border-bottom-color:#1890ff; }
body.lc-white .problem-comments-header h3 { color: #262626; }
body.lc-white .markdown-body { color:#262626; }
body.lc-white .markdown-body h1, body.lc-white .markdown-body h2, body.lc-white .markdown-body h3 { color:#262626; }
body.lc-white .markdown-body a { color:#1890ff; }
body.lc-white .markdown-body code { background:#f0f0f0; color:#d4380d; }
body.lc-white .markdown-body pre { background:#fafafa; border-color:#f0f0f0; }
body.lc-white .markdown-body pre code { color:#262626; }
body.lc-white .markdown-body blockquote { color:#8c8c8c; border-left-color:#1890ff; }
body.lc-white .markdown-body .md-table th { background:#fafafa; }
body.lc-white .markdown-body .md-table th, body.lc-white .markdown-body .md-table td { border-color:#f0f0f0; }

/* ===== Phase 13: 排行榜 ===== */
.leaderboard-table { width:100%; }
.leaderboard-table .rank-col { width:60px; text-align:center; font-weight:700; color:var(--gold-mid); }
.leaderboard-table .highlight-row { background:rgba(212,175,55,0.12); }
.leaderboard-table .highlight-row td { color:var(--gold-light); }
.user-cell { display:flex; align-items:center; gap:10px; }
.user-avatar-small { width:28px; height:28px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.2); object-fit:cover; }
.my-rank-card {
    background:rgba(20,20,50,0.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--gold-border); border-radius:12px; padding:16px 20px; margin-bottom:20px;
}
.my-rank-info { display:flex; align-items:center; gap:12px; }
.my-rank-avatar { width:36px; height:36px; border-radius:50%; border:2px solid var(--gold-mid); object-fit:cover; }
.my-rank-name { font-size:16px; font-weight:600; color:var(--gold-light); }
.my-rank-label { font-size:13px; color:var(--gold-mid); padding:2px 10px; border:1px solid rgba(212,175,55,0.35); border-radius:999px; }
.my-rank-stats { display:flex; gap:16px; margin-left:auto; }
.stat-item { color:rgba(255,255,255,0.85); font-size:14px; }
.user-profile-link:hover { opacity:0.88; }

.public-profile-card {
    max-width:480px; margin:0 auto; text-align:center;
    background:rgba(20,20,50,0.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--gold-border); border-radius:16px; padding:32px 24px 28px;
}
.public-profile-avatar {
    width:88px; height:88px; border-radius:50%; object-fit:cover;
    border:3px solid var(--gold-mid); margin-bottom:14px;
}
.public-profile-name { margin:0 0 18px; font-size:1.35em; color:var(--gold-light); }
.public-profile-stats {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:18px;
}
.public-stat {
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    border-radius:10px; padding:12px 8px;
}
.public-stat-num { display:block; font-size:1.15em; font-weight:600; color:#e8e4dc; }
.public-stat-label { display:block; font-size:0.78em; color:rgba(255,255,255,0.55); margin-top:4px; }
.public-profile-hint { font-size:0.82em; color:rgba(255,255,255,0.45); margin:0 0 18px; line-height:1.5; }

body.lc-white .public-profile-card { background:#fff; border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
body.lc-white .public-profile-name { color:#262626; }
body.lc-white .public-stat { background:#fafafa; border-color:#f0f0f0; }
body.lc-white .public-stat-num { color:#262626; }
body.lc-white .public-stat-label { color:#8c8c8c; }
body.lc-white .public-profile-hint { color:#8c8c8c; }
body.lc-white .my-rank-label { color:#1890ff; border-color:#91d5ff; background:#e6f7ff; }

body.lc-white .my-rank-card { background:#fff; border:1px solid #e8e8e8; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
body.lc-white .my-rank-name { color:#262626; }
body.lc-white .stat-item { color:#595959; }
body.lc-white .leaderboard-table .rank-col { color:#1890ff; }
body.lc-white .leaderboard-table .highlight-row { background:rgba(24,144,255,0.06); }
body.lc-white .leaderboard-table .highlight-row td { color:#262626; }
body.lc-white .user-avatar-small { border-color:#d9d9d9; }

/* ===== Phase 13: 私信/消息 ===== */
.nav-msg-link {
    display:flex; align-items:center; position:relative; color:rgba(255,255,255,0.7);
    text-decoration:none; padding:6px 10px; border-radius:6px; transition:color 0.2s;
}
.nav-msg-link:hover { color:var(--gold-light); background:rgba(255,255,255,0.05); }
.nav-msg-icon { display:block; }
.nav-msg-badge {
    position:absolute; top:-2px; right:-4px; min-width:18px; height:18px;
    background:#ff4d4f; color:#fff; font-size:11px; font-weight:600; line-height:18px;
    text-align:center; border-radius:9px; padding:0 5px; pointer-events:none;
}

body.lc-white .nav-msg-link { color:#595959; }
body.lc-white .nav-msg-link:hover { color:#1890ff; background:rgba(24,144,255,0.06); }

.messages-container { display:flex; gap:0; height:calc(100vh - 140px); min-height:500px; }
.messages-sidebar {
    width:300px; min-width:260px;
    background:rgba(20,20,50,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-right:1px solid rgba(255,255,255,0.08); border-radius:12px 0 0 12px;
    display:flex; flex-direction:column; overflow:hidden;
}
.messages-main {
    flex:1;
    background:rgba(20,20,50,0.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-radius:0 12px 12px 0; display:flex; flex-direction:column; overflow:hidden;
}
.msg-placeholder {
    flex:1; display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.4); font-size:15px;
}

.messages-search-box { padding:12px; position:relative; }
.messages-search-box input {
    width:100%; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06); color:#fff; font-size:13px; outline:none;
    transition:border-color 0.2s;
}
.messages-search-box input::placeholder { color:rgba(255,255,255,0.3); }
.messages-search-box input:focus { border-color:var(--gold-mid); }
.msg-search-results {
    position:absolute; top:100%; left:12px; right:12px; z-index:10;
    background:rgba(30,30,60,0.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--gold-border); border-radius:0 0 8px 8px; max-height:240px; overflow-y:auto;
}
.msg-search-item {
    display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
    color:rgba(255,255,255,0.85); transition:background 0.15s;
}
.msg-search-item:hover { background:rgba(212,175,55,0.1); }
.msg-search-empty { padding:16px; text-align:center; color:rgba(255,255,255,0.4); font-size:13px; }

.msg-conv-list { flex:1; overflow-y:auto; }
.msg-conv-empty { padding:20px; text-align:center; color:rgba(255,255,255,0.4); font-size:13px; line-height:1.8; }
.msg-conv-item {
    display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.15s;
}
.msg-conv-item:hover { background:rgba(255,255,255,0.04); }
.msg-conv-item.active { background:rgba(212,175,55,0.12); }
.msg-conv-avatar { width:40px; height:40px; border-radius:50%; border:2px solid rgba(255,255,255,0.15); object-fit:cover; flex-shrink:0; }
.msg-conv-info { flex:1; min-width:0; }
.msg-conv-name { font-size:14px; font-weight:600; color:rgba(255,255,255,0.9); display:flex; align-items:center; gap:6px; }
.msg-conv-preview { font-size:12px; color:rgba(255,255,255,0.45); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-badge {
    background:#ff4d4f; color:#fff; font-size:11px; min-width:20px; height:20px; line-height:20px;
    text-align:center; border-radius:10px; padding:0 6px; display:inline-block;
}

.msg-chat-header {
    padding:14px 20px; font-size:16px; font-weight:600; color:var(--gold-light);
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.msg-chat-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.msg-empty-hint { text-align:center; color:rgba(255,255,255,0.4); padding:40px 0; }
.msg-load-more { text-align:center; padding:4px 0 8px; }

.msg-row { display:flex; gap:8px; align-items:flex-end; }
.msg-row-me { justify-content:flex-end; }
.msg-row-peer { justify-content:flex-start; }
.msg-avatar { width:32px; height:32px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.15); object-fit:cover; flex-shrink:0; }
.msg-bubble-me {
    max-width:70%; background:rgba(212,175,55,0.2); border:1px solid rgba(212,175,55,0.25);
    border-radius:16px 16px 4px 16px; padding:10px 14px;
}
.msg-bubble-peer {
    max-width:70%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
    border-radius:16px 16px 16px 4px; padding:10px 14px;
}
.msg-meta { font-size:11px; color:rgba(255,255,255,0.35); margin-bottom:4px; }
.msg-content { font-size:14px; color:rgba(255,255,255,0.9); line-height:1.5; word-break:break-word; }
.msg-content p { margin:0; }
.msg-content p+p { margin-top:6px; }
.msg-content code { background:rgba(0,0,0,0.3); padding:2px 6px; border-radius:3px; font-size:12px; }
.msg-content pre { background:rgba(0,0,0,0.3); padding:8px 12px; border-radius:6px; overflow-x:auto; font-size:12px; margin:6px 0; }
.msg-content pre code { background:none; padding:0; }

.msg-row-recalled { justify-content:center !important; }
.msg-bubble-recalled {
    font-size:13px; color:rgba(255,255,255,0.45); font-style:italic;
    padding:6px 14px; border-radius:8px;
    background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.12);
}
.msg-context-menu {
    position:fixed; z-index:14000; min-width:100px;
    background:rgba(20,20,50,0.96); border:1px solid rgba(212,175,55,0.35);
    border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.35); overflow:hidden;
}
.msg-context-item {
    display:block; width:100%; padding:10px 16px; border:none; background:none;
    color:#e8e4dc; font-size:0.88em; text-align:left; cursor:pointer;
}
.msg-context-item:hover { background:rgba(212,175,55,0.15); color:var(--gold-light); }

.msg-chat-input {
    display:flex; gap:8px; padding:12px 20px; border-top:1px solid rgba(255,255,255,0.08); align-items:flex-end;
}
.msg-chat-input textarea {
    flex:1; min-height:40px; max-height:120px; resize:none; padding:10px 14px;
    border-radius:8px; border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06); color:#fff; font-size:14px; outline:none;
    font-family:inherit; line-height:1.5; transition:border-color 0.2s;
}
.msg-chat-input textarea::placeholder { color:rgba(255,255,255,0.3); }
.msg-chat-input textarea:focus { border-color:var(--gold-mid); }
.msg-chat-input button {
    padding:10px 20px; background:linear-gradient(135deg,var(--gold-dark),var(--gold-mid));
    color:#1a1a2e; border:none; border-radius:8px; font-weight:600; cursor:pointer;
    font-size:14px; white-space:nowrap; transition:opacity 0.2s;
}
.msg-chat-input button:hover { opacity:0.9; }
.msg-chat-input button:disabled { opacity:0.5; cursor:not-allowed; }

.btn-sm { padding:4px 12px; font-size:12px; border-radius:6px; }

/* White mode overrides for messages */
body.lc-white .messages-sidebar { background:#fff; border-color:#f0f0f0; }
body.lc-white .messages-main { background:#fafafa; }
body.lc-white .msg-placeholder { color:#bfbfbf; }
body.lc-white .messages-search-box input {
    background:#fafafa; border-color:#d9d9d9; color:#262626;
}
body.lc-white .messages-search-box input::placeholder { color:#bfbfbf; }
body.lc-white .messages-search-box input:focus { border-color:#1890ff; }
body.lc-white .msg-search-results { background:#fff; border-color:#d9d9d9; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
body.lc-white .msg-search-item { color:#262626; }
body.lc-white .msg-search-item:hover { background:#e6f7ff; }
body.lc-white .msg-search-empty { color:#bfbfbf; }
body.lc-white .msg-conv-empty { color:#bfbfbf; }
body.lc-white .msg-conv-item { border-bottom-color:#f0f0f0; }
body.lc-white .msg-conv-item:hover { background:#fafafa; }
body.lc-white .msg-conv-item.active { background:#e6f7ff; }
body.lc-white .msg-conv-avatar { border-color:#d9d9d9; }
body.lc-white .msg-conv-name { color:#262626; }
body.lc-white .msg-conv-preview { color:#8c8c8c; }
body.lc-white .msg-chat-header { color:#262626; border-bottom-color:#f0f0f0; }
body.lc-white .msg-empty-hint { color:#bfbfbf; }
body.lc-white .msg-avatar { border-color:#d9d9d9; }
body.lc-white .msg-bubble-me { background:#e6f7ff; border-color:#91d5ff; }
body.lc-white .msg-bubble-peer { background:#fff; border-color:#e8e8e8; }
body.lc-white .msg-bubble-recalled { color:#8c8c8c; background:#fafafa; border-color:#e8e8e8; }
body.lc-white .msg-context-menu { background:#fff; border-color:#e8e8e8; box-shadow:0 4px 16px rgba(0,0,0,0.1); }
body.lc-white .msg-context-item { color:#262626; }
body.lc-white .msg-context-item:hover { background:#e6f7ff; color:#1890ff; }
body.lc-white .msg-meta { color:#bfbfbf; }
body.lc-white .msg-content { color:#262626; }
body.lc-white .msg-content code { background:#f0f0f0; }
body.lc-white .msg-content pre { background:#fafafa; border:1px solid #f0f0f0; }
body.lc-white .msg-chat-input { border-top-color:#f0f0f0; }
body.lc-white .msg-chat-input textarea { background:#fafafa; border-color:#d9d9d9; color:#262626; }
body.lc-white .msg-chat-input textarea::placeholder { color:#bfbfbf; }
body.lc-white .msg-chat-input textarea:focus { border-color:#1890ff; }
body.lc-white .msg-chat-input button { background:#1890ff; color:#fff; }

/* Progress, heatmap and training sets */
.progress-grid, .set-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
    margin:12px 0 18px;
}
.progress-card, .set-card {
    padding:16px;
    border-radius:12px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    animation: soft-card-in 0.36s ease both;
    will-change: transform, box-shadow, border-color;
}
.progress-card:nth-child(2), .set-card:nth-child(2) { animation-delay:0.04s; }
.progress-card:nth-child(3), .set-card:nth-child(3) { animation-delay:0.08s; }
.progress-card:nth-child(4), .set-card:nth-child(4) { animation-delay:0.12s; }
.set-card { cursor:pointer; transition:transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
.set-card:hover {
    transform:translateY(-4px);
    border-color:var(--gold-mid);
    box-shadow:0 14px 34px rgba(0,0,0,0.18), 0 0 18px rgba(212,175,55,0.12);
}
.progress-card-title, .set-card-title { font-weight:700; margin-bottom:8px; color:var(--gold-light); }
.progress-card-num { font-size:1.5em; font-weight:700; margin:8px 0; }
.set-card-desc { color:#c4c8d4; font-size:0.92em; min-height:42px; margin-bottom:12px; }
.set-card-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; font-size:0.9em; }
.progress-bar {
    height:8px;
    border-radius:99px;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
}
.progress-bar span {
    display:block;
    height:100%;
    border-radius:99px;
    background:linear-gradient(90deg, #67e8f9, #f9a8d4);
    transform-origin:left center;
    animation: progress-fill 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.heatmap-wrap { margin:12px 0 18px; }
.heatmap-title { font-weight:600; margin-bottom:8px; }
.heatmap-grid { display:flex; flex-wrap:wrap; gap:4px; max-width:760px; }
.heat-cell {
    width:10px;
    height:10px;
    border-radius:2px;
    background:rgba(255,255,255,0.12);
    transition:transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.heat-cell:hover {
    transform:scale(1.55);
    box-shadow:0 0 0 2px rgba(255,255,255,0.32);
    z-index:1;
}
.heat-1 { background:#b7eb8f; }
.heat-2 { background:#73d13d; }
.heat-3 { background:#389e0d; }
.heat-4 { background:#135200; }

@keyframes soft-card-in {
    from { opacity:0; transform:translateY(8px) scale(0.985); }
    to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes progress-fill {
    from { transform:scaleX(0); }
    to { transform:scaleX(1); }
}

.data-table tr.clickable td {
    transition:background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.data-table tr.clickable:hover td:first-child {
    box-shadow:inset 3px 0 0 var(--gold-mid);
}

body.lc-white .progress-card, body.lc-white .set-card {
    background:#fff;
    border-color:#f0f0f0;
    box-shadow:0 4px 16px rgba(0,0,0,0.04);
}
body.lc-white .set-card:hover {
    border-color:#1890ff;
    box-shadow:0 12px 28px rgba(24,144,255,0.10);
}
body.lc-white .progress-card-title, body.lc-white .set-card-title { color:#262626; }
body.lc-white .set-card-desc { color:#8c8c8c; }
body.lc-white .progress-bar { background:#f0f0f0; }
body.lc-white .heat-cell { background:#ebedf0; }
body.lc-white .heat-1 { background:#9be9a8; }
body.lc-white .heat-2 { background:#40c463; }
body.lc-white .heat-3 { background:#30a14e; }
body.lc-white .heat-4 { background:#216e39; }
body.lc-white .heat-cell:hover { box-shadow:0 0 0 2px rgba(24,144,255,0.22); }
body.lc-white .data-table tr.clickable:hover td:first-child { box-shadow:inset 3px 0 0 #1890ff; }