/* KFZ Office Pro — shared interface system */
/* Palette and native control scheme are defined in theme.css. */

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

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

button,input,select,textarea {
    font:inherit;
}

button,a {
    -webkit-tap-highlight-color:transparent;
}

button {
    cursor:pointer;
}

a {
    color:inherit;
    text-decoration:none;
}

img,svg {
    max-width:100%;
}

h1,h2,h3,h4,p {
    margin:0;
}

h1,h2,h3,h4 {
    line-height:1.25;
    letter-spacing:-.025em;
}

h1 {
    font-size:30px;
    font-weight:650;
}

h2 {
    font-size:22px;
}

h3 {
    font-size:17px;
}

h4 {
    font-size:14px;
}

p {
    color:var(--muted);
}

strong {
    font-weight:600;
}

small {
    font-size:12px;
}

form {
    margin:0;
}

fieldset {
    margin:0;
    padding:0;
    border:0;
    min-width:0;
}

legend {
    font-weight:600;
    margin-bottom:14px;
}

button:disabled {
    opacity:.55;
    cursor:not-allowed;
}

[hidden] {
    display:none!important;
}

::selection {
    background:var(--panel);
}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:2px solid var(--accent-text);
    outline-offset:4px;
}

input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:2px solid var(--accent-text);
    outline-offset:2px;
}

.ui-icon {
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
    flex:0 0 20px;
}

.muted {
    color:var(--muted);
}

.text-link {
    color:var(--accent-text);
    font-weight:500;
}

.text-link:hover {
    text-decoration:underline;
    text-underline-offset:3px;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.skip-link {
    position:fixed;
    top:10px;
    left:10px;
    z-index:999;
    transform:translateY(-200%);
    padding:10px 18px;
    background:var(--panel);
    color:var(--muted);
    border-radius:8px;
}

.skip-link:focus {
    transform:none;
}

.eyebrow {
    display:block;
    font-size:10px;
    letter-spacing:.13em;
    font-weight:650;
    color:var(--muted);
    margin-bottom:7px;
}

/* Navigation and workspace */
.app-shell {
    display:grid;
    grid-template-columns:212px minmax(0,1fr);
    min-height:100vh;
}

.sidebar {
    position:sticky;
    top:0;
    height:100dvh;
    padding:25px 15px 18px;
    background:var(--panel);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:25px;
    overflow-y:auto;
}

.brand {
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.brand>span:last-child {
    min-width:0;
}

.brand strong {
    display:block;
    font-size:15px;
    letter-spacing:-.02em;
}

.brand small {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:3px;
}

.brand-mark {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:12px;
    background:var(--primary);
    color:var(--on-primary);
    font-size:12px;
    font-weight:750;
    letter-spacing:.02em;
    box-shadow:var(--shadow);
}

.brand-mark-small {
    width:32px;
    height:32px;
    flex-basis:32px;
    border-radius:9px;
    font-size:10px;
}

.sidebar>.brand {
    padding:0 5px 20px;
    border-bottom:1px solid var(--border);
}

.nav-section {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.nav-caption {
    display:block;
    font-size:9px;
    letter-spacing:.12em;
    font-weight:650;
    color:var(--muted);
    padding:18px 12px 8px;
}

.nav-caption:first-child {
    padding-top:0;
}

.nav-link {
    display:flex;
    align-items:center;
    gap:11px;
    min-height:44px;
    border:1px solid transparent;
    border-radius:9px;
    padding:10px 12px;
    color:var(--muted);
    font-size:13px;
    background:transparent;
    width:100%;
    text-align:left;
    transition:background .15s,color .15s;
}

.nav-link .ui-icon {
    width:18px;
    height:18px;
    flex-basis:18px;
    color:var(--muted);
}

.nav-link:hover {
    background:var(--hover);
    color:var(--text);
}

.nav-link.active {
    background:var(--primary-soft);
    color:var(--accent-text);
    border-color:var(--accent-border);
    font-weight:600;
}

.nav-link.active .ui-icon {
    color:var(--accent-text);
}

.sidebar-bottom {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:auto;
    padding:20px 6px 0;
    border-top:1px solid var(--border);
}

.sidebar-bottom>span:last-child {
    min-width:0;
}

.sidebar-bottom strong {
    display:block;
    font-size:12px;
    overflow-wrap:anywhere;
}

.sidebar-bottom small {
    color:var(--muted);
    font-size:11px;
}

.workspace-avatar {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 37px;
    width:37px;
    height:37px;
    background:var(--primary-soft);
    color:var(--accent-text);
    border-radius:10px;
    font-size:12px;
    font-weight:600;
}

.main-area {
    min-width:0;
    display:flex;
    flex-direction:column;
}

.topbar {
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 30px;
    background:var(--chrome);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(15px);
    min-height:95px;
}

.topbar-left {
    min-width:0;
}

.topbar .eyebrow {
    font-size:9px;
    margin-bottom:3px;
}

.topbar h2 {
    font-size:18px;
    font-weight:600;
}

.topbar p {
    font-size:12px;
    margin-top:3px;
}

.topbar-right {
    display:flex;
    align-items:center;
    gap:17px;
}

.user-pill {
    text-align:right;
    line-height:1.45;
}

.user-pill strong {
    display:block;
    font-size:12px;
}

.user-pill span {
    font-size:11px;
    color:var(--muted);
}

.mobile-topbar-row {
    display:none;
}

.content {
    width:100%;
    max-width:1640px;
    padding:30px;
    margin:0 auto;
    flex:1;
    min-width:0;
}

.app-footer {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:20px 30px;
    font-size:10px;
    color:var(--muted);
}

.app-footer>span:last-child {
    display:flex;
    gap:20px;
}

.app-footer a:hover {
    color:var(--text);
}

.mobile-nav summary {
    display:flex;
    align-items:center;
    gap:7px;
    list-style:none;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
}

.mobile-nav summary::-webkit-details-marker {
    display:none;
}

.mobile-nav-panel {
    position:absolute;
    top:60px;
    right:15px;
    z-index:50;
    width:min(330px,calc(100vw - 30px));
    max-height:calc(100dvh - 80px);
    overflow:auto;
    background:var(--panel);
    border:1px solid var(--border);
    padding:13px;
    border-radius:14px;
    box-shadow:var(--shadow-float);
}

.mobile-nav-panel form {
    border-top:1px solid var(--border);
    margin-top:15px;
    padding-top:10px;
}

/* Controls, notices and forms */
.btn-primary,.btn-secondary,.btn-danger,.btn-success,.privacy-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:10px 16px;
    border:1px solid transparent;
    border-radius:9px;
    line-height:1.4;
    font-size:13px;
    font-weight:550;
    text-align:center;
    transition:background .15s,border-color .15s;
}

.btn-primary {
    background:var(--primary);
    color:var(--on-primary);
    border-color:var(--primary);
}

.btn-primary:hover {
    background:var(--primary);
}

.btn-secondary,.privacy-toggle {
    background:var(--panel);
    border-color:var(--border);
    color:var(--text);
}

.btn-secondary:hover,.privacy-toggle:hover {
    background:var(--hover);
}

.btn-danger {
    background:var(--danger-bg);
    border-color:var(--danger-border);
    color:var(--danger);
}

.btn-danger:hover {
    background:var(--danger-bg);
}

.btn-success {
    background:var(--success-bg);
    border-color:var(--success-border);
    color:var(--success);
}

.btn-primary .ui-icon,.btn-secondary .ui-icon,.btn-danger .ui-icon {
    width:17px;
    height:17px;
    flex-basis:17px;
}

.icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:1px solid var(--border);
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    padding:0;
}

.icon-button:hover {
    background:var(--hover);
    color:var(--text);
}

.icon-button.danger:hover {
    background:var(--danger-bg);
    color:var(--danger);
}

.icon-button .ui-icon {
    width:17px;
    height:17px;
    flex-basis:17px;
}

.form-input:not([type=checkbox],[type=radio]),.form-control:not([type=checkbox],[type=radio]),input:not([type=hidden],[type=checkbox],[type=radio],[type=submit],[type=button]),select,textarea {
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:44px;
    border:1px solid var(--input-border);
    border-radius:8px;
    background:var(--panel);
    color:var(--text);
    padding:10px 12px;
    font-size:14px;
    line-height:1.5;
    box-shadow:none;
}

textarea {
    resize:vertical;
    min-height:105px;
}

input::placeholder,textarea::placeholder {
    color:var(--placeholder);
    opacity:1;
}

select {
    cursor:pointer;
}

select:disabled {
    opacity:.7;
    cursor:not-allowed;
}

input[type=checkbox],input[type=radio] {
    width:17px;
    height:17px;
    accent-color:var(--primary);
    vertical-align:middle;
}

/* Checkbox rows share one size and align to the first line of their label. */
.checkbox-label {
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.6;
    cursor:pointer;
}

.checkbox-label > input[type=checkbox] {
    appearance:auto;
    box-sizing:border-box;
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    max-width:18px;
    flex:0 0 18px;
    padding:0;
    font:inherit;
    margin:0;
    margin-block-start:max(0px, calc((1lh - 18px) / 2));
    box-shadow:none;
}

.checkbox-label > span {
    min-width:0;
    overflow-wrap:anywhere;
}

input[type=file] {
    font-size:12px;
    padding:9px;
}

input[type=file]::file-selector-button {
    background:var(--panel-soft);
    color:var(--text);
    border:0;
    border-radius:5px;
    padding:5px 8px;
    margin-right:10px;
}

input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true] {
    border-color:var(--danger-border);
    background:var(--danger-bg);
}

