/* ─────────────────────────────────────────────────────────
   SS CLIENT PORTAL — STYLESHEET
   Dark theme, Matrix rain background, cyan accent
   Accent: #02CBF0
   ───────────────────────────────────────────────────────── */

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

:root {
    --accent:       #02CBF0;
    --accent-dark:  #01a8c8;
    --accent-glow:  rgba(2, 203, 240, 0.15);
    --accent-dim:   rgba(2, 203, 240, 0.06);
    --bg:           #050505;
    --bg-card:      rgba(10, 10, 10, 0.85);
    --bg-card-2:    rgba(15, 15, 15, 0.9);
    --border:       rgba(2, 203, 240, 0.1);
    --border-light: rgba(2, 203, 240, 0.2);
    --text-1:       #f0f0f0;
    --text-2:       #888;
    --text-3:       #444;
    --success:      #22c55e;
    --warning:      #f59e0b;
    --danger:       #ef4444;
    --radius:       12px;
    --radius-sm:    8px;
    --transition:   0.2s ease;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    background:  var(--bg);
    color:       var(--text-1);
    font-family: -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    min-height:  100vh;
    overflow-x:  hidden;
}

a {
    color:           var(--accent);
    text-decoration: none;
    transition:      opacity var(--transition);
}

a:hover { opacity: 0.8; }

/* ─────────────────────────────────────────────────────────
   MATRIX CANVAS
   ───────────────────────────────────────────────────────── */

#ss-matrix-canvas {
    position: fixed;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    z-index:  0;
    opacity:  0.35;
}

/* ─────────────────────────────────────────────────────────
   LOGIN PAGE
   ───────────────────────────────────────────────────────── */

.ss-login-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px 16px;
    position:        relative;
    z-index:         1;
}

.ss-login-card {
    width:            100%;
    max-width:        420px;
    background:       var(--bg-card);
    border:           1px solid var(--border-light);
    border-radius:    var(--radius);
    padding:          48px 40px;
    backdrop-filter:  blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:       0 0 60px rgba(2, 203, 240, 0.08),
                      0 0 0 1px rgba(2, 203, 240, 0.05);
    position:         relative;
    overflow:         hidden;
}

.ss-login-card::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          0;
    right:         0;
    height:        1px;
    background:    linear-gradient(
                     90deg,
                     transparent,
                     var(--accent),
                     transparent
                   );
    opacity:       0.6;
}

.ss-login-logo {
    text-align:    center;
    margin-bottom: 36px;
}

.ss-login-brand {
    display:        block;
    font-size:      28px;
    font-weight:    800;
    color:          #fff;
    letter-spacing: -0.5px;
    line-height:    1;
    margin-bottom:  8px;
}

.ss-login-brand span {
    color: var(--accent);
}

