:root {
    --ink: #14323a;
    --muted: #5d7378;
    --teal: #0f6e6a;
    --teal-deep: #0b3f45;
    --foam: #e7f3f2;
    --sand: #f3f6f6;
    --line: #d5e2e3;
    --card: #ffffff;
    --amber: #a16207;
    --red: #a33b32;
    --green: #1d7a52;
    --shadow: 0 16px 40px rgba(20, 50, 58, 0.08);
    color: var(--ink);
    background:
        radial-gradient(980px 560px at 100% -12%, #3aa89a 0%, transparent 58%),
        radial-gradient(760px 520px at -12% 0%, #f0b429 0%, transparent 52%),
        radial-gradient(820px 480px at 80% 120%, #4c8dff 0%, transparent 50%),
        #d7f0ea;
    font-family: "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
body.with-side { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
html.side-closed body.with-side { grid-template-columns: 0 minmax(0, 1fr); }
html.side-closed .app-side { overflow: hidden; visibility: hidden; }
.app-column { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
main { flex: 1; }
a { color: var(--teal-deep); }
button, input, select, textarea { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; }

.icon {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15rem;
}

main, footer { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; min-width: 0; }

.site-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 0.75rem max(1rem, calc((100% - 1120px) / 2));
    background: #0b3f45;
    color: #fff;
    border-bottom: 4px solid #f0b429;
    box-shadow: 0 2px 10px rgba(11, 63, 69, 0.28);
    position: sticky;
    top: 0;
    z-index: 20;
}
.header-start { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.header-start .menu-toggle { display: none; }
html.side-closed .header-start .menu-toggle { display: inline-flex; }
.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.375rem;
    margin: 0;
    padding: 0.375rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 0.375rem;
    cursor: pointer;
    flex: none;
}
.menu-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.menu-toggle .icon { width: 1.25rem; height: 1.25rem; }
.menu-toggle .icon-shut { display: none; }
html:not(.side-closed) .menu-toggle .icon-open { display: none; }
html:not(.side-closed) .menu-toggle .icon-shut { display: block; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.side-backdrop { display: none; }
.site-header .brand,
.site-header .brand small { color: #fff; }
.site-header nav a,
.site-header nav button {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
html.installed #install-app { display: none; }
.site-header .header-action[hidden],
.install-note[hidden] { display: none; }
.site-header .header-action {
    display: inline-flex;
    align-items: center;
    background: #f0b429;
    border: 1px solid #f0b429;
    color: #14323a;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}
.site-header .header-action:hover { background: #ffd56a; border-color: #ffd56a; color: #14323a; }
.install-note {
    width: min(1120px, calc(100% - 2rem));
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    background: #fff8e8;
    border: 1px solid #f0b429;
    border-radius: 0.375rem;
}
.camera-sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #0b1c22;
    display: flex;
    flex-direction: column;
}
.camera-sheet[hidden] { display: none; }
.camera-sheet video { flex: 1; width: 100%; object-fit: cover; background: #000; }
.camera-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: #0b3f45;
}
.camera-actions .button { margin-top: 0; }
.site-header nav a:hover,
.site-header nav button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.site-header nav button.header-action:hover { background: #ffd56a; border-color: #ffd56a; color: #14323a; }
.site-header .nav-solid,
.site-header nav form button {
    background: #f0b429;
    border-color: #f0b429;
    color: #14323a;
}
.site-header .nav-solid:hover,
.site-header nav form button:hover { background: #ffd56a; border-color: #ffd56a; color: #14323a; }

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}
.app-side {
    background: #1a2332;
    color: #e7eef8;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: 0;
    overflow: auto;
}
.side-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0.85rem 0.35rem 1rem;
}
.app-side .menu-toggle { margin-left: auto; }
.app-side .menu-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.side-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.55rem;
    display: grid;
    place-items: center;
    background: #243044;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    flex: none;
}
.side-user strong { font-size: 1rem; font-weight: 600; }
.side-workspace { margin: 0 1rem 0.35rem; color: #93a0b4; font-size: 0.875rem; }
nav.side-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.15rem;
    padding: 0.35rem 0.75rem 1rem;
}
nav.side-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: auto;
    background: transparent;
    color: #d5deea;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
}
nav.side-nav a:hover, nav.side-nav button.side-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
nav.side-nav form { margin: 0; }
nav.side-nav button.side-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    background: transparent;
    color: #d5deea;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
nav.side-nav a.active { background: rgba(255, 255, 255, 0.08); color: #fff; }
nav.side-nav .side-label { margin: 0.9rem 0.7rem 0.2rem; }
nav.side-nav .side-nest a { align-items: flex-start; }
nav.side-nav .side-nest .icon { margin-top: 0.12rem; flex: none; }
.side-label {
    margin: 0.85rem 1rem 0.25rem;
    color: #8b9bb0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.side-branch { position: relative; }
.side-branch > a { padding-right: 2.2rem; }
nav.side-nav .nest-toggle {
    position: absolute;
    top: 50%;
    right: 0.2rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #d5deea;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}
nav.side-nav .nest-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.side-chevron { width: 0.95rem; height: 0.95rem; }
html.nest-closed .side-chevron { transform: rotate(-90deg); }
html.nest-closed .side-nest { display: none; }
.side-nest {
    display: grid;
    gap: 0.1rem;
    margin: 0.1rem 0 0.35rem 1.35rem;
    padding-left: 0.55rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
nav.side-nav .side-nest a.active {
    background: #243044;
    box-shadow: inset 3px 0 0 #5b8def;
}
nav.side-nav .tree-cabinet {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.7rem;
    background: transparent;
    color: #d5deea;
    border: 0;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
nav.side-nav .tree-cabinet:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.tree-cabinet span { flex: 1; white-space: nowrap; }
nav.side-nav .tree-forms a { white-space: nowrap; }
.tree-chevron { width: 0.95rem; height: 0.95rem; margin-left: auto; }
.tree-node.closed .tree-chevron { transform: rotate(-90deg); }
.tree-node.closed .tree-forms { display: none; }
.tree-forms {
    display: grid;
    gap: 0.1rem;
    margin: 0.1rem 0 0.35rem 1.15rem;
    padding-left: 0.55rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.register .button { margin-top: 0; margin-bottom: 0.35rem; }
.register td a { font-weight: 600; }
form.side-out {
    margin-top: auto;
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
form.side-out button {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-start;
    background: transparent;
    color: #d5deea;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
form.side-out button:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

.brand strong { display: block; font-size: 1rem; font-weight: 600; }
.brand small { color: var(--muted); }
.mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    display: block;
    flex: none;
}

nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
nav a, nav button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--teal-deep);
    text-decoration: none;
    background: #fff;
    border: 1px solid #6c757d;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}
nav a:hover, nav button:hover { background: #e9ecef; }
.nav-solid, nav form button { background: var(--teal); border-color: var(--teal); color: white; }
.nav-solid:hover, nav form button:hover { background: #0c5c59; border-color: #0c5c59; }
nav form { margin: 0; }
nav form button { color: white; }

main { padding-bottom: 2rem; }
footer {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    padding: 0.5rem 0 2rem;
    font-size: 0.875rem;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0.2rem 0 0.6rem; }
h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }
h2:has(+ .data-scroll) { margin-bottom: 0.35rem; }
h3 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.eyebrow { margin: 0; color: var(--teal); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem; }
.lede, .muted { color: var(--muted); }
.lede { margin: 0.15rem 0 0.35rem; }

.hero, .journey, .stats, .page-intro, .scan-layout, .auth-grid { display: grid; gap: 1rem; }
.hero { grid-template-columns: 1.3fr 0.7fr; align-items: center; padding: 1rem 0 0.4rem; }
.journey, .stats { grid-template-columns: 1fr 1fr; }
.stats { grid-template-columns: repeat(4, 1fr); }
.page-intro, .scan-layout, .auth-grid { grid-template-columns: 1.4fr 0.8fr; align-items: start; }
.scan-layout, .auth-grid { gap: 0.5rem; }

.panel { min-width: 0; }
.card, .panel, .stat, .path-card, .auth-card, .template-card, .document-list article {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    box-shadow: var(--shadow);
}

.journey a, .stat, .panel, .path-card, .auth-card, .template-card, .document-list article { padding: 1.1rem 1.2rem; }
.journey a { display: grid; grid-template-columns: 1fr 140px; gap: 0.5rem; color: inherit; text-decoration: none; min-height: 180px; }
.journey a:hover { border-color: #9ec8c4; }
.journey p, .path-card p { color: var(--muted); }
.stat strong { display: block; font-size: 1.5rem; font-weight: 600; }
.stat span { color: var(--muted); font-size: 0.875rem; }

.path-card code {
    display: block;
    margin: 0.45rem 0;
    padding: 0.55rem 0.7rem;
    background: var(--foam);
    border-radius: 0.6rem;
    word-break: break-all;
}

.secret { position: relative; display: block; }
.secret input { padding-right: 2.75rem; }
button.eyelash {
    position: absolute;
    top: 0.28rem;
    right: 0.28rem;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--teal);
    cursor: pointer;
    display: grid;
    place-items: center;
}
button.eyelash:hover { background: var(--foam); }
button.eyelash .shut { display: none; }
.secret.shown button.eyelash .lashes,
.secret.shown button.eyelash .pupil { display: none; }
.secret.shown button.eyelash .shut { display: inline; }

label { display: block; font-size: 1rem; font-weight: 600; margin: 0.85rem 0 0.3rem; }
input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #fff;
    color: var(--ink);
}
textarea { min-height: 6.5rem; resize: vertical; }
button[type="submit"], .button {
    margin-top: 1rem;
    background: var(--teal);
    color: white;
    border: 1px solid var(--teal);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
button[type="submit"]:hover, .button:hover { background: #0c5c59; border-color: #0c5c59; color: white; }
.button.secondary, button.secondary {
    background: #fff;
    color: var(--teal-deep);
    border: 1px solid #6c757d;
}
.button.secondary:hover, button.secondary:hover { background: #e9ecef; color: var(--teal-deep); border-color: #6c757d; }
nav button { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.validation { color: var(--red); }

.scan-intro { grid-template-columns: 1fr; padding-bottom: 0.2rem; }
.scan-intro .lede { max-width: 68ch; }
.scan-ways {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: 1rem;
    margin-bottom: 0.35rem;
}
.scan-ways .panel {
    display: flex;
    flex-direction: column;
    border-top: 3px solid #f0b429;
    min-height: 15.5rem;
}
.scan-ways .eyebrow { margin-bottom: 0.35rem; }
.scan-ways h2 { margin-bottom: 0.45rem; }
.scan-ways p { color: var(--muted); margin: 0; }
.scan-action { margin-top: auto; }
.scan-ways .button { margin-top: 0.9rem; }
.scan-ways .path-card code { margin-top: auto; }
#scan-status { margin: 0.6rem 0 0; min-height: 1.5rem; }
#scan-status.error { color: var(--red); }
.panel-head, .document-list article, .template-card { display: flex; justify-content: space-between; gap: 1rem; }
.panel-head { align-items: center; margin-bottom: 0.35rem; }
.panel-head h2, .document-list h2, .template-card h2 { margin: 0; }
.count, .badge {
    background: var(--foam);
    color: var(--teal-deep);
    border-radius: 0.375rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.badge.form { background: #e7f0e4; }

.tray-grid, .template-grid, .page-grid { display: grid; gap: 0.75rem; }
.tray-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 200px)); }
.page-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.template-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tray-card {
    position: relative;
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #e3eeef;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    box-shadow: 0 10px 24px rgba(20, 50, 58, 0.06);
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
}
.tray-card:hover { border-color: #9ec8c4; }
.tray-card:has(input:checked) {
    border-color: var(--teal);
    box-shadow: inset 0 0 0 1px var(--teal), 0 10px 24px rgba(15, 110, 106, 0.12);
}
.tray-card input {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--teal);
}
.sheet-preview {
    display: grid;
    place-items: center;
    height: 210px;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: #f3f7f6;
    box-shadow: inset 0 0 0 1px rgba(20, 50, 58, 0.06);
}
.tray-card img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.15rem;
    background: #fff;
    box-shadow: 0 8px 18px rgba(20, 50, 58, 0.12);
    border: 0;
}
.page-grid img, .page-grid iframe { width: 100%; height: 120px; object-fit: cover; border-radius: 0.6rem; background: var(--foam); border: 0; }
.page-grid iframe { height: 220px; }
.tray-name {
    font-size: 0.875rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-mark {
    display: grid;
    place-items: center;
    width: 72%;
    height: 86%;
    border-radius: 0.15rem;
    background: var(--teal-deep);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(20, 50, 58, 0.12);
}
.empty-art { text-align: center; color: var(--muted); }
.empty-art svg { width: min(280px, 100%); height: auto; }
.add-local {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 0;
    padding: 0.75rem;
    border: 1px dashed #b7d0ce;
    border-radius: 0.75rem;
    background: #f7fbfb;
    color: var(--teal-deep);
    font-weight: 600;
    cursor: pointer;
}
.add-local:hover { border-color: var(--teal); background: #fff; }
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.filing-lead { margin: -0.15rem 0 0.2rem; color: var(--muted); }
.area-note { margin-bottom: 0.35rem; }
.area-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.area-actions form { margin: 0; }
.area-actions button, .area-actions .button { margin-top: 0; }
.area-onboard { margin-top: 0.35rem; }
.area-form { max-width: 28rem; }
.filing button { width: 100%; justify-content: center; }

.data-scroll { max-width: 100%; min-width: 0; }
.data-scroll .dt-container { width: 100%; max-width: 100%; }
.data-scroll div.dt-container div.dt-layout-row { margin: 0.2rem 0; }
.data-scroll div.dt-container > div.dt-layout-row:first-child { margin-top: 0; margin-bottom: 0.2rem; }
.data-scroll div.dt-container > div.dt-layout-row.dt-layout-table { margin: 0; }
.data-scroll div.dt-container > div.dt-layout-row:last-child { margin-top: 0.2rem; margin-bottom: 0; }
.data-scroll div.dt-container div.dt-layout-row.dt-layout-table,
.data-scroll div.dt-container div.dt-layout-full { width: 100%; max-width: 100%; }
.data-scroll div.dt-container div.dt-layout-cell.dt-layout-start {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    max-width: 100%;
}
.data-scroll div.dt-container div.dt-layout-start > *:not(:last-child) { margin-right: 0.75rem; }
.data-scroll .dt-length {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    white-space: nowrap;
}
.data-scroll .dt-length label {
    display: inline;
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
}
.data-scroll div.dt-container .dt-length select {
    width: auto;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}
.data-scroll .dt-search {
    display: inline-flex;
    align-items: center;
    margin: 0;
    max-width: 100%;
}
.data-scroll .dt-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.data-scroll div.dt-container .dt-search input {
    width: min(22rem, 100%);
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}
.data-scroll table.data-table { width: 100%; max-width: 100%; }
.data-scroll table.data-table th,
.data-scroll table.data-table td {
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: left;
    font-size: 1rem;
}
.data-scroll table.data-table thead th.dt-orderable-asc,
.data-scroll table.data-table thead th.dt-orderable-desc,
.data-scroll table.data-table thead th.dt-ordering-asc,
.data-scroll table.data-table thead th.dt-ordering-desc { padding-right: 1.6rem; }
.data-scroll table.data-table td a { color: inherit; }
.data-scroll .dt-container,
.data-scroll .dt-container input,
.data-scroll .dt-container select,
.data-scroll table.data-table {
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
.data-scroll table.data-table thead th,
.data-scroll table.data-table tr.child .dtr-title { font-weight: 600; }
.data-scroll .signal,
.data-scroll .badge,
.data-scroll .count { font-size: 1rem; font-weight: 600; }
.data-scroll .search-only { display: none; }
.data-scroll table.data-table td,
.data-scroll table.data-table tr.child .dtr-data { overflow-wrap: anywhere; }
.data-scroll td.cabinet-col,
.data-scroll td.file-col,
.data-scroll td:has(.row-actions),
.data-scroll td:has(.file-actions) { white-space: nowrap; }
.data-scroll table.data-table tr.child,
.data-scroll table.data-table tr.child .dtr-title,
.data-scroll table.data-table tr.child .dtr-data {
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
.data-scroll table.data-table tr.child .dtr-title { font-weight: 600; }
.data-scroll table.data-table tr.child ul.dtr-details { display: block; width: 100%; max-width: 100%; }
.data-scroll table.data-table tr.child li { white-space: normal; }
.data-scroll .file-actions,
.data-scroll .row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
}
.data-scroll .file-actions .button,
.data-scroll .row-actions .button,
.data-scroll .row-actions button {
    flex: none;
    margin-top: 0;
    color: #fff;
    white-space: nowrap;
}
.data-scroll .file-actions .button.secondary,
.data-scroll .row-actions .button.secondary,
.data-scroll .row-actions button.secondary { color: var(--teal-deep); }
.data-scroll div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0 0.15rem;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
#documents .cabinet-sort {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
}
#documents .cabinet-sort select {
    width: auto;
    min-width: 8.5rem;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.document-list { display: grid; gap: 0.35rem; }
.document-list article { align-items: center; }
.document-list a { color: inherit; text-decoration: none; }
.mail-log article { align-items: center; }
.mail-actions { display: flex; align-items: center; gap: 0.75rem; }
.mail-actions .button { margin-top: 0; }
.document-list p { margin: 0.2rem 0 0; color: var(--muted); }
.template-card { color: inherit; text-decoration: none; align-items: end; }

.signal { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; }
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.signal.green { color: var(--green); }
.signal.orange { color: var(--amber); }
.signal.red { color: var(--red); }

.form-sheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin: 0.35rem 0;
}
.form-sheet div, .note {
    background: var(--foam);
    border-radius: 0.8rem;
    padding: 0.75rem 0.9rem;
}
.form-sheet dt { color: var(--muted); font-size: 0.875rem; }
.form-sheet dd { margin: 0.15rem 0 0; font-size: 1rem; font-weight: 600; }
.form-wide { grid-column: 1 / -1; }

.filters { display: grid; grid-template-columns: 1.4fr repeat(3, 0.7fr) auto; gap: 0.7rem; align-items: end; margin-bottom: 0.35rem; }
.filters button { margin-top: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.45rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.preview pre { white-space: pre-wrap; background: var(--foam); padding: 1rem; border-radius: 0.8rem; }
.read-panel { margin: 0.35rem 0; }
.read-panel h2 { margin-top: 0; }
.read-text {
    white-space: pre-wrap;
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

.splash {
    min-height: calc(100vh - 8.5rem);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
    gap: 2rem;
    align-items: center;
}
.splash h1 { font-size: 1rem; font-weight: 600; line-height: 1.5; max-width: 22rem; margin: 0 0 0.75rem; }
.splash .lede { max-width: 36rem; font-size: 1rem; font-weight: 400; margin: 0; }
.splash .actions { margin-top: 1.25rem; }
.splash .actions .button { margin-top: 0; }
.splash-art {
    background:
        radial-gradient(circle at 30% 20%, #ffffff 0%, transparent 45%),
        linear-gradient(165deg, #f8fcfb, #d7efec);
    border: 1px solid var(--line);
    border-radius: 2rem;
    padding: 1rem 1rem 0;
    box-shadow: var(--shadow);
}
.splash-art svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
    .sheet { animation: feed-sheet 2.2s ease-in-out infinite; }
    .form-card { animation: float-form 2s ease-in-out infinite; }
    .plus-badge {
        transform-box: view-box;
        transform-origin: 520px 120px;
        animation: pulse-plus 1.3s ease-in-out infinite;
    }
}
@keyframes feed-sheet {
    0%, 100% { transform: translateY(-26px); }
    50% { transform: translateY(18px); }
}
@keyframes float-form {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes pulse-plus {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@media (max-width: 860px) {
    .hero, .journey, .journey a, .stats, .page-intro, .scan-ways, .scan-layout, .auth-grid, .form-sheet, .filters, .splash {
        grid-template-columns: 1fr;
    }
    body.with-side,
    html.side-closed body.with-side { grid-template-columns: minmax(0, 1fr); }
    .app-side {
        position: fixed;
        z-index: 30;
        top: 8.25rem;
        left: 0;
        width: min(272px, 88vw);
        height: calc(100vh - 8.25rem);
        transform: translateX(-105%);
        visibility: hidden;
    }
    .app-side { transition: transform 180ms ease, visibility 180ms ease; }
    html:not(.side-closed) .app-side { transform: translateX(0); visibility: visible; }
    html:not(.side-closed) .side-backdrop {
        display: block;
        position: fixed;
        inset: 8.25rem 0 0;
        z-index: 25;
        border: 0;
        padding: 0;
        background: rgba(11, 20, 32, 0.45);
        cursor: pointer;
    }
    html, body { overflow-x: clip; }
    .app-column, main { min-width: 0; max-width: 100%; }
    .site-header { z-index: 40; width: 100%; max-width: 100%; }
    .header-start .menu-toggle { display: inline-flex; }
    main table:not(.data-table),
    main table:not(.data-table) tbody,
    main table:not(.data-table) tr,
    main table:not(.data-table) td { display: block; width: auto; }
    main table:not(.data-table) thead { display: none; }
    main table:not(.data-table) tr { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
    main table:not(.data-table) tr:last-child { border-bottom: 0; }
    main table:not(.data-table) td { border: 0; padding: 0.15rem 0; overflow-wrap: anywhere; }
    main table:not(.data-table) td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; }
    main table:not(.data-table) .area-actions { display: grid; }
    main table:not(.data-table) .area-actions .button,
    main table:not(.data-table) .area-actions button { justify-content: center; }
    h1, h2, h3, .eyebrow, .stat strong, footer, th { font-size: 1rem; }
    .eyebrow { letter-spacing: 0; text-transform: none; }
    .splash { min-height: 0; padding-top: 1.25rem; }
    .splash-art { display: none; }
    .splash .actions { display: grid; grid-template-columns: 1fr 1fr; }
    .splash .actions .button { justify-content: center; }
    .stats { grid-template-columns: 1fr 1fr; }
    .site-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.75rem;
        min-height: 0;
    }
    .site-header nav { display: contents; }
    .brand small { display: none; }
    #install-app { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
    #notify-app { grid-column: 1 / -1; grid-row: 3; justify-content: center; }
    .site-header .nav-solid { grid-column: 2; grid-row: 1; justify-content: center; }
    body { background: #e7f3f2; }
    body:has(#notify-app:not([hidden])) .app-side { top: 11rem; height: calc(100vh - 11rem); }
    body:has(#notify-app:not([hidden])) .side-backdrop { inset: 11rem 0 0; }
    html.installed .app-side { top: 4.75rem; height: calc(100vh - 4.75rem); }
    html.installed .side-backdrop { inset: 4.75rem 0 0; }
}

.ezone-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 100%;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: transparent;
}
html.is-busy .ezone-progress { opacity: 1; }
html.is-busy .ezone-progress::before {
    content: "";
    display: block;
    width: 35%;
    height: 100%;
    background: #f0b429;
    animation: ezone-slide 0.9s ease-in-out infinite;
}
html.is-busy, html.is-busy body { cursor: progress; }
button.is-busy, a.is-busy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}
button.is-busy::before, a.is-busy::before, .is-waiting::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ezone-spin 0.65s linear infinite;
    flex: none;
}
#scan-status.is-waiting {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
button[type="submit"], .button, .header-action, .nav-solid, nav.side-nav a, .panel, .tray-card, .template-card, .document-list article {
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
button[type="submit"]:active, .button:active, .header-action:active { transform: translateY(1px); }
:focus-visible { outline: 2px solid #f0b429; outline-offset: 2px; }
.tray-card:hover, .template-card:hover { transform: translateY(-2px); }
@keyframes ezone-spin { to { transform: rotate(360deg); } }
@keyframes ezone-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .app-side, button[type="submit"], .button, .header-action, .nav-solid, nav.side-nav a, .panel, .tray-card, .template-card, .document-list article {
        transition: none;
    }
    button[type="submit"]:active, .button:active, .header-action:active, .tray-card:hover, .template-card:hover { transform: none; }
    html.is-busy .ezone-progress::before, button.is-busy::before, a.is-busy::before, .is-waiting::before { animation: none; }
}

@media print {
    .site-header, .app-side, footer, .actions, nav, form button, .ezone-progress { display: none; }
    main { width: auto; }
    .card, .panel, .document-list article { box-shadow: none; }
}