/* Admin shell and admin page modules. Depends on tokens.css + kit.css. */
:root { --sb-w: 16.5rem; --tb-h: 4rem; --content-pad: var(--space-6); }
[data-sidebar="collapsed"] { --sb-w: 4.75rem; }
[data-sidebar="compact"] { --sb-w: 13.5rem; }

/* ---------- Shell grid ---------- */
.app { position: relative; display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-block-size: 100dvh; transition: grid-template-columns var(--k-dur-md) var(--k-ease-em); }
/* Sidebar column background for the full page height (the aside itself is sticky and viewport-high). */
.app::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--sb-w); background: var(--k-surface); border-inline-end: var(--style-border-width-container) solid var(--k-border); pointer-events: none; transition: inline-size var(--k-dur-md) var(--k-ease-em); }
[data-style="material"] .app::before, [data-style="neumorphic"] .app::before { border-inline-end: 0; }
@media (max-width: 900px) { .app::before { display: none; } }
@media (min-width: 901px) { [data-layout="horizontal"] .app::before { display: none; } }
.app-main { min-inline-size: 0; display: flex; flex-direction: column; }
.app-content { flex: 1; padding: var(--content-pad); inline-size: 100%; max-inline-size: 100rem; margin-inline: auto; }
.app-footer { padding: var(--space-4) var(--content-pad); font-size: var(--font-size-xs); color: var(--k-muted); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; border-block-start: 1px solid var(--k-divider); }
.app-footer a { color: inherit; }

/* ---------- Sidebar ---------- */
.app-sidebar { position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column; background: var(--k-surface); border-inline-end: var(--style-border-width-container) solid var(--k-border); overflow: hidden auto; scrollbar-width: thin; z-index: 35; }
[data-style="material"] .app-sidebar { border-inline-end: 0; background: var(--k-surface); }
[data-style="neumorphic"] .app-sidebar { box-shadow: var(--style-elevation-1); border-inline-end: 0; }
.sidebar-brand { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tb-h); padding-inline: var(--space-4); flex: none; }
.sidebar-brand .logo { gap: var(--space-3); }
.sidebar-brand .logo-text small { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--k-muted); letter-spacing: 0; }
.sidebar-close { margin-inline-start: auto; display: none; }
.sidebar-nav { flex: 1; padding: var(--space-2) var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.nav-section { padding: var(--space-4) var(--space-3) var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-muted); white-space: nowrap; overflow: hidden; }
.nav-link, .nav-group > summary { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 2.625rem; padding-inline: var(--space-3); border-radius: var(--style-shape-control); color: var(--k-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; transition: background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease); }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-link .icon, .nav-group > summary .icon { color: var(--k-muted); transition: color var(--k-dur) var(--k-ease); }
.nav-link:hover, .nav-group > summary:hover { background: var(--k-hover); color: var(--k-text); }
.nav-link:hover .icon, .nav-group > summary:hover .icon { color: var(--k-text); }
.nav-link[aria-current="page"] { background: var(--k-tint); color: var(--k-primary); font-weight: var(--font-weight-bold); }
.nav-link[aria-current="page"] .icon { color: var(--k-primary); }
.nav-link[aria-current="page"]::before { content: ''; position: absolute; inset-inline-start: calc(-1 * var(--space-3)); inset-block: 0.5rem; inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--k-primary); }
[dir="rtl"] .nav-link[aria-current="page"]::before { border-radius: 3px 0 0 3px; }
[data-style="material"] .nav-link[aria-current="page"] { background: var(--k-tint-strong); border-radius: var(--style-radius-full); }
[data-style="material"] .nav-link[aria-current="page"]::before { display: none; }
[data-style="neumorphic"] .nav-link[aria-current="page"] { box-shadow: var(--style-elevation-inset); background: transparent; }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { margin-inline-start: auto; }
.nav-group > summary::after { content: ''; margin-inline-start: auto; inline-size: 1rem; block-size: 1rem; flex: none; background: currentColor; opacity: 0.6; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat; transition: transform var(--k-dur-md) var(--k-ease-em); }
.nav-group[open] > summary::after { transform: rotate(180deg); }
.nav-group[open] > summary { color: var(--k-text); }
.nav-sub { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) 0 var(--space-2) 2.65rem; }
.nav-sub::before { content: ''; position: absolute; inset-inline-start: 1.3rem; inset-block: var(--space-2) var(--space-3); inline-size: 1px; background: var(--k-divider); }
.nav-sub .nav-link { min-block-size: 2.25rem; padding-inline: var(--space-3); font-weight: var(--font-weight-regular); }
.nav-sub .nav-link::before { display: none; }
.nav-sub .nav-link[aria-current="page"] { font-weight: var(--font-weight-bold); }
.sidebar-footer { padding: var(--space-3); border-block-start: 1px solid var(--k-divider); display: flex; flex-direction: column; gap: var(--space-3); }
.sidebar-upgrade { padding: var(--space-4); border-radius: var(--style-shape-container); background: var(--k-gradient-soft); border: 1px solid var(--k-border); font-size: var(--font-size-sm); }
.sidebar-upgrade .progress { margin-block: var(--space-2); }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--style-shape-control); color: inherit; text-decoration: none; min-inline-size: 0; }
.sidebar-user:hover { background: var(--k-hover); }
.sidebar-user .identity-name, .sidebar-user .identity-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .identity-name { font-size: var(--font-size-sm); }
.sidebar-user > div { min-inline-size: 0; flex: 1; }

