@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
   :root {
     
     --theme-primary:         #0F2D4A;   
     --theme-primary-hover:   #1A3F65;
     --theme-primary-active:  #091F33;
     --theme-secondary:       #00D4FF;   
     --theme-primary-rgb:     15, 45, 74;     
     --theme-secondary-rgb:   0, 212, 255;
     --theme-secondary-hover: #26DDFF;
     --theme-secondary-active:#009CC2;
     --theme-tertiary:        #AFC3D6;   
     --theme-accent:          var(--theme-secondary);  
     
     
     
     
     
     
     
     --state-success:               #00A65A;
     --state-success-bg:            rgba(0, 166, 90, 0.12);
     --state-success-border:        rgba(0, 166, 90, 0.20);
     --state-success-border-strong: rgba(0, 166, 90, 0.35);
     --state-warning:               #B38600;
     --state-warning-bg:            rgba(179, 134, 0, 0.12);
     --state-warning-border:        rgba(179, 134, 0, 0.20);
     --state-warning-border-strong: rgba(179, 134, 0, 0.35);
     --state-danger:                #D93B3B;
     --state-danger-bg:             rgba(217, 59, 59, 0.12);
     --state-danger-border:         rgba(217, 59, 59, 0.20);
     --state-danger-border-strong:  rgba(217, 59, 59, 0.35);
     --state-info:                  #3B82F6;
     --state-info-bg:               rgba(59, 130, 246, 0.12);
     --state-info-border:           rgba(59, 130, 246, 0.20);
     --state-info-border-strong:    rgba(59, 130, 246, 0.35);
     
     --category-solo:        #00D4FF;
     --category-solo-bg:     rgba(0, 212, 255, 0.06);
     --category-solo-border: rgba(0, 212, 255, 0.12);
     --category-duo:         #B38600;
     --category-duo-bg:      rgba(179, 134, 0, 0.08);
     --category-duo-border:  rgba(179, 134, 0, 0.15);
     --category-relay:        #00A65A;
     --category-relay-bg:     rgba(0, 166, 90, 0.08);
     --category-relay-border: rgba(0, 166, 90, 0.15);
     
     --state-conflict:        #E0A800;
     --state-conflict-bg:     rgba(224, 168, 0, 0.10);
     --state-conflict-border: rgba(224, 168, 0, 0.25);
     --state-conflict-border-strong: rgba(224, 168, 0, 0.45);
     
     --surface-body:     #0A0A0A;
     --surface-default:  #121212;
     --surface-card:     #1A1A1A;
     --surface-hover: #242424;
     --surface-input:    #121212;
     --surface-sidebar:  var(--theme-primary-active);
     --surface-elevated: #2E2E2E;
     
     --text-primary:   #F5F7FA;
     --text-secondary: #B4BCC5;
     --text-muted:     #7D8794;
     --text-disabled:  #4E5865;
     --text-inverse:   #0F1923;
     
     --border-default: #2F343A;
     --border-soft:    #23272C;
     --border-active:  #4A525C;
     
     --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --font-display: 'Barlow Condensed', 'Anton', 'Impact', sans-serif;
     --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
     
     --ops-number: 42px;
     --ops-number-sm: 28px;
     --ops-number-xs: 22px;
     --ops-value: 18px;
     --ops-label: 14px;
     --ops-meta: 14px;
     --ops-body: 16px;
     --ops-micro: 13px;
     --ops-tiny: 11px;
     
     --spacing-xs:  4px;
     --spacing-sm:  8px;
     --spacing-md:  16px;
     --spacing-lg:  24px;
     --spacing-xl:  32px;
     --spacing-2xl: 48px;
     
     --radius-sm:   4px;
     --radius-md:   8px;
     --radius-lg:   12px;
     --radius-xl:   16px;
     --radius-pill: 999px;
     
     --shadow-sm:        0 1px 3px rgba(0,0,0,0.3);
     --shadow-md:        0 4px 12px rgba(0,0,0,0.4);
     --shadow-lg:        0 8px 32px rgba(0,0,0,0.5);
     --shadow-glow:      0 0 32px rgba(0, 212, 255, 0.12);
     
     
     --transition-fast:   0.15s ease;
     --transition-normal: 0.3s ease;
     --transition-slow:   0.5s ease;
     
     --rm-nav-h:      72px;
     --rm-bar-h:      82px;
     --rm-radius:     12px;
     --sidebar-width: 350px;
     
     --timer-color:  #00D4FF;
     --timer-live:   #00A65A;
     --timer-paused: #B38600;
     --delta-behind: #D93B3B;
     --delta-ahead:  #00A65A;
 }
 
 :root {
     
     --color-primary:          var(--theme-primary);
     --color-primary-hover:    var(--theme-primary-hover);
     --color-primary-active:   var(--theme-primary-active);
     --color-secondary:        var(--theme-secondary);
     --color-secondary-hover:  var(--theme-secondary-hover);
     --color-secondary-active: var(--theme-secondary-active);
     --color-tertiary:         var(--theme-tertiary);
     --color-accent:           var(--theme-accent);
     
     
     --action-primary:   var(--color-secondary);
     --action-secondary: var(--color-primary);
     --action-danger:    var(--state-danger);
     
     --action-link:      var(--color-secondary);
     
     --brand-secondary:        var(--action-primary);
     --brand-secondary-bg:     var(--action-primary-bg);
     --brand-secondary-border: var(--action-primary-border);
     --brand-cyan:             var(--action-primary);
     --brand-success:          var(--state-success);
     --brand-warning:          var(--state-warning);
     --brand-danger:           var(--state-danger);
     --brand-conflict:         var(--state-conflict);
     --bg-input:               var(--surface-input);
     
     --tint-base:            #FFFFFF;
     --surface-tint-subtle:  color-mix(in srgb, var(--tint-base) 4%, transparent);
     --surface-tint:         color-mix(in srgb, var(--tint-base) 6%, transparent);
     --border-tint:          color-mix(in srgb, var(--tint-base) 8%, transparent);
     --border-tint-strong:   color-mix(in srgb, var(--tint-base) 15%, transparent);
     
     --action-primary-hover:         var(--color-secondary-hover);
     --action-primary-active:        var(--color-secondary-active);
     --action-primary-bg:            color-mix(in srgb, var(--action-primary) 6%, transparent);
     --action-primary-border:        color-mix(in srgb, var(--action-primary) 12%, transparent);
     --action-primary-border-strong: color-mix(in srgb, var(--action-primary) 25%, transparent);
     --action-secondary-hover:         var(--color-primary-hover);
     --action-secondary-active:        var(--color-primary-active);
     --action-secondary-bg:            rgba(15, 45, 74, 0.40);
     --action-secondary-border:        rgba(255, 255, 255, 0.06);
     --action-secondary-border-strong: rgba(255, 255, 255, 0.12);
     
     --surface-brand:    var(--color-primary);
     
     --effect-focus-glow:  0 0 0 3px var(--state-info-border-strong);
     --effect-active-glow: 0 0 32px color-mix(in srgb, var(--state-active) 12%, transparent);
     --effect-brand-glow:  0 0 32px color-mix(in srgb, var(--color-primary) 40%, transparent);
     --shadow-focus:       var(--effect-focus-glow);   
 }
 
 :root {
     --state-active:   var(--color-accent);
     --state-hold:     var(--state-warning);
     --state-pending:  var(--state-info);
     --state-exited:   var(--text-muted);
     --state-finished: var(--state-success);
     --state-dnf:      var(--state-danger);
     --state-dq:       var(--state-danger);
     --state-disabled: var(--text-disabled);
     --state-active-bg:      var(--action-primary-bg);
     
     --state-active-border:        var(--action-primary-border);
     --state-active-border-strong: var(--action-primary-border-strong);
     --state-hold-bg:        var(--state-warning-bg);
     --state-hold-border:    var(--state-warning-border-strong);
     --state-pending-bg:     var(--state-info-bg);
     --state-pending-border: var(--state-info-border-strong);
     --state-finished-bg:    var(--state-success-bg);
     --state-finished-border:var(--state-success-border-strong);
 }
 
 [data-theme="light"] {
     
     --surface-body:       #F0F2F5;
     --surface-default:    #FFFFFF;
     --surface-card:       #FFFFFF;
     --surface-hover: #F4F6F9;
     --surface-input:      #FFFFFF;
     --surface-sidebar:    var(--theme-primary);      
     --surface-elevated:   #FFFFFF;
     
     --text-primary:   #0F1923;
     --text-secondary: #3D4E5C;
     --text-muted:     #6B7A8D;
     --text-disabled:  #A0AABA;
     --text-inverse:   #F5F7FA;
     
     --border-default: #D4DAE0;
     --border-soft:    #E2E7EC;
     --border-active:  #B8C0CA;
     
     
     --action-secondary-bg:            rgba(15, 45, 74, 0.06);
     --action-secondary-border:        rgba(15, 45, 74, 0.12);
     --action-secondary-border-strong: rgba(15, 45, 74, 0.25);
     
     --tint-base:          #0F2D4A;
     --border-tint-strong: color-mix(in srgb, var(--tint-base) 12%, transparent);
     
     --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
     --shadow-md:        0 4px 12px rgba(0,0,0,0.10);
     --shadow-lg:        0 8px 32px rgba(0,0,0,0.12);
     --shadow-glow:      0 0 32px rgba(0, 212, 255, 0.10);
     
     --effect-brand-glow:  0 0 32px color-mix(in srgb, var(--color-primary) 12%, transparent);
     --effect-active-glow: 0 0 32px color-mix(in srgb, var(--state-active) 10%, transparent);
 }
