/* ============================================================
   STADTSENAT SYSTEM v5 — Unified Stylesheet
   Intern + Öffentliches Portal in einer Datei
   Engels811 | senat.engels811-ttv.de
   Intern: body (Standard) | Öffentlich: body.pub
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── INTERN: CSS Variables ── */
:root {
  --bg:      #07090f;
  --bg2:     #0b0f1c;
  --bg3:     #101626;
  --card:    rgba(10,14,26,0.98);
  --card2:   rgba(14,19,34,0.95);
  --border:  rgba(212,167,0,0.07);
  --border2: rgba(212,167,0,0.18);
  --border3: rgba(212,167,0,0.35);
  --acc1:    #2563eb;
  --acc2:    #1d4ed8;
  --acc3:    #60a5fa;
  --acc4:    #93c5fd;
  --gold:    #d97706;
  --gold2:   #f59e0b;
  --gold3:   #fbbf24;
  --gold-glow: rgba(217,119,6,0.3);
  --success: #10b981;
  --success-bg: rgba(16,185,129,0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,0.1);
  --danger:  #ef4444;
  --danger-bg: rgba(239,68,68,0.1);
  --orange:  #f97316;
  --orange-bg: rgba(249,115,22,0.1);
  --purple:  #a855f7;
  --purple-bg: rgba(168,85,247,0.1);
  --text:    #e2e8f0;
  --dim:     rgba(200,180,130,0.55);
  --muted:   rgba(200,180,130,0.3);
  --steel:   #d4c89a;
  --mono:    'Space Mono', monospace;
  --sans:    'Exo 2', sans-serif;
  --display: 'Rajdhani', sans-serif;
  --glow:    0 0 30px rgba(217,119,6,0.15);
  --sh:      0 4px 32px rgba(0,0,0,0.6);
  --sh2:     0 8px 48px rgba(0,0,0,0.8);
  --sidebar-w: 260px;
  --topbar-h:  58px;
}

/* ── PUBLIC: CSS Variables ── */
body.pub {
  --bg:           #080a10;
  --bg2:          #0c1018;
  --bg3:          #111826;
  --bg4:          #181e2e;
  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.12);
  --acc1:         #2563eb;
  --acc2:         #1d4ed8;
  --acc3:         #3b82f6;
  --gold:         #d97706;
  --gold2:        #f59e0b;
  --gold3:        #fbbf24;
  --text:         #e2e8f0;
  --text2:        #94a3b8;
  --text3:        #64748b;
  --mono:         'JetBrains Mono', monospace;
  --head:         'Barlow Condensed', sans-serif;
  --body:         'Barlow', sans-serif;
  --radius:       8px;
  --radius2:      12px;
}

/* ================================================================
   BASE
================================================================ */
html, body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; font-size: 14px; line-height: 1.5; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 100% 80% at 5% 0%, rgba(217,119,6,0.04), transparent 50%), radial-gradient(ellipse 70% 60% at 95% 100%, rgba(37,99,235,0.04), transparent 55%); }
body::after  { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px); opacity:0.5; }