.field-group,.field {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.field-group label,.field label {
    font-size:12px;
    font-weight:550;
    color:var(--muted-strong);
}

.required-mark {
    margin-left:4px;
    color:var(--accent-text);
}

.field-help {
    font-size:11px;
    color:var(--muted);
    line-height:1.5;
}

.form-grid-2,.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.full-width {
    grid-column:1/-1;
}

.form-section+.form-section {
    border-top:1px solid var(--border);
    padding-top:24px;
    margin-top:25px;
}

.form-section>.section-heading {
    margin-bottom:20px;
}

.form-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--border);
}

.form-actions-sticky {
    position:sticky;
    bottom:0;
    background:var(--chrome);
    margin:24px -24px -24px;
    padding:16px 24px;
    border-radius:0 0 14px 14px;
    z-index:5;
}

.errorlist {
    margin:0;
    padding:0;
    list-style:none;
    font-size:12px;
    color:var(--danger);
}

.form-error-summary,.auth-error {
    display:flex;
    flex-direction:column;
    gap:4px;
    border:1px solid var(--danger-border);
    background:var(--danger-bg);
    border-radius:9px;
    padding:14px 16px;
    margin-bottom:20px;
    font-size:12px;
    color:var(--danger);
}

.form-error-summary:focus {
    outline:2px solid var(--danger);
    outline-offset:3px;
}

.message-stack {
    display:grid;
    gap:9px;
    margin-bottom:22px;
}

.message {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--info-border);
    background:var(--info-bg);
    border-radius:10px;
    padding:12px 15px;
    color:var(--info);
    font-size:12px;
}

.message>span {
    flex:1;
}

.message>.ui-icon {
    width:17px;
    flex-basis:17px;
}

.message>.icon-button {
    border:0;
    width:28px;
    height:28px;
    flex-basis:28px;
}

.message-success {
    color:var(--success);
    background:var(--success-bg);
    border-color:var(--success-border);
}

.message-error {
    color:var(--danger);
    background:var(--danger-bg);
    border-color:var(--danger-border);
}

.message-warning {
    color:var(--warning);
    background:var(--warning-bg);
    border-color:var(--warning-border);
}

.status-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:25px;
    padding:3px 8px;
    border-radius:5px;
    border:1px solid transparent;
    font-size:10px;
    line-height:1.5;
    font-weight:550;
    white-space:nowrap;
}

.status-success {
    background:var(--success-bg);
    border-color:var(--success-border);
    color:var(--success);
}

.status-warning {
    background:var(--warning-bg);
    border-color:var(--warning-border);
    color:var(--warning);
}

.status-muted {
    background:var(--panel-soft);
    border-color:var(--border);
    color:var(--text);
}

.confirm-dialog {
    width:min(430px,calc(100vw - 28px));
    max-height:calc(100dvh - 30px);
    overflow:auto;
    border:1px solid var(--border);
    border-radius:16px;
    padding:27px;
    color:var(--text);
    background:var(--panel);
    box-shadow:var(--shadow-float);
}

.confirm-dialog:not([open]) {
    display:none;
}

.confirm-dialog::backdrop {
    background:var(--backdrop);
    backdrop-filter:blur(5px);
}

.confirm-icon {
    display:inline-flex;
    padding:12px;
    border-radius:13px;
    background:var(--warning-bg);
    color:var(--warning);
    margin-bottom:18px;
}

.confirm-dialog h2 {
    font-size:22px;
}

.confirm-dialog p {
    font-size:13px;
    margin-top:12px;
    overflow-wrap:anywhere;
}

body:has(dialog:modal) {
    overflow:hidden;
}

/* Reusable page surfaces */
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin:3px 0 25px;
}

.page-heading p {
    font-size:13px;
    margin-top:7px;
}

.page-heading h1 {
    font-size:28px;
}

.page-heading-actions,.toolbar,.table-actions,.inline-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.page-card,.section {
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--panel);
    padding:24px;
    min-width:0;
}

.section {
    margin-top:22px;
}

.page-card+.page-card {
    margin-top:22px;
}

.document-layout>.page-card+.page-card,.revenue-grid>.page-card+.page-card,.share-grid>.page-card+.page-card {
    margin-top:0;
}

.section-heading,.page-header-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.section-heading p,.page-header-row p {
    font-size:12px;
    margin-top:5px;
}

.section-heading:last-child {
    margin-bottom:0;
}

.empty-state {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
    padding:50px 20px;
    min-height:200px;
    color:var(--muted);
}

.empty-state>.ui-icon {
    width:32px;
    height:32px;
    margin-bottom:5px;
    color:var(--muted);
}

.empty-state strong {
    color:var(--text);
    font-size:16px;
}

.empty-state p {
    max-width:350px;
    font-size:12px;
}

.empty-state .btn-primary,.empty-state .btn-secondary {
    margin-top:8px;
}

.empty-state.compact {
    min-height:130px;
    padding:24px 12px;
}

.form-card {
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

.back-link {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--accent-text);
    font-size:12px;
    margin-bottom:20px;
}

.create-disclosure {
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel);
    margin-bottom:22px;
}

.create-disclosure summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:17px 20px;
    list-style:none;
    cursor:pointer;
    font-size:14px;
    font-weight:550;
}

.create-disclosure summary::-webkit-details-marker {
    display:none;
}

.create-disclosure summary>span {
    display:flex;
    align-items:center;
    gap:10px;
}

