/*
  Aurora Control Surface
  - Cosmic gradient backdrop with glass panels
  - Fluid typography using Inter + Space Grotesk
  - Elevated contrast with soft neon accents
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
  --bg:#050714;           /* canvas */
  --bg-2:#030412;         /* depth */
  --card:rgba(13,19,38,.78); /* glass surface */
  --muted:#98a0be;        /* supporting text */
  --text:#f5f7ff;         /* primary text */
  --accent:#7c6cff;       /* primary brand */
  --accent-2:#a586ff;     /* hover/cta */
  --ring:rgba(124,108,255,.28);
  --border:rgba(147,158,196,.18);
  --border-strong:rgba(147,158,196,.32);
  --shadow:0 24px 60px rgba(5,10,35,.55);
  --error:#ff7b7b;
  --success:#4ade80;
}

/* Ensure elements with [hidden] truly hide regardless of other rules */
[hidden]{display:none !important}
/* Management section theme overrides */
body.admin{--bg:#0b0202;--card:#160707;--muted:#caa3a3;--text:#f7f4f4;--accent:#ff3b30}
/* Entwicklung (dev) theme overrides */
body.dev{--accent:#ffd34d; --bg:#201b08; --card:#241d0a}
/* Gold fade for common surfaces on dev pages */
body.dev .card,
body.dev .status-card,
body.dev .modal-dialog{
  background:linear-gradient(180deg,#1c1403 0%, #0a0a0a 100%) !important;
  border-color:rgba(255,211,77,.28) !important;
}
body.dev .nav-item.active{background:rgba(255,211,77,.18) !important;border:1px solid rgba(255,211,77,.35) !important}
body.dev .nav-item:hover{background:rgba(255,211,77,.10) !important}
body.dev input,
body.dev select,
body.dev textarea{border-color:rgba(255,211,77,.25)}
body.dev input:focus,
body.dev textarea:focus,
body.dev select:focus{box-shadow:0 0 0 3px rgba(255,211,77,.18);border-color:var(--accent)}
body.dev .table th,
body.dev .table td{border-bottom-color:rgba(255,211,77,.18)}
body.dev .toggle .slider{border-color:rgba(255,211,77,.25)}

/* Event Mods (dark green) theme */
body.eventmods{--accent:#4ade80; --bg:#0f1d16; --card:#14251d}
/* Green fade for common surfaces on event mods pages */
body.eventmods .card,
body.eventmods .status-card,
body.eventmods .modal-dialog{
  background:linear-gradient(180deg,#05150d 0%, #0a0a0a 100%) !important;
  border-color:rgba(74,222,128,.28) !important;
}
body.eventmods .nav-item.active{background:rgba(74,222,128,.18) !important;border:1px solid rgba(74,222,128,.35) !important}
body.eventmods .nav-item:hover{background:rgba(74,222,128,.10) !important}
body.eventmods input,
body.eventmods select,
body.eventmods textarea{border-color:rgba(74,222,128,.25)}
body.eventmods input:focus,
body.eventmods textarea:focus,
body.eventmods select:focus{box-shadow:0 0 0 3px rgba(74,222,128,.18);border-color:var(--accent)}
body.eventmods .table th,
body.eventmods .table td{border-bottom-color:rgba(74,222,128,.18)}
body.eventmods .toggle .slider{border-color:rgba(74,222,128,.25)}
/* Raumkampf (space blue) theme */
body.raumkampf{--accent:#60a5fa; --bg:#0d1328; --card:#111b30}
body.raumkampf .card,
body.raumkampf .status-card,
body.raumkampf .modal-dialog{
  background:linear-gradient(180deg,#0b142a 0%, #0a0d1a 100%) !important;
  border-color:rgba(96,165,250,.28) !important;
}
body.raumkampf .nav-item.active{background:rgba(96,165,250,.18) !important;border:1px solid rgba(96,165,250,.4) !important}
body.raumkampf .nav-item:hover{background:rgba(96,165,250,.12) !important}
body.raumkampf input,
body.raumkampf select,
body.raumkampf textarea{border-color:rgba(96,165,250,.28)}
body.raumkampf input:focus,
body.raumkampf textarea:focus,
body.raumkampf select:focus{box-shadow:0 0 0 3px rgba(96,165,250,.22);border-color:var(--accent)}
body.raumkampf .table th,
body.raumkampf .table td{border-bottom-color:rgba(96,165,250,.22)}
body.raumkampf .toggle .slider{border-color:rgba(96,165,250,.28)}
body.raumkampf .filter-bar{border-color:rgba(96,165,250,.32);background:linear-gradient(180deg,rgba(13,26,48,.72),rgba(10,15,32,.6))}
#raumkampf-group{background:linear-gradient(140deg,rgba(37,99,235,.24) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#raumkampf-group .section-title,#raumkampf-group .section-icon{color:#60a5fa}
body.eventteam{--accent:#a7f3d0; --bg:#152a21; --card:#1c2f25}
/* Event Team (light green) theme */
body.eventteam{--accent:#a7f3d0; --bg:#152a21; --card:#1c2f25}
body.eventteam .card,
body.eventteam .status-card,
body.eventteam .modal-dialog{
  background:linear-gradient(180deg,#1f4735 0%, #121513 100%) !important;
  border-color:rgba(167,243,208,.55) !important;
}
body.eventteam .nav-item.active{background:rgba(167,243,208,.22) !important;border:1px solid rgba(167,243,208,.60) !important}
body.eventteam .nav-item:hover{background:rgba(167,243,208,.16) !important}
body.eventteam input,
body.eventteam select,
body.eventteam textarea{border-color:rgba(167,243,208,.38)}
body.eventteam input:focus,
body.eventteam textarea:focus,
body.eventteam select:focus{box-shadow:0 0 0 4px rgba(167,243,208,.28);border-color:var(--accent)}
body.eventteam .table th,
body.eventteam .table td{border-bottom-color:rgba(167,243,208,.26)}
body.eventteam .toggle .slider{border-color:rgba(167,243,208,.35)}
body.bodenkampf{--accent:#f97316; --bg:#1b130c; --card:#23160d}
body.bodenkampf .card,
body.bodenkampf .status-card,
body.bodenkampf .modal-dialog{
  background:var(--card) !important;
  border-color:rgba(249,115,22,.34) !important;
}
body.bodenkampf .nav-item.active{background:rgba(249,115,22,.18) !important;border:1px solid rgba(249,115,22,.44) !important}
body.bodenkampf .nav-item:hover{background:rgba(249,115,22,.12) !important}
body.bodenkampf input,
body.bodenkampf select,
body.bodenkampf textarea{border-color:rgba(249,115,22,.32)}
body.bodenkampf input:focus,
body.bodenkampf textarea:focus,
body.bodenkampf select:focus{box-shadow:0 0 0 3px rgba(249,115,22,.26);border-color:var(--accent)}
body.bodenkampf .table th,
body.bodenkampf .table td{border-bottom-color:rgba(249,115,22,.26)}
body.bodenkampf .toggle .slider{border-color:rgba(249,115,22,.32)}
body.salvage{--accent:#67e8f9; --bg:#0a1a24; --card:#0f2430}
body.salvage .card,
body.salvage .status-card,
body.salvage .modal-dialog{
  background:var(--card) !important;
  border-color:rgba(103,232,249,.32) !important;
}
body.salvage .nav-item.active{background:rgba(103,232,249,.18) !important;border:1px solid rgba(103,232,249,.5) !important}
body.salvage .nav-item:hover{background:rgba(103,232,249,.12) !important}
body.salvage input,
body.salvage select,
body.salvage textarea{border-color:rgba(103,232,249,.3)}
body.salvage input:focus,
body.salvage textarea:focus,
body.salvage select:focus{box-shadow:0 0 0 3px rgba(103,232,249,.22);border-color:var(--accent)}
body.salvage .table th,
body.salvage .table td{border-bottom-color:rgba(103,232,249,.24)}
body.salvage .toggle .slider{border-color:rgba(103,232,249,.3)}
body.firemode{--bg:#160202;--bg-2:#0d0101;--card:rgba(46,13,0,.86);--muted:#ffbda8;--text:#fff3e5;--accent:#ff5c1a;--accent-2:#ff8033;--ring:rgba(255,92,26,.32);--border:rgba(255,110,40,.32);--border-strong:rgba(255,125,48,.48);--shadow:0 32px 76px rgba(132,28,0,.62)}
body.firemode::before{background:radial-gradient(circle at center,rgba(255,120,40,.55) 0%,rgba(255,120,40,0) 72%)}
body.firemode::after{background:radial-gradient(circle at center,rgba(255,60,20,.48) 0%,rgba(255,60,20,0) 70%)}
body.firemode .site-header{background:rgba(48,10,0,.82);box-shadow:0 20px 60px rgba(120,20,0,.35)}
body.firemode .sidebar{background:rgba(32,6,0,.78);border-right:1px solid rgba(255,110,40,.32);box-shadow:inset -1px 0 0 rgba(255,120,40,.24),0 30px 70px rgba(48,10,0,.45)}
body.firemode .card,
body.firemode .status-card,
body.firemode .modal-dialog{background:linear-gradient(180deg,rgba(50,10,0,.88) 0%, rgba(26,4,0,.88) 100%) !important;border-color:rgba(255,120,48,.45) !important;box-shadow:0 26px 70px rgba(60,10,0,.55) !important}
body.firemode .nav-item{background:rgba(40,8,0,.52);border-color:rgba(255,110,40,.28)}
body.firemode .nav-item:hover{background:rgba(60,12,0,.68);border-color:rgba(255,140,60,.45);box-shadow:0 20px 46px rgba(58,8,0,.45)}
body.firemode .nav-item.active{background:linear-gradient(135deg,rgba(255,110,40,.32) 0%,rgba(255,70,20,.24) 100%);border-color:rgba(255,150,70,.58);box-shadow:0 26px 56px rgba(66,12,0,.5)}
body.firemode .nav-item::before{background:rgba(255,110,40,.8)}
body.firemode button{background:linear-gradient(135deg,rgba(255,92,26,1) 0%,rgba(255,125,54,1) 100%);color:#1a0500;box-shadow:0 24px 60px rgba(120,24,0,.42)}
body.firemode button.secondary{background:rgba(255,130,60,.16);color:var(--text);border:1px solid rgba(255,140,70,.42);box-shadow:none}
body.firemode button:hover{box-shadow:0 28px 70px rgba(140,32,0,.55)}
body.firemode button:focus-visible{outline:3px solid rgba(255,92,26,.36)}
body.firemode input,
body.firemode select,
body.firemode textarea{border-color:rgba(255,110,40,.35);background:rgba(28,4,0,.75);color:var(--text)}
body.firemode input:focus,
body.firemode textarea:focus,
body.firemode select:focus{box-shadow:0 0 0 3px rgba(255,90,20,.32);border-color:rgba(255,140,60,.65)}
body.firemode .table th,
body.firemode .table td{border-bottom-color:rgba(255,110,40,.24)}
body.firemode .toggle .slider{border-color:rgba(255,120,48,.45);background:rgba(26,4,0,.8)}
body.firemode .toggle .slider::before{background:rgba(255,180,120,1)}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100vh;background:radial-gradient(120% 120% at 0% 0%,rgba(124,108,255,.22) 0%,transparent 55%),radial-gradient(120% 120% at 100% 0%,rgba(45,197,253,.18) 0%,transparent 50%),linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);font-family:'Inter','Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;moz-osx-font-smoothing:grayscale;position:relative;overflow-x:hidden}
body::before,body::after{content:'';position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(140px);opacity:.42;z-index:0;pointer-events:none}
body::before{top:-180px;left:-220px;background:radial-gradient(circle at center,rgba(124,108,255,.55) 0%,rgba(124,108,255,0) 72%)}
body::after{top:-140px;right:-220px;background:radial-gradient(circle at center,rgba(45,197,253,.45) 0%,rgba(45,197,253,0) 70%)}
body>*{position:relative;z-index:1}
.site-header{display:flex;align-items:center;gap:24px;padding:20px clamp(20px,4vw,48px);position:sticky;top:0;z-index:40;background:rgba(6,10,24,.82);backdrop-filter:blur(26px) saturate(170%);border-bottom:1px solid rgba(147,158,196,.22);box-shadow:0 32px 90px rgba(4,8,22,.45)}
.toolbar{margin-left:auto;display:flex;gap:8px;align-items:center}
.twofa-control{position:relative}
.twofa-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:280px;width:min(380px,92vw);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:14px;z-index:120}
.twofa-panel-inner{display:flex;flex-direction:column;gap:10px}
.twofa-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.twofa-title{font-weight:700;font-size:15px;color:var(--text);margin:0}
.twofa-sub{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.twofa-qr-wrap{display:flex;justify-content:center}
.twofa-qr{width:200px;height:200px;object-fit:contain;background:rgba(9,13,26,.7);border:1px solid var(--border);border-radius:12px;padding:8px}
.twofa-secret{font-family:'Space Grotesk','Inter','SFMono-Regular','Consolas',monospace;font-weight:700;letter-spacing:.06em;border:1px dashed var(--border);padding:10px;border-radius:12px;background:rgba(9,13,26,.7);color:var(--text);text-align:center;word-break:break-all}
.twofa-input input{width:100%;letter-spacing:.1em;text-align:center;font-weight:700}
#twofa-btn.twofa-active{border-color:var(--accent-2);box-shadow:0 0 0 2px var(--ring);background:rgba(124,108,255,.16)}
.twofa-panel .message{margin-top:4px}
.twofa-timer{display:flex;flex-direction:column;gap:6px}
.twofa-progress{height:6px;background:rgba(147,158,196,.2);border-radius:999px;overflow:hidden}
.twofa-progress-bar{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .2s linear}
.twofa-timer-text{font-size:12px;color:var(--muted);text-align:right}
.header-center{flex:1;display:flex;justify-content:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(152,160,190,.85)}
.header-center #announcement-header{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(8,12,32,.68);border:1px solid rgba(147,158,196,.26);max-width:60ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--text)}
.icon-btn{appearance:none;border-radius:999px;border:1px solid rgba(147,158,196,.28);background:rgba(8,12,28,.6);color:var(--text);padding:10px 18px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:background .16s ease,border-color .16s ease,transform .12s ease,box-shadow .16s ease}
.icon-btn:hover{background:rgba(12,18,40,.75);border-color:rgba(165,134,255,.42);box-shadow:0 18px 40px rgba(6,10,26,.35);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0);box-shadow:0 10px 28px rgba(4,8,20,.28)}
.site-header .brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-family:'Space Grotesk','Inter',sans-serif;font-size:18px;color:#fff !important;text-decoration:none}
.brand-logo{width:32px;height:32px;object-fit:contain;border-radius:10px;flex:0 0 auto;box-shadow:0 10px 26px rgba(124,108,255,.35)}
.brand-text{display:inline-flex;gap:4px;align-items:center;letter-spacing:.05em}
.site-header .brand .head{color:var(--accent-2) !important}
.site-header .brand .box{color:#7dd3fc !important}
.link{color:var(--muted);text-decoration:none}
.container{min-height:calc(100vh - 120px);display:flex;justify-content:center;align-items:center;padding:clamp(32px,6vw,80px) clamp(20px,5vw,64px)}
.landing-layout{width:min(1120px,100%);display:grid;grid-template-columns:1fr;gap:56px;align-items:center;position:relative}
.landing-layout::before{content:'';position:absolute;inset:auto;right:4%;top:-12%;width:420px;height:420px;background:radial-gradient(circle at center,rgba(129,120,255,.28) 0%,rgba(129,120,255,0) 70%);filter:blur(90px);opacity:.55;pointer-events:none;z-index:-1}
@media (min-width:960px){.landing-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)}}
@media (min-width:1280px){.landing-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr)}}
.hero{display:flex;flex-direction:column;gap:24px;max-width:560px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;background:rgba(124,108,255,.16);color:var(--accent-2);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px rgba(165,134,255,.85)}
.hero-title{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(36px,4vw,52px);line-height:1.05;font-weight:700;margin:0;color:var(--text)}
.hero-title span{color:var(--accent-2)}
.hero-copy{margin:0;color:var(--muted);font-size:clamp(16px,1.2vw,18px);max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-actions .ghost-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;color:var(--accent-2);background:rgba(124,108,255,.12);font-weight:600;text-decoration:none}
.hero-actions .ghost-link:hover{background:rgba(124,108,255,.18)}
.hero-actions .ghost-link:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
.hero-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.metric-card{padding:16px 18px;border-radius:18px;background:linear-gradient(160deg,rgba(10,15,36,.78) 0%,rgba(18,25,49,.65) 100%);border:1px solid rgba(147,158,196,.25);box-shadow:0 18px 50px rgba(6,10,30,.35);display:flex;flex-direction:column;gap:8px}
.metric-card strong{font-family:'Space Grotesk','Inter',sans-serif;font-size:28px;font-weight:700;color:var(--text)}
.metric-card span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.metric-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.hero-points{display:grid;gap:12px;margin:8px 0 0;padding:0;list-style:none}
.hero-points li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--muted)}
.hero-points li::before{content:'';width:10px;height:10px;border-radius:50%;margin-top:6px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);box-shadow:0 0 10px rgba(124,108,255,.7)}
@media (max-width:720px){.landing-layout{gap:36px}.hero{gap:20px}.hero-actions{flex-direction:column;align-items:flex-start}}
.card{width:100%;max-width:440px;background:linear-gradient(155deg,rgba(15,20,44,.95) 0%,rgba(12,18,40,.74) 100%);border:1px solid rgba(147,158,196,.28);border-radius:22px;padding:36px clamp(24px,4vw,40px);box-shadow:0 32px 90px rgba(4,8,22,.45);backdrop-filter:blur(22px);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:-40%;left:-10%;width:320px;height:320px;background:radial-gradient(circle at top,rgba(124,108,255,.45) 0%,rgba(124,108,255,0) 68%);opacity:.7;pointer-events:none;z-index:0}
.card::after{content:'';position:absolute;bottom:-35%;right:-15%;width:260px;height:260px;background:radial-gradient(circle at bottom,rgba(45,197,253,.32) 0%,rgba(45,197,253,0) 70%);opacity:.6;pointer-events:none;z-index:0}
.card>*{position:relative;z-index:1}
/* On app pages, allow cards to expand to full width */
.content .card{max-width:none}
h1{margin:0 0 8px;font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:clamp(26px,2.6vw,32px);color:var(--text)}
.sub{margin:0 0 26px;color:var(--muted);font-size:15px}
form{display:grid;gap:18px}
label{display:grid;gap:10px;font-size:14px;color:var(--muted)}
.otp-row{display:none}
.otp-row.visible{display:grid !important}
.otp-hint{font-size:12px;color:var(--muted)}
input,textarea{border:1px solid rgba(147,158,196,.28);background:rgba(9,13,26,.78);color:var(--text);padding:14px 16px;border-radius:14px;outline:none;transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;box-shadow:0 14px 30px rgba(4,8,22,.24)}
input:hover,textarea:hover{border-color:rgba(165,134,255,.45)}
input:focus,textarea:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring),0 18px 38px rgba(7,11,30,.4)}
input::placeholder,textarea::placeholder{color:rgba(152,160,190,.65)}
textarea{min-height:120px;resize:vertical}
button{appearance:none;border:none;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);color:#050714;padding:14px 18px;border-radius:16px;font-weight:700;font-family:'Space Grotesk','Inter',sans-serif;cursor:pointer;transition:transform .12s ease, box-shadow .18s ease}
button:hover{transform:translateY(-2px);box-shadow:0 26px 60px rgba(124,108,255,.32)}
button:active{transform:translateY(0)}
button:focus-visible{outline:3px solid rgba(124,108,255,.45);outline-offset:3px}
.request-type-toggle{background:rgba(9,13,26,.6);border:1px solid var(--border-strong);border-radius:14px;padding:6px;box-shadow:0 16px 32px rgba(4,8,22,.24)}
.request-type-toggle .segmented{appearance:none;border:1px solid transparent;background:transparent;color:var(--text);padding:12px 10px;border-radius:10px;font-weight:700;cursor:pointer;transition:all .14s ease}
.request-type-toggle .segmented:hover{border-color:rgba(124,108,255,.35);background:rgba(124,108,255,.08);box-shadow:0 14px 28px rgba(6,10,26,.28)}
.request-type-toggle .segmented.active{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);color:#050714;border-color:transparent;box-shadow:0 18px 40px rgba(124,108,255,.35)}
.message{margin-top:10px;font-size:13px;color:var(--muted)}
.message.error{color:var(--error)}
.message.success{color:var(--success)}
.muted{color:var(--muted)}


/* Login/register dividers */
.divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted)}
.divider::before,.divider::after{content:"";height:1px;background:var(--border-strong);flex:1}
.divider span{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.auth-alt{font-size:13px;color:var(--muted);text-align:center}
.auth-alt a{color:var(--text);text-decoration:underline}

/* App layout with sidebar */
.app{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 80px);transition:none;position:relative}
body.anim-ready .app, html.anim-ready .app{transition:grid-template-columns .2s ease}
.sidebar{background:rgba(8,12,28,.78);border-right:1px solid rgba(147,158,196,.2);padding:28px 20px;backdrop-filter:blur(20px);box-shadow:inset -1px 0 0 rgba(147,158,196,.14),0 24px 70px rgba(4,8,22,.4);display:flex;flex-direction:column;gap:18px}
.nav{display:flex;flex-direction:column;gap:14px}
.nav-group{display:flex;flex-direction:column;gap:8px;padding:0;margin:0}
.nav-group .nav-group-items{display:flex;flex-direction:column;gap:8px}
.nav-group[data-open="false"] .nav-group-items{display:none}
.nav-section.collapsible{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;user-select:none;border-radius:10px;padding:8px 6px;transition:background .16s ease,color .16s ease}
.nav-section.collapsible:hover{background:rgba(124,108,255,.12);color:var(--accent-2)}
.nav-group .section-title{display:inline-flex;align-items:center;gap:8px}
.nav-group[data-open="false"] .section-title::after{content:'>';opacity:.6;font-size:12px}
.nav-group[data-open="true"] .section-title::after{content:'v';opacity:.6;font-size:12px}
body.sidebar-collapsed .nav-section .section-title,html.sidebar-collapsed .nav-section .section-title{display:none}
body.sidebar-collapsed .nav-section.collapsible,html.sidebar-collapsed .nav-section.collapsible{justify-content:center}
body.sidebar-collapsed .nav-group .section-title::after,html.sidebar-collapsed .nav-group .section-title::after{content:'';display:none}
#admin-group{background:linear-gradient(140deg,rgba(73,8,18,.38) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#admin-group .nav-section.collapsible{background:transparent}
.nav-section .section-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
#dev-group{background:linear-gradient(140deg,rgba(155,118,30,.25) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#dev-group .section-title,#dev-group .section-icon{color:#ffd34d}
#eventmods-group{background:linear-gradient(140deg,rgba(32,110,72,.28) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#eventmods-group .section-title,#eventmods-group .section-icon{color:#4ade80}
#eventteam-group{background:linear-gradient(140deg,rgba(46,148,121,.24) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#eventteam-group .section-title,#eventteam-group .section-icon{color:#a7f3d0}
#bodenkampf-group{background:linear-gradient(140deg,rgba(114,66,28,.28) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#bodenkampf-group .section-title,#bodenkampf-group .section-icon{color:#f97316}
#salvage-group{background:linear-gradient(140deg,rgba(32,91,104,.26) 0%,rgba(12,10,24,0) 65%);padding:6px 4px;margin:4px 0;border-radius:16px}
#salvage-group .section-title,#salvage-group .section-icon{color:#67e8f9}
.nav-section{display:flex;align-items:center;gap:8px;margin:0 4px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.nav-section .section-icon img{width:18px;height:18px;display:block;object-fit:contain}
.nav-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;color:var(--text);text-decoration:none;border:1px solid rgba(147,158,196,.18);position:relative;background:rgba(10,14,32,.45);transition:transform .12s ease,border-color .16s ease,background .16s ease,box-shadow .18s ease}
.nav-item::before{content:'';position:absolute;left:8px;top:14px;bottom:14px;width:3px;border-radius:999px;background:rgba(124,108,255,0);transition:background .16s ease}
.nav-item .icon{width:24px;display:inline-flex;align-items:center;justify-content:center}
.nav-item .icon img.nav-icon{width:20px;height:20px;object-fit:contain;display:block}
.nav-item .label{white-space:nowrap;font-weight:500}
.nav-item:hover{background:rgba(12,18,38,.65);border-color:rgba(165,134,255,.35);box-shadow:0 16px 40px rgba(6,10,28,.35);transform:translateX(2px)}
.nav-item.active{background:linear-gradient(135deg,rgba(124,108,255,.24) 0%,rgba(45,197,253,.18) 100%);border:1px solid rgba(124,108,255,.55);box-shadow:0 22px 50px rgba(6,10,28,.4);transform:translateX(0)}
.nav-item.active::before{background:var(--accent-2)}
.content{padding:24px clamp(24px,4vw,48px)}
.app .content{min-width:0}

/* Make interactive rows look clickable */
.clickable{cursor:pointer}

/* Generic select look to match inputs */
select{border:1px solid rgba(147,158,196,.28);background:rgba(9,13,26,.78);color:var(--text);padding:14px 16px;border-radius:14px;outline:none;appearance:none;transition:border-color .16s ease, box-shadow .16s ease}
select:hover{border-color:rgba(165,134,255,.45)}
select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--ring),0 18px 38px rgba(7,11,30,.35)}

