/* Snow Peak neutral UI layer.
 * Loaded after the legacy sheets so every active page uses one restrained
 * white/gray system without gradients, transparency or glass effects.
 */
:root {
    color-scheme: light;
    --sp-bg: #F8F9FA;
    --sp-surface: #FFFFFF;
    --sp-subtle: #F0F2F4;
    --sp-line: #E2E5E8;
    --sp-text: #202428;
    --sp-muted: #606870;
    --sp-dim: #9299A1;
    --sp-on: #579B78;
    --sp-on-bg: #E8F4EC;
    --sp-off: #C97878;
    --sp-off-bg: #F9EAEA;
    --sp-shadow: 0 8px 24px rgba(32,36,40,.10);
    --sp-ease: cubic-bezier(.22,.8,.24,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--sp-bg); }
body {
    min-height: 100%;
    margin: 0;
    background: var(--sp-bg);
    color: var(--sp-text);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Replace legacy translucent/gradient surfaces with opaque, predictable ones. */
.glass,
.panel,
.status,
.time-box,
.notice,
.message,
.metric,
.content-panel,
.checkin-panel,
.shop-panel,
.license-result,
.release-item,
.auth-panel,
.admin-form,
.generated-keys,
.table-wrap,
.admin-topbar,
.admin-sidebar,
.inline-search {
    background: var(--sp-surface) !important;
    border: 1px solid var(--sp-line) !important;
    box-shadow: var(--sp-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.glass::before,
.panel::before,
.status::before,
.time-box::before { display: none !important; }

.user-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 40px; }
.user-topbar,
.admin-topbar { min-height: 60px; border-radius: 12px !important; }
.brand-link, .admin-brand { color: var(--sp-text); }
.brand-link strong, .admin-brand strong { font-size: 20px; font-weight: 600; }
.brand-link small, .admin-brand small,
.page-kicker, .metric span, .metric small,
.section-heading p, .page-title p, .auth-heading p,
.panel-heading small, .cell-meta, .release-meta span,
.detail-list dt, .checkin-date > span { color: var(--sp-muted) !important; }
.user-nav { gap: 8px; }
.user-nav a,
.admin-sidebar nav a,
.sidebar-logout button {
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--sp-muted) !important;
    transition: background-color .15s ease, color .15s ease, transform .10s ease;
}
.user-nav a:hover,
.admin-sidebar nav a:hover,
.sidebar-logout button:hover { background: var(--sp-subtle) !important; color: var(--sp-text) !important; }
.user-nav a[aria-current='page'],
.admin-sidebar nav a[aria-current='page'] {
    color: var(--sp-text) !important;
    background: var(--sp-subtle) !important;
    box-shadow: inset 3px 0 0 var(--sp-muted) !important;
    font-weight: 600;
}
.user-nav a:active, .admin-sidebar nav a:active,
.sidebar-logout button:active, button:active { transform: scale(.98); }

.auth-layout { width: min(860px, 100%); gap: 34px; }
.auth-heading h1, .page-title h1 { color: var(--sp-text); font-weight: 600; }
.brand-tile { background: var(--sp-subtle) !important; border: 1px solid var(--sp-line) !important; box-shadow: none !important; border-radius: 10px !important; }
.auth-panel { border-radius: 12px !important; padding: 24px !important; }
.panel-heading > span { color: var(--sp-text); font-weight: 600; }
.field { color: var(--sp-muted); font-weight: 500; }
.field input, textarea, select,
.points-form input, .points-form select {
    border: 1px solid var(--sp-line) !important;
    border-radius: 8px !important;
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field input:focus, textarea:focus, select:focus,
.points-form input:focus, .points-form select:focus {
    border-color: var(--sp-muted) !important;
    box-shadow: 0 0 0 3px rgba(96,104,112,.12) !important;
    outline: none;
}
.primary-button, .copy-button, .logout-form button {
    border: 1px solid var(--sp-text) !important;
    border-radius: 8px !important;
    background: var(--sp-text) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: background-color .15s ease, transform .10s ease, opacity .15s ease;
}
.primary-button:hover, .copy-button:hover { background: #000000 !important; }
.secondary-button { border: 1px solid var(--sp-line) !important; border-radius: 8px !important; background: var(--sp-surface) !important; color: var(--sp-text) !important; }

.notice { border-left: 3px solid var(--sp-muted) !important; border-radius: 10px !important; color: var(--sp-text); }
.metric, .content-panel, .checkin-panel, .shop-panel, .license-result, .release-item { border-radius: 11px !important; }
.metric, .content-panel, .checkin-panel, .shop-panel, .license-result { box-shadow: 0 6px 18px rgba(32,36,40,.08) !important; }
.metric:hover, .content-panel:hover, .checkin-panel:hover, .shop-panel:hover, .release-item:hover { box-shadow: 0 10px 24px rgba(32,36,40,.10) !important; transform: none !important; }
.status-pill { min-height: 28px; border: 0 !important; border-radius: 8px !important; background: var(--sp-off-bg) !important; color: var(--sp-off) !important; font-weight: 500; }
.status-pill.is-online { background: var(--sp-on-bg) !important; color: var(--sp-on) !important; box-shadow: none !important; }
.status-pill.is-enabled, .status-pill.on, .status-pill.yes { background: var(--sp-on-bg) !important; color: var(--sp-on) !important; }
.status-pill.is-disabled, .status-pill.off, .status-pill.no { background: var(--sp-off-bg) !important; color: var(--sp-off) !important; }

.admin-layout { grid-template-columns: 22% minmax(0, 78%) !important; gap: 20px !important; padding: 20px !important; }
.admin-sidebar { border-radius: 12px !important; padding: 14px 10px !important; }
.admin-sidebar nav { gap: 8px !important; }
.admin-main { min-width: 0; }
.admin-section { padding: 22px 0 32px !important; }
.admin-form, .generated-keys { border-radius: 11px !important; }
.table-wrap { overflow: auto; border-radius: 11px !important; }
table { border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--sp-line) !important; }
th { color: var(--sp-muted) !important; }
td button { border: 1px solid var(--sp-line) !important; border-radius: 8px !important; background: var(--sp-surface) !important; color: var(--sp-text) !important; transition: background-color .15s ease, transform .10s ease; }
td button:hover { background: var(--sp-subtle) !important; }
td button.danger-action { border-color: var(--sp-off) !important; background: var(--sp-off-bg) !important; color: var(--sp-off) !important; }

.page-enter { animation: snowpeak-fade-in .20s var(--sp-ease) both !important; will-change: opacity, transform; }
@keyframes snowpeak-fade-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none !important; } *, *::before, *::after { scroll-behavior: auto !important; } }
@media (max-width: 920px) {
    .admin-layout { grid-template-columns: 1fr !important; padding: 12px !important; }
    .admin-sidebar { border-radius: 12px !important; }
}
@media (max-width: 640px) {
    .user-shell { width: calc(100% - 16px); padding-top: 10px; }
    .auth-layout { gap: 20px; }
    .auth-panel { padding: 18px !important; }
    .admin-layout { padding: 8px !important; }
}