.create-disclosure summary small {
    color:var(--muted);
    font-weight:400;
}

.create-disclosure[open] summary {
    border-bottom:1px solid var(--border);
}

.create-disclosure[open] summary>.ui-icon {
    transform:rotate(45deg);
}

.create-disclosure>form {
    padding:23px;
}

.create-disclosure .form-grid-2 {
    max-width:960px;
}

.create-disclosure .form-actions {
    justify-content:flex-start;
}

.create-disclosure:target {
    border-color:var(--border);
}

.list-card {
    padding:0;
    overflow:hidden;
}

.list-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 21px;
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
}

.search-form {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    max-width:430px;
    min-width:180px;
}

.search-box {
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--panel);
    border:1px solid var(--input-border);
    border-radius:8px;
    padding-left:11px;
    flex:1;
    min-width:0;
}

.search-box>.ui-icon {
    width:16px;
    height:16px;
    flex-basis:16px;
    color:var(--muted);
}

.search-box input {
    border:0;
    background:transparent;
    min-height:39px;
    font-size:12px;
    padding:9px 8px;
    outline-offset:0;
}

.search-box button {
    border:0;
    flex:0 0 34px;
    height:34px;
    margin-right:3px;
}

.search-form .btn-secondary {
    min-height:39px;
    font-size:12px;
}

.filter-tabs {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    padding:4px;
    border-radius:9px;
    background:var(--panel-soft);
    border:1px solid var(--border);
}

.filter-tabs a {
    padding:7px 12px;
    border-radius:6px;
    font-size:12px;
    color:var(--muted);
}

.filter-tabs a[aria-current] {
    background:var(--panel-soft);
    color:var(--text);
}

.filter-tabs a:hover {
    color:var(--text);
}

.result-count {
    font-size:11px;
    color:var(--muted);
}

.table-wrap {
    width:100%;
    overflow-x:auto;
}

.data-table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    table-layout:auto;
}

.data-table th {
    background:var(--panel-soft);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-weight:600;
    color:var(--muted);
    padding:14px 20px;
    white-space:nowrap;
}

.data-table td {
    padding:17px 20px;
    border-top:1px solid var(--border);
    font-size:12px;
    vertical-align:middle;
    overflow-wrap:anywhere;
}

.data-table tbody tr:hover {
    background:var(--hover);
}

.data-table td small {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:3px;
}

.table-strong {
    font-weight:600;
    color:var(--text);
}

.table-strong:hover {
    color:var(--text);
}

.numeric {
    font-variant-numeric:tabular-nums;
    text-align:right;
    white-space:nowrap;
}

.table-actions {
    gap:5px;
    justify-content:flex-end;
}

.table-actions .btn-secondary,.table-actions .btn-primary,.table-actions .btn-danger,.table-actions .btn-success {
    min-height:33px;
    padding:7px 10px;
    font-size:11px;
}

.table-actions .icon-button {
    height:32px;
    width:32px;
    flex-basis:32px;
}

.table-menu {
    position:relative;
}

.table-menu summary {
    list-style:none;
    cursor:pointer;
}

.table-menu-panel {
    position:absolute;
    right:0;
    top:38px;
    padding:7px;
    background:var(--panel);
    border:1px solid var(--border-strong);
    border-radius:9px;
    min-width:165px;
    z-index:10;
    box-shadow:var(--shadow);
}

.table-menu-panel a,.table-menu-panel button {
    display:flex;
    width:100%;
    text-align:left;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--text);
    font-size:12px;
    padding:9px;
}

.table-menu-panel a:hover,.table-menu-panel button:hover {
    background:var(--hover);
}

.list-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:15px 20px;
    border-top:1px solid var(--border);
    font-size:11px;
    color:var(--muted);
}

.pagination {
    display:flex;
    align-items:center;
    gap:12px;
}

.license-plate {
    display:inline-flex;
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--text);
    line-height:1.4;
    padding:3px 7px;
    border-radius:5px;
    font-size:11px;
    letter-spacing:.025em;
    white-space:nowrap;
}

.customer-cell {
    display:flex;
    align-items:center;
    gap:11px;
}

.customer-cell>div {
    min-width:0;
}

/* Dashboard and profiles */
.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
    margin-bottom:24px;
}

.metric-card {
    padding:22px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--panel);
    min-width:0;
}

.metric-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:12px;
}

.metric-top>.ui-icon {
    color:var(--accent-text);
    width:19px;
    height:19px;
}

.metric-value {
    font-size:29px;
    line-height:1.2;
    letter-spacing:-.035em;
    margin-top:14px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
}

.metric-help {
    font-size:11px;
    color:var(--muted);
    margin-top:7px;
}

.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
    gap:22px;
    align-items:start;
}

.dashboard-column {
    display:grid;
    gap:22px;
    min-width:0;
}

.dashboard-column>.page-card+.page-card {
    margin:0;
}

.dashboard-day-item {
    display:flex;
    gap:15px;
    align-items:center;
    padding:15px 0;
    border-top:1px solid var(--border);
}

.dashboard-day-item>time {
    font-size:15px;
    color:var(--accent-text);
    font-variant-numeric:tabular-nums;
}

.dashboard-day-item>div {
    flex:1;
    min-width:0;
}

.dashboard-day-item strong {
    font-size:12px;
    display:block;
    overflow-wrap:anywhere;
}

.dashboard-day-item small {
    font-size:11px;
    color:var(--muted);
}

.dashboard-day-item>.ui-icon {
    width:15px;
    color:var(--muted);
}

.note-textarea {
    min-height:145px;
    font-size:13px;
}

.quick-actions {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:18px;
}

.privacy-card {
    padding:30px;
    border:1px dashed var(--border);
    border-radius:14px;
    background:var(--panel);
    display:flex;
    gap:20px;
    margin-top:24px;
}

.privacy-card>.ui-icon {
    width:30px;
    height:30px;
    flex-basis:30px;
    color:var(--accent-text);
}

.privacy-card p {
    max-width:620px;
    font-size:13px;
    margin-top:10px;
}

.privacy-card .btn-secondary {
    margin-top:20px;
}

.profile-grid {
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:22px;
}

.profile-contact {
    display:grid;
    gap:19px;
}

.profile-contact dt {
    font-size:10px;
    color:var(--muted);
    margin-bottom:5px;
}

.profile-contact dd {
    margin:0;
    font-size:13px;
    overflow-wrap:anywhere;
}

.profile-contact a {
    color:var(--accent-text);
}

.profile-nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.profile-nav a {
    font-size:12px;
    background:var(--panel-soft);
    border:1px solid var(--border);
    padding:7px 12px;
    border-radius:7px;
}

.cards-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px;
}

.vehicle-card {
    padding:18px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel-soft);
}

.vehicle-card h3 {
    font-size:14px;
    margin:12px 0 7px;
}

.vehicle-card .inline-actions {
    margin-top:15px;
}

.settings-layout {
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:25px;
}

.settings-guide h3 {
    font-size:15px;
}

.settings-guide p {
    font-size:12px;
    margin-top:9px;
}

.settings-guide>.ui-icon {
    color:var(--accent-text);
    margin-bottom:13px;
}

.settings-section+.settings-section {
    margin-top:24px;
}

/* Documents and calculations */
.document-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:22px;
    align-items:start;
}

.document-summary {
    position:sticky;
    top:115px;
}

.document-summary h3 {
    margin-bottom:20px;
}

.totals {
    display:grid;
    gap:12px;
    font-size:13px;
}