body.pub { font-family: var(--body); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; min-height: 100vh; }
body.pub::before, body.pub::after { display:none; }
body.pub a { color: var(--acc3); text-decoration: none; transition: color .2s; }
body.pub a:hover { color: #fff; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(217,119,6,0.2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(217,119,6,0.4); }

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes fadeUp      { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes notif-slide { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes ticker      { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
@keyframes gold-pulse  { 0%,100%{box-shadow:0 0 10px rgba(217,119,6,0.2)} 50%{box-shadow:0 0 24px rgba(217,119,6,0.5)} }
@keyframes spin        { to{transform:rotate(360deg)} }

.anim-up   { animation:fadeUp .4s ease both }
.anim-up-1 { animation:fadeUp .4s .06s ease both }
.anim-up-2 { animation:fadeUp .4s .12s ease both }
.anim-up-3 { animation:fadeUp .4s .18s ease both }
.anim-up-4 { animation:fadeUp .4s .24s ease both }

/* ================================================================
   INTERN — TOPBAR
================================================================ */
.topbar { position:fixed; top:0; left:0; right:0; z-index:200; height:var(--topbar-h); background:rgba(7,9,15,0.97); border-bottom:1px solid var(--border); backdrop-filter:blur(20px); display:flex; align-items:center; padding:0 20px 0 0; }
.topbar-toggle { width:var(--sidebar-w); flex-shrink:0; display:flex; align-items:center; gap:12px; padding:0 20px; border-right:1px solid var(--border); height:100%; }
.topbar-logo { font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:.06em; color:#fff; display:flex; align-items:center; gap:10px; text-decoration:none; flex:1; }
.topbar-logo .logo-icon { width:34px; height:34px; background:linear-gradient(135deg,var(--gold),var(--gold2)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 0 20px var(--gold-glow); }
.topbar-logo .logo-sub { font-family:var(--mono); font-size:7px; letter-spacing:.3em; color:var(--gold2); display:block; font-weight:400; }
.topbar-menu-btn { display:none; background:none; border:none; cursor:pointer; color:var(--dim); padding:8px; font-size:20px; }
.topbar-search { flex:1; max-width:380px; margin:0 20px; position:relative; }
.topbar-search input { width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:11px; padding:8px 14px 8px 38px; outline:none; transition:all .2s; letter-spacing:.06em; }
.topbar-search input:focus { border-color:var(--border2); background:rgba(217,119,6,0.04); }
.topbar-search input::placeholder { color:var(--muted); }
.topbar-search .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; pointer-events:none; }
.topbar-spacer { flex:1; }
.topbar-actions { display:flex; align-items:center; gap:6px; margin-right:16px; }
.topbar-btn { width:36px; height:36px; background:rgba(255,255,255,0.03); border:1px solid var(--border); color:var(--dim); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all .2s; position:relative; text-decoration:none; }
.topbar-btn:hover { border-color:var(--border2); color:var(--gold2); background:rgba(217,119,6,0.06); }
.topbar-btn .notif-dot { position:absolute; top:6px; right:6px; width:6px; height:6px; background:var(--danger); border-radius:50%; animation:pulse 2s ease infinite; border:1px solid var(--bg); }
.topbar-user { display:flex; align-items:center; gap:10px; padding:6px 14px 6px 10px; background:rgba(255,255,255,0.02); border:1px solid var(--border); cursor:pointer; transition:all .2s; position:relative; }
.topbar-user:hover { border-color:var(--border2); background:rgba(217,119,6,0.05); }
.topbar-avatar { width:32px; height:32px; background:linear-gradient(135deg,var(--gold),var(--gold2)); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.topbar-user-name { font-family:var(--display); font-size:13px; font-weight:600; color:var(--text); letter-spacing:.03em; }
.topbar-user-rank { font-family:var(--mono); font-size:9px; color:var(--gold2); letter-spacing:.12em; }
.user-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:var(--card); border:1px solid var(--border2); min-width:200px; z-index:300; display:none; box-shadow:var(--sh2); }
.user-dropdown.open { display:block; animation:fadeUp .2s ease; }
.user-dropdown-item { display:flex; align-items:center; gap:10px; padding:10px 16px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dim); text-decoration:none; transition:all .15s; border-bottom:1px solid var(--border); cursor:pointer; }
.user-dropdown-item:last-child { border-bottom:none; }
.user-dropdown-item:hover { color:var(--gold2); background:rgba(217,119,6,0.05); }
.user-dropdown-item.danger:hover { color:var(--danger); background:var(--danger-bg); }

/* ================================================================
   INTERN — SIDEBAR
================================================================ */
.sidebar { width:var(--sidebar-w); background:rgba(7,9,15,0.99); border-right:1px solid var(--border); position:fixed; top:var(--topbar-h); bottom:0; left:0; overflow-y:auto; z-index:100; scrollbar-width:thin; scrollbar-color:rgba(217,119,6,0.15) transparent; transition:transform .3s ease; }
.sidebar-profile { padding:16px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(217,119,6,0.06),transparent); }
.sidebar-profile-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sidebar-avatar { width:40px; height:40px; flex-shrink:0; background:linear-gradient(135deg,var(--gold),var(--gold2)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:18px; font-weight:700; color:#fff; box-shadow:0 0 16px var(--gold-glow); }
.sidebar-user-name { font-family:var(--display); font-size:16px; font-weight:700; color:var(--text); letter-spacing:.04em; }
.sidebar-user-rank { font-family:var(--mono); font-size:9px; letter-spacing:.15em; color:var(--gold2); margin-top:1px; }
.sidebar-user-dept { font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:var(--muted); }
.sidebar-online-badge { display:flex; align-items:center; gap:6px; padding:5px 10px; background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.2); font-family:var(--mono); font-size:8px; letter-spacing:.15em; color:var(--success); }
.sidebar-online-dot { width:6px; height:6px; background:var(--success); border-radius:50%; animation:pulse 2s ease infinite; }
.sidebar-nav { padding:8px 0; }
.sidebar-section { margin-bottom:2px; }
.sidebar-section-header { display:flex; align-items:center; gap:8px; padding:10px 16px 4px; cursor:pointer; transition:all .2s; user-select:none; }
.sidebar-section-header:hover { background:rgba(255,255,255,0.02); }
.sidebar-label { font-family:var(--mono); font-size:9px; letter-spacing:.25em; color:rgba(217,119,6,0.4); text-transform:uppercase; flex:1; }
.sidebar-collapse-icon { font-size:10px; color:var(--muted); transition:transform .2s; }
.sidebar-section.collapsed .sidebar-collapse-icon { transform:rotate(-90deg); }
.sidebar-section.collapsed .sidebar-items { display:none; }
.sidebar-link { display:flex; align-items:center; gap:10px; padding:8px 16px 8px 20px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dim); text-decoration:none; transition:all .18s; position:relative; border-left:2px solid transparent; }
.sidebar-link:hover { color:var(--gold3); background:rgba(217,119,6,0.04); border-left-color:rgba(217,119,6,0.3); }
.sidebar-link.active { color:var(--gold2); background:rgba(217,119,6,0.08); border-left-color:var(--gold); }
.sidebar-icon { width:18px; text-align:center; font-size:14px; color:var(--muted); flex-shrink:0; transition:color .18s; }
.sidebar-link:hover .sidebar-icon { color:var(--gold3); }
.sidebar-link.active .sidebar-icon { color:var(--gold2); }
.sidebar-link-text { flex:1; }
.sidebar-badge { font-family:var(--mono); font-size:8px; padding:2px 6px; border-radius:2px; background:var(--danger); color:#fff; animation:pulse 2s ease infinite; }
.sidebar-badge.green  { background:var(--success); animation:none; }
.sidebar-badge.gold   { background:var(--gold); animation:none; }
.sidebar-badge.blue   { background:var(--acc1); animation:none; }
.sidebar-badge.yellow { background:var(--warning); animation:none; }
.sidebar-divider { height:1px; background:var(--border); margin:6px 16px; }
.sidebar-period { padding:12px 16px; border-top:1px solid var(--border); }
.sidebar-period-lbl { font-family:var(--mono); font-size:7px; color:rgba(217,119,6,0.3); letter-spacing:.15em; margin-bottom:4px; }
.sidebar-period-val { font-family:var(--display); font-size:15px; color:var(--gold2); font-weight:700; }
.sidebar-period-bar { height:3px; background:rgba(217,119,6,0.1); margin-top:8px; border-radius:2px; overflow:hidden; }
.sidebar-period-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:2px; }
.sidebar-period-sub { font-family:var(--mono); font-size:7px; color:var(--muted); margin-top:4px; letter-spacing:.1em; }

/* ================================================================
   INTERN — LAYOUT
================================================================ */
.layout { display:flex; padding-top:var(--topbar-h); min-height:100vh; }
.main-content { margin-left:var(--sidebar-w); flex:1; min-width:0; position:relative; z-index:1; }

/* ── TOAST ── */
#toast { position:fixed; bottom:24px; right:24px; z-index:9999; padding:12px 20px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; min-width:260px; border-left:3px solid; box-shadow:var(--sh); display:none; align-items:center; gap:10px; }
#toast.show { display:flex; animation:notif-slide .3s ease; }
#toast.toast-ok   { background:rgba(16,185,129,0.1); border-color:var(--success); color:#6ee7b7; }
#toast.toast-err  { background:rgba(239,68,68,0.1);  border-color:var(--danger);  color:#fca5a5; }
#toast.toast-info { background:rgba(217,119,6,0.1);  border-color:var(--gold);    color:var(--gold3); }

/* ── PAGE HEADER (INTERN) ── */
.page-header { padding:28px 32px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(217,119,6,0.04) 0%,transparent 100%); position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--gold2) 60%,transparent); }
.page-eyebrow { font-family:var(--mono); font-size:9px; letter-spacing:.35em; color:var(--gold2); margin-bottom:6px; opacity:.7; }
.page-title { font-family:var(--display); font-size:30px; font-weight:700; color:#fff; letter-spacing:.04em; line-height:1.15; }
.page-title span { color:var(--gold2); }
.page-subtitle { font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--dim); margin-top:6px; }
.page-header-actions { position:absolute; bottom:20px; right:32px; display:flex; gap:8px; }
/* legacy */
.page-hero { padding:28px 32px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(217,119,6,0.04) 0%,transparent 100%); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--gold2) 60%,transparent); }

.wrap       { padding:24px 32px; max-width:1400px; }
.wrap-fluid { padding:24px 32px; }

