/* Dentfluence ONE design system, light only. Tokens come from 03_Design-System/tokens.json. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@500;600&family=Spline+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@500;600&display=swap");

:root {
    --bg: #F6F1F5;
    --surface: #FFFFFF;
    --ink: #1A0F1E;
    --muted: #6B5B6B;
    --line: #D4C2D6;
    --line-2: #E0D2E1;
    --paper-2: #ECE2EC;
    --brand: #A01A86;
    --brand-deep: #7A1268;
    --brand-soft: #F3E3F0;
    --focus: #7A1268;
    --independent: #1D4ED8;
    --independent-soft: #E6EDFC;
    --success: #12794A;
    --success-soft: #E1F4EA;
    --critical: #B8341F;
    --critical-soft: #FBE6E1;

    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-body: "Spline Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Spline Sans Mono", ui-monospace, Consolas, monospace;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px;
    --tap-target: 44px;
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/24px var(--font-body);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
a:hover { color: var(--brand-deep); }

.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-4);
}

@media (min-width: 720px) { .shell { padding-left: var(--space-5); padding-right: var(--space-5); } }

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: 600 20px/24px var(--font-display);
    margin-bottom: var(--space-5);
}

.brand img { height: 40px; width: 40px; display: block; }

/* cards: line border, no shadow */
.card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.card.wide { max-width: 720px; }

h1 { font: 600 24px/30px var(--font-display); margin: 0 0 var(--space-1); }
h2 { font: 600 18px/24px var(--font-display); margin: 0 0 var(--space-3); }
.sub { color: var(--muted); margin: 0 0 var(--space-5); font-size: 14px; line-height: 20px; }

.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    background: var(--paper-2);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    margin-bottom: var(--space-5);
}

.tab {
    border: 0;
    background: transparent;
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font: 500 14px var(--font-body);
    color: var(--muted);
    cursor: pointer;
}

.tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
}

.field { margin-bottom: var(--space-4); }

/* field label: mono, capitals */
label {
    display: block;
    font: 600 12px/16px var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

input, select {
    width: 100%;
    min-height: var(--tap-target);
    font: 400 16px var(--font-body);
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
}

input[readonly] { background: var(--bg); color: var(--muted); }

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.hint { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: var(--space-1); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap-target);
    padding: 0 var(--space-4);
    font: 600 15px var(--font-body);
    background: var(--brand);
    color: #fff;
    border: 1.5px solid var(--brand);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
}

.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--brand-soft); color: var(--ink); border-color: var(--line); }
.btn.small { width: auto; }

.msg { border-radius: var(--radius-md); padding: var(--space-3); font-size: 14px; line-height: 20px; margin-bottom: var(--space-4); }
.msg.err { background: var(--critical-soft); color: var(--critical); }
.msg.ok { background: var(--success-soft); color: var(--success); }
[hidden] { display: none !important; }

.foot { margin-top: var(--space-4); text-align: center; font-size: 14px; color: var(--muted); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--brand-deep); }

/* workspace picker */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.topbar .sub { margin: 0; }

.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: var(--space-4); }

.ws {
    text-align: left;
    width: 100%;
    min-height: var(--tap-target);
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    display: grid;
    gap: var(--space-2);
}

.ws:hover { background: var(--brand-soft); }
.ws[aria-pressed="true"] { border: 1.5px solid var(--brand); background: var(--brand-soft); }
.ws-name { font: 600 18px/24px var(--font-display); }
.ws-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* app group colours: a small tile, chip and name only, never a whole screen */
:root {
    --growth: #0F766E; --growth-soft: #E0F2EF;
    --community: #8A5A00; --community-soft: #F6ECD7;
    --patient: #5B6B12; --patient-soft: #EEF1D6;
}

.app-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
    align-content: start;
    justify-items: start;
}
.app-tile {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    font: 700 16px var(--font-display);
    background: var(--brand-soft); color: var(--brand);
}
.app-tile.growth { background: var(--growth-soft); color: var(--growth); }
.app-tile.independent { background: var(--independent-soft); color: var(--independent); }
.app-tile.community { background: var(--community-soft); color: var(--community); }
.app-tile.patient { background: var(--patient-soft); color: var(--patient); }

/* tags */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--paper-2);
    color: var(--ink);
    font: 600 12px/16px var(--font-body);
    text-transform: capitalize;
}

