/* ─────────────────────────────────────────────
   OYINNSTOUCH — Staff Service Log
   Aesthetic: luxury-minimal monochrome, drawn from the brand mark.
   Ink black on warm porcelain, letterspaced caps echoing the
   logotype's tracking, hairline rules, one grotesque family
   (Instrument Sans) doing all the typographic work.
   Mobile-first: ≥16px inputs (no iOS zoom), ≥44px touch targets,
   sticky total on phones.
   ───────────────────────────────────────────── */

.ssl-app {
    --ink: #141414;
    --ink-soft: #6b6b6b;
    --ink-faint: #9a9a9a;
    --porcelain: #faf9f7;
    --line: #e6e3de;
    --line-strong: #141414;
    --white: #ffffff;

    max-width: 480px;
    margin: 0 auto;
    padding: 32px 20px 56px;
    font-family: 'Instrument Sans', -apple-system, sans-serif;
    color: var(--ink);
    background: var(--porcelain);
    -webkit-tap-highlight-color: transparent;
    font-feature-settings: 'tnum'; /* tabular figures for money */
}

/* ── Brand header ─────────────────────────── */
.ssl-brand {
    display: flex;
    justify-content: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
}

.ssl-logo {
    height: 72px;                   /* stacked mark + wordmark */
    width: auto;
    display: block;
}

.ssl-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;         /* echoes the logotype tracking */
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
    margin: 0 0 6px;
}

.ssl-logout {
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding: 4px 2px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.ssl-logout:hover, .ssl-logout:active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.ssl-greeting {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 32px;
}

.ssl-app h4 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 36px 0 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* hairline rule extending from section headings */
.ssl-app h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ── Fields ───────────────────────────────── */
.ssl-app label {
    display: block;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.ssl-app input,
.ssl-app select {
    width: 100%;
    padding: 13px 14px;
    margin-top: 7px;
    border: 1px solid var(--line);
    border-radius: 2px;              /* sharp geometry, matching the mark */
    font-size: 16px;                 /* prevents iOS zoom on focus */
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    background: var(--white);
    box-sizing: border-box;
    min-height: 50px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease;
}

.ssl-app input:focus,
.ssl-app select:focus {
    outline: none;
    border-color: var(--line-strong);
}

.ssl-app select {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23141414' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* ── Service rows + search ────────────────── */
.ssl-service-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.ssl-search-wrap { flex: 1; position: relative; min-width: 0; }

.ssl-service-search {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 16px;
    font-family: inherit;
    min-height: 50px;
    box-sizing: border-box;
    background: var(--white);
    transition: border-color 0.18s ease;
}

.ssl-service-search:focus { outline: none; border-color: var(--line-strong); }

.ssl-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--white);
    border: 1px solid var(--ink);
    border-radius: 2px;
    max-height: 40vh;                /* keyboard-safe on phones */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 12px 32px rgba(20, 20, 20, 0.12);
}

.ssl-search-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    min-height: 48px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background 0.12s ease;
}

.ssl-search-item span:first-child { flex: 1; min-width: 0; color: var(--ink); }
.ssl-search-item span:last-child { font-weight: 600; white-space: nowrap; }
.ssl-search-item:active, .ssl-search-item:hover { background: var(--porcelain); }
.ssl-search-item:last-child { border-bottom: none; }

.ssl-hair-display {
    font-size: 12px;
    color: var(--ink-faint);
    margin-top: 6px;
    min-height: 15px;
    letter-spacing: 0.02em;
}

.ssl-remove-btn {
    width: 50px;
    height: 50px;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 2px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--ink-soft);
    transition: border-color 0.18s ease, color 0.18s ease;
}
.ssl-remove-btn:active { border-color: var(--ink); color: var(--ink); }