/* Collapsed sidebar: icons only, CSS tooltips, badges become dots. */
[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding-inline: 0; }
[data-sidebar="collapsed"] .sidebar-brand .logo-text, [data-sidebar="collapsed"] .nav-label, [data-sidebar="collapsed"] .nav-badge, [data-sidebar="collapsed"] .nav-sub, [data-sidebar="collapsed"] .nav-group > summary::after, [data-sidebar="collapsed"] .sidebar-upgrade, [data-sidebar="collapsed"] .sidebar-user > div, [data-sidebar="collapsed"] .sidebar-user > .icon { display: none; }
[data-sidebar="collapsed"] .nav-section { block-size: 1px; padding: 0; margin: var(--space-3) var(--space-2); background: var(--k-divider); font-size: 0; }
[data-sidebar="collapsed"] .nav-link, [data-sidebar="collapsed"] .nav-group > summary { justify-content: center; padding-inline: 0; }
[data-sidebar="collapsed"] .nav-link .nav-badge-dot { display: block; position: absolute; inset-block-start: 0.45rem; inset-inline-end: 0.55rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--semantic-chart-negative); }
[data-sidebar="collapsed"] .sidebar-user { justify-content: center; }
[data-sidebar="collapsed"] .nav-link::after, [data-sidebar="collapsed"] .nav-group > summary::after { content: attr(data-tooltip-collapsed); position: absolute; inset-inline-start: calc(100% + var(--space-3)); inset-block-start: 50%; transform: translateY(-50%); padding: var(--space-1) var(--space-2); mask: none; background: var(--style-toast-bg); color: var(--style-toast-fg); font-size: var(--font-size-xs); border-radius: var(--style-radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; z-index: 60; transition: opacity var(--k-dur) var(--k-ease); inline-size: auto; block-size: auto; }
[data-sidebar="collapsed"] .nav-group > summary::after { content: attr(data-tooltip-collapsed); }
[data-sidebar="collapsed"] .nav-link:hover::after, [data-sidebar="collapsed"] .nav-link:focus-visible::after, [data-sidebar="collapsed"] .nav-group > summary:hover::after { opacity: 1; }
[data-sidebar="collapsed"] .nav-group[open] > .nav-sub { display: flex; padding-inline-start: 0; }
[data-sidebar="collapsed"] .nav-group[open] > .nav-sub::before { display: none; }
[data-sidebar="collapsed"] .nav-group[open] > .nav-sub .nav-link .nav-label { display: none; }
[data-sidebar="compact"] { --font-nav: var(--font-size-xs); }
[data-sidebar="compact"] .nav-link, [data-sidebar="compact"] .nav-group > summary { min-block-size: 2.25rem; font-size: var(--font-size-xs); gap: var(--space-2); }
[data-sidebar="compact"] .nav-link .icon, [data-sidebar="compact"] .nav-group > summary .icon { inline-size: 1.1rem; block-size: 1.1rem; }
[data-sidebar="compact"] .sidebar-upgrade { display: none; }

/* ---------- Topbar ---------- */
.app-topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tb-h); padding-inline: var(--content-pad); background: color-mix(in srgb, var(--k-page) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end: 1px solid var(--k-border); }
[data-style="neumorphic"] .app-topbar { border-block-end: 0; }
.topbar-brand { display: none; }
.topbar-search { display: inline-flex; align-items: center; gap: var(--space-3); inline-size: min(22rem, 100%); min-block-size: var(--k-ctl-h-sm); padding-inline: var(--space-3) var(--space-2); border: var(--style-field-border-width) solid var(--k-border); border-radius: var(--style-radius-full); background: var(--style-surface-field); color: var(--k-muted); font-size: var(--font-size-sm); text-align: start; cursor: text; box-shadow: var(--style-field-shadow); transition: border-color var(--k-dur) var(--k-ease); }
.topbar-search:hover { border-color: var(--k-border-strong); }
.topbar-search .kbd { margin-inline-start: auto; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-1); }
.topbar-actions .btn-icon { position: relative; color: var(--k-muted); }
.topbar-actions .btn-icon:hover { color: var(--k-text); }
.topbar-actions .dot { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--semantic-chart-negative); box-shadow: 0 0 0 2px var(--k-page); }
.topbar-actions .divider-v { block-size: 1.5rem; align-self: center; margin-inline: var(--space-2); }
.topbar-user { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--k-ctl-h-sm); padding: 0 var(--space-2) 0 var(--space-1); border: 0; border-radius: var(--style-radius-full); background: transparent; color: var(--k-text); }
.topbar-user:hover { background: var(--k-hover); }
.topbar-user .identity-name { font-size: var(--font-size-sm); }
.notif-menu { inline-size: min(24rem, calc(100vw - 2rem)); padding: 0; }
.notif-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-block-end: 1px solid var(--k-divider); }
.notif-list { max-block-size: 24rem; overflow: auto; }
.notif-item { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; font-size: var(--font-size-sm); border-radius: 0; }
.notif-item:hover { background: var(--k-hover); }
.notif-item.is-unread { background: color-mix(in srgb, var(--k-primary) 5%, transparent); }
.notif-item.is-unread .notif-title::after { content: ''; display: inline-block; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-start: var(--space-2); border-radius: 50%; background: var(--k-primary); vertical-align: middle; }
.notif-title { font-weight: var(--font-weight-medium); }
.notif-foot { padding: var(--space-2); border-block-start: 1px solid var(--k-divider); text-align: center; }
.lang-menu { min-inline-size: 11rem; }
.lang-menu .menu-item[aria-pressed="true"] { background: var(--k-tint); color: var(--k-primary); font-weight: var(--font-weight-bold); }