.totals>div {
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.totals dt {
    color:var(--muted);
}

.totals dd {
    margin:0;
    font-variant-numeric:tabular-nums;
    font-weight:550;
}

.totals .grand-total {
    border-top:1px solid var(--border);
    padding-top:15px;
    margin-top:3px;
    font-size:19px;
}

.totals .grand-total dt {
    color:var(--accent-text);
    font-weight:600;
}

.document-summary p {
    font-size:11px;
    line-height:1.7;
    margin-top:20px;
}

.position-list {
    display:grid;
    gap:15px;
}

.position-card {
    padding:18px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--panel-soft);
    min-width:0;
}

.position-card-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:17px;
}

.position-number {
    font-size:11px;
    color:var(--muted-strong);
    font-weight:550;
}

.position-grid {
    display:grid;
    grid-template-columns:1fr .85fr 1.35fr 1fr;
    gap:13px;
}

.position-description {
    grid-column:1/-1;
}

.position-line-total {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:11px;
    border-top:1px solid var(--border);
    padding-top:12px;
    margin-top:15px;
    color:var(--muted);
}

.position-line-total strong {
    color:var(--text);
}

.document-meta-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:25px;
}

.document-meta-grid p {
    font-size:12px;
    line-height:1.8;
}

.document-meta-grid strong {
    font-size:14px;
    display:block;
    margin-bottom:7px;
}

.document-meta-grid .eyebrow {
    margin-bottom:12px;
}

.document-detail-main {
    display:grid;
    gap:22px;
}

.document-detail-main .page-card+.page-card {
    margin:0;
}

.preserve-lines {
    white-space:pre-line;
    overflow-wrap:anywhere;
}

.document-badge {
    padding:7px 11px;
    border:1px solid var(--accent-border);
    background:var(--primary-soft);
    border-radius:7px;
    color:var(--accent-text);
    font-size:12px;
    white-space:nowrap;
}

.revenue-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:22px;
}

.revenue-grid>.page-card+.page-card {
    margin:0;
}

.revenue-bars {
    display:flex;
    align-items:flex-end;
    gap:10px;
    min-height:220px;
    padding-top:30px;
}

.revenue-bar-group {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    text-align:center;
    height:215px;
    gap:8px;
    position:relative;
}

.revenue-bar {
    display:block;
    background:var(--chart);
    border-radius:5px 5px 0 0;
    min-height:3px;
    position:relative;
}

.revenue-bar-group:hover .revenue-bar {
    background:var(--chart-strong);
}

.revenue-bar-label {
    font-size:10px;
    color:var(--muted);
}

.revenue-bar-value {
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:5px;
    padding:4px 7px;
    color:var(--text);
    font-size:10px;
    display:none;
    z-index:2;
}

.revenue-bar-group:focus-within .revenue-bar-value,.revenue-bar-group:hover .revenue-bar-value {
    display:block;
}

.revenue-bar:focus-visible {
    outline:2px solid var(--accent-text);
    outline-offset:3px;
}

.revenue-values {
    margin-top:18px;
}

.revenue-values summary {
    font-size:12px;
    color:var(--accent-text);
    cursor:pointer;
}

.revenue-values .data-table th,.revenue-values .data-table td {
    padding:9px 12px;
}

.share-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);
    gap:22px;
}

.qr-frame {
    display:grid;
    place-items:center;
    /* Keep the scan surface white in both themes. */
    background:#fff;
    width:min(270px,100%);
    aspect-ratio:1;
    padding:18px;
    margin:22px auto;
    border-radius:12px;
}

.qr-frame svg {
    width:100%;
    height:100%;
}

.copy-row {
    display:flex;
    gap:9px;
    margin-top:7px;
}

.copy-row input {
    font-size:12px;
}

.share-hint {
    font-size:12px;
}

.share-info-list {
    display:grid;
    gap:14px;
    margin-top:20px;
}

.share-info-list>div {
    display:flex;
    justify-content:space-between;
    gap:15px;
    border-bottom:1px solid var(--border);
    padding-bottom:14px;
    font-size:12px;
}

.share-info-list span {
    color:var(--muted);
}

.share-security-note {
    border:1px solid var(--border);
    border-radius:10px;
    padding:15px;
    margin-top:22px;
}

.share-security-note p {
    font-size:12px;
    margin-top:7px;
}

.share-disabled-card {
    display:flex;
    align-items:center;
    gap:20px;
}

.share-disabled-card>div {
    flex:1;
}

.share-disabled-card p {
    font-size:13px;
    margin-top:8px;
}

.share-disabled-card>.ui-icon {
    width:32px;
    height:32px;
    flex-basis:32px;
}

/* Public pages */
.public-main>.message-stack {
    max-width:800px;
    margin:20px auto;
    padding:0 20px;
}

.landing {
    max-width:1340px;
    margin:auto;
    padding:0 40px;
}

.public-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:27px 0;
}

.public-header nav {
    display:flex;
    align-items:center;
    gap:28px;
}

.public-nav-link {
    font-size:12px;
    color:var(--muted);
}

.public-nav-link:hover {
    color:var(--text);
}

.public-header .brand strong {
    font-size:17px;
}

.landing-hero {
    display:grid;
    grid-template-columns:1fr 1.08fr;
    align-items:center;
    gap:55px;
    padding:85px 0 105px;
}

.landing-kicker {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:10px;
    letter-spacing:.12em;
    color:var(--muted);
    font-weight:600;
    margin-bottom:22px;
}

.landing-kicker>span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent-text);
    box-shadow:var(--shadow);
}

.landing-copy h1 {
    font-size:clamp(40px,4.6vw,65px);
    line-height:1.05;
    letter-spacing:-.055em;
    font-weight:650;
}

.landing-copy h1 em {
    color:var(--accent-text);
    font-style:normal;
}

.landing-copy>p {
    font-size:16px;
    line-height:1.85;
    max-width:460px;
    margin:25px 0 29px;
    color:var(--muted);
}

.landing-actions {
    display:flex;
    flex-wrap:wrap;
    gap:11px;
}

.landing-actions .btn-primary,.landing-actions .btn-secondary {
    min-height:47px;
    font-size:13px;
}

.landing-assurances {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:21px;
    font-size:10px;
    color:var(--muted);
}

.landing-assurances>span {
    display:flex;
    gap:6px;
    align-items:center;
}

.landing-assurances .ui-icon {
    color:var(--muted);
    width:14px;
    height:14px;
    flex-basis:14px;
}

.product-preview {
    position:relative;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:15px;
    box-shadow:var(--shadow-float);
    min-width:0;
    transform:none;
}

.preview-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    height:42px;
    border-bottom:1px solid var(--border);
    padding:0 16px;
    font-size:10px;
    color:var(--muted);
}

.preview-dots {
    display:flex;
    gap:5px;
}

.preview-dots i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--border-strong);
}

.preview-example {
    font-size:9px;
    padding:2px 7px;
    border:1px solid var(--border);
    border-radius:4px;
}

.preview-layout {
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
}

.preview-sidebar {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    border-right:1px solid var(--border);
    padding:20px 9px;
}

.preview-sidebar>.ui-icon {
    width:17px;
    height:17px;
    color:var(--muted);
}

.preview-active {
    display:flex;
    background:var(--primary-soft);
    padding:9px;
    border-radius:8px;
    color:var(--accent-text);
}

.preview-active .ui-icon {
    width:16px;
    height:16px;
}

.preview-content {
    padding:24px;
    min-width:0;
}

.preview-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}