/* ── Buttons ──────────────────────────────── */
.ssl-app .ssl-btn-primary,
.ssl-app .ssl-btn-secondary {
    display: block;
    width: 100%;
    padding: 16px;
    margin: 14px 0;
    border-radius: 2px;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    min-height: 52px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ssl-app .ssl-btn-primary,
.ssl-app .ssl-btn-primary:hover,
.ssl-app .ssl-btn-primary:focus {
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
}
.ssl-app .ssl-btn-primary:active { background: #333; }
.ssl-app .ssl-btn-primary:disabled { background: var(--ink-faint); border-color: var(--ink-faint); }

.ssl-app .ssl-btn-secondary,
.ssl-app .ssl-btn-secondary:hover,
.ssl-app .ssl-btn-secondary:focus {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.ssl-app .ssl-btn-secondary:active { background: var(--ink); color: var(--white); }

/* ── Paired fields ────────────────────────── */
.ssl-row { display: flex; gap: 12px; }
.ssl-row label { flex: 1; min-width: 0; }

/* ── Total ────────────────────────────────── */
.ssl-total {
    text-align: center;
    background: var(--ink);
    color: var(--white);
    padding: 16px;
    border-radius: 2px;
    margin: 18px 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.99; /* isolates for sticky shadow */
}

.ssl-total span {
    font-size: 28px;
    font-weight: 600;
    display: block;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .ssl-total {
        position: sticky;
        top: 8px;
        z-index: 40;
        box-shadow: 0 8px 28px rgba(20, 20, 20, 0.28);
    }
}

/* ── Status + logs ────────────────────────── */
#ssl-status, #ssl-payslip-status {
    text-align: center;
    margin: 10px 0;
    font-size: 13px;
    color: var(--ink-soft);
    min-height: 18px;
    letter-spacing: 0.02em;
}

#ssl-logs { animation: ssl-fade 0.4s ease; }

@keyframes ssl-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.ssl-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ssl-log-table td {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.45;
}
/* Description column: takes the remaining width, wraps long service names */
.ssl-log-table td:first-child {
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-right: 10px;
}
/* Amount cells: pinned narrow, right-aligned, never wrap */
.ssl-log-table td.ssl-amt-cell {
    width: 84px;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.ssl-error {
    color: #8f2b1e;
    font-size: 13px;
    text-align: center;
    padding: 12px;
    border: 1px solid #e5c8c2;
    border-radius: 2px;
    background: #fbf3f1;
    margin-bottom: 16px;
}

.ssl-app hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 36px 0 0;
}

/* ── Login page ───────────────────────────── */
.ssl-login-app {
    margin-top: 10vh;
    max-width: 400px;
}
.ssl-login-app .ssl-kicker { margin-bottom: 28px; }
.ssl-login-app form label { margin-bottom: 20px; }

/* ── Admin portal ─────────────────────────── */
.ssl-admin-app {
    max-width: 560px;
    overflow-x: clip;               /* container never exceeds viewport */
}

.ssl-app input, .ssl-app select, .ssl-app button { max-width: 100%; }

.ssl-tabs {
    display: flex;
    border-bottom: 1px solid var(--line-strong);
    margin: 24px 0 8px;
}

/* High-specificity + resets so theme button styles (colors, gradients,
   shadows) can't hijack the tabs */
.ssl-app .ssl-tab,
.ssl-app .ssl-tab:hover,
.ssl-app .ssl-tab:focus,
.ssl-app .ssl-tab:active {
    flex: 1 1 0;
    min-width: 0;                   /* lets tracked caps shrink instead of overflowing */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 13px 2px;
    min-height: 46px;
    background: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin: 0 0 -1px 0;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ink-faint);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.ssl-app .ssl-tab.is-active,
.ssl-app .ssl-tab.is-active:hover,
.ssl-app .ssl-tab.is-active:focus {
    background: transparent;
    color: var(--ink);
    border-bottom-color: var(--ink);
}

@media (max-width: 600px) {
    .ssl-app .ssl-tab,
    .ssl-app .ssl-tab:hover,
    .ssl-app .ssl-tab:focus,
    .ssl-app .ssl-tab:active {
        font-size: 10px;
        letter-spacing: 0.06em;     /* tighter tracking so 4 tabs fit a 360px screen */
        padding: 12px 1px;
    }
}

.ssl-panel { display: none; }
.ssl-panel.is-active { display: block; animation: ssl-fade 0.3s ease; }

.ssl-app .ssl-inline-btn,
.ssl-app .ssl-inline-btn:hover,
.ssl-app .ssl-inline-btn:focus {
    padding: 8px 14px;
    min-height: 36px;
    background: transparent;
    background-image: none;
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.18s ease;
}
.ssl-app .ssl-inline-btn:active, .ssl-app .ssl-inline-btn:hover { border-color: var(--ink); }
.ssl-app .ssl-inline-danger, .ssl-app .ssl-inline-danger:hover, .ssl-app .ssl-inline-danger:focus { color: #8f2b1e; }
.ssl-app .ssl-inline-danger:active, .ssl-app .ssl-inline-danger:hover { border-color: #8f2b1e; }

/* Team/log tables: allow long values (emails) to wrap instead of overflowing */
.ssl-log-table { table-layout: fixed; }
.ssl-log-table td.ssl-void-cell { width: 78px; }

/* Service list: grouped accordion with read-mode rows */
.ssl-cat-group { margin-bottom: 8px; }

.ssl-app .ssl-cat-head,
.ssl-app .ssl-cat-head:hover,
.ssl-app .ssl-cat-head:focus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    min-height: 50px;
    background: var(--white);
    background-image: none;
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.18s ease;
}
.ssl-app .ssl-cat-head:active, .ssl-app .ssl-cat-head:hover { border-color: var(--ink); }

.ssl-cat-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    flex-shrink: 0;
}

.ssl-cat-body {
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 2px 2px;
    background: var(--white);
}

.ssl-svc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: 48px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.ssl-svc-item:last-child { border-bottom: none; }

.ssl-svc-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ssl-svc-price { font-weight: 600; white-space: nowrap; }
.ssl-svc-hair { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

.ssl-svc-item.is-editing {
    display: block;
    background: var(--porcelain);
    padding: 14px;
}
.ssl-svc-edit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}
.ssl-svc-edit-fields input { margin-top: 0; min-height: 46px; padding: 10px; font-size: 15px; }
.ssl-svc-edit-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ssl-summary-card {
    background: var(--ink);
    color: var(--white);
    padding: 14px 16px;
    border-radius: 2px;
    font-size: 13px;
    letter-spacing: 0.02em;
    margin: 16px 0;
    text-align: center;
}

/* Day-grouped log headers */
.ssl-app .ssl-day-head,
.ssl-app .ssl-day-head:hover,
.ssl-app .ssl-day-head:focus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    min-height: 46px;
    margin-top: 6px;
    background: var(--white);
    background-image: none;
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.18s ease;
}
.ssl-app .ssl-day-head:active, .ssl-app .ssl-day-head:hover { border-color: var(--ink); }

.ssl-day-total { font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-weight: 600; }

.ssl-day-body {
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 2px 2px;
    background: var(--white);
    padding: 0 12px;
}

/* Staff cards (Team tab) */
.ssl-staff-card {
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
    margin-bottom: 8px;
}

.ssl-app .ssl-staff-head,
.ssl-app .ssl-staff-head:hover,
.ssl-app .ssl-staff-head:focus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 14px;
    min-height: 50px;
    background: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}
