:root {
  --river-bg: #0b0f14;
  --river-panel: #121821;
  --river-panel-2: #171f2b;
  --river-border: #273142;
  --river-muted: #8e9bad;
  --river-accent: #4385ff;
  --river-sidebar: 260px;
}

html, body { min-height: 100%; background: var(--river-bg); }
body { color: #f4f7fb; overflow-x: hidden; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--river-sidebar); background: #0d131c; border-right: 1px solid var(--river-border); z-index: 1030; }
.app-brand { min-height: 76px; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; color: #fff; text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--river-border); }
.app-brand-mark, .auth-logo { display: grid; place-items: center; background: linear-gradient(135deg, #377dff, #7357ff); color: white; font-weight: 800; box-shadow: 0 10px 28px rgba(55,125,255,.25); }
.app-brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.auth-logo { width: 58px; height: 58px; margin: 0 auto; border-radius: 18px; font-size: 1.5rem; }
.app-nav { flex: 1; padding: 1rem .75rem; min-height: 0; }
.app-nav .nav-link { color: #aeb9c8; border-radius: .7rem; padding: .75rem 1rem; margin-bottom: .25rem; font-weight: 500; }
.app-nav .nav-link:hover, .app-nav .nav-link.active { color: #fff; background: #1a2432; }
.app-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--river-accent); }
.nav-session { border-top: 1px solid var(--river-border); }
.nav-last-login { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .75rem; padding: .75rem 1rem 0; color: var(--river-muted); font-size: .7rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.nav-last-login span, .nav-last-login small { color: inherit; font: inherit; }
.app-content { min-height: 100vh; margin-left: var(--river-sidebar); width: calc(100% - var(--river-sidebar)); min-width: 0; overflow-x: hidden; }
.app-container { max-width: 1540px; min-width: 0; padding: 2rem; }
.app-mobile-nav { background: #0d131c; border-bottom: 1px solid var(--river-border); }
.offcanvas { --bs-offcanvas-width: 290px; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.page-header h1 { margin: 0; font-size: clamp(1.65rem, 2.5vw, 2.2rem); }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.page-actions form { display: inline-flex; }
.eyebrow { color: var(--river-accent); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .35rem; }
.app-card { min-width: 0; background: var(--river-panel); border: 1px solid var(--river-border); border-radius: 1rem; box-shadow: 0 12px 35px rgba(0,0,0,.12); }
.metric-card { height: 100%; }
.metric-card .card-body { display: flex; min-height: 134px; flex-direction: column; justify-content: space-between; }
.metric-card span { color: var(--river-muted); }
.metric-card strong { font-size: 2.25rem; line-height: 1; }
.metric-card .metric-text { font-size: 1.1rem; line-height: 1.25; }
.dashboard-metrics > [class*="col-"] { min-width: 0; }
.dashboard-metric-card .card-body { height: 118px; min-height: 118px; padding: 1.2rem 1.25rem; gap: .85rem; }
.dashboard-metric-card span { min-height: 2.5em; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.dashboard-metric-card strong { overflow-wrap: anywhere; font-size: clamp(1.75rem, 2.3vw, 2.15rem); line-height: 1.05; }
.dashboard-metric-card strong.metric-text { font-size: 1rem; line-height: 1.25; }
.empty-state { text-align: center; }
.empty-mark { width: 58px; height: 58px; margin: 0 auto 1rem; border: 1px solid #344259; border-radius: 18px; display: grid; place-items: center; color: #91a4bd; font-weight: 700; background: var(--river-panel-2); }
.form-card { max-width: 780px; }
.form-control, .form-select { background-color: #0e141d; border-color: #344054; }
.form-control:focus, .form-select:focus { background-color: #0e141d; border-color: var(--river-accent); box-shadow: 0 0 0 .2rem rgba(67,133,255,.18); }
.profile-card { max-width: 760px; }
.profile-list dt, .profile-list dd { padding-top: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--river-border); margin-bottom: 0; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at top, #182235, var(--river-bg) 55%); }
.auth-shell .app-container { width: 100%; padding: 0; }
.auth-card { max-width: 440px; margin: 0 auto; background: rgba(18,24,33,.97); border-radius: 1.2rem; }
.club-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.club-table { min-width: 1320px; }
.club-table th { color: #9eabbd; white-space: nowrap; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 1rem; }
.club-table td { padding: 1rem; }
.club-url { display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.club-error { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.quick-actions .dropdown-menu { min-width: 210px; }
.quick-actions form { margin: 0; }
.quick-actions .dropdown-item { border-radius: .4rem; }
.status-badge { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: .3rem .65rem; font-size: .78rem; font-weight: 700; }
.status-online { color: #74e6a4; background: rgba(31,170,93,.12); border-color: rgba(31,170,93,.35); }
.status-offline { color: #ff9696; background: rgba(220,53,69,.12); border-color: rgba(220,53,69,.35); }
.status-unknown { color: #b6c2d1; background: rgba(142,155,173,.12); border-color: rgba(142,155,173,.32); }
.club-status-active { color: #74e6a4; background: rgba(31,170,93,.12); border-color: rgba(31,170,93,.35); }
.club-status-test { color: #8cc8ff; background: rgba(67,133,255,.15); border-color: rgba(67,133,255,.45); }
.club-status-suspended { color: #ffd37a; background: rgba(255,193,7,.1); border-color: rgba(255,193,7,.35); }
.club-status-archived { color: #b6c2d1; background: rgba(142,155,173,.12); border-color: rgba(142,155,173,.32); }
.token-mask { color: #cbd5e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.connection-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; padding: 1rem; border: 1px solid rgba(31,170,93,.35); background: rgba(31,170,93,.08); border-radius: .8rem; }
.connection-preview span { color: #b9c5d4; }
.statistics-club-table { min-width: 1500px; }
.report-table th, .report-table td { white-space: nowrap; padding: .85rem 1rem; }
.compact-stats span { display: block; color: var(--river-muted); font-size: .8rem; }
.compact-stats strong { display: block; margin-top: .15rem; }
.club-mobile-grid { min-width: 0; }
.sync-running { color: #8cc8ff; border-color: #4385ff; background: rgba(67,133,255,.15); animation: sync-pulse 1.5s ease-in-out infinite; }
.sync-success { color: #74e6a4; border-color: rgba(31,170,93,.35); background: rgba(31,170,93,.12); }
.sync-partial, .sync-skipped { color: #ffd37a; border-color: rgba(255,193,7,.35); background: rgba(255,193,7,.10); }
.sync-failed { color: #ff9696; border-color: rgba(220,53,69,.35); background: rgba(220,53,69,.12); }
.install-waiting, .install-installing { color: #8cc8ff; border-color: rgba(67,133,255,.45); background: rgba(67,133,255,.15); }
.install-success { color: #74e6a4; border-color: rgba(31,170,93,.35); background: rgba(31,170,93,.12); }
.install-failed, .install-expired, .install-revoked { color: #ff9696; border-color: rgba(220,53,69,.35); background: rgba(220,53,69,.12); }
.install-not_configured { color: #b6c2d1; border-color: rgba(142,155,173,.32); background: rgba(142,155,173,.12); }
.update-idle, .update-requested { color: #b6c2d1; border-color: rgba(142,155,173,.32); background: rgba(142,155,173,.12); }
.update-running { color: #8cc8ff; border-color: rgba(67,133,255,.45); background: rgba(67,133,255,.15); animation: sync-pulse 1.5s ease-in-out infinite; }
.update-success { color: #74e6a4; border-color: rgba(31,170,93,.35); background: rgba(31,170,93,.12); }
.update-failed, .update-rollback { color: #ff9696; border-color: rgba(220,53,69,.35); background: rgba(220,53,69,.12); }
.system-tile { min-height: 92px; border: 1px solid var(--bs-border-color); border-left-width: 4px; border-radius: .75rem; padding: .85rem; background: rgba(255,255,255,.025); display: flex; flex-direction: column; gap: .35rem; }
.system-tile span { color: var(--bs-secondary-color); font-size: .82rem; }
.system-tile strong { font-size: 1.05rem; }
.monitoring-cards .card { overflow: hidden; }
.compact-metric-card .card-body { min-height: 104px; }
.compact-metric-card strong { font-size: 1.85rem; }
.operational-metrics > [class*="col-"] { min-width: 0; }
.modal-content.app-card { background: var(--river-panel); }
.installer-command { min-width: 0; }
.installer-command .input-group { min-width: 0; }
.installer-command input { min-width: 0; }
@keyframes sync-pulse { 50% { opacity: .55; } }
.chart-canvas { display: block; width: 100%; height: 240px; max-width: 100%; }

@media (max-width: 991.98px) {
  .app-content { margin-left: 0; width: 100%; }
  .app-container { padding: 1.35rem 1rem 2rem; }
  .app-nav { min-height: calc(100vh - 74px); display: flex; }
}

@media (max-width: 575.98px) {
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header .btn { width: 100%; }
  .page-actions { width: 100%; }
  .page-actions > *, .page-actions form, .page-actions form .btn { width: 100%; }
  .quick-actions, .quick-actions > .btn { width: 100%; }
  .quick-actions .dropdown-menu { width: 100%; }
  .metric-card .card-body { min-height: 110px; }
  .dashboard-metric-card .card-body { height: 118px; min-height: 118px; padding: 1rem; }
  .dashboard-metric-card strong { font-size: 1.75rem; }
  .dashboard-metric-card strong.metric-text { font-size: .95rem; }
  .profile-list dt { border-bottom: 0; padding-bottom: 0; }
  .profile-list dd { padding-top: .25rem; }
  .club-form .card-body, .club-form .card-footer { padding: 1.15rem !important; }
}