.card {
    background: var(--surface-card);
    border-color: var(--border-default);
}
.card:hover {
    border-color: var(--border-active);
}
.card-header {
    background: var(--surface-default);
    border-color: var(--border-soft);
}
.card-footer {
    background: var(--surface-default);
    border-color: var(--border-soft);
}
.modal-content {
    background: var(--surface-default) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
}
.modal-header {
    background: var(--surface-brand) !important;
    border-bottom: 1px solid var(--action-secondary-hover) !important;
    color: var(--text-primary) !important;
    padding: 14px 20px !important;
}
.modal-header .close {
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
    text-shadow: none !important;
}
.modal-header .close:hover { opacity: 1 !important; }
.modal-footer {
    background: var(--surface-card) !important;
    border-top: 1px solid var(--border-soft) !important;
}
.modal-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-body .form-control {
    background: var(--surface-input) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}
.modal-body .form-control:focus {
    border-color: var(--action-primary) !important;
    box-shadow: 0 0 0 3px var(--action-primary-bg) !important;
    outline: none !important;
}
.form-control {
    background: var(--surface-input) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}
.form-control:focus {
    border-color: var(--action-primary) !important;
    box-shadow: 0 0 0 3px var(--action-primary-bg) !important;
}
.form-control::placeholder {
    color: var(--text-disabled);
    opacity: 0.5;
}
.form-control[readonly] {
    background: var(--surface-card) !important;
}
.list-group-item {
    background: var(--surface-card);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}