.ss-login-sub {
    display:        block;
    font-size:      11px;
    color:          var(--accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity:        0.7;
}

.ss-login-divider {
    width:         40px;
    height:        1px;
    background:    var(--accent);
    margin:        16px auto 0;
    opacity:       0.3;
}

.ss-login-intro {
    font-size:     14px;
    color:         var(--text-2);
    text-align:    center;
    margin-bottom: 28px;
    line-height:   1.7;
}

.ss-login-form {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.ss-field {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.ss-field label {
    font-size:      12px;
    font-weight:    500;
    color:          var(--accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ss-field input {
    background:    rgba(2, 203, 240, 0.03);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    color:         var(--text-1);
    font-size:     15px;
    padding:       12px 16px;
    width:         100%;
    transition:    border-color var(--transition),
                   box-shadow var(--transition);
    outline:       none;
    font-family:   inherit;
}

.ss-field input::placeholder {
    color: var(--text-3);
}

.ss-field input:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--accent-glow);
    background:   rgba(2, 203, 240, 0.05);
}

.ss-login-btn {
    background:    transparent;
    border:        1px solid var(--accent);
    border-radius: var(--radius-sm);
    color:         var(--accent);
    cursor:        pointer;
    font-family:   inherit;
    font-size:     14px;
    font-weight:   600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding:       13px 24px;
    transition:    all var(--transition);
    width:         100%;
    margin-top:    4px;
    position:      relative;
    overflow:      hidden;
}

.ss-login-btn::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -100%;
    width:      100%;
    height:     100%;
    background: linear-gradient(
                  90deg,
                  transparent,
                  rgba(2, 203, 240, 0.1),
                  transparent
                );
    transition: left 0.4s ease;
}

.ss-login-btn:hover {
    background:  rgba(2, 203, 240, 0.08);
    box-shadow:  0 0 20px rgba(2, 203, 240, 0.2);
    color:       #fff;
}

.ss-login-btn:hover::before {
    left: 100%;
}

.ss-login-btn:active {
    transform: scale(0.98);
}

.ss-login-msg {
    border-radius: var(--radius-sm);
    font-size:     14px;
    margin-bottom: 20px;
    padding:       12px 16px;
    text-align:    center;
}

.ss-msg-success {
    background: rgba(34, 197, 94, 0.08);
    border:     1px solid rgba(34, 197, 94, 0.2);
    color:      var(--success);
}

.ss-msg-error {
    background: rgba(239, 68, 68, 0.08);
    border:     1px solid rgba(239, 68, 68, 0.2);
    color:      var(--danger);
}

.ss-login-sent {
    text-align: center;
    padding:    12px 0;
}

.ss-sent-icon {
    background:    rgba(34, 197, 94, 0.1);
    border:        1px solid rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    color:         var(--success);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    font-size:     24px;
    height:        56px;
    width:         56px;
    margin-bottom: 20px;
}

.ss-login-sent h2 {
    font-size:     20px;
    font-weight:   600;
    margin-bottom: 12px;
    color:         var(--text-1);
}

.ss-login-sent p {
    color:         var(--text-2);
    font-size:     14px;
    margin-bottom: 8px;
}

.ss-login-sent strong {
    color: var(--accent);
}

.ss-sent-note {
    color:      var(--text-3) !important;
    font-size:  13px !important;
    margin-top: 16px !important;
}

.ss-sent-note a {
    color: var(--accent);
}

/* ─────────────────────────────────────────────────────────
   PORTAL LAYOUT
   ───────────────────────────────────────────────────────── */

.ss-portal-wrap {
    max-width: 1100px;
    margin:    0 auto;
    padding:   0 24px 80px;
    position:  relative;
    z-index:   1;
}

.ss-portal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         32px 0 28px;
    border-bottom:   1px solid var(--border);
    margin-bottom:   32px;
    gap:             16px;
    flex-wrap:       wrap;
}

.ss-portal-agency {
    font-size:      11px;
    font-weight:    700;
    color:          var(--accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom:  6px;
}

.ss-portal-client-name {
    font-size:               32px;
    font-weight:             700;
    letter-spacing:          -0.5px;
    line-height:             1.2;
    margin-bottom:           4px;
    color:                   #fff;
    display:                 block;
    position:                relative;
}

.ss-portal-client-name::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      40px;
    height:     2px;
    background: var(--accent);
    opacity:    0.6;
}

.ss-portal-domain {
    font-size: 13px;
    color:     var(--text-3);
    font-family: monospace;
}

.ss-portal-header-right {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-shrink: 0;
}

.ss-portal-updated {
    font-size: 12px;
    color:     var(--text-3);
}

.ss-portal-updated span {
    color: var(--text-2);
}

.ss-logout-btn {
    background:    transparent;
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    color:         var(--text-2);
    font-size:     12px;
    letter-spacing: 0.5px;
    padding:       7px 16px;
    transition:    all var(--transition);
}

.ss-logout-btn:hover {
    border-color: var(--accent);
    color:        var(--accent);
    opacity:      1;
}

.ss-section {
    background:    rgba(10, 10, 10, 0.6);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow:      hidden;
    backdrop-filter: blur(10px);
}

.ss-section-header {
    align-items:     center;
    border-bottom:   1px solid var(--border);
    display:         flex;
    justify-content: space-between;
    padding:         16px 24px;
}

.ss-section-header h2 {
    font-size:      13px;
    font-weight:    600;
    color:          var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ss-section-body {
    padding: 24px;
}

.ss-section-badge {
    background:    rgba(2, 203, 240, 0.06);
    border:        1px solid var(--border);
    border-radius: 20px;
    color:         var(--accent);
    font-size:     12px;
    font-weight:   500;
    padding:       3px 10px;
}

.ss-loading {
    color:       var(--text-3);
    font-size:   13px;
    font-family: monospace;
    padding:     8px 0;
}

.ss-loading::after {
    content:   '...';
    animation: ss-dots 1.5s infinite;
}

@keyframes ss-dots {
    0%   { content: '.'; }
    33%  { content: '..'; }
    66%  { content: '...'; }
}

.ss-empty {
    color:     var(--text-3);
    font-size: 14px;
    padding:   8px 0;
}

.ss-stats-row {
    background:    transparent;
    border:        none;
    display:       grid;
    grid-template-columns: repeat(4, 1fr);
    gap:           10px;
    margin-bottom: 12px;
}

.ss-stats-row-5 {
    grid-template-columns: repeat(5, 1fr);
}

.ss-stats-row-5 {
    grid-template-columns: repeat(5, 1fr);
}

.ss-stats-row-5 .ss-stat-card {
    padding: 20px 12px;
}

.ss-stats-row-5 .ss-stat-value {
    font-size: 24px;
}

.ss-health-grade {
    font-size: 52px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.ss-health-grade {
    font-size:   48px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.ss-stat-card {
    background:    rgba(10, 10, 10, 0.7);
    border:        1px solid var(--border);
    border-left:   3px solid transparent;
    border-radius: var(--radius);
    padding:       24px 16px;
    text-align:    center;
    transition:    all var(--transition);
    position:      relative;
    overflow:      hidden;
    backdrop-filter: blur(10px);
}

.ss-stat-card:hover {
    transform:    translateY(-3px);
    box-shadow:   0 8px 24px rgba(0,0,0,0.3);
}

/* ─── Dynamic status border colours ─────────────────────── */
.ss-card-ss-ok      { border-left-color: var(--success); }
.ss-card-ss-warning { border-left-color: var(--warning); }
.ss-card-ss-danger  { border-left-color: var(--danger);  }

.ss-stat-icon {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 2px;
    margin-bottom:  12px;
    display:        block;
    color:          var(--accent);
    text-transform: uppercase;
}

.ss-stat-value {
    font-size:      28px;
    font-weight:    700;
    color:          #fff;
    letter-spacing: -0.5px;
    line-height:    1;
    margin-bottom:  6px;
    font-family:    monospace;
}

.ss-stat-label {
    font-size: 11px;
    color:     var(--text-3);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ss-stat-sub {
    font-size:   11px;
    color:       var(--text-2);
    font-family: monospace;
}

.ss-status-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--text-3);
    display:       inline-block;
    flex-shrink:   0;
}

.ss-status-dot.ss-ok {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.ss-status-dot.ss-warning {
    background: var(--warning);
    box-shadow: 0 0 6px var(--warning);
}

.ss-status-dot.ss-danger {
    background: var(--danger);
    box-shadow: 0 0 6px var(--danger);
}

.ss-update-row {
    align-items:     center;
    border-bottom:   1px solid var(--border);
    display:         flex;
    gap:             12px;
    justify-content: space-between;
    padding:         12px 0;
}

.ss-update-row:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.ss-update-name {
    font-size: 13px;
    color:     var(--text-1);
    flex:      1;
}

.ss-update-version {
    font-size:   11px;
    color:       var(--text-3);
    font-family: monospace;
}

.ss-update-check {
    width:         24px;
    height:        24px;
    border-radius: 50%;
    background:    rgba(34, 197, 94, 0.1);
    border:        1px solid rgba(34, 197, 94, 0.3);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     12px;
    color:         var(--success);
    flex-shrink:   0;
}

.ss-security-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   10px;
}

.ss-security-item {
    align-items:   center;
    background:    rgba(2, 203, 240, 0.02);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    display:       flex;
    gap:           12px;
    padding:       14px 16px;
    transition:    border-color var(--transition);
}

.ss-security-item:hover {
    border-color: var(--border-light);
}

.ss-security-icon {
    font-size:   18px;
    flex-shrink: 0;
}

.ss-security-label {
    font-size: 13px;
    color:     var(--text-2);
    flex:      1;
}

.ss-security-value {
    font-size:   13px;
    font-weight: 600;
    font-family: monospace;
    color:       var(--text-1);
}

.ss-security-value.ss-ok      { color: var(--success); }
.ss-security-value.ss-warning { color: var(--warning); }
.ss-security-value.ss-danger  { color: var(--danger); }

.ss-section-performance .ss-section-body {
    display:     flex;
    gap:         40px;
    align-items: center;
}

.ss-perf-scores {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    flex-shrink:    0;
    margin-bottom:  0;
    justify-content: center;
}

.ss-perf-score {
    text-align: center;
    width:      150px;
}

.ss-perf-score canvas {
    width:  150px !important;
    height: 150px !important;
}

.ss-perf-score-label {
    font-size:      11px;
    color:          var(--text-3);
    margin-top:     10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ss-perf-vitals {
    flex:                  1;
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   10px;
    align-content:         center;
}

.ss-vital-item {
    background:    rgba(2, 203, 240, 0.02);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    padding:       14px 16px;
    text-align:    center;
}

.ss-vital-value {
    font-size:     20px;
    font-weight:   700;
    color:         var(--accent);
    margin-bottom: 4px;
    font-family:   monospace;
}

.ss-vital-label {
    font-size:      11px;
    color:          var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ss-backup-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
}

.ss-backup-item {
    background:    rgba(2, 203, 240, 0.02);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    padding:       16px;
    text-align:    center;
}

.ss-backup-value {
    font-size:   20px;
    font-weight: 700;
    color:       var(--success);
    margin-bottom: 4px;
    font-family: monospace;
}

.ss-backup-label {
    font-size:      11px;
    color:          var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ss-invoice-table {
    width:           100%;
    border-collapse: collapse;
}

.ss-invoice-table th {
    font-size:      11px;
    font-weight:    600;
    color:          var(--accent);
    text-align:     left;
    padding:        0 0 12px;
    border-bottom:  1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ss-invoice-table td {
    font-size:     14px;
    color:         var(--text-1);
    padding:       14px 0;
    border-bottom: 1px solid var(--border);
    font-family:   monospace;
}

.ss-invoice-table tr:last-child td {
    border-bottom: none;
}

.ss-invoice-status {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     11px;
    font-weight:   600;
    padding:       3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.ss-status-paid {
    background: rgba(34, 197, 94, 0.08);
    color:      var(--success);
    border:     1px solid rgba(34, 197, 94, 0.2);
}

.ss-status-due {
    background: rgba(245, 158, 11, 0.08);
    color:      var(--warning);
    border:     1px solid rgba(245, 158, 11, 0.2);
}

.ss-status-overdue {
    background: rgba(239, 68, 68, 0.08);
    color:      var(--danger);
    border:     1px solid rgba(239, 68, 68, 0.2);
}

.ss-pay-btn {
    background:     transparent;
    border:         1px solid var(--accent);
    border-radius:  var(--radius-sm);
    color:          var(--accent);
    cursor:         pointer;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.5px;
    padding:        5px 12px;
    text-decoration: none;
    display:        inline-block;
    transition:     all var(--transition);
    font-family:    monospace;
}

.ss-pay-btn:hover {
    background: rgba(2, 203, 240, 0.08);
    color:      #fff;
    opacity:    1;
}

.ss-document-row {
    align-items:   center;
    border-bottom: 1px solid var(--border);
    display:       flex;
    gap:           14px;
    padding:       14px 0;
}

.ss-document-row:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.ss-doc-icon {
    font-size:   18px;
    flex-shrink: 0;
}

.ss-doc-info { flex: 1; }

.ss-doc-name {
    font-size:   14px;
    color:       var(--text-1);
    font-weight: 500;
    margin-bottom: 2px;
}

.ss-doc-date {
    font-size:   11px;
    color:       var(--text-3);
    font-family: monospace;
}

.ss-doc-download {
    background:     transparent;
    border:         1px solid var(--border);
    border-radius:  var(--radius-sm);
    color:          var(--text-3);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.5px;
    padding:        5px 12px;
    transition:     all var(--transition);
    flex-shrink:    0;
}

.ss-doc-download:hover {
    border-color: var(--accent);
    color:        var(--accent);
    opacity:      1;
}

.ss-log-row {
    align-items:   flex-start;
    border-bottom: 1px solid var(--border);
    display:       flex;
    gap:           20px;
    padding:       12px 0;
}

.ss-log-row:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.ss-log-date {
    background:    rgba(2, 203, 240, 0.06);
    border:        1px solid rgba(2, 203, 240, 0.15);
    border-radius: 20px;
    padding:       2px 10px;
    font-size:     10px;
    color:         var(--accent);
    flex-shrink:   0;
    white-space:   nowrap;
    font-family:   monospace;
    letter-spacing: 0.5px;
}

.ss-log-entry {
    font-size: 13px;
    color:     var(--text-2);
    flex:      1;
}

.ss-section-tickets .ss-section-body {
    padding: 0;
}

.ss-portal-footer {
    border-top:  1px solid var(--border);
    margin-top:  40px;
    padding-top: 20px;
    text-align:  center;
    opacity:     0.5;
    transition:  opacity var(--transition);
}

.ss-portal-footer:hover {
    opacity: 1;
}

.ss-portal-footer p {
    font-size:   11px;
    color:       var(--text-3);
    font-family: monospace;
    letter-spacing: 0.5px;
}

.ss-portal-footer a {
    color: var(--accent);
}

/* ─────────────────────────────────────────────────────────
   PORTAL HEADER ENHANCEMENT
   ───────────────────────────────────────────────────────── */

.ss-portal-wrap::before {
    content:    '';
    display:    block;
    height:     2px;
    background: linear-gradient(
                  90deg,
                  transparent,
                  var(--accent),
                  transparent
                );
    opacity:    0.5;
    margin-bottom: 0;
}

.ss-portal-agency {
    font-size:      10px;
    letter-spacing: 4px;
}

.ss-portal-client-name {
    font-size:   32px;
    background:  linear-gradient(135deg, #fff 60%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─────────────────────────────────────────────────────────
   SCROLLBAR
   ───────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background:    var(--border-light);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ss-portal-wrap { padding: 0 16px 60px; }
    .ss-portal-header { flex-direction: column; align-items: flex-start; }
    .ss-portal-header-right { width: 100%; justify-content: space-between; }
    .ss-stats-row { grid-template-columns: repeat(2, 1fr); }
    .ss-security-grid { grid-template-columns: 1fr; }
    .ss-perf-vitals { grid-template-columns: repeat(2, 1fr); }
    .ss-backup-grid { grid-template-columns: repeat(2, 1fr); }
    .ss-login-card { padding: 36px 24px; }
    .ss-stats-row-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ss-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ss-stat-card { padding: 18px 12px; }
    .ss-stat-value { font-size: 22px; }
    .ss-perf-vitals { grid-template-columns: 1fr; }
}

/* ─── Portal Brand Logo ──────────────────────────────────── */
.ss-portal-brand {
    font-size:      22px;
    font-weight:    800;
    color:          #fff;
    letter-spacing: -0.5px;
    line-height:    1;
    margin-bottom:  8px;
}

.ss-portal-brand span {
    color: var(--accent);
}

.ss-portal-client-name::after {
    width: 60px;
    height: 3px;
    opacity: 0.8;
}

/* ─── Announcement Banner ────────────────────────────────── */
.ss-announcement-banner {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size:     13px;
    position:      relative;
    border:        1px solid transparent;
}

.ss-banner-info {
    background: rgba(2, 203, 240, 0.08);
    border-color: rgba(2, 203, 240, 0.2);
    color: var(--accent);
}

.ss-banner-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.ss-banner-success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.ss-banner-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.ss-banner-icon {
    font-size:   16px;
    flex-shrink: 0;
}

.ss-banner-text {
    flex: 1;
    color: inherit;
}

.ss-banner-close {
    background:  transparent;
    border:      none;
    color:       inherit;
    cursor:      pointer;
    font-size:   18px;
    line-height: 1;
    opacity:     0.6;
    padding:     0 4px;
    flex-shrink: 0;
}

.ss-banner-close:hover {
    opacity: 1;
}




/* ─── Services Section ───────────────────────────────────── */
.ss-services-table {
    width: 100%;
}

.ss-services-header {
    display:        grid;
    grid-template-columns: 1fr 120px 120px;
    gap:            12px;
    padding:        8px 0 12px;
    border-bottom:  1px solid var(--border);
    margin-bottom:  4px;
}

.ss-services-header div {
    font-size:      10px;
    font-weight:    600;
    color:          var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ss-service-row {
    display:        grid;
    grid-template-columns: 1fr 120px 120px;
    gap:            12px;
    align-items:    center;
    padding:        12px 0;
    border-bottom:  1px solid var(--border);
}

.ss-service-row:last-child {
    border-bottom: none;
}

.ss-services-col-name {
    font-size:   14px;
    color:       var(--text-1);
    font-weight: 500;
}

.ss-services-col-date {
    font-size:   12px;
    color:       var(--text-3);
    font-family: monospace;
}

.ss-service-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     11px;
    font-weight:   600;
    padding:       4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.ss-service-badge::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    currentColor;
    flex-shrink:   0;
}

.ss-service-ongoing {
    background: rgba(2, 203, 240, 0.08);
    color:      var(--accent);
    border:     1px solid rgba(2, 203, 240, 0.2);
}

.ss-service-completed {
    background: rgba(34, 197, 94, 0.08);
    color:      var(--success);
    border:     1px solid rgba(34, 197, 94, 0.2);
}

.ss-service-paused {
    background: rgba(245, 158, 11, 0.08);
    color:      var(--warning);
    border:     1px solid rgba(245, 158, 11, 0.2);
}

.ss-service-cancelled {
    background: rgba(239, 68, 68, 0.08);
    color:      var(--danger);
    border:     1px solid rgba(239, 68, 68, 0.2);
}

.ss-service-upcoming {
    background: rgba(136, 136, 136, 0.08);
    color:      var(--text-2);
    border:     1px solid rgba(136, 136, 136, 0.2);
}