.badge.clinic { background: var(--brand-soft); color: var(--brand); }
.badge.individual, .badge.independent { background: var(--independent-soft); color: var(--independent); } /* blue = private to one person */
.badge.practice, .badge.platform { background: var(--brand-soft); color: var(--brand); }
.badge.growth { background: var(--growth-soft); color: var(--growth); }
.badge.community { background: var(--community-soft); color: var(--community); }
.badge.patient { background: var(--patient-soft); color: var(--patient); }

.empty { border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; color: var(--muted); }

.panel { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line-2); }
.row { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
.list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line-2);
}
.list .badge { margin-left: var(--space-2); }
.row-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.row-actions select { width: auto; min-width: 130px; }
.kicker { font: 600 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }

/* app bar: the same in every Dentfluence app */
.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.appbar-brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); min-height: var(--tap-target); }
.appbar-brand img { height: 32px; width: 32px; display: block; }
.appbar-name { font: 600 16px/24px var(--font-display); }
.appbar-right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.appbar-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; margin-right: var(--space-3); }
.appbar-nav a { display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 var(--space-3); border-radius: 8px; color: var(--muted); text-decoration: none; font: 500 14px/20px var(--font-body); }
.appbar-nav a:hover { color: var(--ink); background: var(--bg); }
.appbar-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
@media (max-width: 560px) {
    .appbar { flex-wrap: wrap; }
    .appbar-nav { order: 3; flex-basis: 100%; margin: 0; justify-content: flex-start; }
    .appbar-nav a { padding: 0 var(--space-2); font-size: 13px; }
}

.menu-wrap { position: relative; }

.switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    max-width: 240px;
    padding: 0 var(--space-3);
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    font: 500 14px var(--font-body);
    cursor: pointer;
}
.switcher span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher:hover { background: var(--brand-soft); }

.avatar {
    width: var(--tap-target);
    height: var(--tap-target);
    border-radius: 50%;
    border: 0;
    background: var(--brand-soft);
    color: var(--brand);
    font: 600 14px var(--font-body);
    cursor: pointer;
}
.avatar:hover { background: var(--paper-2); }

/* menus float, so they get the one shadow the system allows */
.menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px 0 #1a0f1e1f;
    padding: var(--space-2);
}
.menu.right { left: auto; right: 0; }
.menu-head { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-2); margin-bottom: var(--space-1); }
.menu-title { font: 600 16px/24px var(--font-body); }
.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font: 400 15px var(--font-body);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
a.menu-item { text-decoration: none; }
.menu-item:hover { background: var(--brand-soft); }
.menu-item[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.page { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.page .card { max-width: none; }
.stack { display: grid; gap: var(--space-4); }
.stack > div > .sub { margin-bottom: 0; }
.mono { font-family: var(--font-mono); font-size: 13px; word-break: break-all; }
.card .sub { margin-bottom: var(--space-4); }

@media (max-width: 520px) {
    .appbar-chip { display: none; }
    .switcher { max-width: 150px; }
    .menu-wrap { position: static; }
    .menu, .menu.right { position: fixed; top: 60px; left: var(--space-4); right: var(--space-4); min-width: 0; }
}

@media (max-width: 520px) { .row { grid-template-columns: 1fr; } .card { padding: var(--space-4); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* app shell: icon rail on the left, content on the right */
.frame { display: flex; min-height: 100vh; }
.frame-main { flex: 1; min-width: 0; }
.rail {
    position: sticky; top: 0; align-self: flex-start;
    width: 220px; height: 100vh; flex: none;
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3);
    background: var(--surface); border-right: 1px solid var(--line);
}
.rail[hidden], .rail-link[hidden] { display: none; }
.rail-logo { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-bottom: var(--space-3); padding: 0 var(--space-2); color: var(--ink); text-decoration: none; font: 600 18px var(--font-display); }
.rail-logo img { width: 32px; height: 32px; display: block; }
.rail-link {
    position: relative; min-height: var(--tap-target);
    display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3);
    border-radius: var(--radius-md); color: var(--muted); text-decoration: none;
    font: 500 15px/20px var(--font-body);
}
.rail-link svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-link:hover { background: var(--bg); color: var(--ink); }
.rail-link[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.rail-end { margin-top: auto; }
.rail-group { font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: var(--space-3) var(--space-3) var(--space-1); }
.rail-group[hidden] { display: none; }
.appbar-brand { margin-right: auto; }

/* Launchpad */
.page.page-launch { max-width: 1040px; }
.launch { padding: var(--space-5) 0 var(--space-6); }
.launch-head { text-align: center; margin-bottom: var(--space-6); }
.launch-head h1 { font-size: 32px; line-height: 40px; }
.launch-head .sub { margin: 0; }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-5) var(--space-3); }
.tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius-lg);
    background: transparent; color: var(--ink); text-decoration: none; cursor: pointer;
    font: inherit;
}
.tile:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tile-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    font: 700 26px var(--font-display);
}
.tile-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile-icon.growth { background: var(--growth-soft); color: var(--growth); }
.tile-icon.independent { background: var(--independent-soft); color: var(--independent); }
.tile-icon.community { background: var(--community-soft); color: var(--community); }
.tile-icon.patient { background: var(--patient-soft); color: var(--patient); }
.tile-name { font: 600 13px/18px var(--font-body); text-align: center; }
.tile-note { font: 500 11px/14px var(--font-body); color: var(--muted); margin-top: -6px; } /* e.g. "Pay per use" */

