/* Self-hosted Plus Jakarta Sans (DSGVO: no external Google Fonts requests) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   LEVIAPAY Dashboard — Design System
   White / Black / Violet · light + dark · 3 directions
   Font: Plus Jakarta Sans (geometric, friendly)
   ============================================================ */

/* Scoped to .lp-app so the redesign font/reset does NOT bleed onto the
   landing page or not-yet-restyled legacy screens (Task 7). */
.lp-app, .lp-app *, .lp-app *::before, .lp-app *::after{box-sizing:border-box}
.lp-app{
  font-family:var(--font, "Plus Jakarta Sans"),system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.lp-app button{font-family:inherit}
.lp-app ::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}

/* ---------- THEME TOKENS ---------- */
.lp-app{
  --accent:#6d28d9;
  --accent-ink:#ffffff;
  --success:#15875a;
  --danger:#d8362a;

  --side-w:258px;
  --d:1;                 /* density multiplier (tweak) */
  --font:"Plus Jakarta Sans";

  --fs-display:30px;
  --fs-h1:21px;
  --fs-h2:15.5px;
  --fs-body:14px;
  --fs-sm:13px;
  --fs-xs:11px;
}

/* LIGHT */
.lp-app.theme-light{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#0e0e14;
  --ink-2:#5b5b67;
  --ink-3:#9a9aa6;
  --line:rgba(14,14,20,.10);
  --line-2:rgba(14,14,20,.16);
  --field:#ffffff;
  --field-2:#ffffff;
  --hover:rgba(14,14,20,.045);
  --hover-2:rgba(14,14,20,.07);
  --shadow:0 1px 2px rgba(14,14,20,.05), 0 1px 0 rgba(14,14,20,.02);
  --shadow-lg:0 12px 32px -8px rgba(14,14,20,.16), 0 2px 6px rgba(14,14,20,.05);
  --sidebar-bg:#ffffff;
  --sidebar-ink:#5b5b67;
  --sidebar-line:rgba(14,14,20,.09);
  --grid-line:rgba(14,14,20,.07);
}
/* DARK */
.lp-app.theme-dark{
  --bg:#09090c;
  --card:#121218;
  --ink:#f3f3f7;
  --ink-2:#a0a0ac;
  --ink-3:#6c6c78;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.15);
  --field:#16161d;
  --field-2:#1b1b23;
  --hover:rgba(255,255,255,.05);
  --hover-2:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --sidebar-bg:#0c0c11;
  --sidebar-ink:#9a9aa6;
  --sidebar-line:rgba(255,255,255,.07);
  --grid-line:rgba(255,255,255,.07);
  --accent:#8b5cf6;
}

/* ---------- DIRECTIONS ---------- */
.lp-app.dir-klar{
  --r-card:14px; --r-ctl:9px; --r-pill:999px; --r-chip:8px;
  --pad-card:22px; --gap:18px;
}
.lp-app.dir-raster{
  --r-card:5px; --r-ctl:5px; --r-pill:5px; --r-chip:4px;
  --pad-card:20px; --gap:14px;
}
.lp-app.dir-kontrast{
  --r-card:18px; --r-ctl:11px; --r-pill:999px; --r-chip:10px;
  --pad-card:24px; --gap:20px;
  --fs-display:40px; --fs-h1:25px;
}
/* Kontrast: black sidebar regardless of theme */
.lp-app.dir-kontrast{
  --sidebar-bg:#0c0c11;
  --sidebar-ink:rgba(255,255,255,.62);
  --sidebar-line:rgba(255,255,255,.10);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.lp-app{display:flex;min-height:100vh;width:100%;background:var(--bg);color:var(--ink)}

.lp-side{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-line);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  padding:18px 14px 14px;
  transition:width .22s ease, transform .22s ease;
  z-index:30;
}
.lp-side.collapsed{width:74px;flex-basis:74px}
.lp-side.collapsed .nav-label,
.lp-side.collapsed .nav-chev,
.lp-side.collapsed .side-foot-label,
.lp-side.collapsed .brand-word{opacity:0;pointer-events:none}

.lp-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}

/* ---------- BRAND ---------- */
.brand{display:flex;align-items:center;justify-content:space-between;
  padding:4px 8px 18px;gap:8px}
.brand-mark{display:flex;align-items:center;gap:11px;min-width:0}
/* real LEVIAPAY logo (same icon as the old dashboard), swapped per theme */
.brand-logo-icon{width:32px;height:32px;flex:0 0 32px;object-fit:contain;display:block}
.theme-dark .brand-logo-icon{content:url("../img/logo-icon-white.png")}
.lp-side.collapsed .brand-logo-icon{margin:0 auto}
.brand-tile{width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:19px;letter-spacing:-.02em}
.dir-raster .brand-tile{border-radius:5px}
/* logo — recolored PNGs swapped by theme (robust, no mask) */
.brand-logo{background-repeat:no-repeat;background-position:left center;background-size:contain}
.brand-logo-full{height:23px;width:93px}
.brand-logo-mark{height:28px;width:27px;background-position:center}
.theme-light .brand-logo-full{background-image:url("assets/logo-full-dark.png")}
.theme-dark .brand-logo-full{background-image:url("assets/logo-full-light.png")}
.theme-light .brand-logo-mark{background-image:url("assets/logo-mark-dark.png")}
.theme-dark .brand-logo-mark{background-image:url("assets/logo-mark-light.png")}
.brand-word{font-weight:800;font-size:16px;letter-spacing:-.02em;
  color:var(--sidebar-ink-strong,inherit);white-space:nowrap}
.dir-kontrast .brand-word,.dir-kontrast .brand-burger{color:#fff}
.theme-light:not(.dir-kontrast) .brand-word{color:var(--ink)}
.theme-dark .brand-word{color:var(--ink)}
.brand-burger{appearance:none;border:0;background:transparent;cursor:pointer;
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--sidebar-ink)}
.brand-burger:hover{background:var(--hover)}
/* collapsed: stack logo + toggle vertically so the expander stays reachable */
.lp-side.collapsed .brand{flex-direction:column;gap:12px;padding:4px 0 18px}
.lp-side.collapsed .brand-word{display:none}
.lp-side.collapsed .brand-burger{width:40px;height:34px}

