/* HelvetiKey.ch – Swiss Design */
:root {
  --c-bg:       #070d1a;
  --c-surf:     #0c1427;
  --c-surf2:    #101c33;
  --c-border:   rgba(255,255,255,.12);
  --c-text:     #e4ecf7;
  --c-muted:    #8ba3c7;
  --c-primary:  #1a5fd4;
  --c-accent:   #3b82f6;
  --c-success:  #22c55e;
  --c-danger:   #ef4444;
  --c-warn:     #f59e0b;
  --c-gold:     #f5c518;
  --c-swiss:    #d52b1e;
  --radius:     14px;
  --shadow:     0 16px 48px rgba(0,0,0,.45);
  --font:       Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:       'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; width:100%; max-width:100%; overflow-x:hidden; }
body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); min-height: 100vh; width:100%; max-width:100%; overflow-x:hidden; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
a { color: inherit; text-decoration: none; }

.site-mark{display:inline-grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 24%,var(--c-surf2)),color-mix(in srgb,var(--c-secondary) 13%,var(--c-surf2)));border:1px solid color-mix(in srgb,var(--c-primary) 22%,var(--c-border));color:#dbeafe;font-weight:850;text-transform:uppercase;line-height:1}.site-mark-sm{width:16px;height:16px;border-radius:4px;font-size:8px}.site-mark-md{width:28px;height:28px;border-radius:7px;font-size:12px}.site-mark-lg{width:32px;height:32px;border-radius:8px;font-size:13px}

