:root {
    color-scheme: light;
    --color-primary: #0b6b57;
    --color-primary-strong: #075544;
    --color-primary-soft: #e7f3ef;
    --color-bg: #f5f7f6;
    --color-surface: #ffffff;
    --color-surface-muted: #f0f3f2;
    --color-text: #18211e;
    --color-text-muted: #66736f;
    --color-border: #dce4e1;
    --color-danger: #a33a3a;
    --color-danger-soft: #f9ecec;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-card: 0 8px 24px rgb(24 33 30 / 6%);
    --shadow-nav: 0 -8px 24px rgb(24 33 30 / 8%);
    --transition: 160ms ease;
}

* { box-sizing: border-box; }

html {
    min-width: 320px;
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    background: var(--color-bg);
    color: var(--color-text);
    font: 400 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
a { color: var(--color-primary); text-underline-offset: 3px; }
img, svg { display: block; }
[hidden], .hidden { display: none !important; }

.ui-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    display: flex;
    min-height: calc(56px + env(safe-area-inset-top));
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: max(var(--space-1), env(safe-area-inset-top)) max(var(--space-2), env(safe-area-inset-right)) var(--space-1) max(var(--space-2), env(safe-area-inset-left));
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(16px);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text);
    font-size: 18px;
    font-weight: 750;
    text-decoration: none;
}

.logo img { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.topbar nav { display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { flex: 0 0 auto; color: var(--color-text-muted); font-size: 14px; font-weight: 650; text-decoration: none; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--color-primary); }

.page {
    width: min(calc(100% - var(--space-4)), 1120px);
    margin: 0 auto;
    padding: var(--space-3) 0 var(--space-4);
    outline: none;
}

.role-master .page {
    width: min(calc(100% - var(--space-4)), 720px);
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

.page h1, .page h2, .page p { overflow-wrap: anywhere; }
.page h1 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.page h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.muted { color: var(--color-text-muted); }
.eyebrow { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }

.page-head, .section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.page-head > div, .section-head > div { min-width: 0; }
.page-head .muted { margin: var(--space-1) 0 0; font-size: 14px; }
.section-head .eyebrow { margin-bottom: var(--space-1); }
.section-head form { flex: 0 0 auto; }

.card {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.primary, .secondary, .danger, .choice, .button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition);
}

.primary { width: 100%; border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; box-shadow: 0 8px 16px rgb(11 107 87 / 18%); }
.secondary { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); }
.danger { width: 100%; border: 1px solid #e4c7c7; background: var(--color-surface); color: var(--color-danger); }
.compact { width: auto; min-height: 40px; padding: var(--space-1) var(--space-2); font-size: 14px; }
.primary:hover, .primary:focus-visible { border-color: var(--color-primary-strong); background: var(--color-primary-strong); }
.secondary:hover, .secondary:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); }
.danger:hover, .danger:focus-visible { border-color: var(--color-danger); background: var(--color-danger-soft); }
.primary:active, .secondary:active, .danger:active, .choice:active, .work-card:active, .estimate-row:active { transform: scale(.98); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgb(11 107 87 / 22%);
    outline-offset: 2px;
}

.link-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.inline-form { display: inline-flex; }

.form-stack { display: grid; gap: var(--space-2); }
.form-stack label { display: grid; gap: var(--space-1); color: var(--color-text); font-size: 14px; font-weight: 700; }
.form-stack small { color: var(--color-text-muted); font-size: 13px; font-weight: 400; }

input:not([type="checkbox"]):not([type="hidden"]), select, textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

textarea { min-height: 104px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-primary); outline-offset: 0; }
input:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); }
input::placeholder, textarea::placeholder { color: #8b9692; }

.alert {
    margin: 0 0 var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
}

.alert.error { border-color: #e4c7c7; background: var(--color-danger-soft); color: #7f3030; }
.alert.success { border-color: #c8dfd7; background: var(--color-primary-soft); color: var(--color-primary-strong); }
.alert ul { margin: 0; padding-left: var(--space-3); }

.cabinet-greeting { margin-bottom: var(--space-3); }
.cabinet-greeting h1 { font-size: 20px; }
.cabinet-greeting p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 13px; }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.work-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 144px;
    align-content: space-between;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}

.work-card:hover, .work-card:focus-visible { border-color: #bdd4cc; box-shadow: 0 12px 24px rgb(24 33 30 / 9%); }
.work-card__icon, .empty-state__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); }
.work-card__body { display: grid; gap: var(--space-1); padding-top: var(--space-2); }
.work-card__body strong { font-size: 18px; line-height: 1.25; }
.work-card__body small { color: var(--color-text-muted); font-size: 13px; line-height: 1.35; }
.work-card__arrow { position: absolute; top: var(--space-2); right: var(--space-2); width: 20px; height: 20px; color: var(--color-text-muted); }