/* ---------- Horizontal menu layout ---------- */
@media (min-width: 901px) {
  [data-layout="horizontal"] .app { grid-template-columns: minmax(0, 1fr); }
  [data-layout="horizontal"] .app-sidebar { position: sticky; inset-block-start: var(--tb-h); block-size: auto; flex-direction: row; align-items: center; gap: var(--space-1); padding: 0 var(--content-pad); border-inline-end: 0; border-block-end: 1px solid var(--k-border); overflow: visible; order: 1; z-index: 29; }
  [data-layout="horizontal"] .app-topbar { order: 0; }
  [data-layout="horizontal"] .app-main { display: contents; }
  [data-layout="horizontal"] .app-content { order: 2; }
  [data-layout="horizontal"] .app-footer { order: 3; }
  [data-layout="horizontal"] .sidebar-brand, [data-layout="horizontal"] .sidebar-footer, [data-layout="horizontal"] .nav-section, [data-layout="horizontal"] [data-sidebar-toggle] { display: none; }
  [data-layout="horizontal"] .topbar-brand { display: inline-flex; margin-inline-end: var(--space-4); }
  [data-layout="horizontal"] .sidebar-nav { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--space-1) 0; gap: var(--space-1); }
  [data-layout="horizontal"] .nav-link, [data-layout="horizontal"] .nav-group > summary { min-block-size: 2.5rem; }
  [data-layout="horizontal"] .nav-link[aria-current="page"]::before { display: none; }
  [data-layout="horizontal"] .nav-group { position: relative; }
  [data-layout="horizontal"] .nav-group .nav-sub { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; min-inline-size: 14rem; padding: var(--space-2); background: var(--k-surface-high); border: var(--style-border-width-container) solid var(--k-border); border-radius: var(--style-shape-container); box-shadow: var(--style-elevation-3); z-index: 40; }
  [data-layout="horizontal"] .nav-group .nav-sub::before { display: none; }
  [data-layout="horizontal"] .nav-group .nav-sub .nav-link { min-block-size: 2.5rem; }
  [data-layout="horizontal"] .nav-link .nav-badge { margin-inline-start: var(--space-1); }
}