/* ---------- NAV ---------- */
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;
  margin:0 -4px;padding:0 4px;scrollbar-width:thin}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.nav-sep{height:1px;background:var(--sidebar-line);margin:12px 8px}

.nav-item{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:calc(9px*var(--d)) 10px;border-radius:var(--r-ctl);
  color:var(--sidebar-ink);cursor:pointer;border:0;background:transparent;
  width:100%;text-align:left;font-size:var(--fs-body);font-weight:500;
  letter-spacing:-.005em;transition:background .14s,color .14s;
}
.nav-item:hover{background:var(--hover);color:var(--ink)}
.nav-item .nav-ic{flex:0 0 20px;display:grid;place-items:center;color:inherit;opacity:.85}
.nav-label{flex:1;white-space:nowrap;transition:opacity .15s}
.nav-chev{color:var(--ink-3);transition:transform .18s,opacity .15s}
.nav-chev.open{transform:rotate(90deg)}

.nav-item.active{color:var(--accent);font-weight:700;background:var(--hover)}
.nav-group{font-weight:700}
.nav-group .nav-label{color:var(--sidebar-ink)}
.theme-light:not(.dir-kontrast) .nav-group .nav-label{color:var(--ink)}
.theme-dark .nav-group .nav-label{color:var(--ink)}
.dir-kontrast .nav-group .nav-label{color:#fff}
.dir-kontrast .nav-item.active{color:#fff;background:rgba(255,255,255,.08)}
.nav-item.active::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent)}
.dir-raster .nav-item.active::before{border-radius:0;height:100%;top:0;transform:none}
.dir-kontrast .nav-item.active::before{background:#fff}

.nav-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px 0;
  padding-left:16px;overflow:hidden}
.nav-subitem{
  display:flex;align-items:center;gap:11px;padding:calc(8px*var(--d)) 10px;
  border-radius:var(--r-ctl);color:var(--sidebar-ink);cursor:pointer;border:0;
  background:transparent;width:100%;text-align:left;font-size:var(--fs-sm);
  font-weight:500;position:relative;transition:background .14s,color .14s}
.nav-subitem .nav-ic{flex:0 0 18px;display:grid;place-items:center;opacity:.8}
.nav-subitem:hover{background:var(--hover);color:var(--ink)}
.nav-subitem.active{color:var(--accent);font-weight:700;background:var(--hover)}
.dir-kontrast .nav-subitem.active{color:#fff;background:rgba(255,255,255,.08)}

.side-foot{margin-top:8px;padding-top:10px;border-top:1px solid var(--sidebar-line)}

/* sidebar section heading (e.g. Erweiterungen) — bold + high contrast */
.nav-section{font-size:var(--fs-xs);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sidebar-ink);padding:8px 10px 5px;margin:0}
.theme-light:not(.dir-kontrast) .nav-section{color:var(--ink)}
.theme-dark .nav-section{color:var(--ink)}
.dir-kontrast .nav-section{color:#fff}

/* defeat legacy style.css nav bleed inside the redesign sidebar (class collisions:
   legacy .nav-group sets flex-direction:column; legacy .nav-sub sets height:36px) */
.lp-side .nav-group{flex-direction:row;align-items:center}
.lp-side .nav-sub{height:auto;max-height:none;overflow:visible;padding-left:0}

/* ============================================================
   TOPBAR
   ============================================================ */
.lp-topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:26px 30px 18px;position:sticky;top:0;background:var(--bg);z-index:20;
}
.lp-topbar-l{min-width:0}
.page-title{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.03em;margin:0;
  line-height:1.1}
.page-sub{font-size:var(--fs-sm);color:var(--ink-2);margin:6px 0 0;font-weight:500}
.lp-topbar-r{display:flex;align-items:center;gap:10px;flex-shrink:0}

.lp-search{display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--field);
  color:var(--ink-3);min-width:230px}
.lp-search input{border:0;background:transparent;outline:0;color:var(--ink);
  font-size:var(--fs-sm);width:100%;font-family:inherit}
.lp-search input::placeholder{color:var(--ink-3)}

.lp-avatar{width:38px;height:38px;border-radius:var(--r-pill);background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 38px}
.lp-icon-btn{appearance:none;border:1px solid var(--line);background:var(--card);
  width:38px;height:38px;border-radius:var(--r-ctl);display:grid;place-items:center;
  color:var(--ink-2);cursor:pointer;transition:background .14s,color .14s}
.lp-icon-btn:hover{background:var(--hover);color:var(--ink)}

.lp-content{padding:6px 30px 48px;display:flex;flex-direction:column;gap:var(--gap)}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow)}
.lp-card-pad{padding:calc(var(--pad-card)*var(--d))}
.lp-card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px}
.lp-card-title{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.015em;margin:0;white-space:nowrap}
.lp-card-meta{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500;white-space:nowrap;flex-shrink:0}

/* buttons — compact by default */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.01em;cursor:pointer;
  white-space:nowrap;transition:background .14s,border-color .14s,color .14s,transform .04s;
  font-family:inherit}
.lp-btn:active{transform:translateY(.5px)}
.lp-btn-sm{height:31px;padding:0 11px;font-size:var(--fs-xs);font-weight:600}
.lp-btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lp-btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.lp-btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.lp-btn-ghost:hover{background:var(--hover)}
.lp-btn-quiet{background:transparent;color:var(--ink-2);border-color:transparent}
.lp-btn-quiet:hover{background:var(--hover);color:var(--ink)}
.lp-btn-danger{background:transparent;color:var(--danger);border-color:var(--line-2)}
.lp-btn-danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}

/* segmented control */
.lp-seg{display:inline-flex;padding:3px;gap:2px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--card)}
.dir-raster .lp-seg{border-radius:var(--r-chip)}
.lp-seg-i{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:0 14px;height:30px;border-radius:calc(var(--r-pill) - 2px);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);font-family:inherit;
  transition:background .14s,color .14s;display:inline-flex;align-items:center}
.dir-raster .lp-seg-i{border-radius:var(--r-chip)}
.lp-seg-i:hover{color:var(--ink)}
.lp-seg-i.active{background:var(--accent);color:var(--accent-ink)}