/* Remove small arrows/spinners on number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield }

/* Filter bar styling */

/* Drag & Drop dual list styles */
.list{background:rgba(8,12,26,.62);border:1px solid var(--border-strong);border-radius:12px;padding:10px;min-height:160px}
.list.drag-over{outline:2px dashed var(--accent-2); outline-offset:4px}
.dnd-item{cursor:grab;user-select:none;border:1px solid rgba(147,158,196,.28);border-radius:12px;padding:10px 12px;margin:6px 0;background:rgba(10,14,32,.62);transition:background .15s,border-color .15s,box-shadow .15s}
.dnd-item:hover{border-color:var(--accent-2);background:rgba(124,108,255,.16);box-shadow:0 14px 30px rgba(6,10,28,.32)}
.dnd-item:focus{outline:2px solid var(--accent-2);outline-offset:2px}
.dnd-item:active{cursor:grabbing}
.dnd-item.dragging{opacity:.7}

/* Highlight items newly added to assigned list (pre-save) */
.dnd-item.assigned-new{background:rgba(124,108,255,.22);border-color:rgba(124,108,255,.45)}
.filter-bar{display:flex;gap:10px;align-items:center;background:linear-gradient(180deg,rgba(12,18,40,.65),rgba(8,12,24,.45));border:1px solid rgba(147,158,196,.26);border-radius:14px;padding:12px 14px}
body.eventmods .filter-bar{border-color:rgba(74,222,128,.38);background:linear-gradient(180deg,rgba(9,33,24,.6),rgba(8,12,24,.45))}