.ssl-staff-head strong { font-size: 15px; font-weight: 600; }
.ssl-staff-head span { font-size: 12px; color: var(--ink-faint); word-break: break-word; font-weight: 400; }

.ssl-staff-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin: 0 0;
}

.ssl-staff-pay {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ssl-staff-pay label {
    flex: 1;
    min-width: 100px;
    margin-bottom: 0;
    font-size: 10px;
}
.ssl-staff-pay input { min-height: 42px; padding: 9px 10px; font-size: 15px; }
.ssl-staff-pay .ssl-inline-btn { min-height: 42px; }

/* Variant rows (Services tab add form) */
.ssl-variant-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 50px;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
}
.ssl-variant-row input { margin-top: 0; min-height: 46px; padding: 10px 10px; font-size: 15px; }
.ssl-variant-row .ssl-remove-btn { width: 100%; height: 46px; }

@media (max-width: 420px) {
    .ssl-variant-row { grid-template-columns: 1.3fr 0.9fr 0.8fr 44px; gap: 5px; }
    .ssl-variant-row input { font-size: 16px; padding: 10px 8px; }
}

/* Voided entries: visible audit trail, visually excluded */
.ssl-preview-box {
    border: 1px solid var(--ink);
    border-radius: 2px;
    background: var(--white);
    padding: 18px;
    margin: 14px 0;
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    line-height: 1.6;
}
.ssl-preview-box h1 { font-size: 17px; margin: 0 0 2px; }
.ssl-preview-box h2 { font-size: 13px; font-weight: 400; letter-spacing: 0.06em; margin: 0 0 12px; }
.ssl-preview-box h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 18px 0 6px; }
.ssl-preview-box hr { border: none; border-top: 1px dashed var(--line); margin: 12px 0; }
.ssl-preview-box p { font-size: 13px; margin: 4px 0; }

.ssl-draft-banner {
    background: var(--ink);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 8px 10px;
    text-align: center;
    border-radius: 2px;
    margin-bottom: 14px;
}

/* Previews are view-only: excluded even from a manual browser print */
@media print {
    #ssl-preview-out { display: none !important; }
}

.ssl-staff-pay select {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 14px;
    margin-top: 5px;
}
.ssl-logged-late {
    font-size: 11px;
    color: var(--ink-faint);
    font-style: italic;
    margin-top: 2px;
    text-decoration: none;
}