/* ================================================================
   INTERN — STAT CARDS
================================================================ */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card { background:var(--card); border:1px solid var(--border); padding:18px 20px; position:relative; overflow:hidden; transition:all .2s; animation:fadeUp .4s ease both; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); }
.stat-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--glow); }
.stat-card.blue::before   { background:var(--acc1); }
.stat-card.green::before  { background:var(--success); }
.stat-card.yellow::before { background:var(--warning); }
.stat-card.red::before    { background:var(--danger); }
.stat-card.orange::before { background:var(--orange); }
.stat-card.purple::before { background:var(--purple); }
.stat-card .stat-icon { position:absolute; right:14px; top:14px; font-size:24px; opacity:0.1; }
.stat-num { font-family:var(--display); font-size:38px; font-weight:700; color:#fff; line-height:1; }
.stat-lbl { font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:var(--dim); margin-top:5px; }
.stat-change { font-family:var(--mono); font-size:9px; color:var(--success); margin-top:4px; }
.stat-change.negative { color:var(--danger); }

/* ── SECTION BAR ── */
.section-bar { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:9px; letter-spacing:.25em; color:var(--gold2); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.section-bar::before { content:''; width:3px; height:14px; background:var(--gold); flex-shrink:0; }
.section-bar .section-count { margin-left:auto; background:rgba(217,119,6,0.12); color:var(--gold2); padding:2px 8px; font-size:8px; }

/* ── MODULE GRID ── */
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:28px; }
.module-card { background:var(--card); border:1px solid var(--border); padding:18px 16px; text-decoration:none; display:block; transition:all .2s; cursor:pointer; position:relative; overflow:hidden; }
.module-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:transparent; transition:background .2s; }
.module-card:hover { border-color:var(--border2); transform:translateY(-3px); box-shadow:var(--glow); }
.module-card:hover::before { background:var(--gold); }
.module-card:hover .module-title { color:var(--gold2); }
.module-icon  { font-size:22px; margin-bottom:12px; display:block; transition:transform .2s; }
.module-card:hover .module-icon { transform:scale(1.15); }
.module-title { font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--steel); margin-bottom:4px; transition:color .2s; }
.module-desc  { font-size:11px; color:var(--dim); line-height:1.4; }
.module-count { position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:9px; background:rgba(255,255,255,0.05); color:var(--muted); padding:2px 7px; }

/* ── CARDS (INTERN) ── */
.card { background:var(--card); border:1px solid var(--border); padding:20px; margin-bottom:16px; }
.card-title { font-family:var(--display); font-size:16px; font-weight:700; color:var(--text); letter-spacing:.05em; margin-bottom:14px; display:flex; align-items:center; gap:10px; }

/* ── TABLE ── */
.table-wrapper { overflow-x:auto; border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead tr { background:rgba(217,119,6,0.04); border-bottom:1px solid var(--border2); }
.data-table th { padding:10px 16px; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--gold2); text-align:left; white-space:nowrap; font-weight:400; }
.data-table td { padding:11px 16px; border-bottom:1px solid var(--border); color:var(--steel); vertical-align:middle; transition:background .15s; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(217,119,6,0.03); }
.data-table .mono { font-family:var(--mono); font-size:11px; color:var(--gold2); }
.data-table .name-cell { font-family:var(--display); font-size:14px; font-weight:600; }