/* ---------- Mobile: off-canvas sidebar ---------- */
.app-backdrop { position: fixed; inset: 0; z-index: 34; background: var(--k-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--k-dur-md) var(--k-ease); }
@media (max-width: 900px) {
  :root { --content-pad: var(--space-4); }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(18rem, 86vw); transform: translateX(-100%); transition: transform var(--k-dur-md) var(--k-ease-em); box-shadow: none; }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  [data-sidebar-open] .app-sidebar { transform: none; box-shadow: var(--style-elevation-3); }
  [data-sidebar-open] .app-backdrop { opacity: 1; pointer-events: auto; }
  [data-sidebar="collapsed"] .nav-label, [data-sidebar="collapsed"] .nav-badge, [data-sidebar="collapsed"] .sidebar-brand .logo-text, [data-sidebar="collapsed"] .sidebar-user > div, [data-sidebar="collapsed"] .nav-group > summary::after, [data-sidebar="collapsed"] .nav-sub { display: revert; }
  [data-sidebar="collapsed"] .nav-sub { display: flex; }
  [data-sidebar="collapsed"] .nav-link::after { display: none; }
  [data-sidebar="collapsed"] .nav-link, [data-sidebar="collapsed"] .nav-group > summary { justify-content: flex-start; padding-inline: var(--space-3); }
  [data-sidebar="collapsed"] .nav-section { block-size: auto; padding: var(--space-4) var(--space-3) var(--space-1); margin: 0; background: none; font-size: var(--font-size-xs); }
  .sidebar-close { display: inline-flex; }
  [data-sidebar-toggle] { display: none; }
  .topbar-search { inline-size: auto; flex: 1; }
  .topbar-search .search-text { display: none; }
  .topbar-user .identity-name, .topbar-user > .icon { display: none; }
  .topbar-actions .divider-v { display: none; }
}
@media (max-width: 640px) {
  .topbar-search { inline-size: var(--k-ctl-h-sm); flex: none; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .topbar-search .kbd { display: none; }
}

/* ---------- Page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); }
.page-title { font-size: var(--font-size-2xl); letter-spacing: -0.02em; }
.page-sub { margin-block-start: var(--space-1); color: var(--k-muted); font-size: var(--font-size-sm); }
.page-header .breadcrumb { margin-block-end: var(--space-2); }
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 640px) {
  .page-header > div:first-child, .page-actions { inline-size: 100%; }
  .page-actions .seg { flex: 1 1 100%; }
  .page-actions .seg > button { flex: 1; justify-content: center; }
  .page-actions > .btn, .page-actions > .dropdown { flex: 1 1 auto; }
  .page-actions > .btn { justify-content: center; }
}
.section-title { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-6) var(--space-3); font-size: var(--font-size-lg); }

/* ---------- Customizer drawer ---------- */
.customizer { inline-size: min(22rem, 100vw); }
.customizer .drawer-body { gap: var(--space-6); }
.cz-group { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.cz-legend { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-muted); margin-block-end: var(--space-2); padding: 0; }
.cz-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.cz-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border: var(--style-border-width-control) solid var(--k-border); border-radius: var(--style-shape-container); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: center; cursor: pointer; transition: border-color var(--k-dur) var(--k-ease), background var(--k-dur) var(--k-ease); }
.cz-option:hover { border-color: var(--k-border-strong); }
.cz-option input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cz-option:has(input:checked) { border-color: var(--k-primary); background: var(--k-tint); color: var(--k-primary); box-shadow: inset 0 0 0 1px var(--k-primary); }
.cz-option:has(input:focus-visible) { outline: var(--style-focus-ring-width) solid var(--style-focus-ring-color); outline-offset: var(--style-focus-ring-offset); }
.cz-swatch { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--style-shape-control); background: var(--style-surface-control); color: var(--k-muted); }
.cz-option:has(input:checked) .cz-swatch { background: var(--k-primary); color: var(--k-on-primary); }
.cz-swatch[data-swatch="brand:studio"] { background: var(--semantic-chart-1); }
.cz-swatch[data-swatch^="brand:"] { border-radius: 50%; inline-size: 1.75rem; block-size: 1.75rem; margin-block: 0.25rem; }
.customizer-fab { position: fixed; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); z-index: 60; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border: 0; border-radius: 50%; background: var(--k-primary); color: var(--k-on-primary); box-shadow: var(--style-elevation-3); cursor: pointer; transition: transform var(--k-dur-md) var(--k-ease-em); }
.customizer-fab:hover { transform: scale(1.06) rotate(-8deg); }
.customizer-fab .icon { inline-size: 1.4rem; block-size: 1.4rem; }