/* chip / filter pill */
.chip{appearance:none;border:1px solid var(--line);background:var(--card);
  height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;
  transition:background .14s,color .14s,border-color .14s}
.dir-raster .chip{border-radius:var(--r-chip)}
.chip:hover{background:var(--hover);color:var(--ink)}
.chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.outline-active{background:transparent;color:var(--accent);border-color:var(--accent)}

/* status — dot + label, NO fill */
.lp-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-2);white-space:nowrap}
.lp-status .lp-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.lp-status.ok{color:var(--success)} .lp-status.ok .lp-dot{background:var(--success)}
.lp-status.bad{color:var(--danger)} .lp-status.bad .lp-dot{background:var(--danger)}
.lp-status.lp-muted{color:var(--ink-3)} .lp-status.lp-muted .lp-dot{background:var(--ink-3)}
.lp-status.warn{color:#b9770b} .lp-status.warn .lp-dot{background:#d9870e}

/* tag (category color dot label) */
.tagdot{width:9px;height:9px;border-radius:3px;flex:0 0 9px}

/* inputs */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.input,select.input{height:42px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:var(--r-ctl);background:var(--field);color:var(--ink);
  font-size:var(--fs-body);font-family:inherit;outline:0;width:100%}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.input::placeholder{color:var(--ink-3)}

/* mono */
.lp-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.lp-neg{color:var(--danger)}
.lp-strike{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--danger) 60%,transparent)}

/* grids */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap)}
@media(max-width:1180px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr}}

/* KPI */
.kpi{display:flex;flex-direction:column;gap:14px}
.kpi-top{display:flex;align-items:center;gap:11px}
.kpi-ic{width:38px;height:38px;border-radius:var(--r-chip);display:grid;place-items:center;
  color:var(--accent);border:1px solid var(--line);flex:0 0 38px}
.dir-kontrast .kpi-ic{background:var(--accent);color:#fff;border-color:transparent}
.kpi-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.kpi-val{font-size:var(--fs-display);font-weight:800;letter-spacing:-.03em;line-height:1}
.kpi-delta{font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.kpi-delta.up{color:var(--success)} .kpi-delta.down{color:var(--danger)}

/* list rows */
.lp-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.lp-row:first-child{border-top:0}
.lp-row-ic{width:40px;height:40px;border-radius:var(--r-pill);flex:0 0 40px;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2)}
.dir-raster .lp-row-ic{border-radius:var(--r-chip)}
.lp-row-main{flex:1;min-width:0}
.lp-row-t{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.lp-row-s{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px;font-weight:500}
.lp-row-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.lp-amt{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.lp-row-t{flex-wrap:wrap}
.rank .lp-amt{margin-left:auto}

/* rank list */
.rank{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.rank:first-child{border-top:0}
.rank-n{width:26px;height:26px;border-radius:var(--r-chip);flex:0 0 26px;display:grid;
  place-items:center;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  border:1px solid var(--line)}
.rank-1 .rank-n{background:var(--accent);color:#fff;border-color:transparent}

/* table */
.tbl{width:100%}
.tbl-head{display:grid;align-items:center;padding:0 0 12px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line)}
.tbl-row{display:grid;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);
  transition:background .12s}
.tbl-row:hover{background:var(--hover)}
.tbl-row:last-child{border-bottom:0}

/* product card grid */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:1100px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.prod-grid{grid-template-columns:1fr}}
.prod{display:flex;flex-direction:column;gap:14px;padding:18px}
.prod-top{display:flex;align-items:flex-start;gap:13px}
.prod-thumb{width:46px;height:46px;border-radius:var(--r-chip);flex:0 0 46px;
  border:1px solid var(--line);background:var(--field);display:grid;place-items:center;
  color:var(--ink-3);overflow:hidden}
.lp-prod-name{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em}
.lp-prod-cat{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px;display:flex;
  align-items:center;gap:7px;font-weight:500}
.lp-prod-price{font-size:var(--fs-h2);font-weight:800;color:var(--accent);letter-spacing:-.02em}
.lp-prod-actions{display:flex;gap:8px;padding-top:14px;border-top:1px solid var(--line)}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:60px 20px;text-align:center;color:var(--ink-3)}
.empty-ic{width:54px;height:54px;border-radius:var(--r-card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-3)}

/* segmented toggle for view (grid/list) */
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden}
.viewtog button{appearance:none;border:0;background:var(--card);width:38px;height:36px;
  display:grid;place-items:center;color:var(--ink-3);cursor:pointer}
.viewtog button.active{background:var(--accent);color:#fff}

/* misc */
.flex{display:flex;align-items:center}
.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}
.spacer{flex:1}
.lp-muted{color:var(--ink-3)}
.section-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:6px 0 2px}
.hint{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 4px;max-width:760px;line-height:1.5;font-weight:500}
.fade-in{}
@keyframes fade{from{opacity:1}to{opacity:1}}

/* ============================================================
   MODALS
   ============================================================ */
.lp-modal-scrim{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;
  justify-content:center;padding:48px 20px;overflow-y:auto;
  background:color-mix(in srgb,#06060a 52%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:scrimIn .16s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.lp-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);width:100%;display:flex;flex-direction:column;
  max-height:calc(100vh - 96px);margin:auto;animation:modalIn .19s cubic-bezier(.2,.7,.3,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.lp-modal-sm{max-width:440px}.lp-modal-md{max-width:580px}.lp-modal-lg{max-width:760px}.lp-modal-xl{max-width:940px}
.lp-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.lp-modal-head.no-border{border-bottom:0;padding-bottom:6px}
.lp-modal-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 7px}
.lp-modal-title{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.025em;margin:0;line-height:1.15}
.lp-modal-sub{font-size:var(--fs-sm);color:var(--ink-2);margin:6px 0 0;font-weight:500;line-height:1.5}
.lp-modal-close{appearance:none;border:1px solid var(--line);background:var(--card);
  width:34px;height:34px;border-radius:var(--r-ctl);display:grid;place-items:center;
  color:var(--ink-2);cursor:pointer;flex:0 0 34px;transition:background .14s,color .14s}
.lp-modal-close:hover{background:var(--hover);color:var(--ink)}
.lp-modal-body{padding:22px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.lp-modal-body::-webkit-scrollbar{width:8px}
.lp-modal-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.lp-modal-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:18px 24px;border-top:1px solid var(--line);flex-shrink:0;flex-wrap:wrap}
.lp-modal-foot.split{justify-content:space-between}

/* modal form helpers */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mgrid .full{grid-column:1 / -1}
@media(max-width:560px){.mgrid{grid-template-columns:1fr}}
.mlabel{font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;display:block;margin-bottom:7px}
.mhelp{font-size:var(--fs-xs);color:var(--ink-3);margin-top:6px;font-weight:500;line-height:1.45}
textarea.input{height:auto;padding:11px 14px;resize:vertical;line-height:1.5;min-height:84px}

/* swatch picker */
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:var(--r-chip);cursor:pointer;border:2px solid transparent;
  position:relative;transition:transform .1s}
.swatch:hover{transform:scale(1.08)}
.swatch.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--card) inset}