@media (max-width: 720px) {
    .frame { flex-direction: column; }
    .frame-main { order: 1; }
    .rail { order: 2; }
    .rail {
        position: sticky; bottom: 0; top: auto; align-self: stretch; z-index: 10;
        width: auto; height: auto; flex-direction: row; justify-content: space-around;
        border-right: 0; border-top: 1px solid var(--line); padding: var(--space-1) var(--space-2);
    }
    .rail-logo, .rail-group { display: none; }
    .rail-end { margin-top: 0; }
    .rail-link { flex: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 0; font: 500 11px/14px var(--font-body); }
    .frame-main { flex: 1; }
    .launch-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ===== Account settings shell (profile, plan and payment) ===== */
.page.page-settings { max-width: 1080px; }
.set { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.set-nav { position: sticky; top: var(--space-5); display: grid; gap: 2px; }
.set-nav-head { font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: var(--space-4) var(--space-3) var(--space-1); }
.set-nav-head:first-child { padding-top: 0; }
.set-link { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--muted); text-decoration: none; font: 500 14px/20px var(--font-body); }
.set-link svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.set-link:hover { background: var(--surface); color: var(--ink); }
.set-link[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.set-body { min-width: 0; }
@media (max-width: 860px) {
    .set { grid-template-columns: 1fr; gap: var(--space-4); }
    .set-nav { position: static; display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
    .set-nav-head { display: none; }
    .set-link { flex: none; background: var(--surface); border: 1px solid var(--line-2); white-space: nowrap; }
    .set-link[hidden] { display: none; }
}

/* profile hero */
.hero { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 62%); }
.hero-avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 600 28px/1 var(--font-display); letter-spacing: .02em; }
.hero h1 { margin: 0 0 2px; font-size: 26px; line-height: 32px; }
.hero-meta { color: var(--muted); font-size: 14px; line-height: 20px; display: flex; flex-wrap: wrap; gap: 2px var(--space-3); }
.hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.hero-id { text-align: right; }
.hero-id .kicker { margin-bottom: 4px; }
.idcopy { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px dashed var(--line); background: var(--surface); border-radius: var(--radius-md); font: 500 12px var(--font-mono); color: var(--ink); cursor: pointer; }
.idcopy:hover { background: var(--brand-soft); }
@media (max-width: 720px) {
    .hero { grid-template-columns: auto 1fr; padding: var(--space-4); gap: var(--space-4); }
    .hero-id { grid-column: 1 / -1; text-align: left; }
}

/* settings cards: a title and help text on the left, the form on the right */
.sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); scroll-margin-top: var(--space-5); }
.sec > header h2 { margin: 0 0 var(--space-1); }
.sec > header p { margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.sec .field:last-of-type { margin-bottom: var(--space-4); }
.sec form + form { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line-2); }
@media (max-width: 720px) { .sec { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); } }
.state-line { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 var(--space-3); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.ok { background: var(--success); }
.dot.warn { background: #C77700; }

/* plan summary */
.plan-sum { display: grid; gap: var(--space-3); }
.plan-sum-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan-sum-name { font: 600 22px/28px var(--font-display); }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 12px/16px var(--font-body); background: var(--paper-2); color: var(--muted); }
.pill.trialing { background: var(--independent-soft); color: var(--independent); }
.pill.active { background: var(--success-soft); color: var(--success); }
.pill.past_due { background: #FFF1DC; color: #8A4B00; }
.pill.expired, .pill.cancelled { background: var(--critical-soft); color: var(--critical); }
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.plan-sum-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plan-sum-actions .btn { width: auto; }

/* workspace rows */
.wslist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wsrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line-2); border-radius: var(--radius-md); }
.wsrow.current { border-color: var(--brand); background: var(--brand-soft); }
.wsrow-tile { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font: 600 16px var(--font-display); flex: none; }
.wsrow.current .wsrow-tile { background: var(--brand); color: #fff; }
.wsrow-main { min-width: 0; flex: 1; }
.wsrow-name { font: 600 15px/20px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsrow-sub { font-size: 13px; color: var(--muted); }
.wsrow .btn { width: auto; min-height: 36px; }

/* ===== First-run help: welcome, tour, setup checklist, Explore apps ===== */
.launch-head .head-actions { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.launch-head .head-actions .btn { width: auto; }
.tile.pinned .tile-name::after { content: " ★"; color: var(--brand); }

.setup-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 900px) { .setup-wrap:has(.trial) { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.setup, .trial { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.setup { background: linear-gradient(180deg, var(--brand-soft) 0, var(--surface) 90px); }
.setup-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.setup-top h2 { margin: 0; }
.setup-top .sub { margin: 2px 0 0; }
.setup-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.setup-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line-2); }
.setup-list .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; font-size: 13px; color: #fff; }
.setup-list li.done .tick { background: var(--success); border-color: var(--success); }
.setup-list li.done strong { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.setup-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.setup-t span { font-size: 13px; line-height: 18px; color: var(--muted); }
.setup-list .btn { width: auto; min-height: 36px; flex: none; }
.trial h3 { margin: 0 0 var(--space-1); font: 600 18px/24px var(--font-display); }
.trial .meter { margin: var(--space-3) 0 var(--space-4); }
@media (max-width: 520px) { .setup, .trial { padding: var(--space-4); } .setup-list li { flex-wrap: wrap; } .setup-list .btn { margin-left: 36px; } }

.ob-back { position: fixed; inset: 0; z-index: 60; background: rgba(26, 15, 30, .5); display: grid; place-items: center; padding: var(--space-4); }
.ob-modal { background: var(--surface); border-radius: var(--radius-lg); width: min(480px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(26, 15, 30, .35); }
.ob-modal.wide { width: min(880px, 100%); }
.ob-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-2); }
.ob-head h2 { margin: 0; white-space: nowrap; }
.ob-head input { flex: 1; min-width: 0; }
.ob-x { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); width: 36px; height: 36px; border-radius: 50%; }
.ob-x:hover { background: var(--brand-soft); }
.ob-scroll { overflow-y: auto; padding: var(--space-4) var(--space-5); }
.ob-scroll .kicker { margin: var(--space-4) 0 var(--space-2); }
.ob-scroll .kicker:first-child { margin-top: 0; }
.ob-scroll.short { max-height: 46vh; padding: 0 0 var(--space-2); }
.ob-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line-2); }
.ob-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.ob-app { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface); }
.ob-app:hover { border-color: var(--brand); }
.ob-app-main { flex: 1; min-width: 0; display: flex; gap: var(--space-3); padding: var(--space-3); text-decoration: none; color: var(--ink); }
.ob-app-ico { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font: 600 16px var(--font-display); flex: none; }
.ob-app-t { display: grid; gap: 2px; min-width: 0; }
.ob-app-t strong { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; }
.ob-app-t .badge { font-size: 11px; padding: 1px 8px; }
.ob-app-d { font-size: 13px; line-height: 18px; color: var(--muted); }
.ob-star { border: 0; background: transparent; font-size: 20px; color: var(--brand); cursor: pointer; padding: 0 var(--space-3); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ob-star:hover { background: var(--brand-soft); }

.ob-welcome { padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; gap: var(--space-3); }
.ob-welcome h2 { font-size: 26px; line-height: 32px; margin: 0; }
.ob-welcome .sub { margin: 0 0 var(--space-3); }
.ob-welcome .btn { width: 100%; }
.ob-welcome .linkbtn { margin-top: var(--space-2); }
.ob-welcome .ob-foot { border: 0; padding: var(--space-3) 0 0; }
.ob-welcome .ob-apps { text-align: left; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ob-welcome .hint { margin: var(--space-2) 0 0; }
.ob-logo { margin: 0 auto var(--space-3); width: 72px; height: 72px; border-radius: 20px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 600 22px var(--font-display); }
.ob-choice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); text-align: left; min-height: 48px; }
.ob-choice strong { flex: 1; font-size: 14px; }
.ob-choice.on { border-color: var(--brand); background: var(--brand-soft); }
.ob-check { color: var(--brand); font-weight: 700; width: 16px; }