.cabinet-estimates { margin-top: var(--space-4); }
.cabinet-estimates .section-head { margin-bottom: var(--space-2); }
.cabinet-estimates .section-head h2 { font-size: 20px; }
.estimate-list { display: grid; gap: var(--space-2); }
.estimate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 88px;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}

.estimate-row:hover, .estimate-row:focus-visible { border-color: #bdd4cc; box-shadow: 0 12px 24px rgb(24 33 30 / 9%); }
.estimate-row > div { display: grid; min-width: 0; gap: var(--space-1); }
.estimate-row > div strong { overflow: hidden; font-size: 18px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.estimate-row > div span { color: var(--color-text-muted); font-size: 13px; }

.badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 4px var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.badge.completed, .badge.active { border-color: #c8dfd7; background: var(--color-primary-soft); color: var(--color-primary-strong); }
.badge.blocked { border-color: #e4c7c7; background: var(--color-danger-soft); color: var(--color-danger); }

.empty-state { display: grid; min-height: 240px; place-items: center; align-content: center; padding: var(--space-4); text-align: center; }
.empty-state__icon { width: 48px; height: 48px; }
.empty-state__icon .ui-icon { width: 24px; height: 24px; }
.empty-state h2 { margin: var(--space-2) 0 var(--space-1); font-size: 20px; }
.empty-state p { max-width: 320px; margin: 0; color: var(--color-text-muted); font-size: 14px; }
.empty { padding: var(--space-4); color: var(--color-text-muted); text-align: center; }

.bottom-nav {
    position: fixed;
    z-index: 50;
    right: 50%;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 520px);
    min-height: calc(72px + env(safe-area-inset-bottom));
    padding: var(--space-1) max(var(--space-2), env(safe-area-inset-right)) max(var(--space-1), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left));
    border-top: 1px solid var(--color-border);
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-nav);
    transform: translateX(50%);
    backdrop-filter: blur(16px);
}

.bottom-nav > a {
    display: grid;
    min-width: 0;
    min-height: 56px;
    place-items: center;
    align-content: center;
    gap: 4px;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.bottom-nav > a:active { transform: scale(.96); }
.bottom-nav > a.active { color: var(--color-primary); }
.bottom-nav > a.active .nav-icon { background: var(--color-primary-soft); }
.bottom-nav small { font-size: 12px; font-weight: 650; line-height: 1; }
.nav-icon { display: grid; width: 48px; height: 32px; place-items: center; border-radius: var(--radius-md); transition: background var(--transition); }
.nav-icon .ui-icon { width: 24px; height: 24px; }
.bottom-create { display: grid; min-width: 0; place-items: center; }
.bottom-create input { display: none; }
.bottom-create button {
    display: grid;
    width: 56px;
    height: 56px;
    margin-top: -24px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 8px 16px rgb(11 107 87 / 24%);
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.bottom-create button:hover, .bottom-create button:focus-visible { background: var(--color-primary-strong); box-shadow: 0 12px 24px rgb(11 107 87 / 28%); }
.bottom-create button:active { transform: scale(.94); }
.bottom-create .ui-icon { width: 28px; height: 28px; stroke-width: 2; }

.auth-card { width: min(100%, 440px); margin: var(--space-2) auto 0; }
.auth-card h1 { margin-bottom: var(--space-1); }
.auth-card > .muted { margin: 0 0 var(--space-3); font-size: 14px; }
.auth-card .alert { margin-top: var(--space-2); }

.cabinet-panel { max-width: 680px; margin: 0 auto var(--space-2); }
.cabinet-panel h2 { margin-bottom: var(--space-3); }
.profile-details { display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); }
.profile-details div { min-width: 0; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.profile-details dt { color: var(--color-text-muted); font-size: 13px; }
.profile-details dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; font-size: 16px; font-weight: 700; }
.profile-name-form { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.locked-field { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 13px; }
.profile-security, .logout-panel { margin-top: var(--space-2); }
.logout-panel .muted { margin: calc(-1 * var(--space-2)) 0 var(--space-2); font-size: 14px; }

.wizard { width: min(100%, 640px); margin: 0 auto; }
.wizard-bar { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 48px; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: 13px; }
.wizard-bar [data-save-state] { text-align: center; white-space: nowrap; }
.wizard-bar > a { justify-self: end; font-size: 14px; font-weight: 650; text-decoration: none; }
.wizard-step { display: none; }
.wizard-step.active { display: block; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); animation: page-in var(--transition); }
.wizard-step h1 { margin-bottom: var(--space-3); }
.wizard-step > label { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); font-size: 14px; font-weight: 700; }
.wizard-step > .muted { margin: 0 0 var(--space-2); font-size: 13px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); margin-top: var(--space-3); }
.choice { width: 100%; min-height: 64px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 16px; }
.choice:hover, .choice:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.item-list { display: grid; gap: var(--space-1); margin: var(--space-3) 0; }
.item-card { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.item-card > div:first-child { display: grid; min-width: 0; gap: 4px; }
.item-card strong { overflow-wrap: anywhere; font-size: 16px; }
.item-card span { color: var(--color-text-muted); font-size: 13px; }
.counter { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.counter button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); font-size: 24px; font-weight: 700; cursor: pointer; }
.counter button:active { transform: scale(.92); }
.counter input:not([type="checkbox"]):not([type="hidden"]) { width: 56px; min-height: 40px; padding: var(--space-1); border-radius: var(--radius-sm); text-align: center; font-weight: 700; }
.counter .ui-icon { width: 20px; height: 20px; }
.wizard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); margin-top: var(--space-3); }