/* toggle pill (shared) */
.tgl{width:46px;height:27px;border-radius:999px;border:0;cursor:pointer;position:relative;
  flex:0 0 46px;background:var(--line-2);transition:background .16s}
.tgl.on{background:var(--accent)}
.tgl span{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:left .16s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl.on span{left:22px}

/* line item rows inside modals */
.mrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow-main{flex:1;min-width:0}
.mrow-t{font-weight:700;font-size:var(--fs-body)}
.mrow-s{font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;font-weight:500}

/* info / warning callout */
.callout{display:flex;gap:12px;padding:14px 15px;border-radius:var(--r-chip);
  border:1px solid var(--line-2);background:var(--field);font-size:var(--fs-sm);
  line-height:1.5;font-weight:500;color:var(--ink-2)}
.callout .callout-ic{flex:0 0 20px;color:var(--accent);margin-top:1px}
.callout.warn{border-color:color-mix(in srgb,#d9870e 45%,transparent);background:color-mix(in srgb,#d9870e 7%,transparent)}
.callout.warn .callout-ic{color:#b9770b}
.callout.danger{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 6%,transparent)}
.callout.danger .callout-ic{color:var(--danger)}

/* radio/select cards */
.optcards{display:flex;flex-direction:column;gap:10px}
.optcard{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line-2);
  border-radius:var(--r-chip);cursor:pointer;transition:border-color .14s,background .14s}
.optcard:hover{background:var(--hover)}
.optcard.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.optcard-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 20px;
  display:grid;place-items:center}
.optcard.sel .optcard-radio{border-color:var(--accent)}
.optcard.sel .optcard-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* big number / summary */
.summ{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0}
.summ-total{border-top:2px solid var(--line-2);margin-top:4px;padding-top:16px}
.summ-total .summ-v{font-size:24px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}

/* receipt */
.receipt{background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:26px 24px;font-variant-numeric:tabular-nums}
.receipt-dash{border-top:1px dashed var(--line-2);margin:14px 0}

/* QR */
.qrbox{width:200px;height:200px;border-radius:var(--r-chip);border:1px solid var(--line);
  background:#fff;padding:14px;margin:0 auto}

/* avatar lg */
.lp-avatar-lg{width:64px;height:64px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:24px;flex:0 0 64px}
.dir-raster .lp-avatar-lg{border-radius:var(--r-card)}

/* perm matrix */
.permrow{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.permrow:first-child{border-top:0}
.perm-h{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;width:54px}

/* segmented inside modal */
.chk{width:22px;height:22px;border-radius:var(--r-chip);border:2px solid var(--line-2);
  display:grid;place-items:center;cursor:pointer;color:transparent;flex:0 0 22px}
.chk.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============================================================
   TEST-PHASE BANNER
   ============================================================ */
.testbar{display:flex;align-items:center;gap:14px;padding:11px 30px;
  border-bottom:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.testbar-badge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;
  border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto}
.dir-raster .testbar-badge{border-radius:var(--r-chip)}
.testbar-txt{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.testbar-txt b{font-weight:800}
.testbar-sub{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500}
@media(max-width:760px){.testbar{padding:10px 18px}.testbar-sub{display:none}}

/* addon group panel */
.addon-row .lp-row-ic{transition:background .15s,color .15s,border-color .15s}

/* hover tooltip */
.tt-wrap{position:relative;display:inline-flex;align-items:center;cursor:help;outline:0}
.tt-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  color:var(--ink-3);background:var(--hover);transition:background .14s,color .14s}
.tt-wrap:hover .tt-dot,.tt-wrap:focus .tt-dot{background:var(--accent);color:var(--accent-ink)}
/* warning variant — amber triangle */
.tt-warn .tt-dot{background:transparent;color:#c9870b}
.tt-warn:hover .tt-dot,.tt-warn:focus .tt-dot{background:color-mix(in srgb,#d9870e 16%,transparent);color:#b9770b}
.tt-warn .tt-pop{background:#7a4d00}
.tt-warn .tt-pop::after{border-top-color:#7a4d00}
.tt-pop{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  width:300px;max-width:78vw;z-index:60;background:var(--ink);color:var(--card);
  font-size:12.5px;line-height:1.55;font-weight:500;letter-spacing:0;text-transform:none;
  padding:11px 13px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,transform .14s;white-space:normal}
.tt-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink)}
.tt-wrap:hover .tt-pop,.tt-wrap:focus .tt-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* flip near right edge handled by max-width + viewport clamp */

/* ============================================================
   VENUE / RAUMPLAN EDITOR
   ============================================================ */
.ve-areas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:7px}.ve-areatab{height:38px;padding:0 18px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-2);border-radius:var(--r-ctl);font:inherit;font-size:var(--fs-sm);font-weight:700;
  cursor:pointer;transition:all .14s}
.ve-areatab:hover{background:var(--hover)}
.ve-areatab.active{background:var(--ink);color:var(--card);border-color:var(--ink)}
.ve-areaadd{display:inline-flex;align-items:center;gap:6px;border-style:dashed;color:var(--ink-3);font-weight:600}

.ve-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--gap);align-items:start}
@media(max-width:1040px){.ve-grid{grid-template-columns:1fr}}

.ve-stage-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.ve-toolbar{display:flex;gap:6px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:7px}
.ve-tool{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid transparent;
  background:transparent;color:var(--ink-2);border-radius:var(--r-ctl);font:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;transition:all .13s;white-space:nowrap}
.ve-tool:hover{background:var(--hover);color:var(--ink)}
.ve-tool.active{background:var(--accent);color:var(--accent-ink)}
.ve-tool-danger:hover{color:var(--danger)}
.ve-tool-danger.active{background:var(--danger);color:#fff}

.ve-paintbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm)}
.ve-paintbar-l{color:var(--ink-2);font-weight:600}
.ve-zchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font:inherit;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer}
.ve-zchip.active{border-color:var(--ink);color:var(--ink);background:var(--hover)}
.ve-zdot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}

