/* ══════════════════════════════════════════════════════════════════════════════
   luzokit.css — Shell Styling & LUZO UI System
   ──────────────────────────────────────────────────────────────────────────────
   T2c merge of luzokit.css + luzokit-shell.css · 2026-04-19
   
   This file contains:
     - Shell VISUAL styling (logo, nav, topbar, spotlight, popups, footer)
     - LUZO UI system (lu-* components: buttons, inputs, badges, skeleton, FAB)
     - Spotlight modal (Cmd+K)
     - Context menu
     - Blade body typography & enhanced visor
   
   This file does NOT contain (defined elsewhere):
     - Tokens → lk-tokens.css
     - Grid structure → lk-layout.css
     - Reusable components (blade, form, select, pills) → lk-components.css
     - Mobile overrides → lk-mobile.css
   ══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. FONT SCALE & UTILITIES
═══════════════════════════════════════════════════════════════════════════ */

:root[data-font="sm"] { font-size: 13px; }
:root[data-font="md"] { font-size: 14px; }
:root[data-font="lg"] { font-size: 15px; }

.hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. LOGO
═══════════════════════════════════════════════════════════════════════════ */

.ul0-logo-area   { width: 100%; display: flex; justify-content: center; padding: 6px 0 10px; }
.ul0-logo-mini   { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }

.ul0-logo-full {
  position: absolute; left: 52px; top: 0; height: 52px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; text-decoration: none; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 10;
}
:root:not(.ul-collapsed) .ul0-logo-full { pointer-events: auto; opacity: 1; }

.logo-full-name { font-size: 14px; font-weight: 800; color: var(--tx-base); letter-spacing: -.03em; }
.logo-full-ver  { font-size: 10px; color: var(--tx-muted); }


/* ═══════════════════════════════════════════════════════════════════════════
   3. UL0 RAIL — visual overrides (structure in lk-layout.css)
═══════════════════════════════════════════════════════════════════════════ */

.ul0-btn-bg      { display: none; }
.ul0-btn-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ul0-btn:hover      { background: var(--bg-active); color: var(--c-brand); }
.ul0-btn.ul0-active  { background: var(--bg-active); color: var(--c-brand); }

.ul0-expand-btn {
  width: 40px; height: 36px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; color: var(--tx-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s;
}
.ul0-expand-btn:hover { background: var(--bg-active); color: var(--c-brand); }
.ul0-expand-btn svg   { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s; }
:root:not(.ul-collapsed) .ul0-expand-btn svg { transform: rotate(180deg); }

.ul0-tooltip {
  position: fixed; left: 58px;
  background: var(--lk-bg-card); color: var(--tx-base);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  pointer-events: none; z-index: 9999;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-soft);
  opacity: 0; transition: opacity .12s;
}
.ul0-tooltip.is-visible { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. UL1 PANEL — visual overrides (structure in lk-layout.css)
═══════════════════════════════════════════════════════════════════════════ */

:root.ul-collapsed .ul1-panel { width: 0; opacity: 0; pointer-events: none; }
.ul1-logo-spacer { height: 52px; flex-shrink: 0; }
.ul1-scroll      { scrollbar-width: none; }
.ul1-scroll::-webkit-scrollbar { display: none; }

.ul1-section       { margin-bottom: 12px; }
.ul1-section-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-muted); padding: 0 8px 5px; }

.ul1-item:hover     { background: var(--bg-hover); color: var(--tx-base); }
.ul1-item.is-active { background: var(--bg-active); color: var(--c-brand); font-weight: 650; border-radius: 8px; }
.ul1-item.is-soon   { opacity: .55; cursor: default; }
.ul1-item.is-soon:hover { background: transparent; color: var(--tx-muted); }
:root[data-theme="dark"] .ul1-item:hover,
:root[data-theme="midnight"] .ul1-item:hover { background: rgba(255,255,255,.06); }

.ul1-item-ico     { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; }
.ul1-item-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ul1-item-label   { flex: 1; }

