:root {
    --bg: #f5f7fa;
    --card: #ffffff;
    --ink: #202633;
    --muted: #697386;
    --line: #e3e8ef;
    --primary: #176b87;
    --success: #16815f;
    --danger: #b94a48;
    --sidebar: #fbfcfe;
    --soft: #eef3f7;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: var(--primary);
    overflow-wrap: anywhere;
    text-decoration: none;
}
button {
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-weight: 700;
    max-width: 100%;
    padding: 0.85rem 1rem;
}
.button-secondary {
    background: #eef3f7;
    color: var(--ink);
}
input, select, textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    margin-top: 0.35rem;
    padding: 0.7rem 0.8rem;
}
textarea { min-height: 88px; resize: vertical; }
label { color: var(--muted); display: block; font-size: 0.9rem; font-weight: 700; }
h1, h2, h3, p, strong, span, dd, dt, td, th {
    overflow-wrap: anywhere;
}

.app-body {
    background: var(--bg);
}
.app-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
}
.sidebar {
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100vh;
    left: 0;
    overflow-y: auto;
    padding: 0.9rem;
    position: sticky;
    top: 0;
}
.sidebar-brand {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}
.brand-mark {
    align-items: center;
    background: var(--primary);
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 900;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.sidebar-brand strong, .sidebar-brand span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-brand span {
    color: var(--muted);
    font-size: 0.78rem;
}
.sidebar-search span {
    display: none;
}
.sidebar-search input {
    background: #fff;
    border-radius: 12px;
    font-size: 0.88rem;
    margin-top: 0;
    padding: 0.62rem 0.75rem;
}
.sidebar-nav {
    display: grid;
    gap: 0.8rem;
}
.sidebar-nav h2 {
    color: #8a94a6;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    margin: 0.5rem 0 0.35rem;
    text-transform: uppercase;
}
.sidebar-nav a, .sidebar-nav .disabled {
    align-items: center;
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    font-size: 0.88rem;
    font-weight: 750;
    gap: 0.58rem;
    padding: 0.48rem 0.55rem;
}
.sidebar-nav a.active {
    background: #e8f3f6;
    color: #0e5368;
}
.sidebar-nav a:hover {
    background: var(--soft);
}
.sidebar-nav .disabled {
    color: #a4acba;
}
.nav-icon {
    border-radius: 7px;
    display: inline-block;
    height: 15px;
    width: 15px;
}
.bg-a { background: #176b87; }
.bg-b { background: #7b61ff; }
.bg-c { background: #16815f; }
.bg-d { background: #b94a48; }
.bg-e { background: #b7791f; }
.bg-f { background: #5b7cfa; }
.bg-g { background: #278ea5; }
.bg-h { background: #8d6e63; }
.bg-i { background: #5c6bc0; }
.bg-j { background: #8e7cc3; }
.bg-k { background: #2f855a; }
.bg-l { background: #d97706; }
.bg-m { background: #0f766e; }
.bg-n { background: #0369a1; }
.bg-o { background: #9333ea; }
.bg-p { background: #64748b; }
.bg-q { background: #dc2626; }
.bg-r { background: #0d9488; }
.bg-s { background: #4f46e5; }
.bg-t { background: #475569; }
.sidebar-logout {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
    margin-top: auto;
    padding: 0.85rem 0.55rem 0.2rem;
}
.app-main {
    min-width: 0;
    padding: 1.1rem;
}
.page-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.page-header > div {
    flex: 1 1 260px;
    min-width: 0;
}
.header-actions {
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
    gap: 0.6rem;
    justify-content: flex-end;
    min-width: 0;
}
.page-header h1 {
    font-size: 1.55rem;
    margin: 0.1rem 0 0;
}
.dashboard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(280px, 1.1fr) minmax(320px, 1.4fr) minmax(220px, 0.8fr);
}
.action-strip {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 1rem;
}
.action-strip a {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 68px;
    padding: 0.9rem 1rem;
    text-decoration: none;
}
.action-strip a.needs-attention {
    border-color: rgba(230, 84, 67, 0.45);
}
.action-strip span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.action-strip strong {
    font-size: 1.65rem;
}
.dashboard-grid .panel, .workbench-grid .panel, .kpi-stack .panel, .goal-grid .panel {
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(26, 33, 46, 0.04);
}
.ops-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
}
.ops-card h2, .activity-card h2, .new-ticket h2 {
    margin: 0.1rem 0 0.45rem;
}
.ops-actions {
    display: grid;
    gap: 0.65rem;
}
.card-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}
.activity-list {
    display: grid;
    gap: 0.55rem;
}
.activity-list article {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.1rem;
    padding-top: 0.55rem;
}
.activity-list span {
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}
.activity-list strong {
    font-size: 0.9rem;
}
.activity-list time {
    color: var(--muted);
    font-size: 0.78rem;
}
.kpi-stack {
    display: grid;
    gap: 1rem;
}
.dashboard-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-kpis .kpi-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
}
.kpi-card, .goal-card {
    display: grid;
    gap: 0.25rem;
}
.kpi-card span, .goal-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.kpi-card strong, .goal-card strong {
    font-size: 1.8rem;
    line-height: 1;
}
.kpi-card small, .goal-card small {
    color: var(--muted);
}
.goal-grid {
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workbench-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
    margin-top: 1rem;
}
.board-toolbar {
    margin-top: 1rem;
}
.board-filter-form {
    align-items: end;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.pagination-links {
    margin-top: 0.75rem;
}
.part-search-widget {
    margin-bottom: 1rem;
}
.part-search-results {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.part-result {
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: inherit;
    display: grid;
    gap: 0.15rem;
    justify-items: start;
    padding: 0.75rem;
    text-align: left;
}
.part-result:hover,
.part-result:focus-visible {
    border-color: rgba(56, 189, 248, 0.75);
    outline: none;
}
.part-result span,
.part-result small {
    color: var(--muted);
}
.filter-tabs button {
    background: var(--soft);
    color: var(--ink);
    padding: 0.55rem 0.75rem;
}
.filter-tabs button.active {
    background: var(--primary);
    color: #fff;
}
.board-search input {
    margin-top: 0.25rem;
}
.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.ticket-meta span {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 0.18rem 0.45rem;
}
.intake-page {
    background: linear-gradient(180deg, #eef3f7 0, var(--bg) 220px);
}
.intake-shell {
    display: grid;
    gap: 1rem;
    margin: 0 auto;
    max-width: 1280px;
}
.service-tiles {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.service-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    cursor: pointer;
    display: grid;
    gap: 0.25rem;
    min-height: 94px;
    padding: 1rem;
}
.service-tile input {
    margin: 0;
    width: auto;
}
.service-tile.active {
    border-color: rgba(23, 107, 135, 0.45);
    box-shadow: 0 10px 20px rgba(23, 107, 135, 0.12);
}
.service-tile.disabled {
    color: #9aa4b2;
    cursor: not-allowed;
    opacity: 0.72;
}
.service-tile strong {
    color: var(--ink);
}
.service-tile span {
    color: var(--muted);
    font-size: 0.82rem;
}
.intake-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 350px;
}
.trade-in-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1rem;
}
.trade-in-wide {
    grid-column: 1 / -1;
}
.checklist-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.checklist-grid fieldset {
    gap: 0.35rem;
}
.intake-main, .intake-side {
    display: grid;
    gap: 1rem;
}
.intake-card {
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(26, 33, 46, 0.05);
}
.intake-card h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}
.grid-3 {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.empty-state {
    align-items: center;
    background: var(--soft);
    border: 1px dashed #cad3df;
    border-radius: 12px;
    color: var(--muted);
    display: flex;
    justify-content: center;
    min-height: 64px;
    padding: 0.8rem;
}
.line-item-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(180px, 1fr) minmax(80px, 100px) minmax(110px, 140px) auto;
}
.line-items {
    display: grid;
    gap: 0.65rem;
}
.line-item-grid button {
    align-self: end;
}
.price-summary {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr auto;
    margin: 0.85rem 0 0;
    padding: 0.85rem;
}
.price-summary dt {
    color: var(--muted);
    font-weight: 800;
}
.price-summary dd {
    margin: 0;
}
.payment-buttons {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.payment-buttons label {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    padding: 0.65rem;
}
.payment-buttons input {
    margin: 0 0.35rem 0 0;
    width: auto;
}
.intake-card details {
    border-top: 1px solid var(--line);
    padding: 0.7rem 0;
}
.intake-card details:first-of-type {
    border-top: 0;
}
.intake-footer {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    bottom: 0;
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
    padding: 0.8rem;
    position: sticky;
    z-index: 2;
}
.topbar {
    align-items: center;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}
.topbar h1, .login-card h1 { margin: 0; }
.topbar > div { min-width: 0; }
.topbar nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.eyebrow { color: var(--primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; margin: 0 0 0.25rem; text-transform: uppercase; }
.muted { color: var(--muted); }

.layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(320px, 400px) 1fr;
    padding: 1rem;
}
.panel, .login-card, .column, .ticket {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(23, 32, 51, 0.06);
    min-width: 0;
}
.panel { padding: 1rem; }
.ticket-form, .stack { display: grid; gap: 0.8rem; }
.grid-2 { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkbox-line {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.checkbox-line input {
    margin: 0;
    width: auto;
}

.kanban {
    display: grid;
    gap: 1rem;
    grid-auto-columns: minmax(280px, 1fr);
    grid-auto-flow: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    overflow-x: auto;
    padding-bottom: 1rem;
}
.column { min-height: 70vh; padding: 0.8rem; }
.column.over { outline: 3px solid rgba(37, 99, 235, 0.25); }
.column header { align-items: center; display: flex; justify-content: space-between; }
.column h2 { font-size: 1rem; margin: 0.25rem 0 0.75rem; }
.column header span { background: var(--bg); border-radius: 999px; padding: 0.2rem 0.55rem; }
.dropzone { display: grid; gap: 0.75rem; min-height: 55vh; }
.ticket { cursor: grab; padding: 0.9rem; }
.ticket.dragging { opacity: 0.45; }
.ticket h3 { margin: 0.45rem 0; }
.ticket h3 a { color: var(--ink); }
.ticket p { color: var(--muted); margin: 0.25rem 0; }
.ticket-head { align-items: center; display: flex; justify-content: space-between; }
.ticket-head span { border-radius: 999px; background: var(--bg); font-size: 0.75rem; padding: 0.2rem 0.45rem; text-transform: capitalize; }
.priority-high, .priority-urgent { border-left: 5px solid var(--danger); }
.priority-low { border-left: 5px solid var(--success); }
.due { font-weight: 700; }

.alert { border-radius: 10px; margin-bottom: 0.8rem; padding: 0.75rem; }
.alert.success { background: #dcfce7; color: var(--success); }
.alert.error { background: #fee2e2; color: var(--danger); }
.login-screen { display: grid; place-items: center; padding: 1rem; }
.login-card { max-width: 420px; padding: 2rem; width: 100%; }

.public-site {
    background: #101418;
    color: #eef3f7;
}
.public-nav {
    align-items: center;
    background: rgba(16, 20, 24, 0.94);
    border-bottom: 1px solid #29323a;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: space-between;
    padding: 0.9rem clamp(1rem, 4vw, 3rem);
    position: sticky;
    top: 0;
    z-index: 5;
}
.public-brand {
    align-items: center;
    color: #eef3f7;
    display: inline-flex;
    gap: 0.7rem;
    font-weight: 900;
}
.tenant-logo {
    background: #fff;
    border: 1px solid #34414d;
    border-radius: 6px;
    display: block;
    height: 40px;
    object-fit: contain;
    padding: 0.2rem;
    width: 40px;
}
.public-nav nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.public-nav nav a {
    color: #c8d2dc;
    font-size: 0.92rem;
    font-weight: 800;
}
.public-hero {
    align-items: center;
    display: grid;
    gap: clamp(1rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    min-height: min(720px, calc(100vh - 62px));
    padding: clamp(2rem, 6vw, 5.5rem) clamp(1rem, 5vw, 4rem) 2.5rem;
}
.public-hero-copy {
    max-width: 680px;
}
.public-hero h1 {
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    line-height: 1.18;
    margin: 0.15rem 0 1rem;
    max-width: 680px;
}
.public-hero p {
    color: #aebbc7;
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 0;
    max-width: 620px;
}
.public-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.35rem;
}
.public-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}
.public-social-links a {
    background: #161c22;
    border: 1px solid #34414d;
    border-radius: 999px;
    color: #d8e0e8;
    font-size: 0.88rem;
    font-weight: 900;
    padding: 0.45rem 0.7rem;
}
.repair-visual {
    aspect-ratio: 1 / 0.86;
    background:
        radial-gradient(circle at 22% 20%, rgba(39, 142, 165, 0.24), transparent 34%),
        linear-gradient(135deg, #1a2229, #11171d 48%, #21303a);
    border: 1px solid #2d3943;
    border-radius: 8px;
    min-height: 320px;
    position: relative;
}
.device-frame {
    background: #080b0f;
    border: 10px solid #26313a;
    border-radius: 24px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38);
    color: #f8faf8;
    display: grid;
    gap: 0.65rem;
    left: 50%;
    max-width: 285px;
    padding: 1.1rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-4deg);
    width: 58%;
}
.device-frame span {
    background: #78909c;
    border-radius: 999px;
    height: 6px;
    justify-self: center;
    width: 44px;
}
.device-frame strong {
    font-size: 1.15rem;
}
.device-frame p {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #f8faf8;
    font-size: 0.9rem;
    padding: 0.55rem;
}
.tool-chip {
    background: #1b232b;
    border: 1px solid #34414d;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    color: #eef3f7;
    font-weight: 900;
    padding: 0.55rem 0.8rem;
    position: absolute;
}
.chip-a { left: 8%; top: 18%; }
.chip-b { right: 9%; top: 30%; }
.chip-c { bottom: 15%; left: 14%; }
.public-band {
    border-bottom: 1px solid #29323a;
    border-top: 1px solid #29323a;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.public-band article {
    display: grid;
    gap: 0.2rem;
    min-height: 116px;
    padding: 1.35rem clamp(1rem, 4vw, 3rem);
}
.public-band article + article {
    border-left: 1px solid #29323a;
}
.public-band strong {
    font-size: 1rem;
}
.public-band span {
    color: #aebbc7;
}
.buyback-band {
    align-items: center;
    border-bottom: 1px solid #29323a;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 5vw, 4rem);
}
.buyback-band h2 {
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    line-height: 1.25;
    margin: 0.15rem 0 0.55rem;
}
.buyback-band p {
    color: #aebbc7;
    line-height: 1.6;
    margin: 0;
    max-width: 760px;
}
.buyback-band .button-link {
    margin-top: 0;
    white-space: nowrap;
}
.public-content {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    margin: 0 auto;
    max-width: 1180px;
    padding: clamp(1rem, 4vw, 3rem);
}
.public-form-panel,
.public-track-panel {
    background: #161c22;
    border: 1px solid #2c3741;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    padding: clamp(1rem, 3vw, 1.6rem);
}
.public-form-panel {
    display: grid;
    gap: 1rem;
}
.public-track-panel {
    position: sticky;
    top: 86px;
}
.public-form-page {
    margin: 0 auto;
    max-width: 1180px;
    padding: clamp(1rem, 4vw, 3rem);
}
.local-seo-section {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.local-seo-section h2 {
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    line-height: 1.25;
    margin: 0.15rem 0 0.65rem;
}
.local-seo-section p {
    color: #aebbc7;
    line-height: 1.65;
    margin: 0;
    max-width: 760px;
}
.area-list {
    align-content: start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.area-list span {
    background: #161c22;
    border: 1px solid #2c3741;
    border-radius: 999px;
    color: #d8e0e8;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 0.45rem 0.7rem;
}
.service-showcase {
    display: grid;
    gap: 1.2rem;
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.service-showcase h2 {
    font-size: clamp(1.2rem, 2.3vw, 1.6rem);
    line-height: 1.2;
    margin: 0.15rem 0 0;
    max-width: 720px;
}
.service-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-grid article {
    background: #161c22;
    border: 1px solid #2c3741;
    border-radius: 8px;
    display: grid;
    gap: 0.45rem;
    min-height: 158px;
    padding: 1rem;
}
.service-grid strong {
    font-size: 1rem;
}
.service-grid span {
    color: #aebbc7;
    line-height: 1.55;
}

@media (max-width: 960px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        height: auto;
        max-height: none;
        position: static;
    }
    .sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-grid, .workbench-grid {
        grid-template-columns: 1fr;
    }
    .action-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .board-filter-form,
    .feature-access-grid,
    .ticket-summary-strip {
        grid-template-columns: 1fr;
    }
    .goal-grid {
        grid-template-columns: 1fr;
    }
    .page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
    .header-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .service-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .intake-grid {
        grid-template-columns: 1fr;
    }
    .trade-in-grid,
    .checklist-grid {
        grid-template-columns: 1fr;
    }
    .line-item-grid {
        grid-template-columns: 1fr 1fr;
    }
    .layout { grid-template-columns: 1fr; }
    .kanban { grid-auto-flow: row; grid-column: auto; grid-row: auto; }
    .topbar { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
    .public-hero,
    .public-content,
    .local-seo-section {
        grid-template-columns: 1fr;
    }
    .public-hero {
        min-height: auto;
    }
    .public-band {
        grid-template-columns: 1fr;
    }
    .public-band article + article {
        border-left: 0;
        border-top: 1px solid #29323a;
    }
    .buyback-band {
        align-items: flex-start;
        flex-direction: column;
    }
    .buyback-band .button-link {
        white-space: normal;
    }
    .public-track-panel {
        position: static;
    }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) and (min-width: 961px) {
    .app-shell {
        grid-template-columns: 214px minmax(0, 1fr);
    }
    .sidebar {
        padding: 0.7rem;
    }
    .sidebar-nav a,
    .sidebar-nav .disabled {
        font-size: 0.82rem;
        padding: 0.42rem 0.45rem;
    }
    .page-header {
        align-items: flex-start;
    }
    .header-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .dashboard-grid .kpi-stack {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.installer-screen {
    padding: 2rem 1rem;
}
.installer-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(23, 32, 51, 0.06);
    margin: 0 auto;
    max-width: 920px;
    padding: 2rem;
}
.installer-form {
    display: grid;
    gap: 1rem;
}
fieldset {
    border: 1px solid var(--line);
    border-radius: 14px;
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 1rem;
}
legend {
    color: var(--ink);
    font-weight: 800;
    padding: 0 0.4rem;
}
.field-help {
    color: var(--muted);
    margin: 0;
}
.button-link {
    align-items: center;
    background: var(--primary);
    border-radius: 10px;
    color: white;
    display: inline-flex;
    font-weight: 700;
    margin-top: 1rem;
    max-width: 100%;
    padding: 0.85rem 1rem;
    text-align: center;
}
.page-header .button-link,
.header-actions .button-link,
.detail-header .button-link,
.card-heading .button-link {
    margin-top: 0;
}
.button-link.button-secondary {
    background: #eef3f7;
    color: var(--ink);
}


.upgrade-summary {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0;
}
.upgrade-summary div, .pending-list {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
}
.upgrade-summary strong, .upgrade-summary span {
    display: block;
}
.upgrade-summary span {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 800;
    margin-top: 0.35rem;
}
.pending-list {
    margin-bottom: 1rem;
}
.pending-list h2 {
    margin-top: 0;
}

@media (max-width: 720px) {
    .upgrade-summary {
        grid-template-columns: 1fr;
    }
}

.admin-layout {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}
.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table {
    border-collapse: collapse;
    min-width: 680px;
    width: 100%;
}
th, td {
    border-bottom: 1px solid var(--line);
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}
th {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}
.inline-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0;
}
.inline-form input, .inline-form select {
    max-width: 100%;
    min-width: 160px;
    width: auto;
}
.tenant-website-form {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    margin: 0.7rem 0;
}
.tenant-website-form button {
    align-self: end;
}
details {
    margin-top: 0.5rem;
}
summary {
    color: var(--primary);
    cursor: pointer;
    font-weight: 800;
}

.detail-layout {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}
.detail-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}
.detail-header > div {
    min-width: 0;
}
.detail-header h2 {
    margin: 0.25rem 0 0;
}
.detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticket-summary-strip {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ticket-summary-strip article {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(26, 33, 46, 0.04);
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem;
}
.ticket-summary-strip span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}
.ticket-summary-strip strong {
    font-size: 0.98rem;
}
.feature-access-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-card h2 {
    margin: 0;
}
.feature-form {
    display: grid;
    gap: 0.65rem;
}
.feature-row {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 150px;
    padding-top: 0.65rem;
}
.feature-row strong,
.feature-row span {
    display: block;
}
.feature-row span {
    color: var(--muted);
    font-size: 0.78rem;
}
.feature-row select {
    margin: 0;
}
.customer-detail-grid .customer-wide-panel {
    grid-column: 1 / -1;
}
.customer-summary-strip strong {
    font-size: 0.92rem;
}
.detail-list {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(120px, 0.45fr) 1fr;
    margin: 0;
}
.detail-list dt {
    color: var(--muted);
    font-weight: 800;
}
.detail-list dd {
    margin: 0;
}
.status-pill {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 800;
    padding: 0.45rem 0.75rem;
    text-transform: capitalize;
}
.preserve-lines {
    white-space: pre-wrap;
}
.note-form {
    margin-bottom: 1rem;
}
.timeline {
    display: grid;
    gap: 0.75rem;
}
.timeline article {
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
}
.timeline strong, .timeline time {
    display: block;
}
.timeline time {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.timeline.compact {
    gap: 0.4rem;
}
.dashboard-panel {
    align-self: start;
}
.stat-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}
.stat-grid article {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem;
}
.stat-grid strong, .stat-grid span {
    display: block;
}
.stat-grid strong {
    font-size: 1.45rem;
}
.stat-grid span {
    color: var(--muted);
    font-size: 0.85rem;
}
.invoice-totals {
    margin-top: 1rem;
    max-width: 420px;
}
.square-checkout-form {
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.quick-create {
    bottom: 1.25rem;
    position: fixed;
    right: 1.25rem;
    z-index: 40;
}
.quick-create summary {
    align-items: center;
    background: var(--primary);
    border-radius: 999px;
    box-shadow: 0 16px 35px rgba(22, 42, 90, 0.26);
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 1.8rem;
    font-weight: 850;
    height: 56px;
    justify-content: center;
    list-style: none;
    width: 56px;
}
.quick-create summary::-webkit-details-marker {
    display: none;
}
.quick-create nav {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    bottom: 68px;
    box-shadow: 0 16px 35px rgba(22, 42, 90, 0.18);
    display: grid;
    min-width: 180px;
    padding: 0.45rem;
    position: absolute;
    right: 0;
}
.quick-create nav a {
    border-radius: 9px;
    color: var(--text);
    font-weight: 800;
    padding: 0.7rem 0.8rem;
    text-decoration: none;
}
.quick-create nav a:hover {
    background: var(--bg);
}

@media print {
    .topbar, .button-link, form, .quick-create {
        display: none !important;
    }
    body {
        background: white;
    }
    .panel {
        box-shadow: none;
    }
}

@media (max-width: 760px) {
    .app-main {
        padding: 0.75rem;
    }
    .sidebar {
        padding: 0.75rem;
    }
    .sidebar-brand,
    .sidebar-search,
    .sidebar-logout,
    .sidebar-nav {
        margin-left: auto;
        margin-right: auto;
        max-width: 520px;
        width: 100%;
    }
    .sidebar-nav {
        grid-template-columns: 1fr;
    }
    .detail-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .detail-list {
        grid-template-columns: 1fr;
    }
    .grid-2, .grid-3, .stat-grid, .dashboard-kpis, .payment-buttons, .line-item-grid, .tenant-website-form {
        grid-template-columns: 1fr;
    }
    .action-strip {
        grid-template-columns: 1fr;
    }
    .service-tiles {
        grid-template-columns: 1fr;
    }
    .intake-footer {
        align-items: stretch;
        flex-direction: column;
        position: static;
    }
    .header-actions,
    .topbar nav {
        width: 100%;
    }
    .header-actions .button-link,
    .page-header > .button-link,
    .topbar nav a,
    .intake-footer a,
    .intake-footer button {
        justify-content: center;
        width: 100%;
    }
    .card-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .card-heading button,
    .card-heading .button-link {
        justify-content: center;
        width: 100%;
    }
    table {
        min-width: 620px;
    }
}

@media (max-width: 480px) {
    .app-main,
    .detail-layout,
    .admin-layout {
        padding: 0.55rem;
    }
    .panel,
    .installer-card,
    .login-card {
        border-radius: 14px;
        padding: 0.8rem;
    }
    .page-header h1 {
        font-size: 1.3rem;
    }
    .topbar {
        padding: 0.8rem;
    }
    .ticket-summary-strip {
        gap: 0.55rem;
    }
    .public-nav {
        align-items: flex-start;
        flex-direction: column;
    }
    .public-nav nav,
    .public-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
    .public-actions .button-link {
        justify-content: center;
        width: 100%;
    }
    .repair-visual {
        min-height: 250px;
    }
    .device-frame {
        width: 72%;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    table {
        min-width: 560px;
    }
}