.estimate-section { margin-bottom: var(--space-2); }
.estimate-section h2 { margin-bottom: var(--space-2); }
.summary-item { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; border-top: 1px solid var(--color-border); }
.summary-item > span { min-width: 0; overflow-wrap: anywhere; }

.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.metric { display: grid; min-height: 128px; align-content: space-between; gap: var(--space-2); }
.metric strong { color: var(--color-primary); font-size: 32px; line-height: 1; }
.metric span { color: var(--color-text-muted); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.actions .button { width: auto; }
.two-column { display: grid; gap: var(--space-2); }
.profile-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.profile-summary dt { color: var(--color-text-muted); font-size: 13px; }
.profile-summary dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; font-weight: 700; }
.profile-summary .wide { grid-column: 1 / -1; }
.searchbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin-bottom: var(--space-2); }
.searchbar .secondary { margin: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
th { color: var(--color-text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
fieldset { margin: 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
legend { padding: 0 var(--space-1); font-weight: 700; }
.check { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: var(--space-1); padding: var(--space-1) 0; font-weight: 500 !important; }
.check input { flex: 0 0 auto; margin: 4px 0 0; accent-color: var(--color-primary); }
.danger-zone { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.is-loading #app-content { opacity: .55; pointer-events: none; }
#app-content { transition: opacity var(--transition); }

@keyframes page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .page { padding-top: var(--space-4); }
    .card, .wizard-step.active { padding: var(--space-3); }
    .profile-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .searchbar { grid-template-columns: minmax(240px, 1fr) 192px auto; }
    .searchbar .secondary { width: auto; }
}

@media (max-width: 520px) {
    .role-admin .topbar { flex-wrap: wrap; }
    .role-admin .topbar nav { width: 100%; justify-content: space-between; gap: var(--space-1); }
    .page-head { flex-direction: column; }
    .page-head .button { width: 100%; }
    .work-card { min-height: 120px; align-content: start; padding: var(--space-2); }
    .work-card__icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
    .work-card__icon .ui-icon { width: 20px; height: 20px; }
    .work-card__body { gap: 4px; padding-top: var(--space-1); }
    .work-card__body strong { font-size: 16px; }
    .work-card__body small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .work-card__arrow { width: 18px; height: 18px; }
    .profile-summary dl { grid-template-columns: 1fr; }
    .profile-summary .wide { grid-column: auto; }
    .wizard-step.active { padding: var(--space-2); }
    .wizard-actions { grid-template-columns: 1fr; }
    .summary-item { align-items: flex-start; flex-direction: column; }
    .summary-item .counter { align-self: flex-end; }
}

@media (max-width: 360px) {
    .item-card { align-items: flex-start; flex-direction: column; }
    .item-card .counter { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}