.list-group-item:hover {
    background: var(--surface-hover);
}
.dropdown-menu {
    background: var(--surface-default);
    border-color: var(--border-default);
}
.dropdown-item {
    color: var(--text-secondary);
}
.dropdown-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}
.dropdown-item.active {
    background: var(--action-primary-bg);
    color: var(--action-primary);
}
.dropdown-divider {
    border-color: var(--border-soft);
}
.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--text-secondary);
}
.nav-tabs .nav-link.active {
    background: var(--surface-card);
    border-color: var(--border-default) var(--border-default) transparent;
    color: var(--action-primary);
}
.nav-tabs .nav-link.active:hover {
    color: var(--action-primary-hover);
}
.nav-tabs {
    border-color: var(--border-default);
}
.table {
    color: var(--text-secondary);
}
.table thead th {
    border-color: var(--border-soft);
    color: var(--text-muted);
}
.table td, .table th {
    border-color: var(--border-soft);
}
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255,255,255,0.02);
}
.table-hover tbody tr:hover {
    background: rgba(255,255,255,0.04);
}
.table-dark {
    background: var(--surface-card);
}
.table-dark td, .table-dark th, .table-dark thead th {
    border-color: var(--border-soft);
}
.page-link {
    background: var(--surface-default);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.page-link:hover {
    background: var(--surface-hover);
    border-color: var(--border-active);
    color: var(--text-primary);
}
.page-item.active .page-link {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: #071216;
}
.page-item.disabled .page-link {
    background: var(--surface-default);
    border-color: var(--border-default);
    color: var(--text-disabled);
}
.alert {
    border-radius: var(--radius-md);
}
.alert-success {
    background: var(--state-success-bg);
    border-color: var(--state-success-border);
    color: var(--state-success);
}
.alert-warning {
    background: var(--state-warning-bg);
    border-color: var(--state-warning-border);
    color: var(--state-warning);
}
.alert-danger {
    background: var(--state-danger-bg);
    border-color: var(--state-danger-border);
    color: var(--state-danger);
}
.alert-info {
    background: var(--state-info-bg);
    border-color: var(--state-info-border);
    color: var(--state-info);
}
.alert-dark {
    background: var(--surface-card);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.badge-primary {
    background: var(--state-active);
    color: #071216;
}
.badge-secondary {
    background: var(--surface-brand);
    color: #FFFFFF;
}
.badge-success {
    background: var(--state-success);
}
.badge-warning {
    background: var(--state-warning);
}
.badge-danger {
    background: var(--state-danger);
}
.badge-info {
    background: var(--state-info);
}
.badge-dark {
    background: var(--surface-card);
    color: var(--text-secondary);
}
.progress {
    background: var(--border-soft);
}
.progress-bar {
    background: var(--state-active);
}
.progress-bar-success {
    background: var(--state-success);
}
.progress-bar-warning {
    background: var(--state-warning);
}
.progress-bar-danger {
    background: var(--state-danger);
}
.progress-bar-info {
    background: var(--state-info);
}
.bg-brand-primary        { background: var(--color-primary) !important; }
.bg-brand-primary-bg     { background: var(--action-secondary-bg) !important; }
.bg-brand-secondary      { background: var(--color-secondary) !important; }
.bg-brand-secondary-bg   { background: var(--action-primary-bg) !important; }
.bg-brand-navy           { background: var(--color-primary) !important; }
.bg-brand-navy-bg        { background: var(--action-secondary-bg) !important; }
.bg-brand-cyan           { background: var(--color-secondary) !important; }
.bg-brand-cyan-bg        { background: var(--action-primary-bg) !important; }
.bg-brand-success        { background: var(--state-success) !important; }
.bg-brand-success-bg     { background: var(--state-success-bg) !important; }
.bg-brand-warning        { background: var(--state-warning) !important; }
.bg-brand-warning-bg     { background: var(--state-warning-bg) !important; }
.bg-brand-danger         { background: var(--state-danger) !important; }
.bg-brand-danger-bg      { background: var(--state-danger-bg) !important; }
.bg-brand-info           { background: var(--state-info) !important; }
.bg-brand-info-bg        { background: var(--state-info-bg) !important; }
.bg-brand-conflict       { background: var(--state-conflict) !important; }
.bg-brand-conflict-bg    { background: var(--state-conflict-bg) !important; }
.bg-surface              { background: var(--surface-default) !important; }
.bg-card                 { background: var(--surface-card) !important; }
.bg-card-hover           { background: var(--surface-hover) !important; }
.bg-body                 { background: var(--surface-body) !important; }
.bg-input                { background: var(--surface-input) !important; }
.border-brand-primary         { border-color: var(--color-primary) !important; }
.border-brand-primary-hover   { border-color: var(--action-secondary-hover) !important; }
.border-brand-primary-strong  { border-color: var(--action-secondary-border-strong) !important; }
.border-brand-primary-bg      { border-color: var(--action-secondary-border) !important; }
.border-brand-secondary       { border-color: var(--color-secondary) !important; }
.border-brand-secondary-hover { border-color: var(--action-primary-hover) !important; }
.border-brand-secondary-strong { border-color: var(--action-primary-border-strong) !important; }
.border-brand-secondary-bg    { border-color: var(--action-primary-border) !important; }
.border-brand-navy            { border-color: var(--color-primary) !important; }
.border-brand-navy-strong     { border-color: var(--action-secondary-border-strong) !important; }
.border-brand-navy-bg         { border-color: var(--action-secondary-border) !important; }
.border-brand-cyan            { border-color: var(--color-secondary) !important; }
.border-brand-cyan-strong     { border-color: var(--action-primary-border-strong) !important; }
.border-brand-cyan-bg         { border-color: var(--action-primary-border) !important; }
.border-brand-success         { border-color: var(--state-success) !important; }
.border-brand-success-bg      { border-color: var(--state-success-border) !important; }
.border-brand-success-strong  { border-color: var(--state-success-border-strong) !important; }
.border-brand-warning         { border-color: var(--state-warning) !important; }
.border-brand-warning-bg      { border-color: var(--state-warning-border) !important; }
.border-brand-warning-strong  { border-color: var(--state-warning-border-strong) !important; }
.border-brand-danger          { border-color: var(--state-danger) !important; }
.border-brand-danger-bg       { border-color: var(--state-danger-border) !important; }
.border-brand-danger-strong   { border-color: var(--state-danger-border-strong) !important; }
.border-brand-info            { border-color: var(--state-info) !important; }
.border-brand-info-bg         { border-color: var(--state-info-border) !important; }
.border-brand-conflict        { border-color: var(--state-conflict) !important; }
.border-brand-conflict-bg     { border-color: var(--state-conflict-border) !important; }
.border-card                  { border-color: var(--border-default) !important; }
.border-soft                  { border-color: var(--border-soft) !important; }
.border-active                { border-color: var(--border-active) !important; }
.text-brand-primary     { color: var(--color-primary) !important; }
.text-brand-secondary   { color: var(--color-secondary) !important; }
.text-brand-navy        { color: var(--color-primary) !important; }
.text-brand-cyan        { color: var(--color-secondary) !important; }
.text-brand-success     { color: var(--state-success) !important; }
.text-brand-warning     { color: var(--state-warning) !important; }
.text-brand-danger      { color: var(--state-danger) !important; }
.text-brand-info        { color: var(--state-info) !important; }
.text-brand-conflict    { color: var(--state-conflict) !important; }
.text-cat-solo          { color: var(--category-solo) !important; }
.text-cat-duo           { color: var(--category-duo) !important; }
.text-cat-relay         { color: var(--category-relay) !important; }
.bg-cat-solo        { background: var(--category-solo-bg) !important; border-color: var(--category-solo-border) !important; }
.bg-cat-duo         { background: var(--category-duo-bg) !important; border-color: var(--category-duo-border) !important; }
.bg-cat-relay       { background: var(--category-relay-bg) !important; border-color: var(--category-relay-border) !important; }
.border-cat-solo    { border-color: var(--category-solo-border) !important; }
.border-cat-duo     { border-color: var(--category-duo-border) !important; }
.border-cat-relay   { border-color: var(--category-relay-border) !important; }
.badge-cat-solo {
    background: var(--category-solo-bg);
    color: var(--category-solo);
    border-color: var(--category-solo-border);
}
.badge-cat-duo {
    background: var(--category-duo-bg);
    color: var(--category-duo);
    border-color: var(--category-duo-border);
}
.badge-cat-relay {
    background: var(--category-relay-bg);
    color: var(--category-relay);
    border-color: var(--category-relay-border);
}
.badge-brand-primary {
    background: var(--action-secondary-bg);
    color: #B4BCC5;
    border-color: var(--action-secondary-border);
}
.badge-brand-secondary {
    background: var(--action-primary-bg);
    color: var(--state-active);
    border-color: var(--action-primary-border);
}
.badge-brand-navy {
    background: var(--action-secondary-bg);
    color: #B4BCC5;
    border-color: var(--action-secondary-border);
}
.badge-brand-cyan {
    background: var(--action-primary-bg);
    color: var(--state-active);
    border-color: var(--action-primary-border);
}
.badge-brand-success {
    background: var(--state-success-bg);
    color: var(--state-success);
    border-color: var(--state-success-border);
}
.badge-brand-warning {
    background: var(--state-warning-bg);
    color: var(--state-warning);
    border-color: var(--state-warning-border);
}
.badge-brand-danger {
    background: var(--state-danger-bg);
    color: var(--state-danger);
    border-color: var(--state-danger-border);
}
.badge-brand-info {
    background: var(--state-info-bg);
    color: var(--state-info);
    border-color: var(--state-info-border);
}
.badge-brand-conflict {
    background: var(--state-conflict-bg);
    color: var(--state-conflict);
    border-color: var(--state-conflict-border);
}
.badge-muted {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    border-color: var(--border-soft);
}
.btn-brand-primary {
    background: var(--action-secondary);
    border-color: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-primary:hover {
    background: var(--action-secondary-hover);
    border-color: var(--action-secondary-hover);
    color: #FFFFFF;
}
.btn-brand-secondary {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: #071216;
}
.btn-brand-secondary:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: #071216;
}
.btn-brand-navy {
    background: var(--action-secondary);
    border-color: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-navy:hover {
    background: var(--action-secondary-hover);
    border-color: var(--action-secondary-hover);
    color: #FFFFFF;
}
.btn-brand-cyan {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: #071216;
}
.btn-brand-cyan:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: #071216;
}
.btn-brand-success {
    background: var(--state-success);
    border-color: var(--state-success);
    color: #FFFFFF;
}
.btn-brand-success:hover {
    background: #00875A;
    border-color: #00875A;
}
.btn-danger,
.btn-brand-danger {
    background: var(--state-danger);
    border-color: var(--state-danger);
    color: #FFFFFF;
}
.btn-danger:hover,
.btn-brand-danger:hover {
    background: #C62828;
    border-color: #C62828;
}
.btn-warning,
.btn-brand-warning {
    background: var(--state-warning);
    border-color: var(--state-warning);
    color: #FFFFFF;
}
.btn-warning:hover,
.btn-brand-warning:hover {
    background: #996600;
    border-color: #996600;
}
.btn-info,
.btn-brand-info {
    background: var(--state-info);
    border-color: var(--state-info);
    color: #FFFFFF;
}
.btn-info:hover,
.btn-brand-info:hover {
    background: #2563EB;
    border-color: #2563EB;
}
.btn-brand-outline-primary {
    background: transparent;
    border: 1.5px solid var(--action-secondary);
    color: var(--action-secondary);
}
.btn-brand-outline-primary:hover {
    background: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-outline-secondary {
    background: transparent;
    border: 1.5px solid var(--action-primary);
    color: var(--action-primary);
}
.btn-brand-outline-secondary:hover {
    background: var(--action-primary);
    color: #071216;
}
.btn-brand-outline-navy {
    background: transparent;
    border: 1.5px solid var(--action-secondary);
    color: var(--action-secondary);
}
.btn-brand-outline-navy:hover {
    background: var(--action-secondary);
    color: #FFFFFF;
}
.btn-brand-outline-cyan {
    background: transparent;
    border: 1.5px solid var(--action-primary);
    color: var(--action-primary);
}
.btn-brand-outline-cyan:hover {
    background: var(--action-primary);
    color: #071216;
}
html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}
body {
    background: var(--surface-body);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-active); }
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
a {
    color: var(--action-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--action-primary-hover);
    text-decoration: none;
}
code, .mono {
    font-family: var(--font-mono);
}
.display-font {
    font-family: var(--font-display);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.btn:focus-visible {
    outline: 2px solid var(--action-primary);
    outline-offset: 2px;
}
.btn-primary-custom, .btn-navy {
    background: var(--action-secondary);
    color: #FFFFFF;
    border: 1px solid var(--action-secondary-hover);
}
.btn-primary-custom:hover, .btn-navy:hover {
    background: var(--action-secondary-hover);
    box-shadow: var(--effect-brand-glow);
    color: #FFFFFF;
}
.btn-primary-custom:active, .btn-navy:active {
    background: var(--action-secondary-active);
}
.btn-secondary-custom, .btn-cyan, .btn-action {
    background: var(--action-primary);
    color: #071216;
    border: none;
    font-weight: 600;
}
.btn-secondary-custom:hover, .btn-cyan:hover, .btn-action:hover {
    background: var(--action-primary-hover);
    box-shadow: var(--effect-active-glow);
    color: #071216;
}
.btn-secondary-custom:active, .btn-cyan:active, .btn-action:active {
    background: var(--action-primary-active);
}
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
}
.btn-ghost:hover {
    border-color: var(--border-active);
    color: var(--text-secondary);
}
.btn-danger-custom {
    background: var(--state-danger-bg);
    border: 1px solid var(--state-danger-border);
    color: var(--state-danger);
}
.btn-danger-custom:hover {
    background: rgba(217, 59, 59, 0.2);
    border-color: var(--state-danger-border-strong);
}
.btn-success-custom {
    background: var(--state-success);
    color: #fff;
    border: none;
}
.btn-success-custom:hover {
    background: #00875A;
}
.btn-outline-secondary, .btn-outline {
    background: transparent;
    border: 1.5px solid var(--action-primary);
    color: var(--action-primary);
}
.btn-outline-secondary:hover, .btn-outline:hover {
    background: var(--action-primary);
    color: #071216;
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-xs { padding: 3px 10px; font-size: 11px; }
.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-icon:hover {
    border-color: var(--border-active);
    color: var(--text-secondary);
}
.btn-icon.active {
    border-color: var(--action-primary);
    color: var(--action-primary);
    background: var(--action-primary-bg);
}
.form-group { margin-bottom: var(--spacing-md); }
.form-group label,
.form-label {
    display: block;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}
input,
select,
textarea,
.form-control {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 3px var(--action-primary-bg);
}
input::placeholder,
textarea::placeholder {
    color: var(--text-disabled);
    opacity: 0.5;
}
select option { background: var(--surface-card); color: var(--text-primary); }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--state-active);
    animation: pulse-live 1.5s ease-in-out infinite;
    vertical-align: middle;
}
.live-dot.success { background: var(--state-success); }
.live-dot.warning { background: var(--state-warning); }
@keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}
.timer-display {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--state-active);
    letter-spacing: 2px;
    line-height: 1;
}
.timer-xl  { font-size: 56px; }
.timer-lg  { font-size: 42px; }
.timer-md  { font-size: 28px; }
.timer-sm  { font-size: 18px; }
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 40px;
    margin-bottom: 14px;
    color: var(--action-secondary-hover);
    opacity: 0.4;
}
.empty-state h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
}
.empty-state p {
    font-size: 13px;
    color: var(--text-muted);
    opacity: 0.6;
    max-width: 240px;
    line-height: 1.5;
}
.toast-notification {
    position: fixed;
    top: calc(var(--rm-nav-h) + 12px);
    right: 20px;
    padding: 13px 20px;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    z-index: 99999;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    animation: toastIn 0.25s ease;
    transition: opacity 0.3s, transform 0.3s;
}
.toast-notification.toast-hide { opacity: 0; transform: translateX(110%); }
.toast-notification.success {
    background: #0A1F0F;
    border-color: var(--state-success-border-strong);
    color: var(--state-success);
}
.toast-notification.danger  {
    background: #1F0A0A;
    border-color: var(--state-danger-border-strong);
    color: var(--state-danger);
}
.toast-notification.warning {
    background: #1A140A;
    border-color: var(--state-warning-border-strong);
    color: var(--state-warning);
}
.toast-notification.info    {
    background: #0A1229;
    border-color: var(--state-info-border-strong);
    color: var(--state-info);
}
.toast-close-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
    opacity: 0.6;
    padding: 0 2px;
}
.toast-close-btn:hover { opacity: 1; }
@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--action-link);
    outline-offset: 2px;
}
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-disabled  { color: var(--text-disabled) !important; }
.mt-1  { margin-top: var(--spacing-sm); }
.mt-2  { margin-top: var(--spacing-md); }
.mt-3  { margin-top: var(--spacing-lg); }
.mb-1  { margin-bottom: var(--spacing-sm); }
.mb-2  { margin-bottom: var(--spacing-md); }
.mb-3  { margin-bottom: var(--spacing-lg); }
.p-1   { padding: var(--spacing-sm); }
.p-2   { padding: var(--spacing-md); }
.p-3   { padding: var(--spacing-lg); }
.gap-xs         { gap: var(--spacing-xs); }
.gap-sm         { gap: var(--spacing-sm); }
.gap-md         { gap: var(--spacing-md); }
.gap-lg         { gap: var(--spacing-lg); }
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-col       { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-wide  { letter-spacing: 0.8px; }
.tracking-wider { letter-spacing: 1.2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
select.form-control{height: auto!important}
@media (max-width: 768px) {
    .card {
        padding: var(--spacing-md);
    }
    .modal-header {
        padding: 12px 16px !important;
    }
    .modal-footer {
        padding: 12px 16px !important;
    }
    .form-row { grid-template-columns: 1fr; gap: var(--spacing-sm); }
}
@media (max-width: 480px) {
    .timer-xl { font-size: 40px; }
    .timer-lg { font-size: 32px; }
    .btn { font-size: 13px; padding: 8px 14px; }
    .btn-lg { font-size: 14px; padding: 11px 20px; }
}
@media print {
    body { background: #fff !important; color: #000 !important; }
    .card { border: 1px solid #ddd !important; background: #fff !important; }
    .btn, .toast-notification, .modal, .dropdown-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.context-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--surface-default);
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.context-tabs::-webkit-scrollbar        { height: 4px; }
.context-tabs::-webkit-scrollbar-track  { background: transparent; }
.context-tabs::-webkit-scrollbar-thumb  { background: var(--border-default); border-radius: var(--radius-pill); }
.context-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-muted);
    background: transparent;
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}
.context-tab:hover {
    color: var(--text-primary);
    background: var(--surface-tint-subtle);
    text-decoration: none;
}
.context-tab.active {
    color: var(--text-inverse);
    background: var(--action-primary);
    font-weight: 700;
}
.context-tab i { font-size: 13px; }