/* ---------- Command palette ---------- */
.palette { inline-size: min(38rem, calc(100vw - 2 * var(--space-4))); margin-block-start: min(12vh, 8rem); padding: 0; }
.palette-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--k-divider); color: var(--k-muted); }
.palette-input { flex: 1; min-inline-size: 0; border: 0; background: transparent; font-size: var(--font-size-lg); color: var(--k-text); outline: none; }
.palette-input::placeholder { color: var(--k-muted); }
.palette-list { max-block-size: 50vh; overflow: auto; padding: var(--space-2); }
.palette-group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-muted); }
.palette-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-block-size: 2.75rem; border-radius: var(--style-shape-control); font-size: var(--font-size-sm); cursor: pointer; }
.palette-item svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--k-muted); flex: none; }
.palette-item[aria-selected="true"] { background: var(--k-tint); color: var(--k-primary); }
.palette-item[aria-selected="true"] svg { color: inherit; }
.palette-empty { display: grid; place-items: center; gap: var(--space-2); padding: var(--space-8); color: var(--k-muted); font-size: var(--font-size-sm); }
.palette-foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--k-divider); font-size: var(--font-size-xs); color: var(--k-muted); }
.palette-foot span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Dashboard modules ---------- */
.kpi-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.kpi { padding: var(--space-4) var(--space-6); display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: start; }
.kpi .stat-label { grid-column: 1; }
.kpi .icon-box { grid-column: 2; grid-row: 1 / span 2; }
.kpi .stat-value { grid-column: 1; }
.kpi .kpi-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--k-muted); margin-block-start: var(--space-1); }
.kpi .sparkline { grid-column: 1 / -1; block-size: 2.75rem; margin-block-start: var(--space-2); }
.kpi-compact { padding: var(--space-4); }
.kpi-hero { background: var(--k-gradient-brand); color: var(--k-on-primary); border-color: transparent; }
.kpi-hero .stat-label, .kpi-hero .kpi-foot { color: color-mix(in srgb, var(--k-on-primary) 80%, transparent); }
.kpi-hero .icon-box { background: color-mix(in srgb, var(--k-on-primary) 18%, transparent); color: var(--k-on-primary); }
.kpi-hero .delta { background: color-mix(in srgb, var(--k-on-primary) 20%, transparent); color: var(--k-on-primary); }
.kpi-hero .chart .line { stroke: var(--k-on-primary); }
.kpi-hero .chart .area { fill: var(--k-on-primary); }
.chart-card .card-body { padding-block-start: var(--space-2); }
.chart-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.realtime { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.realtime .status-dot { color: var(--semantic-chart-positive); }
.rank { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--style-surface-control); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--k-muted); flex: none; }
.rank[data-rank="1"] { background: var(--semantic-tint-4-bg); color: var(--semantic-tint-4-fg); }
.rank[data-rank="2"] { background: var(--semantic-tint-1-bg); color: var(--semantic-tint-1-fg); }
.rank[data-rank="3"] { background: var(--semantic-tint-3-bg); color: var(--semantic-tint-3-fg); }
.product-thumb { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--style-shape-control); background: var(--style-surface-control); color: var(--k-muted); flex: none; }
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); gap: var(--space-3); overflow-x: auto; padding-block-end: var(--space-2); }
.pipeline-stage { padding: var(--space-4); border-radius: var(--style-shape-container); background: var(--k-surface-high); border: 1px solid var(--k-border); }
.pipeline-stage .stat-value { font-size: var(--font-size-xl); }
.pipeline-stage .progress { margin-block-start: var(--space-3); }
.task { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; }
.task + .task { border-block-start: 1px solid var(--k-divider); }
.task .check { margin-block-start: 0.1rem; }
.task.is-done .task-title { text-decoration: line-through; color: var(--k-muted); }
.task-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.task-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--k-muted); margin-block-start: 0.2rem; }
.leader { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.leader .progress { grid-column: 1 / -1; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: var(--space-4); overflow-x: auto; padding-block-end: var(--space-3); align-items: start; scroll-snap-type: x proximity; }
.kanban-col { display: flex; flex-direction: column; max-block-size: calc(100dvh - var(--tb-h) - 11rem); min-block-size: 16rem; background: color-mix(in srgb, var(--k-text) 3%, var(--k-page)); border: 1px solid var(--k-border); border-radius: var(--style-shape-container); scroll-snap-align: start; transition: background var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease); }
[data-style="neumorphic"] .kanban-col { background: var(--k-page); box-shadow: var(--style-elevation-inset); border: 0; }
.kanban-col.is-over { background: var(--k-tint); box-shadow: inset 0 0 0 2px var(--k-primary); }
.kanban-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.kanban-title { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--space-2); }
.kanban-title::before { content: ''; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--col, var(--k-primary)); }
.kanban-count { min-inline-size: 1.5rem; }
.kanban-list { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-3) var(--space-3); overflow-y: auto; min-block-size: 6rem; }
.kanban-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--k-surface); border: var(--style-border-width-container) solid var(--k-border); border-radius: var(--style-shape-container); box-shadow: var(--style-elevation-1); cursor: grab; transition: box-shadow var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease); }
.kanban-card:hover { box-shadow: var(--style-elevation-2); }
.kanban-card.is-dragging { opacity: 0.5; transform: rotate(2deg); }
.kanban-card.is-grabbed { outline: var(--style-focus-ring-width) solid var(--style-focus-ring-color); outline-offset: 2px; box-shadow: var(--style-elevation-3); transform: scale(1.02); }
.kanban-card-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--font-line-height-tight); }
.kanban-labels { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.kanban-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--k-muted); }
.kanban-foot .avatar-group { margin-inline-start: auto; }
.kanban-cover { block-size: 5rem; border-radius: var(--style-radius-sm); background: var(--k-gradient-soft); background-image: var(--k-pattern-dot), var(--k-gradient-soft); background-size: 10px 10px, auto; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; border-radius: var(--style-shape-container) var(--style-shape-container) 0 0; }
.kanban-add { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0 var(--space-3) var(--space-3); min-block-size: 2.5rem; border: 1px dashed var(--k-border-strong); border-radius: var(--style-shape-control); background: transparent; color: var(--k-muted); font-size: var(--font-size-sm); }
.kanban-add:hover { background: var(--k-hover); color: var(--k-text); }
.kanban-help { font-size: var(--font-size-xs); color: var(--k-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-columns: 20rem minmax(0, 1fr); block-size: calc(100dvh - var(--tb-h) - 2 * var(--content-pad) - 5.5rem); min-block-size: 32rem; overflow: hidden; }
.chat-side { display: flex; flex-direction: column; border-inline-end: 1px solid var(--k-divider); min-block-size: 0; }
.chat-side .input-group { padding: var(--space-4); border-block-end: 1px solid var(--k-divider); }
.chat-side .input-group .icon { inset-inline-start: calc(var(--space-4) + var(--space-3)); }
.chat-contacts { overflow-y: auto; flex: 1; padding: var(--space-2); }
.chat-contact { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; padding: var(--space-3); border: 0; border-radius: var(--style-shape-control); background: transparent; text-align: start; color: inherit; cursor: pointer; }
.chat-contact:hover { background: var(--k-hover); }
.chat-contact[aria-selected="true"] { background: var(--k-tint); }
.chat-contact .identity-meta { max-inline-size: 11rem; }
.chat-contact time { margin-inline-start: auto; font-size: var(--font-size-xs); color: var(--k-muted); align-self: flex-start; }
.chat-main { display: flex; flex-direction: column; min-block-size: 0; }
.chat-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--k-divider); }
.chat-thread { flex: 1; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); background: color-mix(in srgb, var(--k-text) 2%, var(--k-surface)); }
.chat-day { align-self: center; font-size: var(--font-size-xs); color: var(--k-muted); padding: var(--space-1) var(--space-3); background: var(--k-surface); border-radius: var(--style-radius-full); border: 1px solid var(--k-border); }
.msg { max-inline-size: min(70%, 34rem); display: flex; flex-direction: column; gap: var(--space-1); align-self: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: var(--space-3) var(--space-4); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--style-shape-container); border-start-start-radius: var(--style-radius-sm); font-size: var(--font-size-sm); line-height: var(--font-line-height-normal); box-shadow: var(--style-elevation-1); }
.msg-out .msg-bubble { background: var(--k-primary); color: var(--k-on-primary); border-color: transparent; border-start-start-radius: var(--style-shape-container); border-start-end-radius: var(--style-radius-sm); }
.msg-meta { font-size: var(--font-size-xs); color: var(--k-muted); padding-inline: var(--space-1); }
.msg-attach { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--style-shape-container); font-size: var(--font-size-sm); }
.msg-out .msg-attach { background: color-mix(in srgb, var(--k-on-primary) 15%, var(--k-primary)); color: var(--k-on-primary); border-color: transparent; }
.chat-compose { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--k-divider); }
.chat-compose .input { flex: 1; }
.typing { display: inline-flex; gap: 3px; padding: var(--space-3) var(--space-4); }
.typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--k-muted); animation: k-typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes k-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Mail ---------- */
.mail { display: grid; grid-template-columns: 13rem 22rem minmax(0, 1fr); block-size: calc(100dvh - var(--tb-h) - 2 * var(--content-pad) - 5.5rem); min-block-size: 34rem; overflow: hidden; }
.mail-folders { padding: var(--space-4); border-inline-end: 1px solid var(--k-divider); display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; }
.mail-folders .nav-link { min-block-size: 2.4rem; }
.mail-folders .btn { margin-block-end: var(--space-3); }
.mail-list { display: flex; flex-direction: column; border-inline-end: 1px solid var(--k-divider); min-block-size: 0; }
.mail-list-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--k-divider); }
.mail-items { overflow-y: auto; flex: 1; }
.mail-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-1) var(--space-3); inline-size: 100%; padding: var(--space-3) var(--space-4); border: 0; border-block-end: 1px solid var(--k-divider); background: transparent; text-align: start; color: inherit; cursor: pointer; font-size: var(--font-size-sm); }
.mail-item:hover { background: var(--k-hover); }
.mail-item[aria-selected="true"] { background: var(--k-tint); box-shadow: inset 3px 0 0 var(--k-primary); }
[dir="rtl"] .mail-item[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--k-primary); }
.mail-item .avatar { grid-row: 1 / span 3; }
.mail-item .mail-from { font-weight: var(--font-weight-medium); }
.mail-item.is-unread .mail-from, .mail-item.is-unread .mail-subject { font-weight: var(--font-weight-bold); color: var(--k-text); }
.mail-item time { font-size: var(--font-size-xs); color: var(--k-muted); }
.mail-item .mail-subject { grid-column: 2 / -1; }
.mail-item .mail-snippet { grid-column: 2 / -1; color: var(--k-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-xs); }
.mail-read { display: flex; flex-direction: column; min-block-size: 0; overflow-y: auto; }
.mail-read-head { padding: var(--space-6); border-block-end: 1px solid var(--k-divider); }
.mail-body { padding: var(--space-6); font-size: var(--font-size-sm); line-height: 1.7; max-inline-size: 70ch; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); }
.attachment { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--k-border); border-radius: var(--style-shape-control); font-size: var(--font-size-sm); text-decoration: none; color: inherit; }
.attachment:hover { background: var(--k-hover); }
.mail-reply { margin: 0 var(--space-6) var(--space-6); }