.tour-spot { position: fixed; z-index: 70; border-radius: var(--radius-md); box-shadow: 0 0 0 9999px rgba(26, 15, 30, .55); pointer-events: none; transition: all .2s ease; }
.tour-pop, .tour-intro { position: fixed; z-index: 71; background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: 0 16px 48px rgba(26, 15, 30, .35); }
.tour-pop h3, .tour-intro h3 { margin: 0 0 var(--space-2); font: 600 18px/24px var(--font-display); }
.tour-pop p, .tour-intro p { margin: 0 0 var(--space-4); color: var(--muted); font-size: 14px; line-height: 20px; }
.tour-intro { left: var(--space-4); bottom: 76px; width: min(340px, calc(100vw - 32px)); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.tour-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.tour-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; flex: none; margin: -4px -8px 0 0; }
.tour-x:hover { background: var(--brand-soft); color: var(--ink); }
.tour-more { display: inline-block; margin: calc(var(--space-2) * -1) 0 var(--space-3); font-size: 14px; }
.tour-count { font: 600 14px var(--font-body); color: var(--ink); }
.tour-btns { display: inline-flex; gap: var(--space-2); }
.tour-btns .btn { min-height: 36px; }
.tour-skip { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 72; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--font-body); cursor: pointer; box-shadow: 0 8px 24px rgba(26, 15, 30, .25); }
.tour-skip:hover { background: var(--brand-soft); }