.badge-soon {
  flex-shrink: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-hover); color: var(--tx-muted);
  padding: 2px 6px; border-radius: 999px; margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. TOPBAR — visual overrides
═══════════════════════════════════════════════════════════════════════════ */

.top-sub       { font-size: 11px; color: var(--tx-muted); white-space: nowrap; }
.top-sub strong { color: var(--tx-base); font-weight: 600; }
.top-center    { max-width: 480px; margin: 0 auto; }
.top-date      { font-size: 10.5px; color: var(--tx-muted); white-space: nowrap; }
.top-time      { font-size: 12px; font-weight: 700; color: var(--tx-base); letter-spacing: -.02em; }

.avatar-photo  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. SPOTLIGHT INLINE (topbar search bar)
═══════════════════════════════════════════════════════════════════════════ */

.spotlight     { position: relative; width: 100%; }
.spotlight-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-surface); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 0 10px; height: 34px;
  transition: border-color .15s, box-shadow .15s;
}
.spotlight-bar:focus-within { border-color: var(--lk-brand-border); box-shadow: var(--lk-ring-focus); }
.spotlight-ico     { display: flex; color: var(--tx-muted); flex-shrink: 0; }
.spotlight-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.spotlight-input {
  flex: 1; border: none; background: transparent;
  font-size: 12.5px; color: var(--tx-base); outline: none; font-family: inherit;
}
.spotlight-input::placeholder { color: var(--tx-muted); }
.spotlight-kbd {
  font-size: 10px; color: var(--tx-muted);
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; flex-shrink: 0;
}
.spotlight-drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  max-height: 360px; overflow-y: auto; z-index: var(--z-modal); display: none;
  scrollbar-width: thin; overscroll-behavior: contain;
}
.spotlight-drop.is-open { display: block; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. SPOTLIGHT MODAL (Cmd+K full overlay)
═══════════════════════════════════════════════════════════════════════════ */

.sp-overlay {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .18s, visibility .18s;
  contain: content;
}
.sp-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; }

.sp-modal {
  width: min(560px, 92vw);
  background: var(--bg-card); border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(8px) scale(.97);
  transition: transform .2s cubic-bezier(.22,.68,0,1.12);
  contain: content;
}
.sp-overlay.open .sp-modal { transform: none; }

.sp-modal-bar     { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.sp-modal-bar svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-brand); stroke-width: 2; }
.sp-modal-input   { flex: 1; border: none; background: transparent; outline: none; font-size: 16px; font-weight: 500; color: var(--tx-base); font-family: inherit; }
.sp-modal-input::placeholder { color: var(--tx-muted); font-weight: 400; }
.sp-modal-esc     { font-size: 10px; font-weight: 700; color: var(--tx-muted); background: var(--bg-hover); border: 1px solid var(--border); padding: 2px 7px; border-radius: 5px; font-family: inherit; }

.sp-modal-results { max-height: 360px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 6px 0; }
.sp-modal-results:empty { display: none; }

.sp-grp { padding: 10px 18px 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx-muted); }
.sp-grp:first-child { padding-top: 8px; }

.sp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; margin: 0 4px; border-radius: 10px;
  cursor: pointer; font-family: inherit; border: 1px solid transparent;
  transition: background .08s, border-color .08s;
}
.sp-row:hover { background: var(--bg-hover); }
.sp-row.on    { background: var(--bg-active); color: var(--c-brand); border-color: var(--lk-brand-border); }

.sp-row-ico     { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-hover); border: 1px solid var(--border); display: grid; place-items: center; flex-shrink: 0; transition: background .08s, border-color .08s, color .08s; }
.sp-row-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-row.on .sp-row-ico { background: var(--bg-active); border-color: var(--lk-brand-border); color: var(--c-brand); }