/* ---------- Calendar ---------- */
.cal-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.cal-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cal-month { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); min-inline-size: 11rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-block-start: 1px solid var(--k-divider); border-inline-start: 1px solid var(--k-divider); }
.cal-dow { padding: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-muted); text-align: center; border-inline-end: 1px solid var(--k-divider); border-block-end: 1px solid var(--k-divider); background: color-mix(in srgb, var(--k-text) 3%, var(--k-surface)); }
.cal-day { min-block-size: 7rem; padding: var(--space-2); border-inline-end: 1px solid var(--k-divider); border-block-end: 1px solid var(--k-divider); display: flex; flex-direction: column; gap: 3px; font-size: var(--font-size-xs); }
.cal-day.is-other { color: var(--k-muted); background: color-mix(in srgb, var(--k-text) 2%, transparent); }
.cal-day .d { align-self: flex-start; display: inline-grid; place-items: center; min-inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.cal-day.is-today .d { background: var(--k-primary); color: var(--k-on-primary); font-weight: var(--font-weight-bold); }
.cal-event { display: block; padding: 2px var(--space-2); border-radius: var(--style-radius-sm); background: var(--semantic-tint-1-bg); color: var(--semantic-tint-1-fg); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-inline-start: 3px solid currentColor; text-decoration: none; }
.cal-event[data-tint="2"] { background: var(--semantic-tint-2-bg); color: var(--semantic-tint-2-fg); }
.cal-event[data-tint="3"] { background: var(--semantic-tint-3-bg); color: var(--semantic-tint-3-fg); }
.cal-event[data-tint="4"] { background: var(--semantic-tint-4-bg); color: var(--semantic-tint-4-fg); }
.cal-event[data-tint="5"] { background: var(--semantic-tint-5-bg); color: var(--semantic-tint-5-fg); }
.cal-more { color: var(--k-muted); padding-inline: var(--space-2); }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: var(--font-size-xs); }
.mini-cal span { padding: 0.35rem 0; color: var(--k-muted); font-weight: var(--font-weight-bold); }
.mini-cal b { font-weight: var(--font-weight-regular); padding: 0.35rem 0; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.mini-cal b.is-other { color: var(--k-muted); opacity: 0.6; }
.mini-cal b.is-today { background: var(--k-primary); color: var(--k-on-primary); font-weight: var(--font-weight-bold); }
.mini-cal b.has-event { position: relative; }
.mini-cal b.has-event::after { content: ''; position: absolute; inset-block-end: 2px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--k-primary); }
.upcoming { display: flex; gap: var(--space-3); padding: var(--space-3) 0; }
.upcoming + .upcoming { border-block-start: 1px solid var(--k-divider); }
.upcoming-date { flex: none; inline-size: 3rem; text-align: center; padding: var(--space-1); border-radius: var(--style-shape-control); background: var(--k-tint); color: var(--k-primary); }
.upcoming-date b { display: block; font-size: var(--font-size-lg); line-height: 1.1; }
.upcoming-date small { font-size: var(--font-size-xs); text-transform: uppercase; }
@media (max-width: 1100px) { .cal-layout { grid-template-columns: 1fr; } .cal-day { min-block-size: 5rem; } .cal-event { font-size: 0; padding: 0; block-size: 6px; border-radius: 3px; border: 0; } }