.ve-canvas{position:relative;height:540px;border:1px solid var(--line-2);border-radius:var(--r-card);
  background-color:var(--field);overflow:auto;
  background-image:radial-gradient(circle,var(--line-2) 1.1px,transparent 1.1px);
  background-size:22px 22px;background-position:11px 11px;min-width:0;user-select:none;touch-action:none}
.ve-canvas.ve-tool-table,.ve-canvas.ve-tool-chair,.ve-canvas.ve-tool-decor{cursor:crosshair}
.ve-canvas.ve-tool-delete{cursor:not-allowed}
.ve-canvas-hint{position:sticky;bottom:0;left:0;float:left;margin-top:506px;padding:5px 10px;font-size:var(--fs-xs);
  font-weight:600;color:var(--ink-3);background:color-mix(in srgb,var(--field) 86%,transparent);border-radius:0 var(--r-chip) 0 0;pointer-events:none}

.ve-node{position:absolute;cursor:grab}
.ve-node:active{cursor:grabbing}
.ve-sel{z-index:5}
.ve-sel>*{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)!important}

.ve-chair{width:32px;height:32px;border-radius:9px 9px 7px 7px;border:1.6px solid;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;letter-spacing:-.02em}
.ve-stool{width:28px;height:28px;border-radius:50%;border:1.6px solid;display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:var(--ink-2)}
.ve-table{position:relative;width:64px;height:64px;border-radius:50%;border:2px solid;display:grid;place-items:center}
.ve-table-lbl{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ve-table-seats{position:absolute;bottom:11px;font-size:9px;font-weight:700;color:var(--ink-3)}
.ve-seatdot{position:absolute;width:10px;height:10px;border-radius:50%;border:1.6px solid;background:var(--card)}
.ve-decor{width:100%;height:100%;border-radius:7px;background:var(--hover-2);border:1px dashed var(--line-2);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.ve-stage{background:var(--ink);color:var(--card);border:0;letter-spacing:.22em;font-weight:800;font-size:13px}

/* right panel */
.ve-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;
  display:flex;flex-direction:column;gap:14px;position:sticky;top:8px}
.ve-panel-seg{width:100%}.ve-panel-seg .lp-seg-i{flex:1}
.ve-empty{text-align:center;padding:24px 8px;color:var(--ink-2)}
.ve-empty-ic{width:42px;height:42px;border-radius:var(--r-chip);background:var(--hover);display:grid;
  place-items:center;margin:0 auto 12px;color:var(--ink-3)}

.ve-insp{display:flex;flex-direction:column;gap:14px}
.ve-insp-head{display:flex;align-items:center;justify-content:space-between}
.ve-insp-type{font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ve-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-ctl);overflow:hidden;height:42px;width:fit-content}
.ve-stepper button{width:44px;height:100%;border:0;background:var(--card);color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.ve-stepper button:hover{background:var(--hover)}
.ve-stepper span{min-width:48px;text-align:center;font-weight:800;font-size:16px}
.ve-range{width:100%;accent-color:var(--accent)}

.ve-zone-picker{display:flex;flex-direction:column;gap:8px}
.ve-zopt{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-chip);background:var(--card);cursor:pointer;font:inherit;transition:all .13s}
.ve-zopt:hover{background:var(--hover)}
.ve-zopt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ve-zopt-name{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.ve-zopt-price{margin-left:auto;color:var(--ink-2);font-weight:700;font-size:var(--fs-sm)}

.ve-zonepanel{display:flex;flex-direction:column;gap:12px}
.ve-zonecard{border:1px solid var(--line);border-radius:var(--r-chip);padding:13px}
.ve-zonename{border:0;background:transparent;font:inherit;font-weight:800;font-size:var(--fs-body);color:var(--ink);outline:0;width:120px;border-bottom:1px solid transparent}
.ve-zonename:focus{border-bottom-color:var(--line-2)}
.ve-swatch{width:18px;height:18px;border-radius:50%;border:0;cursor:pointer;padding:0}
.ve-zoneprice{display:flex;align-items:center;gap:9px}
.ve-zoneprice label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}

.ve-rowpreview{display:flex;gap:7px;justify-content:center;align-items:flex-end;flex-wrap:wrap;
  padding:18px;background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip)}

/* ---- reservations & events ---- */
.lp-status.info{color:#2f6df0} .lp-status.info .lp-dot{background:#2f6df0}
.rpill{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.dir-raster .rpill{border-radius:var(--r-chip)}
.rpill.ok{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}
.rpill.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}
.rpill.info{color:#2f6df0;background:color-mix(in srgb,#2f6df0 13%,transparent)}
.rpill.warn{color:#b9770b;background:color-mix(in srgb,#d9870e 16%,transparent)}
.rpill.lp-muted{color:var(--ink-3);background:var(--hover-2)}

.cap-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;width:100%}
.cap-bar>span{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .3s}

.turn-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.turn-tabs{grid-template-columns:1fr}}
.turn-tab{text-align:left;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r-card);
  padding:15px 17px;cursor:pointer;font:inherit;transition:all .14s;display:flex;flex-direction:column;gap:11px}
.turn-tab:hover{background:var(--hover)}
.turn-tab.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.turn-tab-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.turn-tab-name{font-weight:800;font-size:16px;letter-spacing:-.01em}
.turn-tab-time{font-weight:800;font-family:var(--mono,monospace)}
.turn-tab-cap{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);margin-bottom:5px;white-space:nowrap}