.sp-row-text  { flex: 1; min-width: 0; }
.sp-row-label { font-size: 13px; font-weight: 550; color: var(--tx-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row.on .sp-row-label { color: var(--c-brand); }
.sp-row-hint  { font-size: 10.5px; color: var(--tx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row-tag   { font-size: 10px; color: var(--tx-muted); flex-shrink: 0; margin-left: auto; white-space: nowrap; }
.sp-row-kbd   { font-size: 9px; font-weight: 700; color: var(--tx-muted); background: var(--bg-hover); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; font-family: inherit; flex-shrink: 0; }

.sp-empty     { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--tx-muted); }
.sp-empty svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: .3; stroke: currentColor; stroke-width: 1.5; }

.sp-modal-foot     { padding: 8px 18px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 14px; font-size: 10px; color: var(--tx-muted); }
.sp-modal-foot kbd { font-size: 9px; font-weight: 700; background: var(--bg-hover); border: 1px solid var(--border); padding: 1px 4px; border-radius: 3px; font-family: inherit; }


/* ═══════════════════════════════════════════════════════════════════════════
   8. POPUPS — user, notif, theme, font
═══════════════════════════════════════════════════════════════════════════ */

.pop-anchor { position: relative; }
.user-pop   { min-width: 230px; }
.user-name  { font-size: 14px; font-weight: 700; color: var(--tx-base); }
.user-email { font-size: 11.5px; color: var(--tx-muted); margin-top: 2px; }
.user-role  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; margin-top: 6px; background: var(--bg-active); color: var(--c-brand); display: inline-block; }

/* Theme switcher (expanded, with icons) */
.theme-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border: none;
  background: transparent; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--tx-base); font-family: inherit;
  text-align: left; transition: background .12s;
}
.theme-opt:hover    { background: var(--bg-hover); }
.theme-opt svg      { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; color: var(--tx-muted); }
.theme-opt-chk      { margin-left: auto; font-size: 12px; color: var(--c-brand); font-weight: 700; }

/* Font segmented control */
.font-seg {
  display: flex; gap: 2px; background: var(--bg-hover);
  border-radius: 8px; padding: 2px; margin: 4px 8px;
}
.font-seg button {
  flex: 1; padding: 5px; border: none; background: transparent;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--tx-muted); font-family: inherit; transition: background .12s, color .12s, box-shadow .12s;
}
.font-seg button.is-active,
.font-seg button:hover { background: var(--bg-card); color: var(--c-brand); box-shadow: var(--shadow-sm); }

/* Notif popup */
.nf-pop-wrap    { display: flex; flex-direction: column; }
.nf-pop-header  { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; border-bottom: 1px solid var(--border-soft); }
.nf-pop-htitle  { font-size: 12px; font-weight: 700; color: var(--tx-base); display: flex; align-items: center; gap: 7px; }
.nf-count-pill  { background: var(--c-brand); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
.nf-pop-list    { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; overscroll-behavior: contain; }
.nf-pop-item    { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; background: none; border: none; cursor: pointer; text-align: left; transition: background .12s; width: 100%; border-radius: 8px; font-family: inherit; }
.nf-pop-item:hover { background: var(--bg-active); }
.nf-pop-footer  { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border-soft); }
.nf-pop-act     { flex: 1; padding: 6px 10px; border-radius: 8px; border: none; cursor: pointer; font-size: 11px; font-weight: 600; background: var(--bg-hover); color: var(--tx-muted); transition: background .12s; font-family: inherit; }
.nf-pop-act:hover { background: var(--bg-active); color: var(--tx-base); }
.nf-pop-act--primary { background: var(--c-brand) !important; color: #fff !important; }
.ap-empty { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--tx-muted); }

/* Footer extras */
.footer-sep    { color: var(--tx-line, var(--border-soft)); margin: 0 4px; }
.footer-spacer { flex: 1; }
.footer-powered { font-size: 10px; }
.footer-powered a { color: var(--c-brand); }


/* ═══════════════════════════════════════════════════════════════════════════
   9. BLADE VISUAL OVERRIDES (structure in lk-components.css)
═══════════════════════════════════════════════════════════════════════════ */