/* =====================================================================
   Dentfluence OS look. Same colours, fonts, sidebar and controls as the OS app
   (Dentfluence_OS: dentfluence.tokens.css, layouts/app, components/sidebar).
   Last in the file on purpose: it re-skins everything above without changing any page.
   ===================================================================== */
:root {
    --bg: #f5eef9; --surface: #ffffff; --ink: #1a0a24; --muted: #7a6884;
    --line: #e0d4ea; --line-2: #f0e8f1; --paper-2: #faf4fc;
    --brand: #6a0f70; --brand-deep: #5a0c5f; --brand-soft: #f3e8f4; --focus: #6a0f70;
    --success: #1a7a45; --success-soft: #e8f7ef;
    --critical: #b52020; --critical-soft: #fdeaea;
    --independent: #1a5ea8; --independent-soft: #e6f0fb;
    --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "DM Mono", ui-monospace, Consolas, monospace;
    --radius-sm: 2px; --radius-md: 3px; --radius-lg: 3px;
    --os-card-line: rgba(185, 92, 183, .12);
}
body { font: 400 14px/1.5 var(--font-body); color: var(--ink); background: var(--bg); }
h1 { font: 600 28px/1.1 var(--font-display); letter-spacing: -.01em; color: #1e0a2c; }
h2 { font: 600 17px/1.3 var(--font-display); color: #1e0a2c; }
.sub { font-weight: 300; font-size: 13px; line-height: 1.5; }
.card, .app-card, .sec, .setup, .trial, .sub-card, .plan, .wsrow { border-color: var(--os-card-line); }
label, .kicker { font: 600 11px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
input, select, textarea { min-height: 40px; font: 400 14px var(--font-body); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 12px; background: #fff; }
textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font: 400 14px/1.5 var(--font-body); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(106, 15, 112, .14); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(106, 15, 112, .22); }
.btn { min-height: 40px; font: 600 13px var(--font-body); letter-spacing: .02em; border-radius: var(--radius-md); border-width: 1px; }
.btn.small { min-height: 36px; }
.btn:not(.ghost):not(.small):hover { box-shadow: 0 4px 14px rgba(106, 15, 112, .28); }
.btn.ghost { border-color: var(--line); background: #fff; }
.msg { border-radius: var(--radius-md); font-size: 13px; }
.tab, .seg, .tabs { border-radius: var(--radius-md); }
.hint { font-size: 12px; }
.empty { border-radius: var(--radius-md); }

/* sidebar: the OS deep purple, 240px, small labelled sections */
.rail {
    width: 240px; padding: 0 0 var(--space-3); gap: 0; overflow-y: auto; border-right: 0;
    background:
        radial-gradient(ellipse 120% 55% at 60% 0%, rgba(140, 30, 170, .40) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 10% 100%, rgba(90, 10, 120, .32) 0%, transparent 55%),
        linear-gradient(175deg, #200a2e 0%, #170720 40%, #0e0118 100%);
    box-shadow: 1px 0 0 0 rgba(185, 92, 183, .10);
}
.rail::-webkit-scrollbar { width: 3px; }
.rail::-webkit-scrollbar-thumb { background: rgba(185, 92, 183, .20); }
.rail-logo { height: 64px; min-height: 64px; margin: 0 0 6px; padding: 0 16px; gap: 11px; border-bottom: 1px solid rgba(185, 92, 183, .10); color: #fff; flex: none; }
.rail-logo img { width: 32px; height: 32px; object-fit: contain; }
.rail-logo .wm { display: grid; gap: 3px; }
.rail-logo .wm b { font: 600 13px/1 var(--font-body); letter-spacing: .26em; color: #fff; }
.rail-logo .wm small { font: 400 9px/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: rgba(185, 150, 210, .48); }
.rail-group { font: 600 9.5px/16px var(--font-body); letter-spacing: .20em; text-transform: uppercase; color: rgba(185, 130, 210, .38); padding: 16px 16px 5px; }
.rail-link { min-height: 38px; height: 38px; margin: 0 6px 1px; padding: 0 12px 0 14px; gap: 11px; font: 400 13px var(--font-body); color: rgba(215, 185, 230, .58); border-radius: 3px; border-left: 2px solid transparent; transition: background-color 120ms linear, color 120ms linear; white-space: nowrap; overflow: hidden; }
.rail-link svg { width: 16px; height: 16px; stroke-width: 1.65; opacity: .75; }
.rail-link:hover { background: rgba(185, 92, 183, .10); color: rgba(235, 210, 248, .90); }
.rail-link:hover svg, .rail-link[aria-current="page"] svg { opacity: 1; }
.rail-link[aria-current="page"] { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #b95cb7; font-weight: 500; }
.rail-end { margin-top: auto; }

/* top bar: 64px white, hairline, rounded controls like the OS */
.appbar { min-height: 64px; height: 64px; padding: 0 28px; background: #fff; border-bottom: 1px solid rgba(185, 92, 183, .10); }
.appbar-name { font: 600 15px var(--font-display); letter-spacing: -.005em; }
.switcher { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; font: 500 13px var(--font-body); }
.avatar { width: 40px; height: 40px; background: var(--brand); color: #fff; font: 600 13px var(--font-body); letter-spacing: .02em; }
.avatar:hover { background: var(--brand-deep); }
.menu { border-radius: 12px; border: 1px solid var(--os-card-line); box-shadow: 0 10px 15px -3px rgba(26, 3, 32, .08), 0 4px 6px -4px rgba(26, 3, 32, .05); }
.menu-item { border-radius: 8px; font-size: 13px; }

/* content area */
.page { padding: 28px 32px 48px; }
.tile-icon { border-radius: 6px; }
.tile:hover { box-shadow: inset 0 0 0 1px var(--os-card-line); }
.badge { border-radius: 999px; font: 600 11px/18px var(--font-body); }
.set-link { border-radius: 3px; font-size: 13px; }
.hero { border-radius: 3px; background: linear-gradient(135deg, #f3e8f4 0%, #fff 62%); }
.ob-modal, .tour-pop { border-radius: 6px; }
.ob-back { background: rgba(14, 1, 24, .55); }
.tour-spot { box-shadow: 0 0 0 9999px rgba(14, 1, 24, .55); }
.btn.small, .tour-skip { border-radius: 3px; }

@media (max-width: 720px) {
    .rail { width: auto; padding: var(--space-1) var(--space-2); overflow: visible; }
    .rail-link { height: auto; margin: 0; padding: 4px 0; border-left: 0; font-size: 11px; border-radius: 3px; }
    .rail-link[aria-current="page"] { background: rgba(255, 255, 255, .14); }
    .appbar { padding: 0 16px; }
    .page { padding: 20px 16px 32px; }
}

/* ===== The ONE bar: same top bar on every page, nine dots for the other apps ===== */
.frame, .rail { all: unset; }
.onebar {
    position: sticky; top: 0; z-index: 40; height: 56px; min-height: 56px; padding: 0 20px; gap: 16px;
    background: linear-gradient(90deg, #200a2e 0%, #2d0a3e 100%); border-bottom: 1px solid rgba(185, 92, 183, .18); color: #fff;
}
.ob-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; flex: none; }
.ob-brand img { width: 30px; height: 30px; object-fit: contain; }
.ob-word { display: grid; gap: 3px; }
.ob-word b { font: 600 12.5px/1 var(--font-body); letter-spacing: .26em; }
.ob-word small { font: 400 9px/1 var(--font-body); letter-spacing: .28em; color: rgba(185, 150, 210, .6); text-transform: uppercase; }
.ob-title { padding-left: 16px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .18); font: 500 14px var(--font-body); color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.onebar .appbar-right { margin-left: auto; gap: 8px; }
.onebar .switcher { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.onebar .switcher:hover { background: rgba(255, 255, 255, .14); }
.onebar .avatar { background: #fff; color: var(--brand); }
.onebar .avatar:hover { background: var(--brand-soft); }
.nd-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.nd-btn svg { width: 22px; height: 22px; }
.nd-btn:hover, .nd-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.nd-panel { position: absolute; right: -8px; top: calc(100% + 10px); z-index: 60; width: 340px; max-width: calc(100vw - 24px); padding: 14px; background: #fff; border: 1px solid rgba(185, 92, 183, .16); border-radius: 12px; color: var(--ink); box-shadow: 0 20px 40px -8px rgba(26, 3, 32, .22), 0 8px 16px -4px rgba(26, 3, 32, .10); }
.nd-home { display: block; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font: 600 13px var(--font-body); text-decoration: none; }
.nd-home:hover { background: #ecd6ee; }
.nd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: min(62vh, 420px); overflow-y: auto; }
.nd-app { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; text-align: center; text-decoration: none; color: var(--ink); }
.nd-app:hover, .nd-app:focus-visible { background: var(--paper-2); }
.nd-name { font: 500 12px/15px var(--font-body); }
.nd-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font: 400 11px var(--font-body); color: var(--muted); text-align: center; }
.nd-ico, .app-ico { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; flex: none; }
.nd-ico img, .app-ico img, .tile-icon.has-img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nd-ico.letter, .app-ico.letter { background: var(--brand-soft); color: var(--brand); font: 600 18px var(--font-body); }
.tile-icon.has-img { background: transparent; padding: 0; overflow: hidden; box-shadow: 0 4px 10px rgba(26, 3, 32, .14); }
.tile-icon.has-img svg { display: none; }
@media (max-width: 720px) { .ob-word small, .ob-title { display: none; } .onebar { padding: 0 12px; } }

/* ===== OS shell: sidebar on the left, white top bar, canvas (PMS). Same as the Dentfluence OS. ===== */
body.os { height: 100vh; overflow: hidden; }
#df-shell { display: flex; height: 100vh; width: 100vw; overflow: hidden; position: relative; }
#df-sidebar {
    width: 240px; flex-shrink: 0; height: 100vh; position: relative; z-index: 30; display: flex; flex-direction: column; overflow: hidden;
    transition: width 280ms cubic-bezier(.4, 0, .2, 1);
    background:
        radial-gradient(ellipse 120% 55% at 60% 0%, rgba(140, 30, 170, .40) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 10% 100%, rgba(90, 10, 120, .32) 0%, transparent 55%),
        linear-gradient(175deg, #200a2e 0%, #170720 40%, #0e0118 100%);
    box-shadow: 1px 0 0 0 rgba(185, 92, 183, .10);
}
.df-sidebar-brand { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 0 16px; height: 64px; border-bottom: 1px solid rgba(185, 92, 183, .10); overflow: hidden; color: #fff; text-decoration: none; }
.df-sidebar-brand img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.df-sidebar-brand-sub { display: grid; gap: 3px; min-width: 0; }
.df-sidebar-brand-sub b { font: 600 13px/1 var(--font-body); letter-spacing: .26em; }
.df-sidebar-brand-sub small { font: 400 9px/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: rgba(185, 150, 210, .48); }
#df-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
#df-sidebar-nav::-webkit-scrollbar { width: 3px; }
#df-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(185, 92, 183, .20); }
.df-nav-group { padding: 12px 0 4px; }
.df-nav-section-label { font: 600 9.5px/1 var(--font-body); letter-spacing: .20em; text-transform: uppercase; color: rgba(185, 130, 210, .38); padding: 0 16px 7px; white-space: nowrap; }
.df-nav-item { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px 0 14px; margin: 0 6px 1px; font: 400 13px var(--font-body); color: rgba(215, 185, 230, .58); text-decoration: none; border-radius: 3px; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; transition: background-color 120ms linear, color 120ms linear; }
.df-nav-item:hover { background: rgba(185, 92, 183, .10); color: rgba(235, 210, 248, .90); }
.df-nav-item.df-nav-active { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: #6a0f70; font-weight: 500; }
.df-nav-icon { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; opacity: .75; }
.df-nav-item:hover .df-nav-icon, .df-nav-item.df-nav-active .df-nav-icon { opacity: 1; }
.df-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms; }
.df-collapse { flex-shrink: 0; display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 20px; border: 0; border-top: 1px solid rgba(185, 92, 183, .10); background: transparent; color: rgba(185, 150, 210, .55); font: 400 12px var(--font-body); cursor: pointer; }
.df-collapse:hover { color: #fff; }
#df-body-column { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#df-topbar { height: 64px; flex-shrink: 0; z-index: 120; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: #fff; border-bottom: 1px solid rgba(185, 92, 183, .10); }
.df-burger { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.df-burger:hover { background: var(--brand-soft); }
.df-topbar-title { font: 500 15px var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#df-topbar .appbar-right { margin-left: auto; gap: 8px; }
#df-topbar .nd-btn { color: var(--ink); }
#df-topbar .nd-btn:hover, #df-topbar .nd-btn[aria-expanded="true"] { background: var(--brand-soft); }
#df-content-area { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #f5eef9; }
#df-content-area::-webkit-scrollbar { width: 5px; }
#df-content-area::-webkit-scrollbar-thumb { background: rgba(185, 92, 183, .28); }
#df-content-area .page { max-width: 1440px; margin: 0 auto; padding: 28px 32px 48px; }
/* the sidebar replaces the screens' own tab bars */
.os .pms-nav, .os .pmsb nav.sub { display: none; }
#df-shell[data-sidebar="collapsed"] #df-sidebar { width: 64px; }
@media (min-width: 768px) {
    #df-shell[data-sidebar="collapsed"] #df-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 130; }
    #df-shell[data-sidebar="collapsed"] #df-sidebar:hover { width: 260px; box-shadow: 4px 0 16px rgba(14, 1, 24, .25); }
    #df-shell[data-sidebar="collapsed"] #df-body-column { margin-left: 64px; }
    #df-shell[data-sidebar="collapsed"] #df-sidebar:not(:hover) .df-nav-label,
    #df-shell[data-sidebar="collapsed"] #df-sidebar:not(:hover) .df-nav-section-label { opacity: 0; width: 0; flex: 0 0 0; overflow: hidden; }
    #df-shell[data-sidebar="collapsed"] #df-sidebar:not(:hover) .df-nav-item { gap: 0; justify-content: center; padding: 0; }
    #df-shell[data-sidebar="collapsed"] #df-sidebar:not(:hover) .df-sidebar-brand { justify-content: center; padding: 0; }
    #df-shell[data-sidebar="collapsed"] #df-sidebar:not(:hover) .df-collapse { justify-content: center; padding: 0; gap: 0; }
}
#df-scrim { position: fixed; inset: 0; z-index: 125; background: rgba(14, 1, 24, .55); }
@media (max-width: 767px) {
    #df-sidebar { position: fixed; left: 0; top: 0; z-index: 130; transform: translateX(-100%); transition: transform 240ms ease; }
    #df-sidebar.drawer-open { transform: none; }
    .df-collapse { display: none; }
    #df-topbar { padding: 0 14px; gap: 8px; }
    #df-content-area .page { padding: 20px 14px 32px; }
}
@media print { #df-sidebar, #df-topbar, #df-scrim { display: none !important; } body.os, #df-shell, #df-body-column, #df-content-area { height: auto; overflow: visible; } }