.preview-heading>div>span {
    font-size:8px;
    letter-spacing:.1em;
    color:var(--text);
}

.preview-heading h2 {
    font-size:21px;
    margin-top:4px;
}

.preview-date {
    font-size:9px;
    color:var(--muted);
}

.preview-metrics {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:22px;
}

.preview-metrics>div {
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--panel);
    padding:14px;
}

.preview-metrics span {
    font-size:9px;
    color:var(--muted);
}

.preview-metrics strong {
    display:block;
    font-size:25px;
    font-weight:550;
    line-height:1.4;
}

.preview-metrics small {
    font-size:9px;
    color:var(--muted);
    font-weight:400;
}

.preview-list-heading {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:10px;
    color:var(--muted-strong);
    margin-bottom:7px;
}

.preview-list-heading>span {
    color:var(--muted);
    font-size:9px;
}

.preview-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 0;
    border-bottom:1px solid var(--border);
}

.preview-row>time {
    font-size:12px;
    color:var(--muted);
    font-weight:550;
}

.preview-row>i {
    height:6px;
    width:6px;
    border-radius:50%;
    background:var(--accent-text);
    flex:0 0 6px;
}

.preview-row>div {
    min-width:0;
    flex:1;
}

.preview-row strong {
    font-size:10px;
    display:block;
}

.preview-row>div>span {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:4px;
}

.preview-status {
    font-size:7px;
    padding:3px 5px;
    background:var(--success-bg);
    color:var(--success);
    border:1px solid var(--success-border);
    border-radius:4px;
    white-space:nowrap;
}

.preview-bottom {
    font-size:9px;
    color:var(--muted);
    margin-top:17px;
    display:flex;
    gap:7px;
    align-items:center;
}

.preview-bottom .ui-icon {
    width:13px;
    height:13px;
    flex-basis:13px;
}

.preview-float {
    position:absolute;
    right:22px;
    bottom:-25px;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:15px 18px;
    box-shadow:var(--shadow-float);
}

.preview-float>span {
    display:grid;
    gap:4px;
}

.preview-float strong {
    font-size:10px;
}

.preview-float small {
    font-size:9px;
    color:var(--muted);
}

.preview-float>.ui-icon {
    color:var(--muted);
}

.preview-float>.ui-icon:last-child {
    color:var(--muted);
    width:15px;
    height:15px;
}

.landing-strip {
    display:grid;
    grid-template-columns:1.7fr repeat(5,1fr);
    gap:20px;
    align-items:center;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:29px 0;
    color:var(--text);
}

.landing-strip>span {
    display:flex;
    gap:9px;
    align-items:center;
    font-size:12px;
}

.landing-strip>span:first-child {
    display:block;
    font-size:11px;
    color:var(--muted);
}

.landing-strip strong {
    color:var(--text);
    font-size:12px;
    font-weight:500;
}

.landing-strip .ui-icon {
    width:17px;
    height:17px;
    color:var(--muted);
}

.landing-section {
    padding:90px 0;
}

.landing-section-heading {
    max-width:650px;
    margin:0 auto 40px;
    text-align:center;
}

.landing-section-heading h2 {
    font-size:35px;
    letter-spacing:-.04em;
    line-height:1.2;
    font-weight:600;
    margin:10px 0 17px;
}

.landing-section-heading p {
    font-size:14px;
    line-height:1.8;
    max-width:510px;
    margin:auto;
}

.feature-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:20px;
}

.feature-card {
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
    padding:30px;
    overflow:hidden;
}

.feature-card h3 {
    font-size:20px;
    margin:20px 0 11px;
}

.feature-card p {
    font-size:13px;
    line-height:1.85;
    max-width:430px;
}

.feature-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:43px;
    height:43px;
    background:var(--primary-soft);
    border:1px solid var(--accent-border);
    border-radius:12px;
    color:var(--accent-text);
}

.feature-icon.violet {
    background:var(--primary-soft);
    border-color:var(--accent-border);
    color:var(--accent-text);
}

.feature-icon.green {
    background:var(--primary-soft);
    border-color:var(--accent-border);
    color:var(--accent-text);
}

.feature-customer {
    display:flex;
    align-items:center;
    gap:12px;
    padding:17px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel-soft);
    margin-top:30px;
}

.feature-customer>div {
    flex:1;
    min-width:0;
}

.feature-customer strong {
    display:block;
    font-size:12px;
}

.feature-customer small {
    color:var(--muted);
    font-size:10px;
}

.feature-week {
    display:flex;
    gap:9px;
    margin-top:25px;
    max-width:340px;
}

.feature-week>span {
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:8px;
    color:var(--muted);
    padding:12px 5px;
    background:var(--panel-soft);
    border:1px solid var(--border);
    border-radius:9px;
}

.feature-week b {
    font-size:18px;
    color:var(--muted-strong);
    font-weight:500;
}

.feature-week>.selected {
    background:var(--panel);
    border-color:var(--input-border);
    color:var(--text);
}

.feature-week i {
    width:4px;
    height:4px;
    background:var(--accent-text);
    border-radius:50%;
}

.feature-document {
    max-width:360px;
    display:grid;
    gap:9px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:9px;
    margin-top:25px;
    background:var(--panel-soft);
}

.feature-document>span,.feature-document>strong {
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:12px;
}

.feature-document>span {
    color:var(--muted);
}

.feature-document>strong {
    border-top:1px solid var(--border);
    padding-top:10px;
    margin-top:4px;
    color:var(--muted-strong);
}

.feature-chart {
    display:flex;
    align-items:flex-end;
    gap:13px;
    height:100px;
    border-bottom:1px solid var(--border);
    margin:24px 0 5px;
}

.feature-chart i {
    flex:1;
    border-radius:4px 4px 0 0;
    background:var(--chart);
    height:40%;
}

.feature-chart i:nth-child(2n) {
    height:60%;
}

.feature-chart i:nth-child(3n) {
    height:75%;
    background:var(--chart);
}

.feature-chart i:last-child {
    height:95%;
    background:var(--chart-strong);
}

.feature-card>small {
    font-size:9px;
}

.landing-workflow {
    border-top:1px solid var(--border);
}

.workflow-steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:40px;
}

.workflow-steps article>span {
    display:inline-flex;
    font-size:13px;
    color:var(--accent-text);
    border:1px solid var(--accent-border);
    background:var(--primary-soft);
    width:39px;
    height:39px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin-bottom:22px;
}

.workflow-steps h3 {
    font-size:17px;
    margin-bottom:12px;
}

.workflow-steps p {
    font-size:13px;
    line-height:1.8;
}

.landing-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border:1px solid var(--border);
    background:var(--primary-soft);
    border-radius:18px;
    padding:48px 52px;
    margin:0 0 65px;
}

.landing-cta h2 {
    font-size:37px;
    line-height:1.15;
    margin:10px 0 14px;
    font-weight:550;
}

.landing-cta p {
    font-size:13px;
}

.landing-cta>.btn-primary {
    min-height:47px;
}

.public-footer {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--border);
    padding:33px 0;
}

.public-footer p {
    font-size:11px;
    margin-top:12px;
}

.public-footer nav {
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    color:var(--muted);
    font-size:11px;
}

.public-footer>small {
    grid-column:1/-1;
    font-size:10px;
    color:var(--muted);
}

.login-page {
    width:min(1050px,100%);
    padding:40px;
    margin:auto;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
}

.login-brand {
    margin-bottom:45px;
}

.login-layout {
    display:grid;
    grid-template-columns:1fr 420px;
    align-items:center;
    gap:70px;
    flex:1;
    padding:25px 0 70px;
}