.ld-blade-panel {
  border-left: 1.5px solid var(--border-soft);
  box-shadow: -8px 0 32px rgba(15,23,42,.10);
}
.ld-blade-head { gap: 10px; padding: 12px 16px; }
.ld-blade-icon {
  width: 34px; height: 34px; border-radius: 9px;
  font-weight: 800; font-size: 13px;
  border: 1.5px solid var(--border-soft);
}
.ld-blade-titles { flex: 1; min-width: 0; }
.ld-blade-title  { font-size: 13.5px; font-weight: 750; color: var(--tx-base); letter-spacing: -.02em; }
.ld-blade-sub    { font-size: 10.5px; color: var(--tx-muted); margin-top: 1px; }
.ld-blade-acts   { display: flex; align-items: center; gap: 4px; }
.ld-blade-btn {
  width: 30px; height: 30px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-muted); font-family: inherit;
  transition: background .12s, color .12s;
}
.ld-blade-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ld-blade-btn:hover { background: var(--bg-hover); color: var(--tx-base); }
.ld-blade-btn--close:hover { background: var(--lk-red-soft); color: var(--tx-red); }

/* Blade tabs — folder/solapa style with accent halo */
.ld-blade-tabs {
  display: flex; align-items: flex-end; gap: 0;
  padding: 0 14px; border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0; overflow-x: auto; scrollbar-width: none;
}
.ld-blade-tabs::-webkit-scrollbar { display: none; }
.ld-blade-tab {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-width: 70px;
  padding: 7px 14px 8px; margin-bottom: -1px;
  border: 1px solid transparent; border-bottom: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  font-size: 12px; font-weight: 500;
  color: var(--tx-muted); white-space: nowrap; flex-shrink: 0;
  cursor: pointer; background: transparent; font-family: inherit;
  transition: color .15s, background .15s, border-color .15s;
  position: relative;
}
.ld-blade-tab svg { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ld-blade-tab:not(.on):hover { color: var(--tx-base); background: var(--bg-hover); }
.ld-blade-tab.on {
  color: var(--c-brand); font-weight: 650;
  background: var(--bg-active);
  border-color: var(--border-soft);
  border-bottom-color: var(--bg-card);
}
.ld-blade-tab.on svg { color: var(--c-brand); }
.ld-blade-tab-cnt { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: var(--bg-hover); color: var(--tx-muted); line-height: 1.3; }
.ld-blade-tab.on .ld-blade-tab-cnt { background: var(--c-brand); color: #fff; }

/* Blade body override */
.ld-blade-body { padding: 16px 18px 24px; }


/* ═══════════════════════════════════════════════════════════════════════════
   10. BLADE BODY TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════════ */

.ld-blade-body h3 { font-size: 11px; font-weight: 700; color: var(--tx-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ld-blade-body .ld-info-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-blade-body .ld-info-card  { padding: 10px 12px; background: var(--bg-surface); border-radius: 9px; }
.ld-blade-body .ld-info-label { font-size: 9.5px; font-weight: 700; color: var(--tx-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.ld-blade-body .ld-info-value { font-size: 12.5px; font-weight: 600; color: var(--tx-base); }

.ld-blade-body .ld-hero    { display: flex; align-items: center; gap: 12px; padding: 14px 0; margin-bottom: 16px; }
.ld-blade-body .ld-hero-av { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; flex-shrink: 0; }
.ld-blade-body .ld-hero-name { font-size: 15px; font-weight: 800; color: var(--tx-base); letter-spacing: -.02em; }
.ld-blade-body .ld-hero-sub  { font-size: 12px; color: var(--tx-muted); margin-top: 2px; font-family: inherit; }

.ld-blade-body .ld-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ld-blade-body .ld-stat-card { text-align: center; padding: 14px; background: var(--bg-surface); border-radius: 12px; }
.ld-blade-body .ld-stat-val  { font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.ld-blade-body .ld-stat-lbl  { font-size: 9px; color: var(--tx-muted); margin-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }


/* ═══════════════════════════════════════════════════════════════════════════
   11. ENHANCED VISOR (blade hero, data table, footer)
═══════════════════════════════════════════════════════════════════════════ */

.ld-blade-hero       { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.ld-blade-hero-av    { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; flex-shrink: 0; }
.ld-blade-hero-info  { flex: 1; min-width: 0; }
.ld-blade-hero-name  { font-size: 15px; font-weight: 750; color: var(--tx-base); letter-spacing: -.02em; }
.ld-blade-hero-sub   { font-size: 11.5px; color: var(--tx-muted); margin-top: 2px; }
.ld-blade-hero-badges { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

.ld-blade-qacts { display: flex; gap: 6px; flex-shrink: 0; }
.ld-blade-qact  { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); display: grid; place-items: center; color: var(--tx-muted); cursor: pointer; font-family: inherit; transition: border-color .12s, color .12s, background .12s; }
.ld-blade-qact:hover { border-color: var(--lk-brand-border); color: var(--c-brand); background: var(--bg-active); }
.ld-blade-qact svg   { width: 15px; height: 15px; }

.ld-data-table          { width: 100%; border-collapse: collapse; }
.ld-data-table tr       { border-bottom: 1px solid var(--border-soft); }
.ld-data-table tr:last-child { border-bottom: none; }
.ld-data-table td       { padding: 12px 16px; font-size: 13px; vertical-align: middle; }
.ld-data-table td:first-child { font-weight: 600; color: var(--tx-muted); width: 120px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.ld-data-table td:last-child  { color: var(--tx-base); text-align: right; font-weight: 600; }

.ld-blade-foot        { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.ld-blade-foot-spacer { flex: 1; }
.ld-foot-btn          { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--tx-base); transition: border-color .12s, color .12s; font-family: inherit; }
.ld-foot-btn:hover    { border-color: var(--lk-brand-border); color: var(--c-brand); }
.ld-foot-btn svg      { width: 13px; height: 13px; }
.ld-foot-btn--primary  { background: var(--c-brand); color: #fff; border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
.ld-foot-btn--primary:hover { opacity: .9; color: #fff; }
.ld-foot-btn--danger   { color: var(--tx-red); border-color: var(--lk-red-soft); }
.ld-foot-btn--danger:hover { background: var(--lk-red-soft); }


/* ═══════════════════════════════════════════════════════════════════════════
   12. CONTEXT MENU
═══════════════════════════════════════════════════════════════════════════ */

#csCtxMenu {
  position: fixed; z-index: 9600;
  min-width: 200px; max-width: 260px;
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-soft);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 5px; display: none;
  animation: ctx-in .12s ease;
  contain: content;
}
@keyframes ctx-in { from { opacity: 0; transform: scale(.96); } }
#csCtxMenu.open { display: block; }

.cs-ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--tx-base);
  cursor: pointer; font-family: inherit; border: 1px solid transparent;
  transition: background .08s, color .08s, border-color .08s; font-family: inherit;
}
.cs-ctx-item:hover { background: var(--bg-active); color: var(--c-brand); border-color: var(--lk-brand-border); }
.cs-ctx-item svg   { width: 14px; height: 14px; flex-shrink: 0; opacity: .6; }
.cs-ctx-item--red  { color: var(--tx-red); }
.cs-ctx-item--red:hover { background: var(--lk-red-soft); color: var(--tx-red); border-color: color-mix(in srgb, var(--tx-red) 15%, transparent); }
.cs-ctx-sep { height: 1px; background: var(--border-soft); margin: 3px 6px; }


/* ═══════════════════════════════════════════════════════════════════════════
   13. LUZO TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════════ */

.lu-h1     { font-size: 18px; font-weight: 700; color: var(--tx-base); letter-spacing: -.02em; line-height: 1.25; }
.lu-h2     { font-size: 14px; font-weight: 700; color: var(--tx-base); letter-spacing: -.02em; line-height: 1.3; }
.lu-h3     { font-size: 11px; font-weight: 700; color: var(--tx-muted); text-transform: uppercase; letter-spacing: .06em; line-height: 1.4; }
.lu-h3.active { color: var(--c-brand); }
.lu-text   { font-size: 13px; color: var(--tx-base); line-height: 1.5; }
.lu-muted  { font-size: 12px; color: var(--tx-muted); }
.lu-mono   { font-family: var(--font-mono, inherit); }


/* ═══════════════════════════════════════════════════════════════════════════
   14. LUZO BUTTONS
═══════════════════════════════════════════════════════════════════════════ */

.lu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  border: 1px solid transparent; border-radius: 10px;
  padding: 0 16px; height: 34px;
  cursor: pointer; position: relative;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
  white-space: nowrap; user-select: none; outline: none;
}
.lu-btn svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lu-btn-primary        { background: var(--c-brand); color: #fff; border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
.lu-btn-primary:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lu-btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.lu-btn-secondary       { background: var(--bg-card); color: var(--tx-base); border-color: var(--border); }
.lu-btn-secondary:hover { border-color: var(--lk-brand-border); color: var(--c-brand); box-shadow: var(--shadow-sm); }

.lu-btn-ghost       { background: transparent; color: var(--tx-muted); }
.lu-btn-ghost:hover { background: var(--bg-hover); color: var(--tx-base); }

.lu-btn-icon       { width: 34px; height: 34px; padding: 0; background: transparent; color: var(--tx-muted); border-radius: 8px; }
.lu-btn-icon:hover { background: var(--bg-active); color: var(--c-brand); }

.lu-btn-danger       { background: transparent; color: var(--tx-red); border-color: var(--lk-red-soft); }
.lu-btn-danger:hover { background: var(--lk-red-soft); border-color: color-mix(in srgb, var(--tx-red) 30%, transparent); }

.lu-btn.is-loading { pointer-events: none; opacity: .75; }
.lu-btn.is-loading > *:not(.lu-spinner) { visibility: hidden; }
.lu-btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: lu-spin .5s linear infinite; }
@keyframes lu-spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════════════
   15. LUZO PROGRESS & SKELETON
═══════════════════════════════════════════════════════════════════════════ */

.lu-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; background: transparent; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
.lu-progress.active { opacity: 1; }
.lu-progress::after { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: var(--c-brand); border-radius: 0 2px 2px 0; animation: lu-progress-slide 1s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes lu-progress-slide { 0% { left: -50%; width: 50%; } 50% { width: 30%; } 100% { left: 100%; width: 50%; } }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sk { background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-card) 40%, var(--bg-card) 60%, var(--bg-surface) 100%); background-size: 800px 100%; animation: shimmer 1.5s linear infinite; border-radius: 6px; }
.sk-avatar   { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }
.sk-text-lg  { height: 12px; width: 65%; border-radius: 4px; }
.sk-text-sm  { height: 10px; width: 42%; border-radius: 4px; }
.sk-text-full { height: 10px; width: 88%; border-radius: 4px; }
.sk-badge    { height: 20px; width: 52px; border-radius: 999px; }
.sk-badge-lg { height: 20px; width: 96px; border-radius: 999px; }
.sk-tag      { height: 18px; width: 44px; border-radius: 5px; }
.sk-stat     { height: 32px; border-radius: 4px; }
.sk-button   { height: 34px; width: 120px; border-radius: 10px; }
.sk-card     { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 13px 15px; overflow: hidden; animation: sk-fade-in .25s ease both; }
@keyframes sk-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sk-card-top   { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.sk-card-top-l { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.sk-card-top-r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sk-card-col   { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sk-card-badges  { display: flex; gap: 4px; margin-bottom: 10px; }
.sk-card-divider { height: 1px; background: var(--border-soft); margin-bottom: 10px; }
.sk-card-stats   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }


/* ═══════════════════════════════════════════════════════════════════════════
   16. LUZO INPUTS
═══════════════════════════════════════════════════════════════════════════ */

.lu-input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); font-size: 13px; font-family: inherit; color: var(--tx-base); outline: none; transition: border-color .15s, box-shadow .15s; }
.lu-input::placeholder { color: var(--tx-muted); }
.lu-input:focus { border-color: var(--lk-brand-border); box-shadow: var(--lk-ring-focus); }
.lu-input:disabled { opacity: .55; cursor: not-allowed; background: var(--bg-hover); }

.lu-textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); font-size: 13px; font-family: inherit; color: var(--tx-base); outline: none; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.lu-textarea:focus { border-color: var(--lk-brand-border); box-shadow: var(--lk-ring-focus); }

.lu-select { width: 100%; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); font-size: 13px; font-family: inherit; color: var(--tx-base); outline: none; appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lu-select:focus { border-color: var(--lk-brand-border); box-shadow: var(--lk-ring-focus); }

.lu-label { display: block; font-size: 11px; font-weight: 650; color: var(--tx-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.lu-field { margin-bottom: 14px; }

.lu-input.lu-error, .lu-textarea.lu-error, .lu-select.lu-error { border-color: var(--tx-red); }
.lu-input.lu-error:focus, .lu-textarea.lu-error:focus { box-shadow: 0 0 0 3px var(--lk-red-soft); }
.lu-error-msg { font-size: 11px; color: var(--tx-red); margin-top: 4px; font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════════════════
   17. LUZO BADGES & CARDS
═══════════════════════════════════════════════════════════════════════════ */

.lu-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.lu-badge-accent  { background: var(--bg-active); color: var(--c-brand); border-color: var(--lk-brand-border); }
.lu-badge-success { background: var(--lk-green-soft); color: var(--tx-green); border-color: color-mix(in srgb, var(--tx-green) 22%, transparent); }
.lu-badge-danger  { background: var(--lk-red-soft); color: var(--tx-red); border-color: color-mix(in srgb, var(--tx-red) 18%, transparent); }
.lu-badge-muted   { background: var(--bg-hover); color: var(--tx-muted); border-color: var(--border-soft); }
.lu-badge-warning { background: var(--lk-amber-soft); color: var(--tx-amber); border-color: color-mix(in srgb, var(--tx-amber) 22%, transparent); }

.lu-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; transition: transform .18s cubic-bezier(.22,.68,0,1.1), box-shadow .18s, border-color .18s; }
.lu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--lk-brand-border); }

.lu-divider { height: 1px; background: var(--border-soft); margin: 12px 0; border: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   18. LUZO TOOLTIP
═══════════════════════════════════════════════════════════════════════════ */

.lu-tooltip { position: relative; }
.lu-tooltip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--lk-bg-card); color: var(--tx-base);
  border: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0;
  transition: opacity .12s, transform .12s;
  z-index: 9999; box-shadow: var(--shadow-md);
}
.lu-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ═══════════════════════════════════════════════════════════════════════════
   19. FAB (Floating Action Button)
═══════════════════════════════════════════════════════════════════════════ */

.lu-fab-wrap { position: fixed; bottom: 48px; right: 24px; z-index: 8500; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
.lu-fab {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--c-brand); color: #fff;
  border: none; cursor: pointer; font-family: inherit;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .15s;
}
.lu-fab:hover { transform: scale(1.06); box-shadow: var(--shadow-lg); }
.lu-fab svg { width: 20px; height: 20px; stroke-width: 2.5; transition: transform .2s; }
.lu-fab-wrap.open .lu-fab svg { transform: rotate(45deg); }

.lu-fab-option { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none; transition: all .15s cubic-bezier(.22,.68,0,1.12); }
.lu-fab-wrap.open .lu-fab-option { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lu-fab-opt-label { padding: 5px 12px; border-radius: 8px; background: color-mix(in srgb, var(--bg-card) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 600; color: var(--tx-base); white-space: nowrap; }
.lu-fab-opt-btn { width: 38px; height: 38px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; color: var(--c-brand); box-shadow: var(--shadow-sm); transition: border-color .12s, background .12s; }
.lu-fab-opt-btn:hover { border-color: var(--lk-brand-border); background: var(--bg-active); }
.lu-fab-opt-btn svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   20. ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */

.cl-card { animation: lu-card-in .22s cubic-bezier(.22,.68,0,1.1) both; }
@keyframes lu-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--lk-brand-border); }

/* Blade spring entrance */
.ld-blade { transition: transform .28s cubic-bezier(.32,.72,0,1); }

/* Nav capsule hover lift */
.ul0-btn:hover,
.ul1-item:hover,
.cl-nav-item:hover { transform: translateY(-1px); }

.lu-fade-in { animation: lu-fade-in-up .22s ease both; }
@keyframes lu-fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.lu-grid-wrap { transition: opacity .18s ease; }
.lu-grid-wrap.fading { opacity: 0; transform: translateY(4px); }
.lu-grid-wrap.entering { animation: lu-content-in .28s cubic-bezier(.22,.68,0,1.1) both; }
@keyframes lu-content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* ═══════════════════════════════════════════════════════════════════════════
   21. ACCESSIBILITY — :focus-visible (WCAG 2.4.7)
═══════════════════════════════════════════════════════════════════════════ */

.ul0-btn:focus-visible,
.ul0-expand-btn:focus-visible,
.ul1-item:focus-visible,
.spotlight-input:focus-visible,
.sp-row:focus-visible,
.sp-modal-input:focus-visible,
.theme-opt:focus-visible,
.nf-pop-item:focus-visible,
.nf-pop-act:focus-visible,
.cs-ctx-item:focus-visible,
.ld-blade-qact:focus-visible,
.ld-foot-btn:focus-visible,
.lu-btn:focus-visible,
.lu-input:focus-visible,
.lu-textarea:focus-visible,
.lu-select:focus-visible,
.lu-fab:focus-visible,
.lu-fab-opt-btn:focus-visible {
  outline: none;
  box-shadow: var(--lk-ring-focus);
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. TASKBAR CAPSULES (ld-taskbar-* for lk-desk.js compat)
═══════════════════════════════════════════════════════════════════════════ */

.ld-taskbar {
  position: fixed; bottom: 34px; left: 54px;
  display: flex; align-items: flex-end; gap: 6px;
  z-index: 8000; pointer-events: none; padding: 0 4px 2px;
}
.ld-taskbar-tab {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--lk-brand-border);
  cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s, box-shadow .15s;
  max-width: 200px; box-shadow: var(--shadow-sm);
  animation: ld-tab-in .22s cubic-bezier(.22,.68,0,1.12) both;
}
@keyframes ld-tab-in { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.ld-taskbar-tab:hover { border-color: var(--c-brand); box-shadow: var(--shadow-md); }

.ld-taskbar-ico {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--bg-active); color: var(--c-brand);
  font-weight: 800; font-size: 9px;
}
.ld-taskbar-ico svg {
  width: 11px; height: 11px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ld-taskbar-name {
  font-size: 11.5px; font-weight: 600; color: var(--tx-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.ld-taskbar-close {
  width: 18px; height: 18px; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; border: none; color: var(--tx-muted);
  cursor: pointer; padding: 0; flex-shrink: 0; margin-left: 2px;
  transition: background .1s, color .1s;
}
.ld-taskbar-close svg {
  width: 10px; height: 10px; fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.ld-taskbar-close:hover { background: var(--lk-red-soft); color: var(--tx-red); }

.ld-taskbar-tab:focus-visible,
.ld-taskbar-close:focus-visible { outline: none; box-shadow: var(--lk-ring-focus); }

.tx-footer a { color: var(--tx-muted, var(--tx-dim)); text-decoration: none; transition: color .12s; }
.tx-footer a:hover { color: var(--tx-base); }