/* Toggle switch (larger) */
.switch{display:inline-flex;align-items:center;gap:10px}
.switch input{display:none}
.switch .slider{position:relative;display:inline-block;width:48px;height:24px;background:var(--slider-bg, #171b21);border:1px solid var(--border-strong);border-radius:999px;transition:background .18s ease,border-color .18s ease}
.switch .slider::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#0b0f14;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .18s ease}
.switch input:checked + .slider{background:var(--slider-bg, #171b21);border-color:var(--border-strong)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.switch .switch-label{font-size:14px;color:var(--muted)}
/* System status */
.system-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}
.status-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px}
.status-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.status-title{font-weight:700}
.status-pill{margin-left:auto;border-radius:999px;padding:4px 10px;font-size:12px;color:#111;background:#aaa}
.status-pill.ok{background:var(--success);color:#08140a}
.status-pill.err{background:var(--error);color:#19060a}
.status-body{color:var(--muted);font-size:13px}
/* Toggle switch */
.toggle{position:relative;display:inline-block;width:64px;height:32px}
.toggle input{opacity:0;width:0;height:0}
/* Unified toggle style (consistent white track and height) */
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .slider{position:relative;display:inline-block;width:48px;height:24px;background:var(--slider-bg, #171b21);border:1px solid var(--border-strong);border-radius:999px;transition:background .18s ease,border-color .18s ease}
.toggle .slider::before{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;background:#0b0f14;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .18s ease}
.toggle input:focus + .slider{box-shadow:0 0 0 3px var(--ring)}
.toggle input:checked + .slider{background:var(--slider-bg, #171b21);border-color:var(--border-strong)}
.toggle input:checked + .slider::before{transform:translateX(20px)}
/* Simple table styling */
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.table thead th{color:var(--muted);font-weight:600;font-size:13px}
.table tbody tr:hover{background:rgba(255,255,255,.04)}
.table td.actions{white-space:nowrap}
.btn.small{padding:6px 10px;border-radius:8px;font-size:12px;margin-right:6px}
.btn.small.danger{background:#8a2e2e;color:#fff}
.linklike{background:none;border:none;color:var(--text);text-decoration:underline;cursor:pointer;padding:0;font:inherit}
.select-inline{background:rgba(9,13,26,.78);color:var(--text);border:1px solid rgba(147,158,196,.28);border-radius:12px;padding:10px 14px}
/* Ensure selects look dark in modals too */
.modal select{background:rgba(9,13,26,.78);color:var(--text);border:1px solid rgba(147,158,196,.28);border-radius:14px;padding:12px 14px}

/* Drag & Drop visuals */
.dragging{opacity:.6}
.dd-over-cat{outline:2px dashed rgba(74,222,128,.6); outline-offset:4px; border-radius:10px}
.dd-over-link{outline:2px dashed rgba(255,255,255,.35); outline-offset:3px; border-radius:8px}
.link-row{align-items:center}
.link-row, #links-list > div{transition:transform .15s ease, background-color .15s ease, outline-color .12s ease}
/* Category separators on Links page */
#links-list > div{border-top:1px solid var(--border-strong);padding-top:12px;margin-top:12px}
#links-list > div:first-child{border-top:none;padding-top:0;margin-top:0}
/* Vertical list for links within a category */
.links-vertical{display:flex;flex-direction:column;gap:8px}

/* Space + centered divider between category title and links */
#links-list > div > .links-vertical{
  position:relative;
  /* space under category header */
  padding-top:14px;
  margin-top:10px;
}
#links-list > div > .links-vertical::before{
  content:"";
  position:absolute;
  /* left-aligned horizontal divider directly under the header */
  top:0;
  left:0;
  transform:none;
  width:60%;            /* bigger, spans left side */
  height:2px;           /* slightly thicker line */
  background:var(--border-strong);
  opacity:.9;
}

/* Link boxes on Links pages: constant width with smart growth */
.link-row .btn:not(.small){
  /* Default constant width; grows only when content is an unbreakable long word */
  min-width:var(--link-width, 140px);
  width:max-content;
  max-width:calc(100% - 130px); /* leave room for delete button and gaps */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Toolbar for table */
.table-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.table-toolbar .spacer{margin-left:auto}
.table-toolbar input[type="search"]{min-width:200px}
.table-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
.table-wrapper::-webkit-scrollbar{height:8px}
.table-wrapper::-webkit-scrollbar-thumb{background:rgba(147,158,196,.35);border-radius:4px}
.logistik-auftraege .table{width:max-content;min-width:100%}
.logistik-auftraege .card{overflow:visible}
.logistik-auftraege #auftrag-modal .modal-dialog{max-width:920px;width:min(920px,95vw);max-height:90vh;overflow:auto}
.logistik-auftraege #complete-modal .modal-dialog{max-width:520px;width:min(520px,92vw)}
.logistik-auftraege #complete-summary{margin:12px 0 16px;padding:12px 14px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(9,13,26,.65);white-space:pre-wrap;line-height:1.45}
.logistik-auftraege #complete-modal .message{margin-top:6px;min-height:22px}
.logistik-auftraege #complete-confirm{background:rgba(82,196,26,.28);border:1px solid rgba(82,196,26,.4)}
.logistik-auftraege #complete-confirm:hover{background:rgba(82,196,26,.36)}
.logistik-auftraege #complete-confirm:disabled{opacity:.6;cursor:progress}
.logistik-auftraege #kommentar-modal .modal-dialog{max-width:520px;width:min(520px,92vw)}
.logistik-auftraege #kommentar-modal .message{margin-top:6px;min-height:22px}
.logistik-auftraege #kommentar-text{min-height:140px;font-size:15px;line-height:1.45}
.logistik-auftraege #kommentar-save{background:rgba(124,108,255,.24);border:1px solid rgba(124,108,255,.45)}
.logistik-auftraege #kommentar-save:hover{background:rgba(124,108,255,.32)}
.logistik-auftraege #kommentar-save:disabled{opacity:.6;cursor:progress}
.logistik-auftraege .location-block{margin-bottom:18px;padding:14px 16px;border:1px solid rgba(124,108,255,.25);border-radius:12px;background:rgba(124,108,255,.12)}
.logistik-auftraege .location-block:last-of-type{margin-bottom:16px}
.logistik-auftraege .location-heading{font-weight:600;margin-bottom:10px;font-size:.95rem;color:var(--text)}
.logistik-auftraege .location-select{display:flex;flex-direction:column;gap:8px}
.logistik-auftraege .location-search{display:flex}
.logistik-auftraege .location-search input{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(9,13,26,.72);color:var(--text);padding:10px}
.logistik-auftraege .location-search input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.logistik-auftraege .location-select label{display:flex;flex-direction:column;gap:6px;font-weight:500}
.logistik-auftraege .location-select select{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(9,13,26,.72);color:var(--text);padding:10px;appearance:none}
.logistik-auftraege .location-select select:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.logistik-auftraege .location-meta{font-size:.85rem;color:var(--muted);min-height:18px}
.logistik-auftraege tbody tr.unclaimed td{background:rgba(124,108,255,.08)}
.logistik-auftraege td.actions{white-space:nowrap}
.logistik-auftraege td.actions .action-btn{margin:2px 4px 2px 0}
.logistik-auftraege .action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(9,13,26,.72);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.logistik-auftraege .action-btn:hover{
  background:rgba(124,108,255,.18);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.logistik-auftraege .action-btn:disabled{
  opacity:.55;
  cursor:progress;
  transform:none;
}
.logistik-auftraege .action-btn--primary{
  border-color:rgba(124,108,255,.55);
  background:rgba(124,108,255,.18);
}
.logistik-auftraege .action-btn--primary:hover{
  background:rgba(124,108,255,.28);
  border-color:var(--accent-strong, var(--accent));
}
.logistik-auftraege .action-btn--success{
  border-color:rgba(82,196,26,.55);
  background:rgba(82,196,26,.18);
}
.logistik-auftraege .action-btn--success:hover{
  background:rgba(82,196,26,.28);
  border-color:rgba(82,196,26,.75);
}
.logistik-auftraege .action-btn--danger{
  border-color:rgba(240,71,71,.55);
  background:rgba(240,71,71,.14);
}
.logistik-auftraege .action-btn--danger:hover{
  background:rgba(240,71,71,.22);
  border-color:rgba(240,71,71,.75);
}
.logistik-bestand #bestand-lager-table{border-collapse:separate;border-spacing:0 10px;margin-top:0}
.logistik-bestand #bestand-lager-table thead th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding-bottom:4px;border:none}
.logistik-bestand #bestand-lager-table tbody tr{background:transparent}
.logistik-bestand #bestand-lager-table tbody tr:hover{background:transparent}
.logistik-bestand #bestand-lager-table td{border:none;padding:0}
.logistik-bestand .lager-nav-btn{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(124,108,255,.38);
  background:rgba(124,108,255,.16);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.logistik-bestand .lager-nav-btn::after{
  content:'\2192';
  font-size:16px;
  opacity:.7;
}
.logistik-bestand .lager-nav-btn:hover{
  background:rgba(124,108,255,.26);
  border-color:rgba(124,108,255,.55);
  box-shadow:0 16px 36px rgba(8,12,32,.35);
  transform:translateY(-1px);
}
.logistik-bestand .lager-nav-btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.logistik-bestand .lager-nav-btn:active{transform:translateY(0)}
.logistik-bestand-lager .back-btn{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(124,108,255,.45);
  background:rgba(124,108,255,.18);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.logistik-bestand-lager .back-btn:hover{
  background:rgba(124,108,255,.28);
  border-color:rgba(124,108,255,.6);
  box-shadow:0 12px 28px rgba(8,12,32,.32);
}
.logistik-bestand-lager .back-btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.pagination{display:flex;align-items:center;gap:8px;margin-top:10px}
.pagination .spacer{margin-left:auto}
.page-size-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}

/* Toggle switch (light switch style) */
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.status-cell .sub{min-width:86px;display:inline-block;text-align:left}

/* Wartungsmodus slider: green (off) -> red (on) */
#maint-toggle + .slider{background:#14532d;border-color:#166534}
#maint-toggle + .slider::before{background:#fff; width:22px; height:22px; top:1px; left:1px}
#maint-toggle:checked + .slider{background:#7f1d1d;border-color:#991b1b}
#maint-toggle:checked + .slider::before{background:#fff; transform: translateX(24px)}

/* Hanger: fine-tune "Nur meine" knob so it doesn't overshoot right */
#hanger-only-mine + .slider::before{left:1px; top:1px; width:22px; height:22px; background:#fff}
#hanger-only-mine:checked + .slider::before{transform: translateX(20px)}
.status-cell .sub{min-width:86px;display:inline-block;text-align:left}

/* Collapsed sidebar */
body.sidebar-collapsed .app, html.sidebar-collapsed .app{grid-template-columns:64px 1fr}
body.sidebar-collapsed .sidebar .nav-item, html.sidebar-collapsed .sidebar .nav-item{padding:10px;border-radius:8px;justify-content:center}
body.sidebar-collapsed .sidebar .nav-item .label, html.sidebar-collapsed .sidebar .nav-item .label{display:none}

/* Modal */
.modal{position:fixed;inset:0;display:block;z-index:2000}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal-dialog{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00)),var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;max-width:480px;margin:10vh auto 0;padding:20px;box-shadow:var(--shadow)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;align-items:center}
.modal-actions .flex-spacer{flex:1}
.modal-actions .actions-right{display:flex;gap:8px}
.modal-actions.modal-actions-spread{justify-content:space-between}
.secondary{background:rgba(255,255,255,.05);border:1px solid var(--border-strong);color:var(--text)}

/* Drag & Drop dual list styles */
.list{background:rgba(8,12,26,.62);border:1px solid var(--border-strong);border-radius:12px;padding:10px;min-height:160px}
.list.drag-over{outline:2px dashed var(--accent-2); outline-offset:4px}
.dnd-item{cursor:grab;user-select:none;border:1px solid rgba(147,158,196,.28);border-radius:12px;padding:10px 12px;margin:6px 0;background:rgba(10,14,32,.62);transition:background .15s,border-color .15s,box-shadow .15s}
.dnd-item:hover{border-color:var(--accent-2);background:rgba(124,108,255,.16);box-shadow:0 14px 30px rgba(6,10,28,.32)}
.dnd-item:focus{outline:2px solid var(--accent-2);outline-offset:2px}
.dnd-item:active{cursor:grabbing}
.dnd-item.dragging{opacity:.7}

/* Make the Abteilungen editor modal fit the viewport with scroll */
#edit-abt-modal .modal-dialog{max-width:900px;width:min(900px,95vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
#edit-abt-modal form{display:flex;flex-direction:column;gap:12px;min-height:0}
#edit-abt-modal .dnd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;min-height:0;flex:1}
#edit-abt-modal .panel{display:flex;flex-direction:column;gap:8px;min-height:0}
#edit-abt-modal .list{flex:1;min-height:0;overflow:auto}

/* Make the Rules -> Seiten editor modal fit viewport and scroll lists only */
#edit-site-modal .modal-dialog{max-width:900px;width:min(900px,95vw);height:85vh;margin:5vh auto;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
#edit-site-modal form{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
#edit-site-modal .dnd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;min-height:0;flex:1}
#edit-site-modal .panel{display:flex;flex-direction:column;gap:8px;min-height:0}
#edit-site-modal .list{flex:1;min-height:0;overflow:auto}
/* Make content area flex so lists can scroll and actions stay visible */
#edit-site-modal #simple-mode,
#edit-site-modal #advanced-mode{display:flex;flex-direction:column;min-height:0;flex:1}
#edit-site-modal .modal-actions{flex-shrink:0}
@media (max-width: 720px){
  #edit-site-modal .dnd-grid{grid-template-columns:1fr}
}

/* Visual highlight when a user's Abteilungen change */
.dept-cell.changed{background:rgba(255,211,77,.25);border-radius:6px;transition:background .6s}

/* Choice row for Auftrag -> Typ */
.choice-row{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.choice-row .v-sep{width:1px;background:var(--border-strong)}
.choice-row .choice-box{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 10px;background:transparent;color:var(--text);border:none;cursor:pointer;user-select:none;transition:background .12s ease, outline-color .12s ease}
.choice-row .choice-box:hover{background:#30363d}
.choice-row .choice-box.selected{background:#21262d;outline:2px solid var(--accent);outline-offset:-2px}
.choice-row .choice-box:focus{outline:2px solid var(--accent);outline-offset:-2px}

/* Compact suggest lists for Step 2 */
.suggest-list{margin-top:6px;border:1px solid var(--border);border-radius:8px;overflow:hidden;max-height:132px;display:block}
.suggest-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--border);}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover{background:#21262d}
.suggest-item.selected{background:#30363d; outline:1px solid var(--accent); outline-offset:-1px}

/* Selected item single-card display */
.selected-item-card{border:1px solid var(--border);border-radius:8px;padding:12px;min-height:86px;display:flex;flex-direction:column;gap:10px}
.selected-item-card .title{font-weight:700}
.selected-item-card .meta{color:var(--muted);font-size:12px}
.selected-item-card .row{display:flex;gap:8px;align-items:center}
.selected-item-card input[type="number"]{max-width:120px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.poi-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.poi-search{flex:1;min-width:220px}
.poi-search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:inherit}
.poi-toolbar-actions{display:flex;align-items:center;gap:8px}
.poi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:12px}
.poi-grid-loading{opacity:0.6;pointer-events:none}
.poi-card{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease}
.poi-card:focus,.poi-card:hover{transform:translateY(-2px);border-color:rgba(124,108,255,0.4);box-shadow:0 12px 28px rgba(0,0,0,0.35)}
.poi-card-thumb{position:relative;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04)}
.poi-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease}
.poi-card:hover .poi-card-thumb img{transform:scale(1.03)}
.poi-card-thumb-placeholder{object-fit:contain!important;padding:14px;background:rgba(0,0,0,0.12)}
.poi-card-body{display:flex;flex-direction:column;gap:8px}
.poi-card-body h3{margin:0;font-size:18px}
.poi-card-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.poi-card-description{margin:0;font-size:14px;color:var(--muted)}
.poi-card-finder{margin:0;font-size:12px;color:var(--muted)}
.poi-detail{display:flex;flex-direction:column;gap:16px}
.poi-detail-image{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.18)}
.poi-detail-image img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.poi-detail-content{display:flex;flex-direction:column;gap:12px}
.poi-detail-content h2{margin:0}
.poi-detail-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.poi-detail-found-by{margin:0;font-size:13px;color:var(--muted)}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}