.login-intro h1 {
    font-size:42px;
    line-height:1.12;
    letter-spacing:-.04em;
    margin:14px 0 20px;
}

.login-intro>p {
    font-size:14px;
    line-height:1.85;
    max-width:370px;
    margin-bottom:30px;
}

.login-feature {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
    font-size:12px;
    color:var(--text);
}

.login-feature .ui-icon {
    color:var(--muted);
    width:17px;
    height:17px;
}

.auth-card {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:17px;
    padding:33px;
    box-shadow:var(--shadow-float);
}

.auth-card h2 {
    font-size:25px;
    margin:20px 0 8px;
}

.auth-card>.muted {
    font-size:12px;
    margin-bottom:25px;
}

.auth-form {
    display:grid;
    gap:19px;
}

.auth-form>.btn-primary {
    margin-top:5px;
    min-height:45px;
}

.password-field {
    position:relative;
}

.password-field input {
    padding-right:45px;
}

.password-field button {
    position:absolute;
    right:6px;
    top:5px;
    border:0;
}

.login-help {
    font-size:11px;
    line-height:1.7;
    padding-top:21px;
    margin-top:22px;
    border-top:1px solid var(--border);
}

.login-footer {
    display:flex;
    gap:22px;
    justify-content:center;
    font-size:11px;
    color:var(--muted);
    padding:20px 0;
}

.legal-content {
    max-width:820px;
    margin:40px auto;
    padding:34px;
}

.legal-content h1 {
    margin-bottom:25px;
}

.legal-content h2 {
    font-size:19px;
    margin:30px 0 12px;
}

.legal-content p {
    font-size:14px;
    line-height:1.9;
}

.legal-content .message {
    margin-bottom:30px;
}

.error-page {
    max-width:620px;
    margin:70px auto;
    text-align:center;
    padding:40px 25px;
}

.error-page .error-code {
    font-size:70px;
    font-weight:650;
    letter-spacing:-.06em;
    color:var(--danger);
}

.error-page h1 {
    font-size:27px;
    margin:12px 0;
}

.error-page p {
    max-width:430px;
    margin:0 auto 25px;
    font-size:14px;
}

/* Responsive layouts */
@media(min-width:1500px) {
    .content {
        padding:35px 40px;
    }
    .landing-hero {
        gap:65px;
    }
}

@media(max-width:1250px) {
    .document-layout {
        grid-template-columns:minmax(0,1fr) 230px;
    }
    .content {
        padding:24px;
    }
    .data-table td,.data-table th {
        padding-left:15px;
        padding-right:15px;
    }
    .metric-card {
        padding:18px;
    }
    .metric-value {
        font-size:25px;
    }
    .landing {
        padding:0 30px;
    }
    .landing-hero {
        gap:30px;
    }
    .landing-copy h1 {
        font-size:49px;
    }
    .preview-content {
        padding:18px;
    }
    .preview-status {
        display:none;
    }
    .document-meta-grid {
        grid-template-columns:1fr 1fr;
    }
    .settings-layout {
        grid-template-columns:200px minmax(0,1fr);
    }
}

@media(max-width:1100px) {
    .sidebar {
        display:none;
    }
    .app-shell {
        grid-template-columns:1fr;
    }
    .topbar {
        flex-wrap:wrap;
        padding:13px 24px;
        gap:12px;
        min-height:0;
    }
    .mobile-topbar-row {
        display:flex;
        align-items:center;
        gap:10px;
        flex:1;
    }
    .mobile-nav {
        margin-left:auto;
    }
    .mobile-brand-title {
        font-size:13px;
        font-weight:550;
    }
    .topbar-left {
        order:3;
        width:100%;
        padding-top:12px;
        border-top:1px solid var(--border);
    }
    .topbar-left .eyebrow {
        display:none;
    }
    .topbar-left h2 {
        font-size:17px;
    }
    .topbar-right .logout-btn {
        display:none;
    }
    .topbar-right {
        margin-left:15px;
    }
    .topbar p {
        font-size:11px;
    }
    .topbar-left h2,.topbar-left p {
        display:inline;
    }
    .topbar-left p {
        margin-left:12px;
    }
    .dashboard-grid {
        grid-template-columns:minmax(0,1.45fr) minmax(270px,1fr);
    }
    .landing-copy h1 {
        font-size:43px;
    }
    .landing-copy>p {
        font-size:14px;
    }
    .landing-actions .btn-primary,.landing-actions .btn-secondary {
        font-size:11px;
        padding:10px 12px;
    }
    .landing-strip {
        grid-template-columns:repeat(3,1fr);
        gap:23px;
    }
    .landing-strip>span:first-child {
        grid-column:1/-1;
    }
    .login-layout {
        gap:40px;
        grid-template-columns:1fr 390px;
    }
}

