:root {
    color-scheme:light;
    --canvas:#f5f7fa;
    --surface:#fff;
    --soft:#f0f3f7;
    --ink:#172b3a;
    --muted:#657687;
    --line:#e2e8ef;
    --accent:#087f72;
    --accent-soft:#e4f4ef;
    --info:#1755a0;
    --info-soft:#eaf2ff;
    --info-line:#bed6ff;
    --sidebar-width:260px;
    --shadow:0 4px 20px #172b3a05;
}
:root[data-theme=dark] {
    color-scheme:dark;
    --canvas:#101820;
    --surface:#19242f;
    --soft:#22303d;
    --ink:#e5edf4;
    --muted:#a0b1c0;
    --line:#344351;
    --accent:#65d7b5;
    --accent-soft:#1e3b36;
    --success:#77dfba;
    --success-soft:#1e3b36;
    --success-line:#376e5f;
    --danger:#ffadb5;
    --danger-soft:#45272f;
    --danger-line:#82404b;
    --warning:#f6cf88;
    --warning-soft:#413725;
    --warning-line:#80652f;
    --info:#a0c9ff;
    --info-soft:#233953;
    --info-line:#456a97;
    --quote:#d7baff;
    --quote-soft:#34284d;
    --quote-line:#705993;
    --shadow:0 4px 20px #00000015;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
button,input,select,textarea {
    font:inherit;
}
button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent;
}
button,a,select {
    touch-action:manipulation;
}
button {
    cursor:pointer;
}
a {
    text-decoration:none;
}
button:disabled {
    cursor:not-allowed;
    opacity:.55;
}
:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:3px;
}
a,button {
    transition:background-color .15s,color .15s,box-shadow .15s;
}
.ui-icon {
    flex-shrink:0;
}
.app-sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar-width);
    background:var(--surface);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    z-index:40;
    transition:width .2s,transform .2s;
}
.brand {
    height:90px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px;
    color:var(--ink);
    flex-shrink:0;
}
.brand-mark {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:12px;
    background:#123f3b;
    color:white;
    font-size:24px;
    font-weight:750;
    flex-shrink:0;
}
.brand-logo {
    width:42px;
    height:42px;
    border-radius:12px;
    object-fit:contain;
    background:white;
    flex-shrink:0;
}
.brand-mark span {
    color:#78e3be;
}
.brand-copy {
    font-size:19px;
    font-weight:750;
    letter-spacing:-.6px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.brand-copy small {
    display:block;
    font-size:10px;
    font-weight:500;
    letter-spacing:.2px;
    color:var(--muted);
    margin-top:1px;
}
.sidebar-nav {
    padding:2px 14px 20px;
    overflow-y:auto;
    flex:1;
}
.nav-group {
    margin-bottom:19px;
}
.nav-heading {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.3px;
    font-weight:700;
    color:var(--muted);
    padding:0 12px;
    margin:12px 0 7px;
}
.nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    min-height:44px;
    padding:11px 12px;
    border-radius:9px;
    margin:3px 0;
    font-size:13px;
    font-weight:550;
    white-space:nowrap;
    position:relative;
}
.nav-link:hover {
    background:var(--soft);
    color:var(--ink);
}
.nav-link.is-active {
    color:var(--accent);
    background:var(--accent-soft);
    font-weight:700;
}
.nav-link.is-active::before {
    position:absolute;
    left:-7px;
    width:3px;
    height:22px;
    border-radius:0 4px 4px 0;
    background:var(--accent);
    content:"";
}
.sidebar-bottom {
    display:flex;
    align-items:center;
    gap:10px;
    padding:20px 18px;
    border-top:1px solid var(--line);
}
.user-avatar {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:700;
}
.user-copy {
    min-width:0;
    flex:1;
}
.user-copy strong {
    display:block;
    font-size:12px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.user-copy span {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:2px;
}
.logout-button {
    width:30px;
    height:34px;
    color:var(--muted);
    background:transparent;
    border:0;
    font-size:22px;
    border-radius:6px;
}
.logout-button:hover {
    background:var(--soft);
}
.help-layout {
    display:grid;
    grid-template-columns:210px minmax(0, 1fr);
    gap:28px;
    align-items:start;
}
.help-index {
    position:sticky;
    top:24px;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    box-shadow:var(--shadow);
}
.help-index strong {
    margin:0 8px 8px;
    font-size:12px;
}
.help-index a {
    padding:7px 8px;
    border-radius:7px;
    color:var(--muted);
    font-size:12px;
}
.help-index a:hover {
    background:var(--soft);
    color:var(--accent);
}
.help-content {
    display:grid;
    gap:18px;
}
.help-section {
    scroll-margin-top:24px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    box-shadow:var(--shadow);
}
.help-section > p {
    color:var(--muted);
}
.help-section-title {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}
.help-section-title > span {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:12px;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:800;
}
.help-section-title h2,.help-section-title p {
    margin:0;
}
.help-steps,.help-list {
    display:grid;
    gap:10px;
    margin:18px 0;
    padding-left:22px;
    color:var(--muted);
}
.help-steps strong,.help-list strong,.help-section h3 {
    color:var(--ink);
}
.help-section a {
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:2px;
}
.help-callout,.help-result {
    display:grid;
    grid-template-columns:minmax(120px, .35fr) 1fr;
    gap:16px;
    margin:20px 0;
    padding:16px 18px;
    border:1px solid var(--success-line, #a7dfcc);
    border-radius:10px;
    background:var(--success-soft, #edf9f4);
}
.help-callout p,.help-result span {
    margin:0;
    color:var(--muted);
}
.help-callout.warning {
    border-color:var(--warning-line, #ead19c);
    background:var(--warning-soft, #fff8e8);
}
.help-columns {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}
.help-columns > div,.help-checklist p {
    margin:0;
    padding:18px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--soft);
}
.help-columns h3 {
    margin:0 0 8px;
}
.help-columns p {
    margin:0;
    color:var(--muted);
}
.help-note {
    padding-left:14px;
    border-left:3px solid var(--accent);
}
.help-checklist {
    display:grid;
    gap:10px;
}
.app-frame {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.has-sidebar .app-frame {
    margin-left:var(--sidebar-width);
    transition:margin-left .2s;
}
.app-topbar {
    position:sticky;
    top:0;
    z-index:20;
    height:76px;
    padding:0 36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--line);
    background:var(--surface);
}
.topbar-context {
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}
.icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:9px;
    color:var(--muted);
    background:var(--surface);
    flex-shrink:0;
}
.icon-button:hover {
    background:var(--soft);
    color:var(--ink);
}
.workspace-label {
    font-size:12px;
    color:var(--muted);
}
.workspace-label span {
    margin:0 14px;
    color:var(--line);
}
.workspace-label strong {
    color:var(--ink);
    font-weight:550;
}
.theme-control {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    color:var(--muted);
}
.theme-control select {
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    border-radius:8px;
    padding:7px 24px 7px 10px;
    font-size:12px;
}
.app-content {
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:36px;
    flex:1;
    min-width:0;
}
.app-footer {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:0 36px;
    padding:20px 0;
    color:var(--muted);
    font-size:10px;
    border-top:1px solid var(--line);
}
.app-message {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow);
}
.app-message::before {
    display:grid;
    place-items:center;
    width:21px;
    height:21px;
    flex:0 0 21px;
    border-radius:50%;
    color:#fff;
    font-size:13px;
    font-weight:850;
    content:"i";
}
.app-message.is-success { border-color:var(--success-line, #9bd6c2); background:var(--success-soft, #edf9f4); color:var(--success, #087f72); }
.app-message.is-success::before { background:var(--success, #087f72); content:"✓"; }
.app-message.is-error { border-color:var(--danger-line, #f1b8bd); background:var(--danger-soft, #fff1f2); color:var(--danger, #b42330); }
.app-message.is-error::before { background:var(--danger, #b42330); content:"!"; }
.app-message.is-warning { border-color:var(--warning-line, #ead19c); background:var(--warning-soft, #fff8e8); color:var(--warning, #9a6700); }
.app-message.is-warning::before { background:var(--warning, #9a6700); content:"!"; }
.app-message.is-info::before { background:var(--accent); }
.status-pill {
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:4px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--soft);
    color:var(--muted);
    font-size:11px;
    font-weight:750;
    line-height:1;
    white-space:nowrap;
}
.status-pill.is-success { border-color:var(--success-line, #9bd6c2); background:var(--success-soft, #edf9f4); color:var(--success, #087f72); }
.status-pill.is-info { border-color:var(--info-line); background:var(--info-soft); color:var(--info); }
.status-pill.is-warning { border-color:var(--warning-line, #ead19c); background:var(--warning-soft, #fff8e8); color:var(--warning, #9a6700); }
.status-pill.is-quote { border-color:#d8b4fe; background:#f5f3ff; color:#6d28d9; }
.status-pill.is-danger { border-color:var(--danger-line, #f1b8bd); background:var(--danger-soft, #fff1f2); color:var(--danger, #b42330); }
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:100;
    background:var(--surface);
    color:var(--ink);
    padding:12px;
}
.skip-link:focus {
    top:12px;
}
.mobile-close,.sidebar-backdrop {
    display:none;
}
.guest-brand {
    font-size:24px;
    font-weight:750;
    color:var(--ink);
}
.guest-brand span {
    color:var(--accent);
}
.guest-layout .app-content {
    display:grid;
    align-items:center;
    min-height:75vh;
}
.guest-layout .app-content>section {
    width:100%;
    padding:36px;
}
.sidebar-collapsed {
    --sidebar-width:80px;
}
.sidebar-collapsed .brand {
    padding:20px;
}
.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-heading,.sidebar-collapsed .user-copy {
    display:none;
}
.sidebar-collapsed .nav-link {
    justify-content:center;
    padding:12px;
}
.sidebar-collapsed .nav-group {
    margin:12px 0;
}
.sidebar-collapsed .sidebar-bottom {
    flex-direction:column;
    padding:16px;
}
.sidebar-collapsed .sidebar-nav {
    padding:2px 12px;
}
/* Shared component surfaces also cover fragments inserted by HTMX. */
.app-content h1 {
    letter-spacing:-.7px;
    line-height:1.25;
}
.app-content :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
    background-color:var(--surface);
    color:var(--ink);
    border-color:var(--line);
    min-height:40px;
}
.app-content input::placeholder,.app-content textarea::placeholder {
    color:var(--muted);
    opacity:.85;
}
.app-content :is(input,select,textarea):focus {
    outline:2px solid var(--accent);
    outline-offset:1px;
}
.htmx-select2-results {
    top:calc(100% + 4px);
    max-height:var(--htmx-select2-max-height, 15rem);
}
.htmx-select2-opens-above .htmx-select2-results {
    top:auto;
    bottom:calc(100% + 4px);
    margin-top:0;
}
.app-content table {
    font-size:13px;
    width:100%;
}
.app-content th {
    font-size:11px;
    font-weight:650;
    letter-spacing:.3px;
}
.app-content :is(td,th) {
    padding-top:14px;
    padding-bottom:14px;
}
.app-content tbody tr:hover {
    background:var(--soft);
}
.app-content .shadow-sm {
    box-shadow:var(--shadow);
}
.app-content .bg-white,#modal-root .bg-white {
    background-color:var(--surface);
}
.app-content :is(.border-slate-100,.border-slate-200,.border-slate-300),#modal-root :is(.border-slate-100,.border-slate-200,.border-slate-300) {
    border-color:var(--line);
}
.app-content .divide-slate-100>:not([hidden])~:not([hidden]),.app-content .divide-slate-200>:not([hidden])~:not([hidden]) {
    border-color:var(--line);
}
[data-theme=dark] :is(.bg-slate-50,.bg-slate-100,.bg-gray-50,.bg-gray-100,[class~="bg-slate-50/50"],[class~="bg-slate-50/70"],[class~="bg-slate-200/70"]) {
    background-color:var(--soft);
}
[data-theme=dark] :is(.text-slate-900,.text-slate-800,.text-slate-700,.text-gray-900,.text-gray-800,.text-gray-700) {
    color:var(--ink);
}
[data-theme=dark] :is(.text-slate-600,.text-slate-500,.text-slate-400,.text-gray-600,.text-gray-500) {
    color:var(--muted);
}
[data-theme=dark] :is(.hover\:bg-slate-50,.hover\:bg-slate-100,.hover\:bg-gray-50):hover {
    background-color:var(--soft);
}
[data-theme=dark] [class~="hover:bg-slate-50/50"]:hover {
    background-color:var(--soft);
}
[data-theme=dark] :is([class~="border-slate-200/80"]) {
    border-color:var(--line);
}
[data-theme=dark] :is(.bg-emerald-50,.bg-emerald-100,.bg-green-50,.bg-green-100,[class~="bg-emerald-50/30"],[class~="bg-emerald-50/80"],[class~="bg-emerald-100/80"]) {
    background-color:var(--success-soft);
}
[data-theme=dark] :is(.text-emerald-500,.text-emerald-600,.text-emerald-700,.text-emerald-800,.text-emerald-900,.text-green-700) {
    color:var(--success);
}
[data-theme=dark] :is(.border-emerald-100,.border-emerald-200) {
    border-color:var(--success-line);
}
[data-theme=dark] :is(.hover\:text-emerald-700):hover {
    color:var(--success);
}
[data-theme=dark] :is([class~="ring-emerald-100"],[class~="ring-emerald-500/20"],[class~="ring-emerald-600/20"]) {
    --tw-ring-color:rgba(119,223,186,.35);
}
[data-theme=dark] :is(.bg-red-50,.bg-red-100,.bg-rose-50,[class~="bg-red-50/80"]) {
    background-color:var(--danger-soft);
}
[data-theme=dark] :is(.text-red-500,.text-red-600,.text-red-700,.text-red-800,.text-rose-800,.text-rose-900) {
    color:var(--danger);
}
[data-theme=dark] :is(.border-red-200,.border-rose-100) {
    border-color:var(--danger-line);
}
[data-theme=dark] :is(.hover\:bg-red-50):hover {
    background-color:var(--danger-soft);
}
[data-theme=dark] :is(.hover\:text-red-700):hover {
    color:var(--danger);
}
[data-theme=dark] :is(.bg-amber-50,.bg-amber-100,.bg-yellow-50,[class~="bg-amber-50/40"],[class~="bg-amber-50/70"]) {
    background-color:var(--warning-soft);
}
[data-theme=dark] :is(.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900,.text-yellow-700) {
    color:var(--warning);
}
[data-theme=dark] :is(.border-amber-100,.border-amber-200,.border-amber-400) {
    border-color:var(--warning-line);
}
[data-theme=dark] [class~="ring-amber-600/20"] {
    --tw-ring-color:rgba(246,207,136,.35);
}
[data-theme=dark] :is(.bg-blue-50,.bg-blue-100,.bg-indigo-50,.bg-sky-50,.bg-sky-100,[class~="bg-sky-50/70"]) {
    background-color:var(--info-soft);
}
[data-theme=dark] :is(.text-blue-600,.text-blue-700,.text-blue-800,.text-indigo-600,.text-indigo-700,.text-sky-600,.text-sky-700,.text-sky-800,.text-sky-900) {
    color:var(--info);
}
[data-theme=dark] :is(.border-blue-100,.border-blue-200,.border-sky-100,.border-sky-200,.border-sky-300) {
    border-color:var(--info-line);
}
[data-theme=dark] :is(.hover\:bg-sky-100):hover {
    background-color:var(--info-soft);
}
[data-theme=dark] :is([class~="ring-sky-600/20"]) {
    --tw-ring-color:rgba(160,201,255,.35);
}
[data-theme=dark] :is(.bg-violet-50,.bg-violet-100) {
    background-color:var(--quote-soft);
}
[data-theme=dark] :is(.text-violet-700,.text-violet-800,.text-violet-900) {
    color:var(--quote);
}
[data-theme=dark] :is(.border-violet-200,.border-violet-300) {
    border-color:var(--quote-line);
}
[data-theme=dark] :is(.hover\:bg-violet-100):hover {
    background-color:#463461;
}
[data-theme=dark] #modal-root :is(input,select,textarea) {
    background:var(--surface);
    color:var(--ink);
    border-color:var(--line);
}
.dashboard-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    font-weight:700;
    color:var(--accent);
    margin:0 0 8px;
}
.dashboard-heading h1 {
    font-size:30px;
    font-weight:700;
    margin:0 0 8px;
}
.dashboard-heading p:not(.eyebrow) {
    color:var(--muted);
    margin:0;
    font-size:13px;
}
.button-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:9px;
    padding:11px 17px;
    background:#087f72;
    color:white;
    font-size:12px;
    font-weight:650;
    white-space:nowrap;
    box-shadow:0 3px 7px #087f7218;
}
.button-primary:hover {
    background:#076c61;
}
.welcome-panel {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:32px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:30px;
    margin-bottom:32px;
    box-shadow:var(--shadow);
}
.welcome-panel h2 {
    font-size:22px;
    font-weight:650;
    letter-spacing:-.5px;
    margin:0 0 10px;
}
.welcome-panel p {
    font-size:13px;
    color:var(--muted);
    line-height:1.8;
    max-width:480px;
}
.welcome-links {
    display:flex;
    gap:20px;
    margin-top:22px;
    flex-wrap:wrap;
}
.text-link {
    color:var(--accent);
    font-size:12px;
    font-weight:650;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.workflow {
    border-left:1px solid var(--line);
    padding-left:30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:17px;
}
.workflow-item {
    display:flex;
    align-items:center;
    gap:13px;
}
.step-number {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:var(--accent-soft);
    font-size:11px;
    color:var(--accent);
    font-weight:700;
    flex-shrink:0;
}
.workflow-item strong {
    font-size:12px;
    display:block;
    font-weight:600;
}
.workflow-item small {
    color:var(--muted);
    font-size:11px;
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 0 15px;
}
.section-heading h2 {
    font-size:16px;
    font-weight:650;
    letter-spacing:-.3px;
}
.section-heading span {
    font-size:11px;
    color:var(--muted);
}
.shortcut-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.shortcut-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:relative;
    padding:23px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow);
}
.shortcut-card:hover {
    border-color:var(--accent);
    box-shadow:0 6px 20px #087f7210;
}
.shortcut-icon {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--soft);
    color:var(--accent);
    margin-bottom:19px;
}
.shortcut-card h3 {
    font-size:14px;
    font-weight:650;
    margin-bottom:7px;
}
.shortcut-card p {
    font-size:12px;
    line-height:1.7;
    color:var(--muted);
    margin:0;
    max-width:240px;
}
.shortcut-arrow {
    position:absolute;
    right:21px;
    top:27px;
    color:var(--muted);
}
.dashboard-note {
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 20px;
    margin-top:24px;
    color:var(--muted);
    font-size:12px;
}
.dashboard-note .ui-icon {
    color:var(--accent);
}
@media(min-width:1024px) {
    .sidebar-collapsed .nav-link .nav-label {
        display:block;
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%);
    }
}
@media(max-width:1279px) {
    .workspace-label {
        font-size:11px;
    }
    .app-content {
        padding:28px;
    }
    .app-topbar {
        padding:0 28px;
    }
    .shortcut-grid {
        gap:12px;
    }
    .shortcut-card {
        padding:20px;
    }
}
@media(max-width:1023px) {
    :root,.sidebar-collapsed {
        --sidebar-width:260px;
    }
    .has-sidebar .app-frame {
        margin-left:0;
    }
    .app-sidebar {
        transform:translateX(-100%);
        z-index:60;
    }
    .sidebar-open .app-sidebar {
        transform:translateX(0);
    }
    .sidebar-open {
        overflow:hidden;
    }
    .sidebar-backdrop:not([hidden]) {
        display:block;
        position:fixed;
        inset:0;
        z-index:55;
        border:0;
        background:#0c172c80;
        backdrop-filter:blur(3px);
    }
    .mobile-close {
        display:flex;
        position:absolute;
        right:10px;
        top:24px;
        width:28px;
        height:32px;
    }
    .sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-heading,.sidebar-collapsed .user-copy {
        display:block;
    }
    .sidebar-collapsed .nav-link {
        justify-content:flex-start;
    }
    .sidebar-collapsed .sidebar-bottom {
        flex-direction:row;
    }
    .sidebar-collapsed .nav-group {
        margin-bottom:19px;
    }
    .brand {
        padding-left:18px;
    }
    .brand-copy {
        max-width:160px;
    }
    .brand-copy small {
        font-size:9px;
    }
    .help-layout {
        grid-template-columns:1fr;
    }
    .help-index {
        position:static;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .help-index strong {
        grid-column:1/-1;
    }
}
@media(max-width:639px) {
    .app-content {
        padding:24px 16px;
    }
    .app-topbar {
        height:66px;
        padding:0 16px;
    }
    .workspace-label {
        display:none;
    }
    .theme-control>span {
        display:none;
    }
    .app-footer {
        margin:0 16px;
    }
    .dashboard-heading {
        align-items:flex-start;
        flex-direction:column;
    }
    .dashboard-heading h1 {
        font-size:26px;
    }
    .welcome-panel {
        grid-template-columns:1fr;
        padding:22px;
        gap:23px;
    }
    .workflow {
        border-left:0;
        border-top:1px solid var(--line);
        padding:20px 0 0;
    }
    .shortcut-grid {
        grid-template-columns:1fr;
    }
    .shortcut-card {
        padding:20px 20px 20px 77px;
        min-height:110px;
    }
    .shortcut-icon {
        position:absolute;
        left:20px;
        top:22px;
    }
    .help-index {
        grid-template-columns:1fr 1fr;
    }
    .help-section {
        padding:21px 18px;
    }
    .help-columns,.help-callout,.help-result {
        grid-template-columns:1fr;
    }
    .shortcut-arrow {
        display:none;
    }
    .section-heading span {
        display:none;
    }
    .dashboard-note {
        align-items:flex-start;
    }
    .app-content>.flex.items-center.justify-between {
        flex-wrap:wrap;
    }
    .app-content .min-w-64 {
        min-width:0;
        width:100%;
    }
    .app-content table {
        min-width:580px;
    }
    .app-content .overflow-hidden:has(>table) {
        overflow-x:auto;
    }
    .guest-layout .app-content>section {
        padding:24px;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        transition:none!important;
        animation:none!important;
        scroll-behavior:auto!important;
    }
}
@media print {
    .app-sidebar,.app-topbar,.app-footer,.skip-link {
        display:none!important;
    }
    .has-sidebar .app-frame {
        margin:0;
    }
    .app-content {
        padding:0;
    }
    :root {
        --canvas:white;
        --surface:white;
        --ink:black;
        --muted:#444;
        --line:#ddd;
    }
}

@media (max-width: 639px) {
    .app-content form.flex > .flex-1 {
        flex-basis: 100%;
    }
    .app-content td[colspan] {
        text-align: left;
    }
}

/* Keep table semantics and native detail links while extending the pointer target. */
[data-clickable-row] { cursor: pointer; transition: background-color .15s; }
[data-clickable-row]:hover, [data-clickable-row]:focus-within { background-color: var(--accent-soft) !important; }
.product-results-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 20px 0 12px; font-size: 11px; color: var(--muted); }
.product-results-heading strong { color: var(--ink); }
.product-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.product-result { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.product-result:hover { border-color: var(--accent); box-shadow: 0 4px 16px #087f7214; }
.product-result-heading { display: flex; align-items: center; gap: 12px; }
.product-search-symbol { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.product-result-name { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.product-result-name strong { display: block; font-size: 14px; }
.product-result-name > span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.product-result-arrow { color: var(--muted); }
.product-result-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; font-size: 11px; color: var(--muted); }
.presentation-badge { border-radius: 6px; padding: 4px 9px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.product-sku { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.product-result-stock { flex: 1; margin-bottom: 16px; }
.product-result-action { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 650; color: var(--accent); }
.product-search-note { margin: 14px 0; font-size: 11px; line-height: 1.7; color: var(--muted); }
.product-search-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: var(--canvas); }
.product-search-empty strong { font-size: 13px; color: var(--ink); }
.product-search-empty p { font-size: 12px; line-height: 1.8; color: var(--muted); }