.res-grid{display:grid;grid-template-columns:1fr 280px;gap:var(--gap);align-items:start}
@media(max-width:1100px){.res-grid{grid-template-columns:1fr}}
.miniplan{background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip);padding:14px;
  position:relative;height:220px;background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1px);
  background-size:18px 18px}
.miniplan-stage{position:absolute;left:14%;right:14%;top:12px;height:22px;background:var(--ink);color:var(--card);
  border-radius:5px;display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:.18em}

/* events */
.ev-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--gap)}
.ev-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column}
.ev-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm,0 4px 14px rgba(0,0,0,.05))}
.ev-poster{height:128px;position:relative;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,var(--hover),var(--hover) 11px,var(--hover-2) 11px,var(--hover-2) 22px)}
.ev-poster-tag{font-family:var(--mono,monospace);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);text-transform:uppercase}
.ev-poster .rpill{position:absolute;top:11px;right:11px}
.ev-body{padding:15px 16px;display:flex;flex-direction:column;gap:11px;flex:1}
.ev-title{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em}
.ev-series{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;color:var(--accent)}

.evmap-zone{margin-bottom:14px}.evmap-seats{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.evseat{width:12px;height:12px;border-radius:3px;border:1.5px solid}

/* venue picker */
.vp{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.vp-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.vp-control{position:relative}
.vp-trigger{display:flex;align-items:center;gap:11px;min-width:300px;height:52px;padding:0 12px;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-card);cursor:pointer;
  font:inherit;text-align:left;transition:border-color .14s,box-shadow .14s}
.vp-trigger:hover{border-color:var(--ink-3)}
.vp-trigger.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vp-ic{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-chip);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.vp-ic-sm{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:var(--hover);color:var(--ink-2);display:grid;place-items:center}
.vp-trigger-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.vp-name{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-meta{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);white-space:nowrap}
.vp-chev{color:var(--ink-3);flex:0 0 auto}
.vp-rename{width:300px;height:52px;padding:0 14px;border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent);
  border-radius:var(--r-card);background:var(--card);color:var(--ink);font:inherit;font-size:var(--fs-body);font-weight:800;outline:0}

.vp-menu{position:absolute;top:60px;left:0;z-index:40;width:300px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-lg,0 16px 40px rgba(0,0,0,.16));
  padding:7px;opacity:1;animation:vp-pop .12s ease}
@keyframes vp-pop{from{transform:translateY(-5px)}to{transform:none}}
.vp-menu-h{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px 6px}
.vp-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:transparent;
  border-radius:var(--r-chip);cursor:pointer;font:inherit;text-align:left;color:var(--ink)}
.vp-item:hover,.vp-item.active{background:var(--hover)}
.vp-item-main{display:flex;flex-direction:column;min-width:0;flex:1}
.vp-item-name{font-weight:700;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-menu-foot{margin-top:6px;padding-top:7px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.vp-mi{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;background:transparent;
  border-radius:var(--r-chip);cursor:pointer;font:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);text-align:left;white-space:nowrap}
.vp-mi:hover{background:var(--hover);color:var(--ink)}
.vp-mi svg{color:var(--ink-3);flex:0 0 auto}
.vp-create{color:var(--accent);font-weight:700}
.vp-create:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.vp-create svg{color:var(--accent)}
.vp-del{color:var(--danger)}
.vp-del:hover{background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger)}
.vp-del svg{color:var(--danger)}

/* event hosting-mode strip */
.mode-strip{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:13px 16px;box-shadow:var(--shadow)}
.mode-strip-ic{width:40px;height:40px;border-radius:var(--r-chip);flex:0 0 40px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink)}
.mode-strip-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.mode-strip-name{font-weight:800;font-size:var(--fs-body);letter-spacing:-.01em;margin-top:2px}

/* bezahlmodal (payment widget) */
.pay-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--gap);align-items:start}
@media(max-width:1080px){.pay-grid{grid-template-columns:1fr}}
.code-block{margin:0;background:#0e0e16;color:#e7e7f0;border-radius:var(--r-chip);padding:16px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;overflow-x:auto;
  white-space:pre;border:1px solid rgba(255,255,255,.08)}
.code-block code{font-family:inherit}

.pm-preview{border:1px solid var(--line-2);border-radius:var(--r-card);overflow:hidden;background:var(--bg)}
.pm-preview-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--hover);border-bottom:1px solid var(--line)}
.pm-preview-bar>span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.pm-preview-url{margin-left:10px;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-preview-body{padding:18px}
.pm-powered{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:13px;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-3)}

/* embedded checkout modal */
.ck{position:relative}
.ck-close{position:absolute;top:14px;right:14px;z-index:2}
.ck-head{padding:30px 26px 22px;text-align:center;border-bottom:1px solid var(--line);background:var(--hover)}
.ck-merch{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.ck-amount{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:8px}
.ck-item{font-size:var(--fs-sm);color:var(--ink-3);margin-top:4px;font-weight:500}
.ck-form{padding:22px 26px 24px;display:flex;flex-direction:column;gap:14px}
.ck-cardrow{position:relative}
.ck-marks{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
.ck-success{padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ck-check{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--success) 14%,transparent);
  color:var(--success);display:grid;place-items:center;margin-bottom:16px}

/* mobile sidebar */
.scrim{display:none}
@media(max-width:900px){
  .lp-side{position:fixed;left:0;top:0;transform:translateX(-100%)}
  .lp-side.mobile-open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25}
  .lp-topbar{padding:18px 18px 14px}.lp-content{padding:6px 18px 40px}
}

/* ============================================================
   ÜBERSICHT (overview) — Raster redesign content.
   The overview section lives inside legacy .main-content (padding:32px 40px,
   overflow-y:auto). The redesigned .lp-topbar / .lp-content carry their own
   edge padding and the topbar is sticky, so we cancel the wrapper's padding
   for this section only and let the topbar pin to the scroll container top.
   ============================================================ */