@media(max-width:900px) {
    .metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .dashboard-grid {
        grid-template-columns:1fr;
    }
    .dashboard-column {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .dashboard-column:first-child {
        grid-template-columns:1fr;
    }
    .document-layout {
        grid-template-columns:1fr;
    }
    .document-summary {
        position:static;
        order:2;
    }
    .document-summary .totals {
        max-width:460px;
        margin-left:auto;
    }
    .document-summary p {
        max-width:460px;
        margin-left:auto;
    }
    .settings-layout {
        grid-template-columns:1fr;
    }
    .settings-guide {
        max-width:600px;
    }
    .profile-grid {
        grid-template-columns:1fr;
    }
    .profile-contact {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .landing-hero {
        grid-template-columns:1fr;
        padding:55px 0 85px;
        gap:55px;
    }
    .landing-copy {
        max-width:620px;
        margin:auto;
        text-align:center;
    }
    .landing-kicker {
        justify-content:center;
    }
    .landing-copy h1 {
        font-size:58px;
    }
    .landing-copy>p {
        max-width:490px;
        margin-left:auto;
        margin-right:auto;
    }
    .landing-actions,.landing-assurances {
        justify-content:center;
    }
    .product-preview {
        width:100%;
        max-width:610px;
        margin:auto;
        transform:none;
    }
    .landing-actions .btn-primary,.landing-actions .btn-secondary {
        font-size:13px;
    }
    .preview-content {
        padding:25px;
    }
    .preview-status {
        display:inline-flex;
    }
    .landing-section {
        padding:65px 0;
    }
    .public-header nav {
        gap:18px;
    }
    .login-intro h1 {
        font-size:35px;
    }
    .login-layout {
        grid-template-columns:1fr 365px;
        gap:25px;
    }
    .login-page {
        padding:30px;
    }
    .auth-card {
        padding:26px;
    }
    .revenue-grid {
        gap:17px;
    }
}

@media(max-width:680px) {
    html {
        scroll-padding-top:100px;
    }
    .content {
        padding:20px 15px;
    }
    .topbar {
        padding:11px 15px;
        gap:9px;
    }
    .topbar-right {
        display:none;
    }
    .topbar-left {
        padding-top:8px;
    }
    .topbar-left h2 {
        font-size:14px;
    }
    .topbar-left p {
        display:none;
    }
    .mobile-nav-panel {
        top:53px;
    }
    .page-heading {
        flex-wrap:wrap;
        gap:17px;
        margin-bottom:20px;
    }
    .page-heading h1 {
        font-size:25px;
    }
    .page-heading p {
        font-size:12px;
    }
    .page-heading-actions {
        width:100%;
    }
    .page-heading-actions>.btn-primary {
        flex:1;
    }
    .page-card,.section {
        padding:19px;
        border-radius:12px;
    }
    .list-card {
        padding:0;
    }
    .list-toolbar {
        padding:16px;
        gap:12px;
    }
    .list-toolbar>.search-form {
        max-width:none;
        flex-basis:100%;
    }
    .filter-tabs {
        width:100%;
    }
    .filter-tabs a {
        flex:1;
        text-align:center;
    }
    .search-form {
        min-width:0;
    }
    .form-grid-2,.form-grid {
        gap:16px;
        grid-template-columns:1fr;
    }
    .full-width {
        grid-column:auto;
    }
    .form-input:not([type=checkbox],[type=radio]),.form-control:not([type=checkbox],[type=radio]),input:not([type=hidden],[type=checkbox],[type=radio]),select,textarea {
        font-size:16px;
    }
    .create-disclosure summary {
        padding:16px;
    }
    .create-disclosure summary small {
        display:none;
    }
    .create-disclosure>form {
        padding:18px 16px;
    }
    .form-actions {
        justify-content:stretch;
    }
    .form-actions>.btn-primary {
        flex:1;
    }
    .form-actions-sticky {
        margin:22px -19px -19px;
        padding:14px 19px;
    }
    .responsive-table thead {
        display:none;
    }
    .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td {
        display:block;
        width:100%;
    }
    .responsive-table tr {
        padding:17px 17px 13px;
        border-bottom:1px solid var(--border);
    }
    .responsive-table tr:last-child {
        border-bottom:0;
    }
    .responsive-table td {
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:20px;
        border:0;
        padding:6px 0;
        font-size:12px;
        text-align:right;
    }
    .responsive-table td::before {
        content:attr(data-label);
        font-size:11px;
        font-weight:400;
        color:var(--muted);
        text-align:left;
        flex:0 0 95px;
    }
    .responsive-table td[data-label='Kunde'],.responsive-table td[data-label='Fahrzeug'] {
        align-items:flex-start;
    }
    .responsive-table td>.customer-cell {
        justify-content:flex-end;
    }
    .responsive-table td .customer-cell>div {
        text-align:right;
    }
    .responsive-table td .workspace-avatar {
        display:none;
    }
    .responsive-table td[data-label='Aktionen'] {
        border-top:1px solid var(--border);
        padding-top:12px;
        margin-top:9px;
    }
    .responsive-table td[data-label='Aktionen']::before {
        display:none;
    }
    .responsive-table td[colspan] {
        display:block;
        text-align:center;
    }
    .responsive-table td[colspan]::before {
        display:none;
    }
    .responsive-table td .table-actions {
        width:100%;
    }
    .responsive-table td .empty-state {
        padding:20px 5px;
    }
    .table-actions .btn-secondary,.table-actions .btn-primary,.table-actions .btn-danger,.table-actions .btn-success {
        min-height:36px;
    }
    .numeric {
        white-space:normal;
    }
    .list-footer {
        padding:14px 16px;
    }
    .pagination {
        gap:7px;
    }
    .metric-grid {
        gap:11px;
        margin-bottom:19px;
    }
    .metric-card {
        padding:16px 13px;
    }
    .metric-value {
        font-size:24px;
        margin-top:11px;
    }
    .metric-top {
        font-size:11px;
        align-items:flex-start;
    }
    .metric-help {
        font-size:10px;
    }
    .metric-top>.ui-icon {
        width:16px;
        height:16px;
        flex-basis:16px;
    }
    .dashboard-column {
        grid-template-columns:1fr;
    }
    .dashboard-grid {
        gap:18px;
    }
    .dashboard-column {
        gap:18px;
    }
    .privacy-card {
        padding:22px 18px;
        gap:14px;
    }
    .privacy-card>.ui-icon {
        width:24px;
        height:24px;
        flex-basis:24px;
    }
    .privacy-card h3 {
        font-size:17px;
    }
    .profile-contact {
        grid-template-columns:1fr;
    }
    .document-meta-grid {
        grid-template-columns:1fr;
        gap:20px;
    }
    .position-card {
        padding:15px;
    }
    .position-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }
    .position-description {
        grid-column:1/-1;
    }
    .position-grid label {
        font-size:11px;
    }
    .position-grid input {
        padding-left:9px;
        padding-right:9px;
    }
    .revenue-grid,.share-grid {
        grid-template-columns:1fr;
    }
    .revenue-grid {
        gap:17px;
    }
    .revenue-bars {
        gap:6px;
    }
    .revenue-bar-label {
        font-size:9px;
    }
    .copy-row {
        flex-wrap:wrap;
    }
    .copy-row input {
        flex-basis:100%;
        font-size:12px;
    }
    .copy-row button {
        width:100%;
    }
    .share-disabled-card {
        align-items:flex-start;
        flex-wrap:wrap;
    }
    .share-disabled-card>form {
        flex-basis:100%;
    }
    .share-disabled-card>form button {
        width:100%;
    }
    .share-disabled-card>div {
        min-width:200px;
    }
    .app-footer {
        padding:17px 15px;
    }
    .landing {
        padding:0 20px;
    }
    .public-header {
        padding:20px 0;
    }
    .public-header nav {
        gap:10px;
    }
    .public-header .brand strong {
        font-size:14px;
    }
    .public-nav-link {
        display:none;
    }
    .public-header .btn-primary {
        font-size:11px;
        padding:9px 12px;
        min-height:38px;
    }
    .public-header .btn-primary .ui-icon {
        display:none;
    }
    .public-header .brand-mark {
        width:35px;
        height:35px;
        flex-basis:35px;
        font-size:10px;
    }
    .landing-hero {
        padding-top:40px;
        gap:45px;
        padding-bottom:65px;
    }
    .landing-kicker {
        font-size:8px;
        letter-spacing:.08em;
        margin-bottom:20px;
    }
    .landing-copy h1 {
        font-size:45px;
    }
    .landing-copy>p {
        font-size:14px;
        line-height:1.8;
        margin-top:21px;
    }
    .landing-actions {
        gap:9px;
    }
    .landing-actions>.btn-primary {
        width:100%;
    }
    .landing-actions>.btn-secondary {
        width:100%;
        background:transparent;
    }
    .landing-assurances {
        font-size:9px;
        gap:12px;
    }
    .product-preview {
        border-radius:11px;
    }
    .preview-topbar {
        height:35px;
        padding:0 10px;
        font-size:8px;
    }
    .preview-example {
        font-size:7px;
    }
    .preview-layout {
        grid-template-columns:37px minmax(0,1fr);
    }
    .preview-sidebar {
        padding:14px 5px;
        gap:21px;
    }
    .preview-sidebar .brand-mark-small {
        width:25px;
        height:25px;
        flex-basis:25px;
        font-size:8px;
    }
    .preview-active {
        padding:6px;
    }
    .preview-sidebar>.ui-icon {
        width:14px;
        height:14px;
    }
    .preview-content {
        padding:17px 12px;
    }
    .preview-heading {
        margin-bottom:15px;
    }
    .preview-heading h2 {
        font-size:18px;
    }
    .preview-heading>div>span {
        font-size:6px;
    }
    .preview-date {
        font-size:7px;
    }
    .preview-metrics {
        gap:9px;
        margin-bottom:18px;
    }
    .preview-metrics>div {
        padding:10px;
    }
    .preview-metrics span {
        font-size:8px;
    }
    .preview-metrics strong {
        font-size:23px;
    }
    .preview-metrics small {
        font-size:7px;
    }
    .preview-list-heading {
        font-size:8px;
    }
    .preview-list-heading>span {
        font-size:8px;
    }
    .preview-row {
        gap:8px;
        padding:14px 0;
    }
    .preview-row>time {
        font-size:10px;
    }
    .preview-row strong {
        font-size:8px;
    }
    .preview-row>div>span {
        font-size:7px;
    }
    .preview-status {
        display:none;
    }
    .preview-float {
        right:10px;
        bottom:-21px;
        padding:11px 12px;
        gap:9px;
    }
    .preview-float strong {
        font-size:8px;
    }
    .preview-float small {
        font-size:7px;
    }
    .preview-float>.ui-icon {
        width:16px;
        height:16px;
        flex-basis:16px;
    }
    .preview-bottom {
        font-size:8px;
    }
    .landing-strip {
        gap:23px 12px;
        padding:25px 0;
    }
    .landing-strip>span {
        font-size:10px;
        gap:6px;
    }
    .landing-strip .ui-icon {
        width:14px;
        height:14px;
        flex-basis:14px;
    }
    .landing-section {
        padding:55px 0;
    }
    .landing-section-heading {
        margin-bottom:28px;
    }
    .landing-section-heading h2 {
        font-size:29px;
    }
    .landing-section-heading p {
        font-size:12px;
    }
    .feature-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .feature-card {
        padding:24px;
    }
    .feature-card h3 {
        font-size:19px;
    }
    .feature-card p {
        font-size:12px;
    }
    .feature-customer {
        padding:13px;
        gap:9px;
    }
    .feature-customer .status-badge {
        display:none;
    }
    .workflow-steps {
        grid-template-columns:1fr;
        gap:28px;
    }
    .workflow-steps article {
        padding-left:53px;
        position:relative;
    }
    .workflow-steps article>span {
        position:absolute;
        top:0;
        left:0;
    }
    .workflow-steps h3 {
        font-size:16px;
    }
    .workflow-steps p {
        font-size:12px;
    }
    .landing-cta {
        padding:30px 25px;
        flex-direction:column;
        align-items:stretch;
        margin-bottom:40px;
    }
    .landing-cta h2 {
        font-size:31px;
    }
    .landing-cta p {
        font-size:12px;
    }
    .public-footer {
        grid-template-columns:1fr;
        padding:28px 0;
        gap:24px;
    }
    .public-footer nav {
        gap:18px;
        font-size:10px;
    }
    .login-page {
        padding:25px 20px;
    }
    .login-brand {
        margin-bottom:25px;
    }
    .login-layout {
        grid-template-columns:1fr;
        gap:30px;
        padding:15px 0 25px;
    }
    .login-intro h1 {
        font-size:32px;
        margin:12px 0 16px;
    }
    .login-intro>p {
        font-size:13px;
        margin-bottom:0;
        max-width:none;
    }
    .login-feature {
        display:none;
    }
    .auth-card {
        padding:26px;
    }
    .login-footer {
        font-size:10px;
        gap:18px;
    }
    .legal-content {
        padding:23px 18px;
        margin:25px auto;
    }
    .legal-content h1 {
        font-size:26px;
    }
    .legal-content h2 {
        font-size:18px;
    }
    .legal-content p {
        font-size:13px;
    }
}

@media(max-width:370px) {
    .landing {
        padding:0 16px;
    }
    .landing-copy h1 {
        font-size:39px;
    }
    .landing-assurances {
        font-size:8px;
        gap:9px;
    }
    .metric-value {
        font-size:21px;
    }
    .responsive-table td::before {
        flex-basis:75px;
    }
    .brand strong {
        font-size:13px;
    }
    .position-grid {
        gap:11px;
    }
    .form-actions>.btn-secondary {
        font-size:12px;
        padding-left:10px;
        padding-right:10px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none!important;
        animation:none!important;
        scroll-behavior:auto!important;
    }
}

@media print {
    .sidebar,.topbar,.app-footer,.page-heading-actions,.form-actions,.skip-link {
        display:none!important;
    }
    .app-shell,.main-area {
        display:block;
    }
    .content {
        padding:0;
    }
    .app-body {
        background:white;
        color:#111;
    }
    .page-card,.section {
        background:white;
        border-color:#ddd;
        break-inside:avoid;
    }
    .page-card p,.section p {
        color:#444;
    }
    a {
        color:inherit;
    }
}

/* Shared account identity, document actions and compact creation flow. */
.user-pill { max-width: 340px; min-width: 0; }
.user-pill strong, .user-pill span { overflow-wrap: anywhere; }
.user-pill .user-workshop { color: var(--text); font-weight: 600; }
.app-footer>span:last-child, .login-footer { display:flex; flex-wrap:wrap; gap:12px 20px; }
.create-panel { margin-bottom:24px; scroll-margin-top:24px; }
.create-panel>h2 { font-size:20px; margin:0 0 24px; }
.document-notes { border-top:1px solid var(--border); margin-top:28px; padding-top:24px; }
.document-notes h3 { margin:0 0 12px; }
.status-badge .ui-icon { width:14px; height:14px; flex-basis:14px; }
.status-badge { white-space:normal; }
.login-help a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:600px) { .user-pill { max-width:100%; } .app-footer { align-items:flex-start; gap:16px; } }
.legal-content { max-width:900px; }
.legal-content address { font-style:normal; line-height:1.9; }
.legal-content .legal-updated { color:var(--muted); font-size:13px; margin:10px 0 24px; }
.legal-preview-note { border:1px solid var(--warning-border); background:var(--warning-bg); border-radius:10px; padding:18px 20px; color:var(--warning); }
.legal-preview-note p { font-size:13px; margin:6px 0 0; }
.legal-page-nav { display:flex; flex-wrap:wrap; gap:12px 24px; padding:22px 0; border-bottom:1px solid var(--border); font-size:13px; }
.legal-page-nav a:hover { color:var(--primary); }
.legal-content h2 { line-height:1.4; }
.qr-download { display:flex; margin:0 auto 18px; }
.share-renew { border-top:1px solid var(--border); padding-top:22px; margin-top:24px; }
.share-renew .field-help { margin:10px 0 0; }
.user-pill span { display:block; }
@media(max-width:680px) {
    .topbar-right { display:flex; width:100%; margin:0; padding-top:9px; border-top:1px solid var(--border); }
    .user-pill { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; width:100%; text-align:left; }
    .user-pill strong { grid-column:2; grid-row:1; text-align:right; }
    .user-pill .user-workshop { grid-column:1; grid-row:1; }
    .user-pill .user-expiry { grid-column:1 / -1; font-size:10px; }
}
.document-viewer { padding:0; overflow:hidden; }
.document-viewer-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 20px; border-bottom:1px solid var(--border); }
.document-page-controls { display:flex; align-items:center; gap:10px; font-size:13px; }
.document-page-controls input { width:65px; min-width:0; padding:8px; text-align:center; }
.document-zoom { display:flex; align-items:center; gap:10px; font-size:13px; }
.document-zoom select { width:auto; min-width:0; padding:8px 12px; }
.document-canvas-wrap { padding:16px; overflow:auto; background:var(--panel-soft); min-height:220px; }
.document-canvas-wrap canvas, .document-canvas-wrap img { display:block; margin:0 auto; max-width:none; box-shadow:var(--shadow); }
.document-viewer-status { padding:10px 20px; color:var(--muted); font-size:12px; }
.document-accessible-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:480px) { .document-viewer-toolbar { padding:14px; } .document-zoom { width:100%; justify-content:space-between; } }