/* ── BADGES ── */
.badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; padding:3px 9px; white-space:nowrap; }
.badge-gold    { background:rgba(217,119,6,0.15);     color:var(--gold3); border:1px solid rgba(217,119,6,0.3); }
.badge-red     { background:var(--danger-bg);         color:#fca5a5; border:1px solid rgba(239,68,68,0.2); }
.badge-green   { background:var(--success-bg);        color:#6ee7b7; border:1px solid rgba(16,185,129,0.2); }
.badge-yellow  { background:var(--warning-bg);        color:#fcd34d; border:1px solid rgba(245,158,11,0.2); }
.badge-orange  { background:var(--orange-bg);         color:#fdba74; border:1px solid rgba(249,115,22,0.2); }
.badge-blue    { background:rgba(37,99,235,0.12);     color:var(--acc4); border:1px solid rgba(37,99,235,0.25); }
.badge-purple  { background:var(--purple-bg);         color:#d8b4fe; border:1px solid rgba(168,85,247,0.25); }
.badge-gray    { background:rgba(100,116,139,0.12);   color:#94a3b8; border:1px solid rgba(100,116,139,0.2); }
.badge-primary { background:rgba(217,119,6,0.1); color:var(--gold2); border:1px solid rgba(217,119,6,0.25); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.15em; padding:8px 18px; background:rgba(255,255,255,0.04); border:1px solid var(--border2); color:var(--dim); cursor:pointer; transition:all .18s; text-decoration:none; white-space:nowrap; }
.btn:hover     { border-color:var(--border3); color:var(--text); background:rgba(217,119,6,0.06); }
.btn-primary   { background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-primary:hover { background:var(--gold2); border-color:var(--gold3); box-shadow:0 0 20px var(--gold-glow); color:#fff; }
.btn-blue      { background:var(--acc1); border-color:var(--acc1); color:#fff; }
.btn-blue:hover { background:var(--acc2); border-color:var(--acc3); color:#fff; }
.btn-danger    { background:var(--danger-bg); border-color:rgba(239,68,68,0.3); color:#fca5a5; }
.btn-danger:hover { background:rgba(239,68,68,0.2); border-color:var(--danger); color:#fff; }
.btn-success   { background:var(--success-bg); border-color:rgba(16,185,129,0.3); color:#6ee7b7; }
.btn-success:hover { background:rgba(16,185,129,0.2); border-color:var(--success); color:#fff; }
.btn-ghost     { background:transparent; border-color:transparent; color:var(--dim); }
.btn-ghost:hover { background:rgba(255,255,255,0.05); border-color:var(--border); color:var(--text); }
.btn-sm   { padding:5px 12px; font-size:9px; }
.btn-lg   { padding:11px 24px; font-size:11px; }
.btn-icon { padding:8px; gap:0; width:36px; height:36px; justify-content:center; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--dim); margin-bottom:6px; }
.form-input, .form-select, .form-textarea { width:100%; padding:9px 14px; background:rgba(255,255,255,0.03); border:1px solid var(--border2); color:var(--text); font-family:var(--sans); font-size:13px; outline:none; transition:all .2s; appearance:none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--gold); background:rgba(217,119,6,0.04); box-shadow:0 0 0 2px rgba(217,119,6,0.1); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--muted); }
.form-textarea { resize:vertical; min-height:80px; }
.form-select { cursor:pointer; }
.form-select option { background:var(--bg3); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px) { .form-row { grid-template-columns:1fr; } }

/* ── FILTER BAR ── */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.filter-input { background:var(--card); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:11px; padding:8px 14px; outline:none; flex:1; min-width:200px; transition:all .2s; letter-spacing:.06em; }
.filter-input:focus { border-color:var(--gold); background:rgba(217,119,6,0.03); }
.filter-input::placeholder { color:var(--muted); }
.filter-select { background:var(--card); border:1px solid var(--border2); color:var(--dim); font-family:var(--mono); font-size:10px; letter-spacing:.1em; padding:8px 14px; outline:none; cursor:pointer; appearance:none; min-width:160px; transition:all .2s; }
.filter-select:focus { border-color:var(--gold); color:var(--text); }
.filter-select option { background:var(--bg3); }
.filter-pill { font-family:var(--mono); font-size:7px; letter-spacing:.15em; padding:5px 12px; border:1px solid var(--border); cursor:pointer; transition:all .18s; background:none; color:var(--dim); }
.filter-pill.active, .filter-pill:hover { border-color:var(--gold); color:var(--gold2); background:rgba(217,119,6,0.06); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--card); border:1px solid var(--border2); padding:28px; max-height:90vh; overflow-y:auto; width:100%; max-width:600px; box-shadow:var(--sh2); position:relative; animation:fadeUp .3s ease; }
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.modal-lg { max-width:800px; }
.modal-xl { max-width:1000px; }
.modal-title { font-family:var(--display); font-size:20px; font-weight:700; color:var(--text); letter-spacing:.06em; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.modal-close { position:absolute; top:20px; right:20px; background:none; border:none; color:var(--dim); font-size:20px; cursor:pointer; transition:color .2s; line-height:1; }
.modal-close:hover { color:var(--danger); }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }

/* ── GRIDS ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; }
@media(max-width:900px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* ── ALERTS ── */
.alert { padding:12px 18px; border-left:3px solid; font-family:var(--mono); font-size:11px; letter-spacing:.07em; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.alert a { color:inherit; text-decoration:underline; }
.alert-danger  { background:var(--danger-bg);  border-color:var(--danger);  color:#fca5a5; }
.alert-warning { background:var(--warning-bg); border-color:var(--warning); color:#fcd34d; }
.alert-success { background:var(--success-bg); border-color:var(--success); color:#6ee7b7; }
.alert-info    { background:rgba(217,119,6,0.08); border-color:var(--gold); color:var(--gold3); }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:40px 20px; color:var(--muted); }
.empty-icon  { font-size:36px; margin-bottom:12px; opacity:.4; }
.empty-text  { font-family:var(--mono); font-size:11px; letter-spacing:.15em; }

/* ── LIST CARDS ── */
.list-card { background:var(--card); border:1px solid var(--border); border-left:3px solid transparent; padding:14px 18px; margin-bottom:8px; transition:all .18s; display:block; text-decoration:none; }
.list-card:hover { border-color:var(--border2); background:rgba(217,119,6,0.02); }
.list-card.priority-kritisch { border-left-color:var(--danger); }
.list-card.priority-hoch     { border-left-color:var(--orange); }
.list-card.priority-mittel   { border-left-color:var(--warning); }
.list-card.priority-niedrig  { border-left-color:var(--success); }
.list-card.priority-gold     { border-left-color:var(--gold); }
.list-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; gap:10px; }
.list-card-title  { font-family:var(--display); font-size:15px; font-weight:600; color:var(--text); letter-spacing:.03em; }
.list-card-meta   { font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--dim); margin-top:3px; }

/* ── PROGRESS / VOTE BARS ── */
.progress { height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.progress-fill.gold   { background:var(--gold); }
.progress-fill.green  { background:var(--success); }
.progress-fill.red    { background:var(--danger); }
.progress-fill.yellow { background:var(--warning); }
.progress-fill.blue   { background:var(--acc1); }

/* ── TABS ── */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:20px; gap:0; }
.tab  { font-family:var(--mono); font-size:10px; letter-spacing:.18em; padding:10px 20px; cursor:pointer; color:var(--dim); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .18s; background:none; border-top:none; border-left:none; border-right:none; }
.tab:hover  { color:var(--gold2); }
.tab.active { color:var(--gold2); border-bottom-color:var(--gold); }

/* ── DETAIL PANEL ── */
.detail-panel { background:var(--card2); border:1px solid var(--border); overflow:hidden; }
.detail-panel-header { padding:16px 20px; border-bottom:1px solid var(--border); background:rgba(217,119,6,0.03); display:flex; justify-content:space-between; align-items:center; }
.detail-panel-title  { font-family:var(--display); font-size:16px; font-weight:700; color:var(--text); letter-spacing:.05em; }
.detail-panel-body   { padding:20px; }
.detail-row { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.detail-row:last-child { border-bottom:none; }
.detail-key { font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--muted); min-width:140px; flex-shrink:0; margin-top:2px; }
.detail-val { color:var(--steel); font-size:13px; }

/* ── VOTE BARS ── */
.vote-bar-wrap { display:flex; align-items:center; gap:8px; margin:6px 0; }
.vote-bar { height:6px; border-radius:3px; flex:1; background:rgba(255,255,255,0.05); overflow:hidden; display:flex; }
.vote-seg-ja    { background:#22c55e; transition:width .5s; }
.vote-seg-nein  { background:#ef4444; transition:width .5s; }
.vote-seg-enthu { background:#f59e0b; transition:width .5s; }

/* ── QUORUM BAR ── */
.quorum-bar { height:8px; background:rgba(217,119,6,0.08); border-radius:4px; overflow:hidden; margin:8px 0; }
.quorum-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:4px; transition:width .5s; }
.quorum-fill.low { background:linear-gradient(90deg,#b45309,#ef4444); }

/* ── TIMELINE ── */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:1px; background:var(--border); }
.tl-item { position:relative; margin-bottom:14px; }
.tl-dot  { position:absolute; left:-23px; top:4px; width:9px; height:9px; border-radius:50%; border:1px solid var(--gold); background:var(--bg); }
.tl-dot.done    { background:var(--gold); }
.tl-dot.current { background:var(--gold2); box-shadow:0 0 6px var(--gold-glow); }
.tl-label       { font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; color:var(--dim); }
.tl-label.done  { color:var(--gold2); }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  :root { --sidebar-w: 0px; }
  .sidebar { transform:translateX(-260px); width:260px; box-shadow:4px 0 40px rgba(0,0,0,0.7); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .topbar-toggle { width:auto; border-right:none; padding:0 12px; }
  .topbar-menu-btn { display:flex; align-items:center; justify-content:center; }
  .topbar-search { display:none; }
  .wrap { padding:16px; }
  .page-header { padding:20px 16px 16px; }
  .page-header-actions { position:static; margin-top:12px; }
}
@media(max-width:640px){
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .module-grid { grid-template-columns:repeat(2,1fr); }
}

/* ================================================================
   PUBLIC — UTIL BAR
================================================================ */
body.pub .util-bar { background:rgba(0,0,0,0.6); border-bottom:1px solid var(--border); padding:6px 0; font-family:var(--mono); font-size:11px; }
body.pub .util-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
body.pub .util-notice { display:flex; align-items:center; gap:8px; color:var(--text2); font-size:11px; letter-spacing:.04em; }
body.pub .util-notice strong { color:var(--gold2); }
body.pub .util-notice-dot { width:6px; height:6px; background:var(--gold2); border-radius:50%; animation:blink 1.4s infinite; }
body.pub .util-links { display:flex; gap:16px; }
body.pub .util-links a { color:var(--text3); font-size:11px; transition:color .2s; }
body.pub .util-links a:hover { color:var(--text); }

/* ================================================================
   PUBLIC — HEADER
================================================================ */
body.pub .site-header { background:var(--bg2); border-bottom:1px solid var(--border); padding:14px 0; position:sticky; top:0; z-index:100; backdrop-filter:blur(20px); box-shadow:0 2px 20px rgba(0,0,0,0.5); }
body.pub .header-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:20px; }
body.pub .header-logo { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; flex-shrink:0; }
body.pub .logo-badge { width:44px; height:44px; background:linear-gradient(135deg,var(--gold),var(--gold2)); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 0 20px rgba(217,119,6,0.3); overflow:hidden; }
body.pub .logo-badge img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
body.pub .logo-text-main { font-family:var(--head); font-size:20px; font-weight:700; letter-spacing:.08em; color:#fff; }
body.pub .logo-text-sub  { font-size:11px; color:var(--text3); font-family:var(--mono); letter-spacing:.04em; }
body.pub .header-spacer  { flex:1; }
body.pub .header-search  { display:flex; align-items:center; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
body.pub .header-search:focus-within { border-color:var(--gold2); box-shadow:0 0 0 3px rgba(217,119,6,0.12); }
body.pub .header-search input { background:none; border:none; outline:none; color:var(--text); padding:8px 14px; font-size:13px; width:220px; font-family:var(--body); }
body.pub .header-search input::placeholder { color:var(--text3); }
body.pub .header-search-btn { background:var(--gold); border:none; color:#fff; padding:8px 14px; cursor:pointer; font-size:14px; transition:background .2s; }
body.pub .header-search-btn:hover { background:var(--gold2); }
body.pub .header-session     { text-align:right; flex-shrink:0; }
body.pub .header-session-num { font-family:var(--head); font-size:22px; font-weight:800; color:var(--gold2); line-height:1; letter-spacing:.05em; }
body.pub .header-session-lbl { font-size:10px; color:var(--text3); font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; }

/* ================================================================
   PUBLIC — NAVIGATION
================================================================ */
body.pub .site-nav { background:var(--bg2); border-bottom:1px solid var(--border); }
body.pub .nav-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:2px; }
body.pub .nav-link { color:var(--text2); font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:13px 16px; border-bottom:2px solid transparent; transition:all .2s; font-family:var(--head); white-space:nowrap; }
body.pub .nav-link:hover  { color:#fff; border-bottom-color:var(--gold2); }
body.pub .nav-link.active { color:var(--gold2); border-bottom-color:var(--gold); }
body.pub .nav-link.nav-login { margin-left:auto; color:var(--gold2); border:1px solid var(--gold); border-radius:var(--radius); padding:7px 16px; margin-top:7px; margin-bottom:7px; border-bottom:1px solid var(--gold); }
body.pub .nav-link.nav-login:hover { background:var(--gold); color:#fff; border-bottom-color:var(--gold); }

/* ================================================================
   PUBLIC — HERO
================================================================ */
body.pub .pub-hero { position:relative; padding:80px 0; text-align:center; overflow:hidden; background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%); }
body.pub .pub-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(217,119,6,0.1) 0%,transparent 70%); }
body.pub .page-hero-inner  { position:relative; max-width:700px; margin:0 auto; padding:0 24px; }
body.pub .pub-hero h1 { font-family:var(--head); font-size:clamp(32px,5vw,56px); font-weight:800; letter-spacing:.05em; color:#fff; line-height:1.1; margin-bottom:16px; }
body.pub .pub-hero h1 span { color:var(--gold2); }
body.pub .pub-hero p  { color:var(--text2); font-size:16px; line-height:1.7; }

/* ================================================================
   PUBLIC — KACHELN (Tiles)
================================================================ */
body.pub .kacheln { display:grid; gap:12px; margin-bottom:40px; }
body.pub .kachel { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:0; overflow:hidden; position:relative; min-height:160px; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; transition:all .25s; cursor:pointer; }
body.pub .kachel:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 12px 40px rgba(217,119,6,0.15); }
body.pub .kachel-bg   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:52px; opacity:.25; transition:opacity .25s; }
body.pub .kachel:hover .kachel-bg { opacity:.4; }
body.pub .kachel-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(8,10,16,0.85) 100%); }
body.pub .kachel-content { position:relative; padding:16px; }
body.pub .kachel-title { font-family:var(--head); font-size:17px; font-weight:700; color:#fff; letter-spacing:.06em; }
body.pub .kachel-arrow { position:absolute; top:12px; right:14px; font-size:18px; color:rgba(255,255,255,0.3); transition:color .2s; }
body.pub .kachel:hover .kachel-arrow { color:var(--gold2); }

/* ================================================================
   PUBLIC — MAIN LAYOUT
================================================================ */
body.pub .main { max-width:1280px; margin:0 auto; padding:40px 24px; }
body.pub .main-with-sidebar { display:grid; grid-template-columns:1fr 320px; gap:32px; }
@media(max-width:900px) { body.pub .main-with-sidebar { grid-template-columns:1fr; } }

/* ── SEC HEADING ── */
body.pub .sec-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; margin-bottom:20px; border-bottom:1px solid var(--border); }
body.pub .sec-heading h2 { font-family:var(--head); font-size:18px; font-weight:700; letter-spacing:.1em; color:#fff; }
body.pub .sec-heading-link { font-family:var(--mono); font-size:11px; color:var(--gold2); letter-spacing:.05em; }

/* ── CARDS (PUBLIC) ── */
body.pub .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:40px; }
body.pub .card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; padding:0; margin-bottom:0; }
body.pub .card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 32px rgba(217,119,6,0.12); }
body.pub .card-img   { height:80px; background:linear-gradient(135deg,var(--bg3),var(--bg4)); display:flex; align-items:center; justify-content:center; font-size:28px; border-bottom:1px solid var(--border); }
body.pub .card-body  { padding:16px; }
body.pub .card-cat   { font-family:var(--mono); font-size:10px; color:var(--gold2); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
body.pub .card-title { font-family:var(--head); font-size:15px; font-weight:600; color:#fff; margin-bottom:8px; line-height:1.3; display:block; }
body.pub .card-text  { font-size:13px; color:var(--text2); line-height:1.5; margin-bottom:10px; }
body.pub .card-meta  { display:flex; justify-content:space-between; font-size:11px; color:var(--text3); font-family:var(--mono); }

/* ── ENTRY LIST (PUBLIC) ── */
body.pub .entry-list  { display:flex; flex-direction:column; gap:10px; margin-bottom:40px; }
body.pub .entry       { display:flex; align-items:flex-start; gap:14px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; transition:border-color .2s; }
body.pub .entry:hover { border-color:var(--gold); background:var(--bg3); }
body.pub .entry-icon  { width:40px; height:40px; background:var(--bg3); border:1px solid var(--border2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
body.pub .entry-body  { flex:1; }
body.pub .entry-meta  { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
body.pub .entry-title { font-family:var(--head); font-size:15px; font-weight:600; color:#fff; margin-bottom:4px; }
body.pub .entry-text  { font-size:12px; color:var(--text2); }
body.pub .entry-right { font-size:11px; color:var(--text3); font-family:var(--mono); text-align:right; flex-shrink:0; }

/* ── BADGES (PUBLIC) ── */
body.pub .badge         { display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
body.pub .badge-success { background:rgba(34,197,94,.15);  color:#22c55e; border:1px solid rgba(34,197,94,.3); }
body.pub .badge-warning { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
body.pub .badge-danger  { background:rgba(239,68,68,.15);  color:#ef4444; border:1px solid rgba(239,68,68,.3); }
body.pub .badge-info    { background:rgba(59,130,246,.15); color:#3b82f6; border:1px solid rgba(59,130,246,.3); }
body.pub .badge-gold    { background:rgba(217,119,6,.15);  color:var(--gold2); border:1px solid rgba(217,119,6,.3); }
body.pub .badge-gray    { background:rgba(100,116,139,.15);color:#94a3b8; border:1px solid rgba(100,116,139,.3); }
body.pub .badge-primary { background:rgba(217,119,6,.1);   color:var(--gold2); border:1px solid rgba(217,119,6,.25); }

/* ── ALERTS (PUBLIC) ── */
body.pub .alert         { padding:12px 16px; border-radius:var(--radius); font-size:13px; margin-bottom:16px; border-left:none; font-family:var(--body); letter-spacing:normal; display:block; }
body.pub .alert-success { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.3);  color:#22c55e; }
body.pub .alert-error   { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.3);  color:#ef4444; }
body.pub .alert-info    { background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.25); color:var(--gold2); }

/* ── FORMS (PUBLIC) ── */
body.pub .form-group { margin-bottom:16px; }
body.pub .form-group label { display:block; font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-bottom:6px; }
body.pub .form-group input,
body.pub .form-group textarea,
body.pub .form-group select { width:100%; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text); padding:10px 14px; font-size:14px; font-family:var(--body); outline:none; transition:border-color .2s; }
body.pub .form-group input:focus,
body.pub .form-group textarea:focus,
body.pub .form-group select:focus { border-color:var(--gold2); }
body.pub .form-group textarea { resize:vertical; min-height:100px; }
body.pub .btn         { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius); font-family:var(--head); font-size:14px; font-weight:600; letter-spacing:.06em; cursor:pointer; border:none; transition:all .2s; text-decoration:none; }
body.pub .btn-primary { background:var(--gold); color:#fff; }
body.pub .btn-primary:hover { background:var(--gold2); color:#fff; }
body.pub .btn-blue    { background:var(--acc1); color:#fff; }
body.pub .btn-blue:hover { background:var(--acc2); color:#fff; }
body.pub .btn-ghost   { background:transparent; color:var(--text2); border:1px solid var(--border2); }
body.pub .btn-ghost:hover { border-color:var(--gold2); color:var(--gold2); }
.pub-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px) { .pub-form-row { grid-template-columns:1fr; } }

/* ── SIDEBAR WIDGETS (PUBLIC) ── */
body.pub .pub-sidebar { display:flex; flex-direction:column; gap:20px; position:static; width:auto; background:transparent; border:none; }
body.pub .sidebar { position:static; width:auto; background:transparent; border-right:none; overflow-y:visible; z-index:auto; display:flex; flex-direction:column; gap:20px; }
body.pub .stat-box         { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); overflow:hidden; }
body.pub .stat-box-header  { background:var(--bg3); border-bottom:1px solid var(--border); padding:12px 16px; font-family:var(--head); font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--gold2); text-transform:uppercase; }
body.pub .stat-row         { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); font-size:13px; }
body.pub .stat-row:last-child { border-bottom:none; }
body.pub .stat-label { color:var(--text2); }
body.pub .stat-val   { font-family:var(--mono); font-weight:600; color:var(--text); }
body.pub .stat-warn  { color:#f59e0b; }
body.pub .stat-crit  { color:#ef4444; }
body.pub .stat-ok    { color:#22c55e; }
body.pub .quicklinks        { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); overflow:hidden; }
body.pub .quicklinks-header { background:var(--bg3); border-bottom:1px solid var(--border); padding:12px 16px; font-family:var(--head); font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--gold2); text-transform:uppercase; }
body.pub .quicklink         { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border); color:var(--text2); font-size:13px; transition:all .2s; text-decoration:none; }
body.pub .quicklink:last-child { border-bottom:none; }
body.pub .quicklink:hover   { background:var(--bg3); color:#fff; }
body.pub .quicklink-icon    { font-size:16px; width:24px; text-align:center; }
body.pub .quicklink-arrow   { margin-left:auto; color:var(--text3); }
body.pub .infobox       { background:linear-gradient(135deg,rgba(217,119,6,.12),rgba(217,119,6,.04)); border:1px solid rgba(217,119,6,.25); border-radius:var(--radius2); padding:16px; }
body.pub .infobox-title { font-family:var(--head); font-size:14px; font-weight:700; color:var(--gold2); margin-bottom:8px; letter-spacing:.06em; }
body.pub .infobox-text  { font-size:13px; color:var(--text2); line-height:1.6; }

/* ── GALLERY (PUBLIC) ── */
body.pub .gal-grid    { display:grid; gap:10px; margin-bottom:40px; }
body.pub .gal-item    { position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:16/10; border:1px solid var(--border); transition:transform .2s, border-color .2s; }
body.pub .gal-item:hover { transform:scale(1.02); border-color:var(--gold); }
body.pub .gal-item img  { width:100%; height:100%; object-fit:cover; display:block; }
body.pub .gal-overlay   { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 50%); display:flex; align-items:flex-end; padding:10px; opacity:0; transition:opacity .2s; }
body.pub .gal-item:hover .gal-overlay { opacity:1; }
body.pub .gal-caption   { font-size:12px; color:#fff; font-family:var(--mono); }

/* ── FOOTER (PUBLIC) ── */
body.pub .site-footer    { background:var(--bg2); border-top:1px solid var(--border); margin-top:60px; }
body.pub .footer-top     { padding:48px 0; }
body.pub .footer-grid    { max-width:1280px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
@media(max-width:768px) { body.pub .footer-grid { grid-template-columns:1fr 1fr; } }
body.pub .footer-brand h3 { font-family:var(--head); font-size:16px; font-weight:700; color:#fff; margin-bottom:10px; letter-spacing:.06em; }
body.pub .footer-brand p  { font-size:13px; color:var(--text3); line-height:1.6; margin-bottom:16px; }
body.pub .footer-col h4  { font-family:var(--head); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); margin-bottom:14px; }
body.pub .footer-col ul  { list-style:none; display:flex; flex-direction:column; gap:8px; }
body.pub .footer-col ul li a { font-size:13px; color:var(--text2); transition:color .2s; }
body.pub .footer-col ul li a:hover { color:var(--gold2); }
body.pub .footer-bottom       { background:rgba(0,0,0,0.3); border-top:1px solid var(--border); padding:20px 0; }
body.pub .footer-bottom-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:8px; }
body.pub .footer-copy { font-family:var(--mono); font-size:12px; color:var(--text3); }
body.pub .footer-disc { font-size:11px; color:var(--text3); line-height:1.6; }

/* ── LIGHTBOX ── */
body.pub .lb      { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:1000; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
body.pub .lb.open { display:flex; }
body.pub .lb-close { position:absolute; top:20px; right:24px; font-size:32px; color:var(--text2); cursor:pointer; z-index:1001; transition:color .2s; }
body.pub .lb-close:hover { color:#fff; }
body.pub .lb img  { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:var(--radius); }
body.pub .lb-arrow { position:absolute; top:50%; transform:translateY(-50%); font-size:40px; color:var(--text2); cursor:pointer; padding:10px 20px; transition:color .2s; user-select:none; }
body.pub .lb-arrow:hover { color:#fff; }
body.pub .lb-prev { left:10px; }
body.pub .lb-next { right:10px; }
body.pub .lb-cap  { font-family:var(--mono); font-size:12px; color:var(--text2); text-align:center; }

/* ── SCROLLBAR ── */
body.pub ::-webkit-scrollbar { width:6px; height:6px; }
body.pub ::-webkit-scrollbar-track { background:var(--bg); }
body.pub ::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }
body.pub ::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ── PETITION FORM BOX ── */
body.pub .petition-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius2); padding:32px; margin-bottom:40px; }
body.pub .petition-box h3 { font-family:var(--head); font-size:20px; font-weight:700; color:#fff; margin-bottom:8px; letter-spacing:.06em; }
body.pub .petition-box p  { color:var(--text2); font-size:13px; margin-bottom:24px; }
body.pub .petition-item   { display:flex; align-items:flex-start; gap:14px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:10px; transition:border-color .2s; }
body.pub .petition-item:hover { border-color:var(--gold); }
body.pub .petition-icon  { font-size:24px; flex-shrink:0; }
body.pub .petition-title { font-family:var(--head); font-size:15px; font-weight:700; color:#fff; margin-bottom:4px; }
body.pub .petition-meta  { font-size:11px; color:var(--text3); font-family:var(--mono); }
body.pub .petition-bar   { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; margin-top:8px; }
body.pub .petition-fill  { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); border-radius:3px; transition:width .5s; }

/* ── PUBLIC VARIABLE ALIASES ── */
body.pub {
  --pub-card: var(--bg2);
  --pub-border: var(--border);
  --pub-text: var(--text);
  --pub-text2: var(--text2);
  --pub-muted: var(--text3);
  --pub-display: var(--head);
  --pub-mono: var(--mono);
  --pub-sans: var(--sans);
}

/* ── BREADCRUMB ── */
body.pub .breadcrumb { background:rgba(0,0,0,.3); border-bottom:1px solid var(--border); }
body.pub .breadcrumb-inner { max-width:1280px; margin:0 auto; padding:10px 24px; font-family:var(--mono); font-size:11px; color:var(--text3); display:flex; align-items:center; gap:8px; }
body.pub .breadcrumb a { color:var(--gold2); text-decoration:none; }
body.pub .breadcrumb a:hover { color:var(--gold); }
body.pub .breadcrumb-sep { color:var(--text3); }

/* ── PAGE HERO MINI ── */
body.pub .page-hero-mini { background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%); border-bottom:1px solid var(--border); padding:36px 0; position:relative; overflow:hidden; }
body.pub .page-hero-mini::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(217,119,6,.08),transparent 60%); }
body.pub .page-hero-mini-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:20px; position:relative; }
body.pub .page-hero-mini-icon { font-size:40px; flex-shrink:0; filter:drop-shadow(0 0 16px rgba(217,119,6,.4)); }
body.pub .page-hero-mini h1 { font-family:var(--head); font-size:clamp(20px,3vw,32px); font-weight:800; color:#fff; margin-bottom:6px; letter-spacing:.04em; }
body.pub .page-hero-mini p { font-size:13px; color:var(--text2); line-height:1.5; }

/* ── MAIN LAYOUT ── */
body.pub .main { max-width:1280px; margin:0 auto; padding:36px 24px; }
body.pub .main-with-sidebar { max-width:1280px; margin:0 auto; padding:36px 24px; display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; }
@media(max-width:900px) { body.pub .main-with-sidebar { grid-template-columns:1fr; } body.pub .pub-sidebar { order:2; } }
body.pub .content { min-width:0; }

/* ── CARDS GRID (PUBLIC) ── */
body.pub .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:40px; }
body.pub .card { background:var(--bg2); border:1px solid var(--border); overflow:hidden; transition:all .2s; display:flex; flex-direction:column; }
body.pub .card:hover { border-color:var(--gold); box-shadow:0 4px 20px rgba(217,119,6,.1); transform:translateY(-2px); }
body.pub .card-img { background:linear-gradient(135deg,rgba(217,119,6,.08),rgba(0,0,0,.3)); padding:24px; text-align:center; font-size:36px; border-bottom:1px solid var(--border); }
body.pub .card-body { padding:18px 20px; flex:1; display:flex; flex-direction:column; gap:8px; }
body.pub .card-cat { font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--gold2); }
body.pub .card-title { font-family:var(--head); font-size:16px; font-weight:700; color:#fff; line-height:1.3; }
body.pub .card-text { font-size:13px; color:var(--text2); line-height:1.6; flex:1; }
body.pub .card-meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--text3); margin-top:auto; padding-top:10px; border-top:1px solid var(--border); }

/* ── ENTRY LIST ── */
body.pub .entry-list { margin-bottom:40px; }
body.pub .entry { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
body.pub .entry-icon { font-size:20px; width:32px; text-align:center; flex-shrink:0; }
body.pub .entry-body { flex:1; min-width:0; }
body.pub .entry-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
body.pub .entry-title { font-family:var(--head); font-size:14px; font-weight:600; color:#fff; }
body.pub .entry-right { font-family:var(--mono); font-size:10px; color:var(--text3); flex-shrink:0; }

/* ── SECTION HEADING ── */
body.pub .sec-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; margin-top:40px; padding-bottom:10px; border-bottom:1px solid var(--border); }
body.pub .sec-heading:first-child { margin-top:0; }
body.pub .sec-heading h2 { font-family:var(--head); font-size:18px; font-weight:700; color:#fff; letter-spacing:.04em; }
body.pub .sec-heading-link { font-family:var(--mono); font-size:11px; color:var(--gold2); text-decoration:none; letter-spacing:.1em; }
body.pub .sec-heading-link:hover { color:var(--gold); }

/* ── PUBLIC BADGES (body.pub scope) ── */
body.pub .badge { display:inline-block; padding:2px 10px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; font-weight:600; }
body.pub .badge-gold    { background:rgba(217,119,6,.15); color:var(--gold2); border:1px solid rgba(217,119,6,.3); }
body.pub .badge-gray    { background:rgba(255,255,255,.06); color:var(--text2); border:1px solid rgba(255,255,255,.1); }

/* ── PUBLIC FORM ── */
body.pub .petition-box input,
body.pub .petition-box textarea,
body.pub .petition-box select { width:100%; padding:10px 14px; background:rgba(255,255,255,.04); border:1px solid var(--border2); color:var(--text); font-family:var(--sans); font-size:14px; outline:none; transition:all .2s; box-sizing:border-box; }
body.pub .petition-box input:focus,
body.pub .petition-box textarea:focus,
body.pub .petition-box select:focus { border-color:var(--gold); background:rgba(217,119,6,.04); }
body.pub .petition-box label { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.15em; color:var(--text3); margin-bottom:5px; }
body.pub .petition-box .form-group { display:flex; flex-direction:column; margin-bottom:14px; }
body.pub .alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#4ade80; padding:10px 14px; margin-bottom:14px; font-family:var(--mono); font-size:11px; }
body.pub .alert-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#f87171; padding:10px 14px; margin-bottom:14px; font-family:var(--mono); font-size:11px; }

/* ── KACHELN (public home) ── */
body.pub .kacheln { display:grid; gap:10px; }
body.pub .kachel { position:relative; padding:24px; background:var(--bg2); border:1px solid var(--border); overflow:hidden; cursor:pointer; text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:all .2s; min-height:100px; justify-content:flex-end; }
body.pub .kachel:hover { border-color:var(--gold); box-shadow:0 4px 20px rgba(217,119,6,.15); }
body.pub .kachel-bg { position:absolute; top:10px; right:14px; font-size:40px; opacity:.12; }
body.pub .kachel-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(217,119,6,.06),transparent); opacity:0; transition:opacity .2s; }
body.pub .kachel:hover .kachel-overlay { opacity:1; }
body.pub .kachel-content { position:relative; z-index:1; }
body.pub .kachel-title { font-family:var(--head); font-size:15px; font-weight:700; color:#fff; letter-spacing:.06em; }
body.pub .kachel-arrow { position:absolute; top:14px; right:16px; font-size:20px; color:var(--gold2); z-index:1; }

/* ── PUBLIC BTN VARIANTS ── */
body.pub .btn-blue { background:rgba(37,99,235,.8); border:1px solid rgba(37,99,235,.4); color:#fff; }
body.pub .btn-blue:hover { background:#2563eb; }

/* ── PUBLIC BANNER ── */
body.pub .pub-banner-wrap { 
  width:100%; overflow:hidden; max-height:220px; background:var(--bg2); 
  position: relative; 
}
body.pub .pub-banner-wrap::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
body.pub .pub-banner-img  { width:100%; max-height:220px; object-fit:cover; display:block; }

/* ============================================================
   INSTALL WIZARD — Styles
   ============================================================ */

/* Scan-line animation overlay */
.install-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
  animation: scanMove 6s linear infinite;
}
@keyframes scanMove { from { background-position: 0 0; } to { background-position: 0 40px; } }

/* Page wrapper */
.install-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding: 48px 24px 64px;
  background: var(--bg, #0a0a0b);
}

/* Logo block */
.install-logo {
  text-align: center; margin-bottom: 36px;
}
.install-logo-shield {
  display: inline-block; font-size: 52px; margin-bottom: 10px;
  filter: drop-shadow(0 0 24px rgba(217,119,6,.5));
}
.install-logo-title {
  font-family: var(--head, 'Barlow Condensed', sans-serif);
  font-size: 28px; font-weight: 900; letter-spacing: .14em; color: #fff;
  text-transform: uppercase;
}
.install-logo-title span { color: var(--gold, #d97706); }
.install-logo-sub {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,.4);
  margin-top: 4px; text-transform: uppercase;
}
.install-version {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .2em;
  color: var(--gold, #d97706); border: 1px solid rgba(217,119,6,.35);
  padding: 3px 12px; background: rgba(217,119,6,.07);
}

/* Step indicators */
.install-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 28px; width: 100%; max-width: 560px;
}
.install-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.install-step:not(:last-child)::after {
  content: ''; position: absolute; top: 18px; left: calc(50% + 18px);
  right: calc(-50% + 18px); height: 1px;
  background: rgba(255,255,255,.1);
}
.install-step.done::after, .install-step.active::after { background: rgba(217,119,6,.4); }
.install-step-circle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono, monospace); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.35); background: rgba(255,255,255,.04);
  transition: all .25s; position: relative; z-index: 1;
}
.install-step.done .install-step-circle {
  background: rgba(217,119,6,.15); border-color: var(--gold, #d97706);
  color: var(--gold, #d97706);
}
.install-step.active .install-step-circle {
  background: var(--gold, #d97706); border-color: var(--gold, #d97706);
  color: #fff; box-shadow: 0 0 20px rgba(217,119,6,.45);
}
.install-step-label {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .15em;
  color: rgba(255,255,255,.25); text-transform: uppercase;
}
.install-step.done .install-step-label { color: rgba(217,119,6,.7); }
.install-step.active .install-step-label { color: var(--gold, #d97706); }

/* Main card */
.install-card {
  width: 100%; max-width: 560px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.install-card-header {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(217,119,6,.06);
}
.install-card-icon { font-size: 28px; flex-shrink: 0; }
.install-card-title {
  font-family: var(--head, 'Barlow Condensed', sans-serif);
  font-size: 18px; font-weight: 800; letter-spacing: .1em; color: #fff;
  text-transform: uppercase;
}
.install-card-desc {
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .12em;
  color: rgba(255,255,255,.35); margin-top: 2px;
}
.install-card-body { padding: 28px; }

/* Form elements */
.form-group { margin-bottom: 0; }
.form-label {
  display: block; font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: .14em; color: rgba(255,255,255,.35); margin-bottom: 7px;
  text-transform: uppercase;
}
.form-input, .form-select {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: #fff; padding: 11px 14px; font-size: 14px; font-family: var(--body, sans-serif);
  outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.form-input:focus, .form-select:focus {
  border-color: rgba(217,119,6,.6); box-shadow: 0 0 0 3px rgba(217,119,6,.1);
}
.form-input::placeholder { color: rgba(255,255,255,.2); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(255,255,255,.3)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.form-select option { background: #1a1a1e; color: #fff; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Alerts */
.install-alert-info, .install-alert-error, .install-alert-success, .install-alert-warn {
  padding: 12px 16px; font-family: var(--body, sans-serif); font-size: 13px;
  line-height: 1.5; margin-bottom: 20px;
}
.install-alert-info    { background: rgba(37,99,235,.1);  border-left: 3px solid #3b82f6; color: #93c5fd; }
.install-alert-error   { background: rgba(239,68,68,.1);  border-left: 3px solid #ef4444; color: #fca5a5; }
.install-alert-success { background: rgba(34,197,94,.1);  border-left: 3px solid #22c55e; color: #86efac; }
.install-alert-warn    { background: rgba(234,179,8,.08); border-left: 3px solid #eab308; color: #fde047; }
.install-alert-info code, .install-alert-warn code {
  font-family: var(--mono, monospace); font-size: 12px;
  background: rgba(255,255,255,.08); padding: 1px 6px;
}

/* Submit button */
.install-btn {
  display: block; width: 100%; padding: 14px; margin-top: 22px;
  background: linear-gradient(135deg, var(--gold, #d97706), #b45309);
  border: none; color: #fff; cursor: pointer;
  font-family: var(--head, 'Barlow Condensed', sans-serif);
  font-size: 15px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  transition: all .2s; box-shadow: 0 4px 20px rgba(217,119,6,.3);
}
.install-btn:hover { background: linear-gradient(135deg, #f59e0b, var(--gold, #d97706)); box-shadow: 0 6px 28px rgba(217,119,6,.5); transform: translateY(-1px); }
.install-btn:active { transform: translateY(0); }
.install-btn-success { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 4px 20px rgba(22,163,74,.3); }
.install-btn-success:hover { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 6px 28px rgba(22,163,74,.5); }

/* Divider */
.install-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 24px 0; }

/* Section bar */
.section-bar {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .22em;
  color: rgba(217,119,6,.7); text-transform: uppercase; padding-bottom: 10px;
  border-bottom: 1px solid rgba(217,119,6,.15);
}

/* Success screen */
.install-success-icon { display: block; font-size: 56px; text-align: center; margin-bottom: 8px; }
.install-success-title {
  font-family: var(--head, 'Barlow Condensed', sans-serif);
  font-size: 26px; font-weight: 900; letter-spacing: .14em; color: #4ade80;
  text-align: center; margin-bottom: 4px;
}
.install-success-sub {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .18em;
  color: rgba(255,255,255,.3); text-align: center; margin-bottom: 24px;
}
.install-cred-grid { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); padding: 4px 0; margin-bottom: 20px; }
.install-cred-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.install-cred-row:last-child { border-bottom: none; }
.install-cred-key {
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .15em;
  color: rgba(255,255,255,.3); min-width: 120px; text-transform: uppercase;
}
.install-cred-val { font-family: var(--mono, monospace); font-size: 12px; color: #fff; }
.install-cred-val.ok { color: #4ade80; }

/* Footer note */
.install-footer-note {
  margin-top: 28px; font-family: var(--mono, monospace); font-size: 9px;
  letter-spacing: .18em; color: rgba(255,255,255,.15); text-align: center;
}