/* ── TOPBAR ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 54px;
  background: rgba(7,13,26,.85); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 200;
  min-width: 0; overflow: visible;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--c-primary), #2d6ee8);
  display: grid; place-items: center; font-size: 15px;
  box-shadow: 0 4px 14px rgba(26,95,212,.35);
  flex-shrink: 0;
}
.logo-img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; }
.logo-img.hk-brand-mark,.hk-brand-mark{background:transparent!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important;filter:drop-shadow(0 5px 12px rgba(26,95,212,.28));}
.hk-brand-wordmark{display:block;width:min(100%,360px);height:auto;object-fit:contain;}
.brand-name { font-weight: 900; font-size: 16px; letter-spacing: -.3px; }
.brand-tag { font-size: 10px; color: var(--c-muted); font-weight: 500; letter-spacing: .5px; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; }
.topbar-user { font-size: 12px; color: var(--c-muted); }

/* ── NAV ── */
.subnav {
  display: flex; gap: 4px; padding: 8px 20px;
  background: rgba(0,0,0,.15); border-bottom: 1px solid var(--c-border);
  overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.navlink {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 9px;
  color: var(--c-muted); font-size: 13px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
  transition: all .15s;
}
.navlink:hover { color: var(--c-text); background: rgba(255,255,255,.05); border-color: var(--c-border); }
.navlink.active { color: var(--c-text); background: rgba(26,95,212,.15); border-color: rgba(26,95,212,.3); }

/* ── LAYOUT ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 20px 16px; }
.layout-2col { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
@media(max-width:768px){ .layout-2col { grid-template-columns: 1fr; } }
.layout-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; }

/* ── CARDS ── */
.card {
  background: var(--c-surf); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow);
}
.card-sm { padding: 12px 16px; }
.card-flush { padding: 0; overflow: hidden; }
.card + .card { margin-top: 14px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-header h2 { font-size: 14px; font-weight: 700; }

/* ── STATS ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
.stat-card {
  background: var(--c-surf2); border: 1px solid var(--c-border);
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.stat-val { font-size: 28px; font-weight: 900; color: var(--c-accent); line-height: 1; }
.stat-label { font-size: 11px; color: var(--c-muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.stat-icon { font-size: 20px; margin-bottom: 6px; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 11px;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; transition: all .15s;
  background: var(--c-primary); color: #fff;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn.xs { padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.btn.ghost { background: rgba(255,255,255,.06); color: var(--c-text); border: 1px solid var(--c-border); }
.btn.outline { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.btn.success { background: var(--c-success); }
.btn.danger { background: var(--c-danger); }
.btn.warn { background: var(--c-warn); color: #000; }
.btn.gold { background: var(--c-gold); color: #000; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── FORMS ── */
.form { display: grid; gap: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:600px){ .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 5px; }
.field label { font-size: 11px; font-weight: 700; color: var(--c-muted); letter-spacing: .4px; text-transform: uppercase; }
.field input, .field select, .field textarea {
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid var(--c-border); background: #0c1427;
  color: var(--c-text); font-family: var(--font); font-size: 14px;
  transition: border-color .15s; outline: none; width: 100%;
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b85ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}
.field select option {
  background: #0c1427;
  color: #e4ecf7;
}
.field select option:disabled {
  color: #6b85ad;
}
.field select option:checked {
  background: #1a3a6b;
  color: #e4ecf7;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); background: rgba(26,95,212,.06); }
.field textarea { resize: vertical; }
.hint { font-size: 11px; color: var(--c-muted); }
.field-row { display: flex; gap: 8px; align-items: center; }

/* ── TABLE ── */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; }
.table th { color: var(--c-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(0,0,0,.2); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,.02); }
.mono { font-family: var(--mono); font-size: 12px; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.badge-green  { background: rgba(34,197,94,.15);  color: #86efac; border: 1px solid rgba(34,197,94,.25); }
.badge-yellow { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.25); }
.badge-red    { background: rgba(239,68,68,.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
.badge-blue   { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); }
.badge-gray   { background: rgba(107,133,173,.12);color: var(--c-muted); border: 1px solid var(--c-border); }

/* ── FLASH ── */
.flash { padding: 10px 16px; border-radius: 11px; font-size: 13px; margin: 8px 0; border: 1px solid transparent; }
.flash.success { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.2); color: #86efac; }
.flash.error   { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); color: #fca5a5; }
.flash.warn    { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); color: #fcd34d; }

/* ── SIDEBAR (Group Tree) ── */
.sidebar { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px; }
.sidebar-title { font-size: 10px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.group-link { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px; color: var(--c-muted); font-size: 13px; cursor: pointer; transition: all .1s; }
.group-link:hover { background: rgba(255,255,255,.04); color: var(--c-text); }
.group-link.active { background: rgba(26,95,212,.12); color: var(--c-text); border: 1px solid rgba(26,95,212,.2); }
.group-children { margin-left: 16px; border-left: 1px solid var(--c-border); padding-left: 8px; }

/* ── SECRET (ProtectedString) ── */
.secret-cell { display: flex; align-items: center; gap: 6px; }
.secret-val { font-family: var(--mono); font-size: 12px; color: #86efac; word-break: break-all; }
.secret-timer { font-size: 10px; color: var(--c-muted); }

/* ── PASSWORD QUALITY ── */
.pw-bar { height: 3px; background: var(--c-border); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.pw-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }
.pw-label { font-size: 11px; color: var(--c-muted); margin-top: 3px; }

/* ── PLAN CARDS (Landing / Pricing) ── */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
.plan-card {
  background: var(--c-surf); border: 1px solid var(--c-border);
  border-radius: 18px; padding: 24px; display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.plan-card:hover { border-color: rgba(26,95,212,.4); transform: translateY(-2px); }
.plan-card.featured { border-color: var(--c-primary); background: rgba(26,95,212,.06); }
.plan-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted); }
.plan-price { font-size: 36px; font-weight: 900; line-height: 1.1; margin: 8px 0 4px; }
.plan-price small { font-size: 14px; font-weight: 400; color: var(--c-muted); }
.plan-features { flex: 1; list-style: none; margin: 16px 0; }
.plan-features li { padding: 5px 0; font-size: 13px; display: flex; gap: 8px; color: var(--c-muted); }
.plan-features li.ok { color: var(--c-text); }
.plan-features li.ok::before { content: '✓'; color: var(--c-success); font-weight: 700; }
.plan-features li:not(.ok)::before { content: '—'; opacity: .3; }

/* ── ADMIN PANEL ── */
.admin-header { background: linear-gradient(135deg,rgba(26,95,212,.12),rgba(0,0,0,0)); border-bottom: 1px solid var(--c-border); padding: 16px 20px; }
.admin-title { font-size: 13px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ── LANDING ── */
.hero {
  min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px;
  background: radial-gradient(ellipse 80% 60% at 50% -10%,rgba(26,95,212,.2),transparent);
}
.hero-logo { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg,#1a5fd4,#2d6ee8); display: grid; place-items: center; font-size: 32px; margin: 0 auto 20px; box-shadow: 0 8px 32px rgba(26,95,212,.35); }
.hero h1 { font-size: clamp(32px,6vw,64px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; max-width: 700px; }
.hero h1 span { color: var(--c-accent); }
.hero-sub { font-size: 18px; color: var(--c-muted); max-width: 540px; margin: 16px auto 32px; line-height: 1.6; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(213,43,30,.12); border: 1px solid rgba(213,43,30,.25); color: #f9a9a5; border-radius: 99px; padding: 4px 12px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; margin: 40px 0; }
.feature-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: 16px; padding: 20px; }
.feature-icon { font-size: 26px; margin-bottom: 10px; }
.feature-title { font-weight: 700; margin-bottom: 6px; }
.feature-text { font-size: 13px; color: var(--c-muted); line-height: 1.6; }
.section-title { text-align: center; font-size: clamp(22px,4vw,40px); font-weight: 900; letter-spacing: -.5px; margin-bottom: 8px; }
.section-sub { text-align: center; color: var(--c-muted); font-size: 15px; max-width: 540px; margin: 0 auto 32px; }
section.padded { padding: 64px 20px; max-width: 1200px; margin: 0 auto; }

/* PWA styles are defined once in the responsive PWA section below. */

/* ── MISC ── */
.sep { height: 1px; background: var(--c-border); margin: 16px 0; }
.chip { display: inline-block; padding: 2px 8px; background: rgba(255,255,255,.06); border-radius: 6px; font-size: 11px; color: var(--c-muted); }
.empty-state { text-align: center; padding: 40px; color: var(--c-muted); }
.empty-state .empty-icon { font-size: 36px; margin-bottom: 10px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.page-title { font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
footer.land { background: var(--c-surf); border-top: 1px solid var(--c-border); padding: 32px 20px; text-align: center; color: var(--c-muted); font-size: 13px; }
.ch-flag { display: inline-block; width: 16px; height: 16px; background: var(--c-swiss); border-radius: 3px; position: relative; vertical-align: middle; margin-right: 4px; }
.ch-flag::before, .ch-flag::after { content:''; position: absolute; background: #fff; border-radius: 1px; }
.ch-flag::before { width: 40%; height: 10%; top: 45%; left: 30%; }
.ch-flag::after  { width: 10%; height: 40%; top: 30%; left: 45%; }

/* Tag Filter Bar */
.tag-filter { cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--c-border); color: var(--c-muted); transition: all .12s; }
.tag-filter:hover { border-color: var(--c-primary); color: var(--c-text); }
.tag-filter.active { background: rgba(26,95,212,.15); border-color: var(--c-primary); color: var(--c-text); font-weight: 700; }


/* ── VAULT LAYOUT ── */
.vault-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.vault-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.vault-search { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 11px; border: 1px solid var(--c-border); background: #0c1427; color: var(--c-text); font-family: var(--font); font-size: 14px; outline: none; transition: border-color .15s; }
.vault-search:focus { border-color: var(--c-accent); background: rgba(26,95,212,.06); }
.sort-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.sort-opt { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--c-muted); border: 1px solid var(--c-border); background: transparent; transition: all .12s; white-space: nowrap; }
.sort-opt:hover { color: var(--c-text); border-color: var(--c-primary); }
.sort-opt.active { background: rgba(26,95,212,.15); border-color: rgba(26,95,212,.3); color: var(--c-text); }
.sidebar-arrow { font-size: 11px; transition: transform .2s; }
.sidebar-body { display: flex; flex-direction: column; gap: 2px; }
.gl-count { margin-left: auto; font-size: 10px; color: var(--c-muted); background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 99px; }
.title-meta { font-size: 13px; font-weight: 400; color: var(--c-muted); margin-left: 6px; }
.title-search { font-size: 14px; color: var(--c-muted); }
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.page-btn { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--c-muted); border: 1px solid var(--c-border); transition: all .12s; }
.page-btn:hover { color: var(--c-text); border-color: var(--c-primary); }
.page-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.vault-main { min-width: 0; }
.flash-x { background: none; border: none; color: var(--c-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 0 0 8px; float: right; }
.nav-sep { width: 1px; background: var(--c-border); margin: 0 4px; align-self: stretch; display: inline-block; }
.impersonate-bar { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: rgba(239,68,68,.95); border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; gap: 12px; z-index: 9998; box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM  ·  Mobile-first  ·  HelvetiKey.ch
   Breakpoints: 768px tablet / 480px phone / 360px small phone
   ══════════════════════════════════════════════════════════════ */

/* Utility visibility classes */
.d-hide-mobile { /* shown by default, hidden on mobile */ }
.d-show-mobile { display: none !important; }

/* ── Hamburger button ──────────────────────────────────────── */
.hamburger {
  display: none;
  align-items: center; justify-content: center;
  gap: 8px; min-width: 78px; height: 40px;
  background: var(--c-surface-2, rgba(255,255,255,.06));
  color: var(--c-text);
  border: 1px solid var(--c-border);
  cursor: pointer; padding: 7px 10px; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.hamburger .hamb-lines { display: flex; flex-direction: column; gap: 4px; width: 22px; }
.hamburger .hamb-lines i {
  display: block; width: 22px; height: 3px;
  background: var(--c-text); border-radius: 999px;
  transition: all .2s;
}
.hamburger strong { font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .01em; }
.hamburger:active { transform: translateY(1px); }

/* ── Mobile Bottom Nav ─────────────────────────────────────── */
.mbn {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: rgba(7,13,26,.96); backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mbn-inner {
  display: flex; height: 56px; align-items: stretch;
}
.mbn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; text-decoration: none;
  color: var(--c-muted); font-size: 9.5px; font-weight: 700;
  letter-spacing: .3px; transition: color .12s;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
}
.mbn-item.active { color: var(--c-text); }
.mbn-item:active { opacity: .7; }
.mbn-icon { font-size: 22px; line-height: 1; }
.mbn-lbl { line-height: 1; }

/* ── Mobile Drawer ─────────────────────────────────────────── */
.drawer {
  display: none; position: fixed; inset: 0; z-index: 500;
}
.drawer.open { display: block; }
.drawer-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  animation: fadeIn .2s ease;
}
.drawer-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--c-surf); border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--c-border);
  max-height: 88vh; overflow: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.drawer.open .drawer-sheet { transform: translateY(0); }
.drawer-pill {
  width: 36px; height: 4px; background: var(--c-border);
  border-radius: 2px; margin: 12px auto 6px; flex-shrink: 0;
}
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 18px 12px; border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.drawer-x {
  background: rgba(255,255,255,.08); border: 1px solid var(--c-border);
  color: var(--c-muted); width: 30px; height: 30px; border-radius: 99px;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.drawer-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 8px 0 8px; flex: 1; }
.drawer-sec { padding: 2px 0; border-bottom: 1px solid var(--c-border); margin-bottom: 4px; }
.drawer-sec:last-child { border-bottom: none; }
.di {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; color: var(--c-text); font-size: 15px;
  font-weight: 500; text-decoration: none; transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.di:active { background: rgba(255,255,255,.06); }
.di.active { color: var(--c-accent); font-weight: 700; }
.di-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }

/* ── Floating Action Button ────────────────────────────────── */
.fab {
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  right: 16px; z-index: 200;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--c-primary); color: #fff;
  border: none; font-size: 26px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(26,95,212,.55);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 300;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.fab:active { transform: scale(.88); box-shadow: 0 3px 12px rgba(26,95,212,.4); }

/* ── Mobile Vault Cards ────────────────────────────────────── */
.vault-cards { display: flex; flex-direction: column; gap: 8px; }
.vcard {
  background: var(--c-surf); border: 1px solid var(--c-border);
  border-radius: 14px; overflow: hidden; transition: border-color .12s;
}
.vcard:active { border-color: rgba(26,95,212,.4); }
.vcard-main {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 10px;
}
.vcard-icon { flex-shrink: 0; width: 36px; }
.vcard-fallback-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(26,95,212,.15); display: flex; align-items: center;
  justify-content: center; font-size: 18px;
}
.vcard-info { flex: 1; min-width: 0; }
.vcard-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vcard-user { font-family: var(--mono); font-size: 12px; color: var(--c-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard-host { font-size: 11px; color: var(--c-muted); margin-top: 1px; }
.vcard-qual { margin-top: 4px; display: flex; align-items: center; }
.vcard-actions {
  display: flex; gap: 6px; padding: 0 14px 12px; flex-wrap: wrap;
}
.vcard-actions .btn { flex: 1; justify-content: center; font-size: 12px; min-height: 38px; }

/* ── Responsive Breakpoints ────────────────────────────────── */
@media (max-width: 768px) {
  /* Utility */
  .d-hide-mobile { display: none !important; }
  .d-show-mobile { display: block !important; }

  /* Show hamburger */
  .hamburger { display: flex !important; }

  /* Body padding for bottom nav */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 4px); }

  /* Topbar */
  .topbar { padding: 0 14px; height: 50px; }
  .brand-name { font-size: 15px; }

  /* Layout */
  .wrap { padding: 12px 12px 20px; }
  .layout-2col { grid-template-columns: 1fr; gap: 10px; }
  .layout-3col { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

  /* Vault layout: stacked */
  .vault-layout { grid-template-columns: 1fr; gap: 10px; }
  .vault-toolbar { gap: 6px; }
  .vault-search { font-size: 16px; } /* Prevent iOS zoom */
  .sort-bar { gap: 4px; }

  /* Sidebar collapsible on mobile */
  .sidebar { }
  .sidebar-title { cursor: pointer; user-select: none; margin-bottom: 0; padding-bottom: 8px; }
  .sidebar-body { }
  .sidebar-body.collapsed { display: none; }

  /* Page header */
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }
  .page-header .btn { justify-content: center; width: 100%; }

  /* Cards */
  .card { padding: 14px; }
  .card + .card { margin-top: 10px; }

  /* Stats */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-val { font-size: 24px; }

  /* Forms: prevent iOS zoom on inputs */
  .field input, .field select, .field textarea { font-size: 16px !important; }

  /* Tables: hide on mobile */
  .table { font-size: 12px; }
  .table td, .table th { padding: 8px 10px; }

  /* Buttons */
  .btn-row { flex-wrap: wrap; gap: 6px; }

  /* Flash */
  .flash { font-size: 13px; padding: 10px 14px; }

  /* Pagination */
  .pagination { gap: 3px; }
  .page-btn { padding: 6px 10px; font-size: 12px; }

  /* Touch targets – min 44px per HIG */
  .btn { min-height: 38px; }
  .btn.sm { min-height: 34px; }
  .group-link { min-height: 40px; padding: 9px 10px; }
  .navlink { min-height: 38px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-width: 18px; }

}

@media (max-width: 480px) {
  .wrap { padding: 10px 10px 18px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 17px; }
  .card { padding: 12px; border-radius: 12px; }
  .vcard-actions .btn { font-size: 11px; }
  /* Hide less critical columns */
  .col-xs-hide { display: none !important; }
}

@media (max-width: 360px) {
  .stat-grid { grid-template-columns: 1fr; }
  .brand-name { font-size: 14px; }
  .mbn-lbl { display: none; }
  .mbn-icon { font-size: 24px; }
}

/* iOS safe area support */
@supports (padding: max(0px)) {
  .mbn { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
  body { padding-bottom: max(calc(56px + env(safe-area-inset-bottom)), 60px); }
}


/* ── CUSTOM DROPDOWN (cdd) ── */
.cdd { position: relative; user-select: none; }
.cdd-val {
  padding: 9px 34px 9px 13px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12); background: #0c1427;
  color: #e4ecf7; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color .15s;
}
.cdd-val:hover, .cdd.open .cdd-val { border-color: #3b82f6; }
.cdd-arrow { color: #8ba3c7; font-size: 11px; margin-left: 8px; flex-shrink: 0; transition: transform .15s; }
.cdd.open .cdd-arrow { transform: rotate(180deg); }
.cdd-list {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #0f1d35; border: 1px solid rgba(59,130,246,.35);
  border-radius: 11px; z-index: 999; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  max-height: 240px; overflow-y: auto;
}
.cdd.open .cdd-list { display: block; }
.cdd-opt {
  padding: 10px 14px; color: #e4ecf7; font-size: 14px;
  cursor: pointer; transition: background .1s; display: flex; align-items: center; gap: 8px;
}
.cdd-opt:hover { background: rgba(59,130,246,.15); color: #fff; }
.cdd-opt.selected { background: rgba(59,130,246,.2); color: #93c5fd; font-weight: 600; }
.cdd-opt:first-child { border-radius: 10px 10px 0 0; }
.cdd-opt:last-child  { border-radius: 0 0 10px 10px; }
/* scrollbar */
.cdd-list::-webkit-scrollbar { width: 4px; }
.cdd-list::-webkit-scrollbar-track { background: transparent; }
.cdd-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── SELECT DARK OVERRIDE (all selects) ── */
select {
  background: #0c1427 !important;
  color: #e4ecf7 !important;
  border-color: rgba(255,255,255,.08);
  color-scheme: dark;
}
select option {
  background: #0c1427 !important;
  color: #e4ecf7 !important;
}
select option:hover, select option:focus {
  background: #1a3a6b !important;
  color: #e4ecf7 !important;
}
select option:disabled,
select option[disabled] {
  background: #0c1427 !important;
  color: #4a6080 !important;
  opacity: 1 !important;
}
/* Force dark color-scheme globally so native controls render dark */
:root { color-scheme: dark; }
html { color-scheme: dark; }

/* ── Smooth animations for drawer ──────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Quick Copy Tooltip ─────────────────────────────────────── */
.quick-copy-tip { animation: qcFade .12s ease; }
@keyframes qcFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
tr[data-id] { cursor: pointer; }

/* ── Keyboard shortcuts ─────────────────────────────────────── */
kbd {
  font-family: var(--mono); font-size: 10px;
  background: rgba(255,255,255,.07); border: 1px solid var(--c-border);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--c-muted);
}

/* ── Drag & drop ────────────────────────────────────────────── */
tr[data-id][draggable="true"] { cursor: grab; }
tr[data-id][draggable="true"]:active { cursor: grabbing; }
.group-link.drag-over { background: rgba(26,95,212,.25) !important; }

/* Weitere funktionale Vault-UX */
.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;border:1px solid rgba(26,95,212,.28);background:rgba(26,95,212,.10);border-radius:14px}.bulkbar[hidden]{display:none}.bulkbar strong{font-size:13px}.copy-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:10000;background:#0f1a30;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 55px rgba(0,0,0,.45);border-radius:999px;padding:10px 14px;color:var(--c-text);font-size:13px;font-weight:750}.table tr.is-selected td{background:rgba(26,95,212,.08)}.quick-copy-tip button{min-width:34px}.vcard.is-selected{outline:2px solid rgba(26,95,212,.45);background:rgba(26,95,212,.08)}
@media(max-width:768px){.bulkbar{position:sticky;bottom:70px;z-index:200}.copy-toast{bottom:82px}.vault-toolbar .sort-bar{width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:2px}.sort-opt{flex:0 0 auto}.vault-search{width:100%;flex-basis:100%}}

/* Multi-tenant hardening UX */
.tenant-context-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:inherit;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-switcher{font-weight:700;border:1px solid var(--c-border,#d8dee8);border-radius:10px;padding:7px 10px;background:var(--c-card,#fff);color:var(--c-text,#0f172a)}
.tenant-warning{border:1px solid #f59e0b;background:#fffbeb;color:#92400e;border-radius:14px;padding:12px 14px;margin-bottom:14px;font-weight:650}
.role-chip{display:inline-flex;border-radius:999px;padding:3px 8px;background:rgba(26,95,212,.10);color:var(--c-primary,#1a5fd4);font-size:12px;font-weight:800}

/* ── TOTP Inline (vault_list) ─────────────────────────────── */
.totp-inline-code { display:inline-flex; align-items:center; gap:6px; }
.totp-code-inline {
  font-family:var(--mono); font-size:14px; font-weight:900;
  letter-spacing:.18em; color:var(--c-text);
  background:rgba(26,95,212,.12); border:1px solid rgba(26,95,212,.25);
  padding:2px 8px; border-radius:8px;
}
.totp-timer-inline { font-size:10px; color:var(--c-muted); }

/* ── PWA Install Sheet ─────────────────────────────────────
   One definition only: no inherited translateX/left conflicts. */
#pwa-banner,
#pwa-ios-hint {
  position: fixed;
  z-index: 30020;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  margin: 0 auto;
  transform: none;
  box-sizing: border-box;
  background: linear-gradient(145deg, rgba(15,30,61,.98), rgba(8,18,36,.99));
  border: 1px solid rgba(96,165,250,.28);
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.025) inset;
  color: var(--c-text);
  animation: hkPwaSheetIn .26s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
#pwa-banner.hidden,
#pwa-ios-hint.hidden { display: none !important; }
@keyframes hkPwaSheetIn {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.pwa-install-inner { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px 48px 14px 16px; }
.pwa-install-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: rgba(37,99,235,.16); border: 1px solid rgba(96,165,250,.24); }
.pwa-install-copy strong { display: block; font-size: 14px; line-height: 1.25; }
.pwa-install-copy span { display: block; margin-top: 3px; color: var(--c-muted); font-size: 11px; line-height: 1.4; }
.pwa-install-actions { display: flex; align-items: center; gap: 8px; }
.pwa-close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; min-width: 34px; min-height: 34px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(148,163,184,.2); border-radius: 10px;
  background: rgba(255,255,255,.045); color: var(--c-muted);
  font: 800 18px/1 var(--font); cursor: pointer;
}
.pwa-close:hover,.pwa-close:focus-visible { color: var(--c-text); background: rgba(255,255,255,.09); outline: 2px solid rgba(96,165,250,.35); outline-offset: 1px; }
.pwa-ios-content { padding: 16px 48px 16px 18px; }
.pwa-ios-title { font-weight: 800; font-size: 14px; }
.pwa-ios-sub { color: var(--c-muted); font-size: 12px; margin: 2px 0 12px; }
.pwa-ios-steps { display: grid; gap: 5px; font-size: 13px; line-height: 1.5; }
.pwa-ios-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }

@media (max-width: 768px) {
  #pwa-banner,
  #pwa-ios-hint {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: 18px;
  }
  .pwa-install-inner { grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 14px 44px 12px 14px; }
  .pwa-install-icon { width: 38px; height: 38px; border-radius: 12px; }
  .pwa-install-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); width: 100%; margin-top: 2px; }
  .pwa-install-actions .btn { width: 100%; min-height: 42px; justify-content: center; }
  .pwa-close { top: 9px; right: 9px; }
  .pwa-ios-content { padding: 15px 44px 15px 16px; }
  .pwa-ios-actions { display: grid; grid-template-columns: 1fr; }
  .pwa-ios-actions .btn { width: 100%; min-height: 42px; justify-content: center; }
}

/* ── Mobile action parity: desktop actions remain reachable on phones ── */
.drawer-quick{padding:10px 16px 8px;border-bottom:1px solid var(--c-border);background:rgba(255,255,255,.025);flex-shrink:0}
.drawer-tenant-form{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.drawer-tenant-form label{font-size:11px;color:var(--c-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.drawer-tenant-form select{width:100%;min-height:42px;border-radius:12px;border:1px solid var(--c-border);background:#0c1427;color:var(--c-text);padding:0 12px;font-size:16px}
.drawer-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-quick-grid a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:9px 8px;border-radius:12px;border:1px solid var(--c-border);background:rgba(255,255,255,.045);color:var(--c-text);text-decoration:none;font-size:12px;font-weight:800;text-align:center}
.drawer-quick-grid a:active{transform:scale(.98)}
@media(max-width:768px){
  .card-flush,.table-wrap,.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .card-flush .table,.table-wrap .table,.table-responsive .table{min-width:720px}
  .table td:last-child,.table th:last-child{position:sticky;right:0;background:var(--c-surf);z-index:2;box-shadow:-10px 0 18px rgba(0,0,0,.18)}
  .table tr:hover td:last-child{background:var(--c-surf2)}
  .table td.btn-row{display:flex!important;gap:5px;align-items:center;justify-content:flex-end;white-space:nowrap}
  .table td.btn-row .btn,.table td.btn-row form{flex:0 0 auto}
  .page-header .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}
  .page-header .btn-row .btn{width:100%;min-height:40px}
  #bulk-admin-bar{display:grid!important;grid-template-columns:1fr 1fr;gap:7px}
  #bulk-admin-bar select,#bulk-admin-bar button,#bulk-admin-bar span{width:100%}
}
@media(max-width:420px){.drawer-quick-grid{grid-template-columns:1fr}.page-header .btn-row{grid-template-columns:1fr}}

/* ── SaaS UX v2.1: themes, simple mode and privacy-first AI ─────────── */
:root { --c-secondary:#22c55e; }
body.surface-slate { --c-bg:#0b1220; --c-surf:#121c2e; --c-surf2:#17243a; --c-muted:#9db0cc; }
body.surface-graphite { --c-bg:#111214; --c-surf:#191b1f; --c-surf2:#22252a; --c-muted:#a7adb7; }
body.radius-soft { --radius:8px; }
body.radius-rounded { --radius:14px; }
body.radius-square { --radius:3px; }
body.radius-soft .btn, body.radius-soft input, body.radius-soft select, body.radius-soft textarea { border-radius:7px; }
body.radius-square .btn, body.radius-square input, body.radius-square select, body.radius-square textarea { border-radius:3px; }
body.density-compact .wrap { padding-top:12px; padding-bottom:12px; }
body.density-compact .card { padding:13px; }
body.density-compact .field input, body.density-compact .field select, body.density-compact .field textarea { padding:7px 10px; }
body.density-compact .navlink { padding:3px 9px; }
.simple-only { display:none!important; }
.ui-simple .simple-only { display:block!important; }
.ui-simple .expert-only { display:none!important; }
.ui-simple .subnav { gap:8px; justify-content:center; }
.ui-simple .navlink { padding:7px 15px; font-weight:700; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.page-subtitle { color:var(--c-muted); font-size:13px; margin-top:3px; max-width:720px; }
.card-header p { color:var(--c-muted); font-size:12px; margin-top:2px; }
.settings-stack { max-width:820px; display:grid; gap:14px; }
.settings-jumpbar { display:flex; flex-wrap:wrap; gap:7px; margin:-4px 0 14px; }
.settings-jumpbar a { padding:7px 11px; border:1px solid var(--c-border); border-radius:999px; background:rgba(255,255,255,.035); color:var(--c-muted); font-size:12px; }
.settings-jumpbar a:hover { color:var(--c-text); border-color:rgba(59,130,246,.45); }
.check-line,.check-row label,.danger-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--c-muted); }
.check-row { display:flex; flex-wrap:wrap; gap:14px; }

.ui-mode-switch { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--c-text); border-radius:999px; padding:5px 10px; font:700 11px var(--font); cursor:pointer; }
.ui-mode-switch:hover { background:rgba(255,255,255,.1); }
.drawer-mode-form button { width:100%; border:0; background:rgba(255,255,255,.06); color:var(--c-text); border-radius:10px; padding:10px; font:700 12px var(--font); cursor:pointer; }

.simple-start-panel { background:linear-gradient(135deg,rgba(26,95,212,.16),rgba(34,197,94,.08)); border:1px solid rgba(59,130,246,.28); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.simple-start-copy .eyebrow { display:inline-block; color:#93c5fd; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; }
.simple-start-copy h2 { font-size:21px; margin-bottom:3px; }
.simple-start-copy p { color:var(--c-muted); max-width:760px; font-size:13px; }
.simple-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.simple-action { display:grid; gap:3px; min-height:126px; align-content:center; padding:15px; border:1px solid var(--c-border); background:rgba(7,13,26,.58); border-radius:13px; transition:.15s ease; }
.simple-action:hover { transform:translateY(-2px); border-color:rgba(59,130,246,.5); background:rgba(26,95,212,.1); }
.simple-action.primary { background:linear-gradient(135deg,var(--c-primary),#244fb1); border-color:transparent; }
.simple-action > span { font-size:24px; margin-bottom:3px; }
.simple-action b { font-size:14px; }
.simple-action small { color:var(--c-muted); line-height:1.35; }
.simple-action.primary small { color:rgba(255,255,255,.8); }
.simple-help { margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.045); color:var(--c-muted); font-size:12px; }

.ai-head { align-items:center; }
.ai-privacy-banner { display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border:1px solid rgba(34,197,94,.28); background:rgba(34,197,94,.08); border-radius:var(--radius); margin-bottom:14px; }
.ai-privacy-banner strong { display:block; color:#86efac; margin-bottom:2px; }
.ai-privacy-banner div div { color:var(--c-muted); font-size:12px; line-height:1.5; }
.ai-privacy-icon { font-size:23px; flex:0 0 auto; }
.ai-layout { grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); }
.ai-compose-card,.ai-result-card { margin-top:0!important; }
.ai-task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ai-task-option { position:relative; cursor:pointer; }
.ai-task-option input { position:absolute; opacity:0; }
.ai-task-option span { display:grid; gap:2px; height:100%; padding:11px 12px; border:1px solid var(--c-border); border-radius:11px; background:rgba(255,255,255,.025); }
.ai-task-option small { color:var(--c-muted); font-size:11px; }
.ai-task-option input:checked + span { border-color:rgba(59,130,246,.65); background:rgba(26,95,212,.14); box-shadow:inset 0 0 0 1px rgba(59,130,246,.16); }
.ai-char-line { display:flex; justify-content:space-between; gap:10px; }
.ai-confirm { display:flex; gap:9px; align-items:flex-start; border:1px solid rgba(245,158,11,.25); background:rgba(245,158,11,.07); padding:10px 12px; border-radius:10px; color:#fcd34d; font-size:12px; }
.ai-result-card { min-height:470px; }
.ai-result-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.ai-result-meta span,.ai-findings span { padding:3px 8px; border-radius:999px; border:1px solid var(--c-border); color:var(--c-muted); font-size:10px; }
.ai-output { white-space:normal; line-height:1.7; font-size:14px; margin-bottom:14px; overflow-wrap:anywhere; }
.ai-placeholder { min-height:350px; display:grid; align-content:center; justify-items:center; text-align:center; color:var(--c-muted); gap:8px; }
.ai-placeholder div { font-size:40px; }
.ai-placeholder p { max-width:330px; }
.ai-blocked { min-height:300px; display:grid; align-content:center; justify-items:center; text-align:center; gap:8px; }
.ai-blocked-icon { font-size:38px; }
.ai-blocked p { color:var(--c-muted); max-width:420px; }
.ai-findings { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.provider-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.provider-card { border:1px solid var(--c-border); border-radius:12px; background:rgba(255,255,255,.025); padding:13px; display:grid; gap:10px; }
.provider-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.status-dot { font-size:10px; border-radius:999px; padding:3px 7px; }
.status-dot.ok { background:rgba(34,197,94,.12); color:#86efac; }
.status-dot.off { background:rgba(148,163,184,.1); color:var(--c-muted); }
.provider-host { font:10px var(--mono); color:var(--c-muted); overflow-wrap:anywhere; }
.danger-check { color:#fca5a5; font-size:11px; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.empty-small { color:var(--c-muted); font-size:13px; padding:12px 0; }
.table-wrap { overflow:auto; }
.table-wrap table { width:100%; border-collapse:collapse; }
.table-wrap th,.table-wrap td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--c-border); }
.table-wrap th { color:var(--c-muted); font-size:10px; text-transform:uppercase; }

@media(max-width:980px){
  .simple-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .provider-grid{grid-template-columns:1fr}
  .ai-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
  .simple-action-grid,.ai-task-grid{grid-template-columns:1fr}
  .simple-action{min-height:96px}
  .settings-jumpbar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
  .settings-jumpbar a{white-space:nowrap}
  .page-head>.btn{width:100%;justify-content:center}
  .ai-char-line{display:block}
}
.powered-by{max-width:1280px;margin:4px auto 78px;padding:0 16px;text-align:center;color:var(--c-muted);font-size:10px;opacity:.72}

/* v2.1.1 – mandatory AI privacy preview */
.ai-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.ai-steps span{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--c-border);border-radius:10px;color:var(--c-muted);font-size:11px;font-weight:800;background:rgba(255,255,255,.025)}
.ai-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:rgba(148,163,184,.12);color:var(--c-muted)}
.ai-steps span.active{border-color:rgba(59,130,246,.55);color:var(--c-text);background:rgba(26,95,212,.12)}
.ai-steps span.active b{background:var(--c-primary);color:#fff}
.ai-steps span.done b{background:rgba(34,197,94,.18);color:#86efac}
.ai-preview-notice{padding:11px 12px;border-radius:10px;border:1px solid rgba(59,130,246,.3);background:rgba(26,95,212,.09);margin-bottom:11px}
.ai-preview-notice strong{display:block;margin-bottom:3px}
.ai-preview-notice p{font-size:12px;color:var(--c-muted);line-height:1.5}
.ai-egress-preview{max-height:310px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 12px;padding:13px;border:1px solid var(--c-border);border-radius:10px;background:#070d1a;color:var(--c-text);font:12px/1.65 var(--mono)}
.ai-send-form{border-top:1px solid var(--c-border);padding-top:12px}
.ai-boundary-card{margin-top:14px;border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.055)}
.ai-boundary-card strong{color:#fcd34d}
.ai-boundary-card p{font-size:12px;color:var(--c-muted);line-height:1.55;margin-top:4px}
.ai-admin-boundary{border-color:rgba(245,158,11,.22)}
@media(max-width:640px){.ai-steps{grid-template-columns:1fr}.ai-steps span{padding:7px 9px}}
.brand-live-preview{display:flex;align-items:center;gap:12px;margin:4px 0 2px;padding:14px;border:1px solid color-mix(in srgb,var(--preview-secondary) 38%,var(--c-border));border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-secondary) 13%,transparent),rgba(255,255,255,.025))}
.brand-live-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--preview-secondary);font-size:22px;box-shadow:0 8px 24px color-mix(in srgb,var(--preview-secondary) 22%,transparent)}
.brand-live-preview div:last-child{display:grid;gap:2px;min-width:0}.brand-live-preview small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--c-muted);font-weight:900}.brand-live-preview strong{font-size:14px;overflow-wrap:anywhere}.brand-live-preview span{font-size:11px;color:var(--c-muted);overflow-wrap:anywhere}

/* v2.1.3 – breite, linksbündige und kategorisierte PutzPilot-Sidebar */
.app-shell{display:grid;grid-template-columns:288px minmax(0,1fr);min-height:calc(100vh - 54px)}
.app-sidebar{position:sticky;top:54px;width:288px;min-width:288px;height:calc(100vh - 54px);align-self:start;display:flex;flex-direction:column;background:linear-gradient(180deg,#0b1325 0%,#08101f 100%);border-right:1px solid rgba(148,163,184,.16);overflow:hidden;z-index:120;box-shadow:10px 0 35px rgba(0,0,0,.12)}
.app-content{min-width:0}
.sidebar-brand-block{padding:15px 14px 13px;border-bottom:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.018)}
.sidebar-brand-row{display:flex;align-items:center;gap:11px;min-width:0}
.sidebar-tenant-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:0 0 38px;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));font-size:18px;box-shadow:0 8px 22px color-mix(in srgb,var(--c-primary) 25%,transparent)}
.sidebar-brand-copy{min-width:0;display:grid;gap:2px;text-align:left}.sidebar-brand-copy strong{font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f8fafc}.sidebar-brand-copy small{font-size:10px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-tenant-switch{display:grid;gap:5px;margin-top:12px}.sidebar-tenant-switch label{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#64748b}.sidebar-tenant-switch select{width:100%;min-height:34px;padding:6px 30px 6px 9px;border:1px solid rgba(148,163,184,.2);border-radius:8px;background:#111c31;color:#e2e8f0;font:650 11px var(--font)}
.sidebar-nav{padding:7px 0 18px;overflow-y:auto;overscroll-behavior:contain;flex:1;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.25) transparent}
.sidebar-section-title{padding:14px 18px 5px;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#64748b;text-align:left}
.sidebar-group{margin:1px 0}
.sidebar-group-toggle,.sidebar-link{width:calc(100% - 16px);display:flex;align-items:center;gap:10px;min-height:38px;margin:1px 8px;padding:8px 11px;border:0;border-radius:8px;background:transparent;color:#cbd5e1;font:650 12.5px var(--font);text-align:left;text-decoration:none;cursor:pointer;transition:background-color .14s,color .14s,border-color .14s;white-space:nowrap;overflow:hidden}
.sidebar-group-toggle:hover,.sidebar-link:hover{background:rgba(148,163,184,.09);color:#fff}
.sidebar-group-toggle{font-weight:750;color:#e2e8f0}
.sidebar-link-icon{width:20px;min-width:20px;text-align:center;font-size:14px;line-height:1;flex:0 0 20px;filter:saturate(.85)}
.sidebar-link-label,.sidebar-group-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:left}
.sidebar-group-label{flex:1}
.sidebar-chevron{margin-left:auto;font-size:18px;line-height:1;color:#64748b;transition:transform .16s ease}
.sidebar-group.is-open>.sidebar-group-toggle .sidebar-chevron{transform:rotate(90deg);color:#94a3b8}
.sidebar-group-children{padding:1px 0 5px 14px}.sidebar-group-children[hidden]{display:none!important}
.sidebar-child-link{width:calc(100% - 24px);min-height:34px;margin-left:10px;padding:7px 10px;font-size:12px;font-weight:600;color:#94a3b8;border-left:1px solid rgba(148,163,184,.15);border-radius:0 8px 8px 0}
.sidebar-child-link .sidebar-link-icon{font-size:12px;color:#94a3b8}
.sidebar-link.active{color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--c-primary) 29%,transparent),color-mix(in srgb,var(--c-primary) 9%,transparent));box-shadow:inset 3px 0 0 var(--c-primary);font-weight:750}
.sidebar-child-link.active{border-left-color:var(--c-primary)}
.sidebar-footer{padding:9px 8px 11px;border-top:1px solid rgba(148,163,184,.14);display:grid;gap:2px;background:rgba(0,0,0,.14)}
.sidebar-footer form{margin:0}.sidebar-action{width:100%;display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:#94a3b8;font:650 11.5px var(--font);text-align:left;text-decoration:none;cursor:pointer}.sidebar-action:hover{background:rgba(148,163,184,.08);color:#f8fafc}.sidebar-action span:first-child{width:20px;text-align:center;flex:0 0 20px}
.topbar{padding-left:15px}.topbar-new-entry{display:flex;align-items:center;gap:5px}.wrap{max-width:1480px;padding:20px 24px}.powered-by{margin-left:288px}
.ui-simple .sidebar-group-toggle,.ui-simple .sidebar-link{min-height:42px;font-size:13px}.ui-simple .sidebar-child-link{min-height:38px}
.drawer-sec-title{padding:8px 4px 6px;font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}

.empty-state-card{min-height:190px;display:grid;place-items:center;align-content:center;text-align:center;gap:6px;color:var(--c-muted);padding:25px}.empty-state-card>div{font-size:34px}.empty-state-card strong{color:var(--c-text);font-size:15px}.empty-state-card p{max-width:390px;font-size:12px}
.share-section{margin-bottom:16px}.share-section-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.share-section-header p{font-size:12px;color:var(--c-muted)}.cell-muted{font-size:10px;color:var(--c-muted);margin-top:2px}.danger-text{color:#fca5a5!important}
.security-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.security-choice{position:relative;cursor:pointer}.security-choice input{position:absolute;opacity:0}.security-choice span{height:100%;display:grid;gap:4px;padding:12px;border:1px solid var(--c-border);border-radius:11px;background:rgba(255,255,255,.025)}.security-choice b{font-size:13px}.security-choice small{font-size:11px;color:var(--c-muted);line-height:1.4}.security-choice input:checked+span{border-color:color-mix(in srgb,var(--c-primary) 65%,transparent);background:color-mix(in srgb,var(--c-primary) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-primary) 14%,transparent)}

.billing-summary-grid{display:grid;grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(150px,.65fr));gap:12px;margin-bottom:14px}.billing-plan-card{margin:0!important;background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary) 18%,var(--c-surf)),color-mix(in srgb,var(--c-secondary) 8%,var(--c-surf)))}.billing-plan-card .eyebrow,.eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--c-muted);font-weight:900}.billing-plan-card h2{font-size:22px;margin:5px 0}.billing-plan-card p{color:var(--c-muted);font-size:12px}.billing-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);gap:14px;align-items:start}.billing-layout>.card{margin:0!important}.billing-address-card{position:sticky;top:72px}.field-house{max-width:105px}.field-postal{max-width:145px}.billing-privacy-note{margin-top:12px;padding:10px 11px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.07);border-radius:10px;color:#86efac;font-size:11px;line-height:1.45}.billing-invoice-card{max-width:900px}.invoice-detail-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--c-border)}.invoice-detail-head h2{margin:4px 0;font-size:20px}.invoice-detail-head p{font-size:12px;color:var(--c-muted)}.invoice-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.invoice-facts>div{padding:12px;background:rgba(255,255,255,.025);border:1px solid var(--c-border);border-radius:10px;display:grid;gap:3px}.invoice-facts span{font-size:10px;text-transform:uppercase;color:var(--c-muted);font-weight:800}.invoice-lines{border:1px solid var(--c-border);border-radius:11px;overflow:hidden}.invoice-lines>div{display:flex;justify-content:space-between;gap:15px;padding:11px 13px;border-bottom:1px solid var(--c-border)}.invoice-lines>div:last-child{border:0}.invoice-lines .total{font-size:16px;background:rgba(26,95,212,.1)}.billing-qr-preview{display:flex;gap:18px;align-items:center;margin-top:16px;padding:14px;border:1px solid rgba(34,197,94,.25);border-radius:12px;background:rgba(34,197,94,.05)}.billing-qr-preview img{width:150px;height:150px;background:#fff;border-radius:8px;padding:4px}.billing-qr-preview p{font-size:12px;color:var(--c-muted);margin:4px 0 8px}

@media(max-width:1180px){.billing-summary-grid{grid-template-columns:repeat(3,1fr)}.billing-plan-card{grid-column:1/-1}.billing-layout{grid-template-columns:1fr}.billing-address-card{position:static}}
@media(max-width:768px){.app-shell{display:block}.wrap{padding:12px 12px 20px}.powered-by{margin-left:auto}.billing-summary-grid{grid-template-columns:1fr 1fr}.billing-plan-card{grid-column:1/-1}.security-choice-grid{grid-template-columns:1fr}.invoice-facts{grid-template-columns:1fr}.billing-qr-preview{align-items:flex-start}.billing-qr-preview img{width:112px;height:112px}}
@media(max-width:480px){.billing-summary-grid{grid-template-columns:1fr}.billing-qr-preview{display:grid}.billing-qr-preview img{width:145px;height:145px}.form-row .field-house,.form-row .field-postal{max-width:none}}

/* Fair Webdesign design credit */
.design-credit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(148,163,184,.14)}
.design-credit>span{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c-muted)}
.design-credit a{display:inline-flex!important;align-items:center!important;margin:0!important;text-decoration:none!important}
.design-credit img{display:block;width:126px;max-width:100%;height:auto;opacity:.92;transition:opacity .15s ease,transform .15s ease}
.design-credit a:hover img{opacity:1;transform:translateY(-1px)}
.pubfooter .design-credit,.pricing-design-credit{justify-content:center;border-top:0;padding-top:8px;margin-top:10px}
.land-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.land-footer-bottom .design-credit{margin:0;padding:0;border:0}
@media(max-width:720px){.land-footer-bottom{align-items:flex-start}.land-footer-bottom .design-credit{margin-top:8px}}


/* v2.1.23 Mobile viewport containment */
@media (max-width: 768px) {
  .topbar,.wrap,.app-shell,.page-header,.card,.layout-2col,.layout-3col,.vault-layout { max-width:100%; min-width:0; }
  .topbar-brand { min-width:0; max-width:calc(100% - 56px); }
  .topbar-brand > div:last-child { min-width:0; }
  .brand-name,.brand-tag { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  img,svg,video,canvas { max-width:100%; height:auto; }
  pre,code,.path { overflow-wrap:anywhere; word-break:break-word; }
}

/* V2.1.25 Power Vault */
.smart-filter-bar select {
  min-height: 36px;
  max-width: 210px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: #0c1427;
  color: var(--c-text);
  padding: 6px 28px 6px 9px;
  font: inherit;
  font-size: 12px;
}
@media(max-width:768px){
  .smart-filter-bar{width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .smart-filter-bar select{max-width:none;width:100%;font-size:16px;}
  .smart-filter-bar .chip{grid-column:1/-1;justify-self:start;}
}
@media(max-width:390px){.smart-filter-bar{grid-template-columns:minmax(0,1fr);}}


/* V2.1.27 Vault Quick Actions */
.entry-accent-row{box-shadow:inset 3px 0 0 var(--entry-accent,var(--c-border));}
.entry-accent-row td:first-child{padding-left:11px!important;}
.entry-accent-card{border-left:3px solid var(--entry-accent,var(--c-border))!important;}
.entry-visual-icon{font-size:14px;line-height:1;opacity:.9;flex:0 0 auto;}
.expiry-presets .btn{min-height:30px;}
@media(max-width:720px){.expiry-presets{display:grid!important;grid-template-columns:1fr 1fr}.expiry-presets .btn{width:100%}}

/* Generic responsive grids used by On-Premise/License admin cards. */
.grid{display:grid;gap:14px;min-width:0}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1050px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* V2.1.42 Vault UX hardening */
.field input:focus,.field select:focus,.field textarea:focus,.cf-key:focus,.cf-val:focus,.vault-search:focus{
  border-color:var(--c-accent)!important;
  background:#101c33!important;
  color:var(--c-text)!important;
  caret-color:var(--c-text)!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--c-text)!important;
  caret-color:var(--c-text)!important;
  -webkit-box-shadow:0 0 0 1000px #0c1427 inset!important;
  box-shadow:0 0 0 1000px #0c1427 inset!important;
  transition:background-color 9999s ease-out 0s;
}
.hk-entry-context{cursor:context-menu;position:relative}
.hk-context-trigger{flex:0 0 auto;width:38px;height:38px;min-width:38px;display:grid;place-items:center;border:1px solid var(--c-border);border-radius:11px;background:rgba(255,255,255,.035);color:var(--c-muted);font:900 22px/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hk-context-trigger:hover,.hk-context-trigger:focus-visible{color:var(--c-text);border-color:rgba(96,165,250,.45);background:rgba(59,130,246,.1);outline:0}
.hk-context-backdrop{position:fixed;inset:0;z-index:29990;background:transparent}

.hk-context-menu{position:fixed;z-index:30000;min-width:245px;max-width:min(320px,calc(100vw - 16px));padding:7px;background:#0b1628;border:1px solid rgba(148,163,184,.2);border-radius:13px;box-shadow:0 22px 65px rgba(0,0,0,.58);color:var(--c-text);}
.hk-context-head{padding:8px 8px 9px 10px;font-size:11px;font-weight:850;color:#9fb2cf;display:flex;align-items:center;gap:8px}
.hk-context-head-title{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-context-close{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--c-muted);font:800 17px/1 var(--font);cursor:pointer}
.hk-context-close:hover,.hk-context-close:focus-visible{background:rgba(255,255,255,.08);color:var(--c-text);outline:0}
.hk-context-item{width:100%;display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center;border:0;border-radius:9px;background:transparent;color:var(--c-text);padding:8px 10px;text-align:left;font:700 12px var(--font);cursor:pointer}
.hk-context-item:hover,.hk-context-item:focus{outline:0;background:rgba(59,130,246,.14)}
.hk-context-item:disabled{opacity:.38;cursor:not-allowed}.hk-context-item:disabled:hover{background:transparent}
.hk-context-item.danger{color:#fecaca}.hk-context-item.danger:hover{background:rgba(239,68,68,.13)}
.hk-context-sep{height:1px;background:rgba(148,163,184,.14);margin:5px 4px}
@media(max-width:768px){
  .hk-context-backdrop{background:rgba(2,6,23,.48);backdrop-filter:blur(2px)}
  .hk-context-menu{left:10px!important;right:10px!important;top:auto!important;bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;width:auto;max-width:none;max-height:min(72vh,560px);overflow:auto;padding:8px 8px 10px;border-radius:18px;animation:hkContextSheetIn .2s cubic-bezier(.22,1,.36,1)}
  .hk-context-head{padding:8px 7px 10px 11px;font-size:12px}
  .hk-context-item{min-height:45px;padding:10px 12px;font-size:13px;border-radius:11px}
  .hk-context-trigger{width:40px;height:40px;min-width:40px}
  @keyframes hkContextSheetIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
}