.ssl-note-line {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 3px;
    padding-left: 8px;
    border-left: 2px solid var(--line);
    text-decoration: none;
}

.ssl-assist-wrap {
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed var(--line);
    border-radius: 2px;
    background: var(--porcelain);
}
.ssl-assist-wrap select,
.ssl-assist-wrap input[type="text"] {
    margin-top: 0;
    margin-bottom: 8px;
    min-height: 46px;
    font-size: 15px;
}
.ssl-assist-wrap > div:last-of-type input { margin-bottom: 0; }

/* Split / Assisted toggle pills */
.ssl-flags { display: flex; gap: 8px; margin: 4px 0 14px; }

.ssl-app .ssl-flag,
.ssl-app .ssl-flag:hover,
.ssl-app .ssl-flag:focus {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    min-height: 46px;
    background: transparent;
    background-image: none;
    border: 1px dashed var(--line);
    border-radius: 2px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ssl-app .ssl-flag.is-active,
.ssl-app .ssl-flag.is-active:hover,
.ssl-app .ssl-flag.is-active:focus {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--white);
}

.ssl-search-more {
    padding: 10px 14px;
    font-size: 11px;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    text-align: center;
    background: var(--porcelain);
}
.ssl-log-table tr.is-voided td {
    text-decoration: line-through;
    color: var(--ink-faint);
}
.ssl-log-table tr.is-voided td:last-of-type { text-decoration: none; }
.ssl-void-cell { text-align: right; text-decoration: none !important; }

/* Category header with rename action beside the toggle */
.ssl-cat-headwrap { display: flex; gap: 6px; align-items: stretch; }
.ssl-cat-headwrap .ssl-cat-head { flex: 1; min-width: 0; }
.ssl-cat-headwrap .ssl-cat-rename { flex-shrink: 0; min-height: 50px; }

/* Period summary pay cards */
.ssl-pay-card {
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
    padding: 12px 14px;
    margin-bottom: 8px;
}
.ssl-pay-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ssl-pay-card-detail { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.ssl-pay-card-net { font-size: 14px; font-weight: 600; margin-top: 6px; }

/* Settings tab */
.ssl-app textarea {
    width: 100%;
    padding: 13px 14px;
    margin-top: 7px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.18s ease;
}
.ssl-app textarea:focus { outline: none; border-color: var(--line-strong); }

/* Segmented mode switcher (Add Service / Import CSV) */
.ssl-seg {
    display: flex;
    border: 1px solid var(--ink);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ssl-app .ssl-seg-btn,
.ssl-app .ssl-seg-btn:hover,
.ssl-app .ssl-seg-btn:focus {
    flex: 1;
    min-width: 0;
    padding: 13px 8px;
    min-height: 48px;
    background: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.ssl-app .ssl-seg-btn.is-active,
.ssl-app .ssl-seg-btn.is-active:hover,
.ssl-app .ssl-seg-btn.is-active:focus {
    background: var(--ink);
    color: var(--white);
}

/* Hidden native file input behind the styled button */
.ssl-app input.ssl-file-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

#ssl-bulk-filename { min-height: 15px; margin: 6px 0 0; }

.ssl-hint {
    font-size: 12px;
    color: var(--ink-faint);
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
}

.ssl-app label.ssl-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-transform: none;
    font-weight: 400;
    color: var(--ink);
    margin: 14px 0;
    cursor: pointer;
}
.ssl-app label.ssl-check input[type="checkbox"],
.ssl-app label.ssl-check input[type="checkbox"]:focus {
    width: 20px !important;
    height: 20px;
    min-height: 20px;
    padding: 0;
    margin: 0;
    flex: 0 0 20px;
    accent-color: var(--ink);
    -webkit-appearance: checkbox;
    appearance: auto;
    border: 1px solid var(--line);
    box-shadow: none;
}
.ssl-app label.ssl-check span { flex: 1; margin: 0; }

/* Five tabs: allow horizontal scroll on narrow phones rather than crushing */
@media (max-width: 420px) {
    .ssl-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ssl-tabs::-webkit-scrollbar { display: none; }
    .ssl-app .ssl-tab,
    .ssl-app .ssl-tab:hover,
    .ssl-app .ssl-tab:focus,
    .ssl-app .ssl-tab:active { flex: 1 0 auto; padding: 12px 10px; }
}

/* ── Very narrow screens ──────────────────── */
@media (max-width: 360px) {
    .ssl-row { flex-direction: column; gap: 0; }
    .ssl-app { padding: 24px 16px 48px; }
}