/* ---------- Files ---------- */
.files-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.folder-tile, .file-tile { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--style-border-width-container) solid var(--k-border); border-radius: var(--style-shape-container); background: var(--k-surface); text-decoration: none; color: inherit; transition: box-shadow var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease); }
.folder-tile:hover, .file-tile:hover { box-shadow: var(--style-elevation-2); border-color: var(--k-border-strong); }
.folder-icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--semantic-chart-4); }
.folder-icon svg { inline-size: 100%; block-size: 100%; }
.file-preview { display: grid; place-items: center; block-size: 6rem; border-radius: var(--style-radius-sm); background: var(--k-surface-high); color: var(--k-muted); }
.file-preview[data-kind="img"] { background: var(--k-gradient-soft); color: var(--k-primary); }
.file-preview[data-kind="pdf"] { color: var(--semantic-chart-5); background: var(--semantic-tint-5-bg); }
.file-preview[data-kind="sheet"] { color: var(--semantic-tint-3-fg); background: var(--semantic-tint-3-bg); }
.file-preview[data-kind="doc"] { color: var(--semantic-tint-1-fg); background: var(--semantic-tint-1-bg); }
.file-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: var(--font-size-xs); color: var(--k-muted); }
.files-grid[data-view="list"] { display: flex; flex-direction: column; gap: 0; }
.files-grid[data-view="list"] .file-tile { flex-direction: row; align-items: center; border-radius: 0; border-inline: 0; border-block-start: 0; padding-block: var(--space-2); }
.files-grid[data-view="list"] .file-preview { block-size: 2.5rem; inline-size: 2.5rem; }
.files-grid[data-view="list"] .file-tile > div { flex: 1; }
.storage-bar { display: flex; block-size: 0.6rem; border-radius: var(--style-radius-full); overflow: hidden; background: var(--style-surface-control); }
.storage-bar span { display: block; block-size: 100%; }
@media (max-width: 1100px) { .files-layout { grid-template-columns: 1fr; } }

/* ---------- Profile ---------- */
.profile-cover { block-size: 11rem; border-radius: var(--style-shape-container) var(--style-shape-container) 0 0; background: var(--k-gradient-brand); background-image: var(--k-pattern-grid), var(--k-gradient-brand); background-size: 28px 28px, auto; position: relative; }
.profile-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); padding: 0 var(--space-6) var(--space-6); margin-block-start: -3rem; }
.profile-head .avatar { box-shadow: 0 0 0 4px var(--k-surface); }
.profile-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-inline-start: auto; }
.profile-stats .stat-value { font-size: var(--font-size-xl); }
.info-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
.info-list dt { color: var(--k-muted); display: flex; align-items: center; gap: var(--space-2); }
.info-list dd { margin: 0; font-weight: var(--font-weight-medium); }