.lp-app .main-content:has(> #section-overview:not(.hidden)){padding:0}
/* fallback for browsers without :has — neutralize wrapper padding via negative
   margins on the overview section so the topbar/content reach the edges */
.lp-app #section-overview{margin:-32px -40px}
.lp-app .main-content:has(> #section-overview:not(.hidden)) #section-overview{margin:0}
/* sticky topbar pins against the scrolling .main-content */
.lp-app #section-overview .lp-topbar{position:sticky;top:0;z-index:20}
/* empty-state note sits flush inside the redesigned card */
.lp-app #section-overview .widget-note{color:var(--ink-3);font-size:var(--fs-sm);padding:6px 0}
/* topbar avatar carries the legacy id #topbar-avatar (App._setAvatarImage may
   inject an <img>); keep it clickable and let the image fill the circle */
.lp-app #topbar-avatar{cursor:pointer;overflow:hidden}
.lp-app #topbar-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
@media(max-width:900px){
  .lp-app #section-overview{margin:-24px -18px}
  .lp-app .main-content:has(> #section-overview:not(.hidden)) #section-overview{margin:0}
}

/* ============================================================
   TRANSAKTIONEN — Raster redesign content.
   Same wrapper-padding cancel + sticky topbar as Übersicht.
   ============================================================ */
.lp-app .main-content:has(> #section-transactions:not(.hidden)){padding:0}
.lp-app #section-transactions{margin:-32px -40px}
.lp-app .main-content:has(> #section-transactions:not(.hidden)) #section-transactions{margin:0}
.lp-app #section-transactions .lp-topbar{position:sticky;top:0;z-index:20}

/* DATEV export grid (Von / Bis / button) */
.lp-app #section-transactions .tx-datev-grid{display:grid;
  grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
.lp-app #section-transactions .tx-datev-btn{height:42px}
.lp-app #section-transactions .tx-datev-status{font-size:var(--fs-sm);
  margin-top:10px;min-height:18px;font-weight:500}

/* filter toolbar */
.lp-app #section-transactions .lp-tx-toolbar{display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;justify-content:flex-start;margin-bottom:20px}
.lp-app #section-transactions .lp-tx-toolbar-sep{width:1px;height:24px;
  background:var(--line);margin:0 4px}
.lp-app #section-transactions .tx-search{min-width:200px}
/* active status filter uses the outlined (not filled) chip look from the design */
.lp-app #section-transactions .lp-tx-toolbar .chip.active{background:transparent;
  color:var(--accent);border-color:var(--accent)}

/* table column template: Bestellung / Status / Betrag */
.lp-app #section-transactions .tx-tbl-cols{grid-template-columns:1.6fr .8fr .9fr}
.lp-app #section-transactions .tbl-row{cursor:pointer}

@media(max-width:900px){
  .lp-app #section-transactions{margin:-24px -18px}
  .lp-app .main-content:has(> #section-transactions:not(.hidden)) #section-transactions{margin:0}
  .lp-app #section-transactions .tx-datev-grid{grid-template-columns:1fr 1fr}
  .lp-app #section-transactions .tx-datev-btn{grid-column:1 / -1}
}

/* ════════════════════════════════════════════════════════════
   KATALOG — Produkte / Kategorien / Modifikatoren (Raster)
   Scoped under .lp-app so legacy globals never bleed in.
   ════════════════════════════════════════════════════════════ */

/* wrapper-padding cancel + sticky topbar (same as Übersicht/Transaktionen) */
.lp-app .main-content:has(> #section-products:not(.hidden)),
.lp-app .main-content:has(> #section-categories:not(.hidden)),
.lp-app .main-content:has(> #section-modifiers:not(.hidden)){padding:0}
.lp-app #section-products,
.lp-app #section-categories,
.lp-app #section-modifiers{margin:-32px -40px}
.lp-app .main-content:has(> #section-products:not(.hidden)) #section-products,
.lp-app .main-content:has(> #section-categories:not(.hidden)) #section-categories,
.lp-app .main-content:has(> #section-modifiers:not(.hidden)) #section-modifiers{margin:0}
.lp-app #section-products .lp-topbar,
.lp-app #section-categories .lp-topbar,
.lp-app #section-modifiers .lp-topbar{position:sticky;top:0;z-index:20}
@media(max-width:900px){
  .lp-app #section-products,
  .lp-app #section-categories,
  .lp-app #section-modifiers{margin:-24px -18px}
  .lp-app .main-content:has(> #section-products:not(.hidden)) #section-products,
  .lp-app .main-content:has(> #section-categories:not(.hidden)) #section-categories,
  .lp-app .main-content:has(> #section-modifiers:not(.hidden)) #section-modifiers{margin:0}
}

/* product thumbnail image fills the tile */
.lp-app #section-products .prod-thumb img,
.lp-app #section-modifiers .prod-thumb img,
.lp-app .prodcat-thumb img{width:100%;height:100%;object-fit:cover}

/* product flags (Favorit / 86'd) shown inline after the category */
.lp-app .lp-prod-flags{display:inline-flex;gap:6px;margin-left:4px}
.lp-app .lp-prod-flag{font-size:var(--fs-xs);font-weight:700;line-height:1;
  padding:3px 7px;border-radius:var(--r-pill);letter-spacing:.01em}
.lp-app .lp-prod-flag.fav{color:#b9770b;background:color-mix(in srgb,#d9870e 14%,transparent)}
.lp-app .lp-prod-flag.sold{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}

/* category cards */
.lp-app .cat-card{display:flex;flex-direction:column;gap:18px}
.lp-app .cat-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-app .cat-card-name{font-weight:700;font-size:var(--fs-h2);letter-spacing:-.015em}
.lp-app .cat-card-count{font-size:12px}

/* modifier group cards */
.lp-app .modgrp-card{display:flex;flex-direction:column;gap:16px}
.lp-app .modgrp-head{display:flex;flex-direction:column;gap:7px}
.lp-app .modgrp-name{font-weight:700;font-size:var(--fs-h2);letter-spacing:-.015em}
.lp-app .modgrp-opts{display:flex;flex-direction:column;gap:0}
.lp-app .modgrp-opt{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.lp-app .modgrp-opt:first-child{border-top:0}
.lp-app .modgrp-opt-name{font-weight:500}

/* products list (by-category) view — card-wrapped tables */
.lp-app #products-list-by-category{display:flex;flex-direction:column;gap:var(--gap)}
.lp-app .prodcat-head{margin-bottom:6px}
.lp-app .prodcat-thumb{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-chip)}
.lp-app .prodcat-tbl{width:100%;border-collapse:collapse}
.lp-app .prodcat-tbl thead th{text-align:left;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding:0 0 12px;border-bottom:1px solid var(--line)}
.lp-app .prodcat-tbl thead th:nth-child(2){text-align:right}
.lp-app .prodcat-tbl tbody td{padding:13px 0;border-top:1px solid var(--line);
  font-size:var(--fs-body);vertical-align:middle}
.lp-app .prodcat-tbl tbody tr:first-child td{border-top:0}
.lp-app .prodcat-tbl td.lp-prod-price{text-align:right}
.lp-app .prodcat-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}

/* ── catalog modals (reuse legacy .modal/.active shell) ── */
.lp-app .lp-modal-card,
.modal .lp-modal-card{padding:0;max-width:520px;border-radius:var(--r-card);
  display:flex;flex-direction:column;max-height:90vh}
.modal .lp-modal-card-lg{max-width:680px}
.modal .lp-modal-card .lp-modal-head{padding:24px 24px 18px}
.modal .lp-modal-card .lp-modal-body{padding:22px 24px;gap:18px}
.modal .lp-modal-close{appearance:none;border:1px solid var(--line);background:var(--card);
  width:34px;height:34px;border-radius:var(--r-chip);display:grid;place-items:center;
  color:var(--ink-3);cursor:pointer;font-size:20px;line-height:1;flex:0 0 34px}
.modal .lp-modal-close:hover{background:var(--hover);color:var(--ink)}

/* field that spans full width inside a modal body */
.lp-app .lp-field-full,.modal .lp-field-full{display:block}

/* footer placed inside a form (not a separate flex child) */
.modal .lp-modal-foot-in{border-top:1px solid var(--line);padding-top:18px;margin-top:4px}

/* toggle-style row inside modals (Favorit, Pflichtauswahl …) */
.modal .lp-modrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.modal .lp-modrow-sep{border-top:1px solid var(--line);padding-top:16px}

/* checkbox styled as the design's check pill */
.modal .lp-chkbox{position:relative;display:inline-flex;cursor:pointer}
.modal .lp-chkbox input{position:absolute;opacity:0;width:0;height:0}
.modal .lp-chkbox span{width:24px;height:24px;border-radius:var(--r-chip);
  border:2px solid var(--line-2);background:var(--card);display:grid;place-items:center;
  transition:.15s}
.modal .lp-chkbox input:checked + span{background:var(--accent);border-color:var(--accent)}
.modal .lp-chkbox input:checked + span::after{content:"";width:11px;height:6px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
  margin-top:-2px}

/* sub-form (add variant / add modifier) */
.modal .lp-subform{display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:4px}

/* row list (existing variants / modifiers) */
.modal .lp-rowlist{display:flex;flex-direction:column;gap:0}
.modal .lp-rowitem{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--line)}
.modal .lp-rowlist .lp-rowitem:first-child{border-top:0}
.modal .lp-rowitem-name{font-weight:600;flex:1;min-width:0}
.modal .lp-rowitem-price{font-weight:600}
.modal .lp-rowitem-del{flex:0 0 auto;color:var(--ink-3)}
.modal .lp-rowitem-del:hover{color:var(--danger)}

/* product image upload row inside the modal */
.modal .lp-prod-imgrow{display:flex;align-items:center;gap:12px}

/* ════════════════════════════════════════════════════════════
   TEAM — Teammitglieder / Einladungen / Rollen & Berechtigungen
   Scoped under .lp-app so legacy globals never bleed in.
   ════════════════════════════════════════════════════════════ */

/* wrapper-padding cancel + sticky topbar (same as Katalog) */
.lp-app .main-content:has(> #section-staff:not(.hidden)){padding:0}
.lp-app #section-staff{margin:-32px -40px}
.lp-app .main-content:has(> #section-staff:not(.hidden)) #section-staff{margin:0}
.lp-app #section-staff .lp-topbar{position:sticky;top:0;z-index:20}
@media(max-width:900px){
  .lp-app #section-staff{margin:-24px -18px}
  .lp-app .main-content:has(> #section-staff:not(.hidden)) #section-staff{margin:0}
}

/* small avatar used in member/invite rows */
.lp-app #section-staff .lp-avatar-sm{width:34px;height:34px;flex:0 0 34px;font-size:13px}

/* table column template: Name / E-Mail / Rolle / Status / Aktionen */
.lp-app #section-staff .lp-team-tbl .tbl-head,
.lp-app #section-staff .lp-team-tbl .tbl-row{
  grid-template-columns:1.3fr 1.8fr .9fr .8fr auto;gap:14px}
.lp-app #section-staff .lp-tar{text-align:right}

.lp-app #section-staff .lp-team-name{display:flex;align-items:center;gap:12px;min-width:0}
.lp-app #section-staff .lp-team-nm{font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-app #section-staff .lp-team-email{font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.lp-app #section-staff .lp-team-actions{display:flex;gap:8px;justify-content:flex-end}
.lp-app #section-staff .lp-team-inactive{opacity:.55}
.lp-app #section-staff .lp-team-empty{justify-content:center;text-align:center;
  display:block;padding:26px 0}

/* role chip — outlined accent look (non-interactive) */
.lp-app .lp-team-rolechip{height:27px;pointer-events:none;color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent)}

/* ── Rollen & Berechtigungen modal ── */
.modal .lp-perm-grid{display:flex;flex-direction:column;gap:0}
.modal .lp-perm-toggle{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 0;border-top:1px solid var(--line);cursor:pointer}
.modal .lp-perm-grid .lp-perm-toggle:first-child{border-top:0}
.modal .lp-perm-name{font-weight:600}

.modal .lp-team-rolelist{display:flex;flex-direction:column}
.modal .lp-team-rolerow{padding:13px 0}
.modal .lp-team-permwrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.modal .lp-team-permchip{height:25px;font-size:var(--fs-xs);pointer-events:none;
  color:var(--ink-2)}
.modal .lp-team-roleform{border-top:1px solid var(--line);padding-top:18px;
  margin-top:4px;display:flex;flex-direction:column;gap:16px}

/* inline modal error text */
.modal .lp-modal-error{color:var(--danger);font-size:var(--fs-sm);
  font-weight:500;margin:0;min-height:0}
.modal .lp-modal-error:empty{display:none}