/* ---------- Settings ---------- */
.settings-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.settings-layout .tabs-vertical { position: sticky; inset-block-start: calc(var(--tb-h) + var(--space-4)); }
.settings-section + .settings-section { margin-block-start: var(--space-6); }
.settings-row { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); }
.settings-row + .settings-row { border-block-start: 1px solid var(--k-divider); }
.settings-row h4 { font-size: var(--font-size-sm); }
.settings-row p { font-size: var(--font-size-xs); color: var(--k-muted); margin-block-start: 0.2rem; }
.pay-method { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.pay-method + .pay-method { border-block-start: 1px solid var(--k-divider); }
.card-brand { display: grid; place-items: center; inline-size: 3rem; block-size: 2rem; border-radius: var(--style-radius-sm); background: var(--style-surface-control); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.05em; }
.session { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; font-size: var(--font-size-sm); }
.session + .session { border-block-start: 1px solid var(--k-divider); }
.qr { inline-size: 9rem; block-size: 9rem; padding: var(--space-2); background: var(--semantic-bg-surface); border-radius: var(--style-shape-control); border: 1px solid var(--k-border); }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .settings-layout .tabs-vertical { position: static; flex-direction: row; border: 0; border-block-end: 1px solid var(--k-divider); overflow-x: auto; } .settings-layout .tabs-vertical .tab::after { inset: auto var(--space-2) 0; inline-size: auto; block-size: 2px; transform: scaleX(0); } .settings-layout .tabs-vertical .tab[aria-selected="true"]::after { transform: scaleX(1); } .settings-row { grid-template-columns: 1fr; } .chat { grid-template-columns: 1fr; block-size: auto; } .chat-side { display: none; } .mail { grid-template-columns: 1fr; block-size: auto; } .mail-folders, .mail-list { display: none; } }

/* ---------- Invoice ---------- */
.invoice { max-inline-size: 56rem; margin-inline: auto; padding: var(--space-12); }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); }
.invoice-meta { display: grid; grid-template-columns: auto auto; gap: var(--space-1) var(--space-4); font-size: var(--font-size-sm); }
.invoice-meta dt { color: var(--k-muted); }
.invoice-meta dd { margin: 0; font-weight: var(--font-weight-medium); text-align: end; font-variant-numeric: tabular-nums; }
.invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-6); margin-block: var(--space-8); font-size: var(--font-size-sm); }
.invoice-parties h4 { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--k-muted); margin-block-end: var(--space-2); }
.invoice-totals { margin-inline-start: auto; inline-size: min(100%, 20rem); font-size: var(--font-size-sm); }
.invoice-totals div { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.invoice-totals div + div { border-block-start: 1px solid var(--k-divider); }
.invoice-totals .total { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); border-block-start: 2px solid var(--k-text); }
.invoice-stamp { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 2px solid var(--semantic-status-success-fg); color: var(--semantic-status-success-fg); border-radius: var(--style-radius-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-4deg); }
@media (max-width: 640px) { .invoice { padding: var(--space-6); } }
@media print {
  .app-sidebar, .app-topbar, .app-footer, .page-header .page-actions, .customizer-fab, .app-backdrop { display: none !important; }
  .app { display: block; }
  .app-content { padding: 0; max-inline-size: none; }
  .invoice { box-shadow: none; border: 0; padding: 0; max-inline-size: none; }
}

/* ---------- In-app pricing, notifications centre, empty/error pages ---------- */
.notif-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-block-end: 1px solid var(--k-divider); font-size: var(--font-size-sm); }
.notif-row.is-unread { background: color-mix(in srgb, var(--k-primary) 4%, transparent); }
.notif-row .notif-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.errpage { display: grid; place-items: center; text-align: center; gap: var(--space-4); padding: var(--space-12) var(--space-4); min-block-size: 60vh; }
.errpage .code { font-size: clamp(5rem, 18vw, 9rem); line-height: 1; font-weight: var(--font-weight-bold); letter-spacing: -0.06em; background: var(--k-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.errpage .illus { inline-size: min(22rem, 80vw); color: var(--k-primary); }
.errpage p { max-inline-size: 42ch; color: var(--k-muted); }
.errpage .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* ---------- UI kit page ---------- */
.kit-section { scroll-margin-block-start: calc(var(--tb-h) + var(--space-4)); }
.kit-section > h2 { font-size: var(--font-size-xl); margin-block: var(--space-8) var(--space-2); display: flex; align-items: center; gap: var(--space-3); }
.kit-section > p { color: var(--k-muted); font-size: var(--font-size-sm); margin-block-end: var(--space-4); max-inline-size: 70ch; }
.kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.kit-row + .kit-row { margin-block-start: var(--space-4); }
.kit-toc { position: sticky; inset-block-start: calc(var(--tb-h) + var(--space-4)); display: flex; flex-direction: column; gap: 2px; font-size: var(--font-size-sm); }
.kit-toc a { padding: var(--space-1) var(--space-3); color: var(--k-muted); text-decoration: none; border-inline-start: 2px solid var(--k-divider); }
.kit-toc a:hover { color: var(--k-text); border-color: var(--k-border-strong); }
.kit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--space-8); }
.kit-layout > div { min-inline-size: 0; }
@media (max-width: 1100px) { .kit-layout { grid-template-columns: minmax(0, 1fr); } .kit-toc { display: none; } }