:root{
  --bg:#0b0f0c;
  --panel:#141a15;
  --card:#141a15;
  --card-strong:#1a2219;
  --muted:#718c74;
  --text:#e8f0e9;
  --accent:#3ddc84;
  --accent-2:#60a5fa;
  --glass:rgba(61,220,132,0.06);
  --radius:12px;
  --danger:#ef4444;
  --success:#16a34a;
  --soft-shadow: 0 18px 50px rgba(2,6,23,0.50);
  --card-border: rgba(255,255,255,0.07);
}
*{box-sizing:border-box}
:root{--bg:#0b0f0c;
  --panel:#141a15;
  --card:#141a15;
  --card-strong:#1a2219;
  --muted:#718c74;
  --text:#e8f0e9;
  --accent:#3ddc84;
  --accent-2:#60a5fa;
  --glass:rgba(61,220,132,0.06);
  --radius:10px;
  --danger:#ef4444;
  --success:#16a34a;
  --soft-shadow: 0 8px 22px rgba(2,6,23,0.45);
  --card-border: rgba(255,255,255,0.07);
}

body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0;background:#0b0f0c;color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:2rem}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,15,12,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.07)}
.site-header{overflow:visible}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}

/* Announcement banner shown under the main navigation */
.site-announcement{background:linear-gradient(90deg, rgba(124,58,237,0.06), rgba(79,70,229,0.02));border-top:1px solid rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.01)}
.site-announcement .container{padding:0.6rem 2rem}
.site-announcement{overflow:hidden;--marquee-duration:28s}
.site-announcement .marquee{overflow:hidden}
.site-announcement .marquee-inner{display:inline-block;white-space:nowrap;padding-left:100%;color:var(--muted);font-weight:600;animation:marquee var(--marquee-duration,18s) linear infinite}
.site-announcement .marquee-inner a{color:var(--accent);text-decoration:underline;font-weight:700}
.site-announcement .marquee-inner strong{color:inherit}
.site-announcement .container{padding:0.6rem 2rem}
.site-announcement:hover .marquee-inner{animation-play-state:paused}

@keyframes marquee{
  0%{transform:translateX(0%)}
 100%{transform:translateX(-100%)}
}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logo{overflow:visible}
.logo img{height:110px !important;display:block;width:auto !important;object-fit:contain}
.logo{overflow:visible}
.header-inner{height:64px}

/* Stronger, page-specific overrides to ensure consistency across pages */
.site-header .logo img{height:110px !important;max-height:130px !important}

/* CMS pages use a smaller header/logo for compact admin UI */
.cms-site .site-header .logo img{height:64px !important;max-height:80px !important}
.site-header .header-inner{height:90px !important}
.site-header .container{
  /* align header content with main page container and add comfortable horizontal padding */
  max-width:1200px;
  margin:0 auto;
  padding-top:0.2rem;
  padding-bottom:0.2rem;
  padding-left:2rem;
  padding-right:2rem;
}
.brand{font-weight:600}
.main-nav{display:flex;gap:1rem}
.main-nav a{text-decoration:none;color:var(--muted);padding:.4rem .6rem;border-radius:8px}
.main-nav a:hover{color:#fff;background:var(--glass)}
.header-actions{display:flex;align-items:center;gap:.6rem}
.header-actions{overflow:visible}
.btn, button{--btn-padding:.6rem .95rem;--btn-radius:12px;--btn-transition:200ms;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:var(--btn-padding);border-radius:var(--btn-radius);text-decoration:none;border:0;cursor:pointer;font-weight:700;color:var(--text);background:transparent;transition:transform var(--btn-transition) ease,box-shadow var(--btn-transition),background var(--btn-transition),opacity var(--btn-transition);box-shadow:var(--soft-shadow);position:relative;z-index:1}
.btn:active,button:active{transform:translateY(1px) scale(.998)}
.btn:focus,button:focus{outline:0;box-shadow:0 0 0 6px rgba(96,165,250,0.06)}
.btn.primary{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#04202a;box-shadow:0 12px 40px rgba(6,182,212,0.06)}
.btn.secondary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04202a;box-shadow:0 10px 30px rgba(96,165,250,0.05)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);box-shadow:none}
.cms-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:.4rem .8rem;border-radius:10px}
.nav-toggle{display:none;background:transparent;color:var(--muted);border:0;font-size:1.2rem}

.hero{padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:360px 1fr;gap:2.2rem;align-items:start}
.phone-mock{width:320px;margin:0 auto;border-radius:32px;padding:10px;background:linear-gradient(180deg,#042033 0%,#07122a 100%);box-shadow:0 20px 40px rgba(2,6,23,0.6)}
.phone-mock .phone-screen{width:300px;height:auto;display:block;border-radius:20px;border:6px solid #07121a}
.screen-description{margin-top:.8rem}
.wave{width:100%;height:56px;display:block}
.screen-description-wrapper{background:#edf8ee;padding:1rem;border-radius:12px;margin-top:12px;color:#0c1720}

.slider{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}
.centered-slider{max-width:420px;margin:0 auto}
.phone-area{display:flex;justify-content:center;width:100%}
.slides{position:relative;width:100%;min-height:420px}
.slide{display:none;padding:0 1rem;overflow:visible}
.slide.active{display:block}
.slide-inner{display:grid;grid-template-columns:320px 1fr;gap:1rem;align-items:start}
.slider-controls-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.arrow{background:transparent;border:0;color:var(--muted);font-size:1.8rem;padding:.2rem .6rem;cursor:pointer}
.arrow:hover{color:#fff}
.dots{display:flex;gap:.3rem;justify-content:center}
button.dot, .dot{
  display:inline-block !important;
  width:4px !important;
  height:4px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.12) !important;
  border:0 !important;
  line-height:0 !important;
  vertical-align:middle !important;
  transition:transform .12s ease, background .12s ease !important;
  box-shadow:none !important;
}
.dot.active{background:var(--accent) !important; box-shadow:none !important; transform:scale(1.05) !important}
.slider-desc{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);width:100%;margin-top:6px}
.slider-desc h3{margin:0 0 .25rem 0}
.slider-desc p{margin:0;color:var(--muted)}


.hero-content h1{font-size:2.4rem;margin:0}
.lead{color:var(--muted);max-width:42ch}
.hero-ctas{margin-top:1rem;display:flex;gap:.6rem}

.features{margin-top:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:linear-gradient(180deg,var(--card) 0%, var(--card-strong) 100%);padding:1.1rem;border-radius:calc(var(--radius) - 2px);border:1px solid var(--card-border);box-shadow:var(--soft-shadow)}

.partner-card{display:flex;align-items:center;justify-content:center;padding:1rem;background:transparent;border:none}
.partner-logo{width:100%;height:160px;object-fit:contain;padding:10px}

.impressum-hero{background:linear-gradient(90deg, rgba(124,58,237,0.08), rgba(79,70,229,0.04));padding:2rem;border-radius:12px;margin-bottom:1.4rem;display:flex;align-items:center;gap:1rem}
.impressum-hero img{height:56px}
.impressum-grid{display:grid;grid-template-columns:320px 1fr;gap:1.6rem;align-items:start}
.contact-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1.2rem;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.contact-card h4{margin:0 0 .6rem 0}
.contact-list{list-style:none;padding:0;margin:0;color:var(--muted)}
.contact-list li{margin:.45rem 0}
.legal-section{background:rgba(255,255,255,0.02);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.impressum-note{font-size:.95rem;color:var(--muted);margin-top:.8rem}

@media(max-width:900px){
  .impressum-grid{grid-template-columns:1fr;}
}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:1rem 0;margin-top:3rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:nowrap}
.footer-left{display:flex;align-items:center;gap:1rem}
.footer-brand{font-weight:600}
.footer-links{display:flex;gap:1rem;align-items:center}
.footer-links a{color:var(--muted);text-decoration:none;padding:.2rem .4rem;border-radius:6px}
.footer-links a:hover{color:#fff;background:var(--glass)}
.social{display:flex;gap:.6rem;align-items:center}
.social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.03)}
.social a svg{width:18px;height:18px;fill:currentColor;color:var(--muted)}
.social a img{width:20px;height:20px;display:block}
.social a:hover{background:var(--glass)}
.muted{color:var(--muted)}

.stats-card{margin-top:1rem}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.stat-card{background:linear-gradient(180deg, rgba(124,58,237,0.08), rgba(79,70,229,0.04));padding:.8rem;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.04)}
.stat-icon{width:36px;height:36px;margin-bottom:.45rem;opacity:0.95}
.stat-value{font-size:1.4rem;font-weight:700}
.stat-label{font-size:.85rem;color:var(--muted)}

@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

.changelog-list{display:flex;flex-direction:column;gap:1rem}

/* Download: Google Play Protect badge */
.download-protect{display:flex;align-items:center;gap:.6rem}
.download-protect img{height:40px}
.changelog-entry{border-radius:12px;padding:1rem;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.03)}
.changelog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.changelog-meta{color:var(--muted);font-size:.95rem}
.badge{display:inline-block;background:rgba(124,58,237,0.12);color:var(--accent);padding:.2rem .5rem;border-radius:999px;font-weight:600;font-size:.85rem}
.changelog-body{margin-top:.8rem;color:var(--muted);display:none}
.changelog-entry.expanded .changelog-body{display:block}
.toggle-btn{background:transparent;border:0;color:var(--muted);cursor:pointer}

@media(max-width:900px){
  .changelog-head{flex-direction:column;align-items:flex-start;gap:.4rem}
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:1rem}
  .nav-toggle{display:block}
  .main-nav{position:absolute;right:1rem;top:68px;background:var(--card);padding:.6rem;border-radius:10px;display:none;flex-direction:column}
  .main-nav.open{display:flex}
  .phone-mock{width:220px}
  .phone-mock .phone-screen{width:200px}
  .slider{flex-direction:column}
  .footer-inner{flex-wrap:wrap}
  .footer-left{flex-direction:column;align-items:flex-start;gap:.5rem}
  .social{margin-left:auto}
}

/* ======================================
   CMS LAYOUT – REDESIGNED
   ====================================== */

.cms-layout{display:grid;grid-template-columns:256px 1fr;gap:0;align-items:start;min-height:calc(100vh - 60px)}
.cms-layout.fullwidth{max-width:none;grid-template-columns:256px 1fr}

.profile-panel{position:absolute;top:56px;right:0;background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:12px;box-shadow:0 16px 48px rgba(2,6,23,0.7);z-index:120}
.profile-panel a{display:block;text-decoration:none}
.badge{font-size:.75rem;padding:.18rem .45rem}

/* ── Sidebar ── */
.cms-sidebar{
  width:256px;
  background:linear-gradient(175deg, rgba(9,24,40,0.96) 0%, rgba(5,12,20,0.98) 100%);
  border-right:1px solid rgba(255,255,255,0.045);
  padding:.7rem .55rem 1.2rem;
  height:calc(100vh - 72px);
  position:sticky;top:72px;
  align-self:start;
  overflow-y:auto;overflow-x:hidden;
  z-index:40;
  display:flex;flex-direction:column;gap:.12rem;
  transition:width .22s ease;
}
.cms-sidebar::-webkit-scrollbar{width:3px}
.cms-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.07);border-radius:3px}
.cms-sidebar.collapsed{width:62px}

.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:.2rem .4rem .7rem;margin-bottom:.1rem}
.sidebar-nav{display:flex;flex-direction:column;gap:.12rem}

/* Navigation section labels */
.nav-section{margin-top:.6rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,0.04)}
.nav-section .muted{
  display:block;padding:.1rem .6rem .3rem;
  font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(159,182,194,0.42);
}

/* Sidebar links */
.side-link{
  display:flex;align-items:center;gap:.6rem;
  background:transparent;border:0;
  width:100%;text-align:left;
  padding:.6rem .7rem;border-radius:9px;
  color:var(--muted);cursor:pointer;
  font-weight:600;font-size:.9rem;
  transition:background .14s,color .14s;
  position:relative;
}
.side-link span{display:inline-block;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link:hover{background:rgba(255,255,255,0.055);color:var(--text)}
.side-link.active{
  background:linear-gradient(90deg, rgba(96,165,250,0.13) 0%, rgba(96,165,250,0.05) 100%);
  color:var(--accent-2);
  border-left:3px solid var(--accent-2);
  padding-left:calc(.7rem - 3px);
}
.side-link svg{flex-shrink:0;width:15px;height:15px}
.side-link i{flex-shrink:0}

/* Collapsed sidebar */
.cms-sidebar.collapsed .nav-section .muted{display:none}
.cms-sidebar.collapsed .sidebar-header strong{display:none}
.cms-sidebar.collapsed .side-link{justify-content:center;padding:.5rem 0;font-size:0}
.cms-sidebar.collapsed .side-link span{display:none}
.cms-sidebar.collapsed .side-link i{margin:0!important}

/* ── Main content area ── */
.cms-main{min-width:0;position:relative;padding:1.6rem 2rem}

/* Top bar */
.cms-top{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:1.6rem;padding-bottom:1.1rem;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.cms-top h1{font-size:1.4rem;font-weight:800;margin:0;color:var(--text)}
.cms-top .muted{margin-top:.15rem;font-size:.88rem}

/* ── Stat cards ── */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.2rem}
.dash-card{
  background:linear-gradient(155deg, rgba(13,24,42,0.9) 0%, rgba(7,16,28,0.95) 100%);
  padding:1.25rem 1.35rem;border-radius:14px;
  border:1px solid rgba(255,255,255,0.055);
  box-shadow:0 8px 28px rgba(2,6,23,0.38);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.dash-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));opacity:.5;
}
.dash-card:hover{
  border-color:rgba(96,165,250,0.13);
  box-shadow:0 14px 40px rgba(2,6,23,0.5),0 0 0 1px rgba(96,165,250,0.06);
}
.dash-card h4{
  color:var(--muted);margin:0;
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.big-num{
  font-size:2.5rem;font-weight:800;
  color:var(--text);margin-top:.55rem;
  line-height:1;letter-spacing:-.03em;
}

/* ── Charts ── */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.chart-card{
  background:linear-gradient(165deg, rgba(13,24,42,0.7) 0%, rgba(7,16,28,0.75) 100%);
  padding:1.1rem 1.2rem;border-radius:14px;
  border:1px solid rgba(255,255,255,0.045);
  box-shadow:0 6px 20px rgba(2,6,23,0.28);
}
.chart-card canvas{width:100%!important;height:260px!important}

/* ── Form controls ── */
input,textarea{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  padding:.65rem .8rem;border-radius:10px;
  color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus{
  border-color:rgba(96,165,250,0.5);
  box-shadow:0 0 0 3px rgba(96,165,250,0.1);
}
select{
  background:#0d1c2e;
  border:1px solid rgba(255,255,255,0.07);
  padding:.62rem .8rem;border-radius:10px;
  color:var(--text);outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s;
}
select option{
  background:#0d1c2e;
  color:#e6eef8;
}
select:focus{border-color:rgba(96,165,250,0.5);box-shadow:0 0 0 3px rgba(96,165,250,0.1)}

.btn.primary{padding:var(--btn-padding);border-radius:var(--btn-radius);box-shadow:0 6px 18px rgba(6,182,212,0.1)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:.5rem .9rem}

.icon-btn{
  background:transparent;border:0;padding:.35rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;color:var(--muted);cursor:pointer;
  transition:background .12s,color .12s;
}
.icon-btn:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.icon-btn svg{width:18px;height:18px;display:block}

.profile-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.08);display:block}

/* ── Generic section card ── */
.card{
  background:linear-gradient(155deg, rgba(13,24,42,0.78) 0%, rgba(7,16,28,0.82) 100%);
  border:1px solid rgba(255,255,255,0.055);
  border-radius:14px;
  padding:1.35rem 1.45rem;
  box-shadow:0 6px 22px rgba(2,6,23,0.3);
}
.card h3{margin:0 0 .1rem;font-size:1.02rem;font-weight:800;color:var(--text)}

/* ── Responsive ── */
@media(max-width:520px){
  .password-row{display:flex;gap:.4rem;align-items:center}
  .password-row input{flex:1}
  .icon-btn{padding:.45rem;border-radius:8px}
}

@media(max-width:1000px){
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .charts-row{grid-template-columns:1fr}
  .cms-sidebar{display:none}
  .cms-layout{grid-template-columns:1fr}
  .cms-main{padding:1.2rem}
}

@media(max-width:1000px){
  .cms-sidebar.mobile-open{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;top:0;bottom:0;
    height:100vh;z-index:90;width:280px;
    overflow-y:auto;border-radius:0 16px 16px 0;
    box-shadow:0 24px 64px rgba(2,6,23,0.72);
    background:linear-gradient(175deg, rgba(9,24,40,0.99) 0%, rgba(5,12,20,1) 100%);
    padding-top:env(safe-area-inset-top,0);
  }
  .cms-sidebar.mobile-open .sidebar-header{display:flex;padding:1rem .8rem .6rem}
}
.sidebar-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.55);z-index:89;opacity:0;transition:opacity .18s ease;pointer-events:none}
.sidebar-backdrop.active{opacity:1;pointer-events:auto}

.table-responsive{overflow:auto;-webkit-overflow-scrolling:touch}

/* ── CMS inner table styling ── */
.cms-table{width:100%;border-collapse:collapse}
.cms-table thead tr{border-bottom:1px solid rgba(255,255,255,0.06)}
.cms-table th{
  padding:.65rem .7rem;text-align:left;
  color:var(--muted);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;
}
.cms-table td{
  padding:.65rem .7rem;
  border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:.91rem;color:var(--text);
  vertical-align:middle;
}
.cms-table tbody tr{transition:background .12s}
.cms-table tbody tr:hover{background:rgba(255,255,255,0.025)}
.cms-table tbody tr:last-child td{border-bottom:none}

/* Profile settings avatar larger */
#pAvatarPreview.profile-avatar{width:52px;height:52px}

@media(max-width:520px){
  .container{padding:1rem}
  .hero{padding:1.2rem 0}
  .logo img{height:36px;max-height:44px}
  .hero-inner{gap:.8rem}
  /* Scope btn width:100% nur auf Auth-Formulare – NIEMALS im Header! */
  .auth-v3-form .btn:not(.icon-btn),
  .auth-v3-actions .btn{width:100% !important;justify-content:center}
  main input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.auth-v3-input),
  main textarea{width:100%}
  .auth-v3-input{width:100% !important;box-sizing:border-box}
  .ticket-list-column, .ticket-detail-panel{padding:.8rem}
}

/* Global age-gate modal fallback styling (in case markup present) */
.age-gate-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:99999}
.age-gate-modal .age-gate-panel{background:var(--card);padding:1.2rem;border-radius:10px;max-width:520px;width:92%;box-shadow:0 10px 30px rgba(0,0,0,0.45)}

/* Blur page content when age gate is active */
.age-gate-active header,
.age-gate-active main,
.age-gate-active footer,
.age-gate-active .site-announcement,
.age-gate-active .container{filter:blur(6px) saturate(.92);pointer-events:none;user-select:none}
.age-gate-active .age-gate-modal{pointer-events:auto}

@media(max-width:700px){
  .dash-grid{grid-template-columns:1fr}
  .big-num{font-size:1.6rem}
}

/* =============================
   TICKET SYSTEM – COMPLETE REDESIGN
   ============================= */

.tickets-wrap{display:grid;grid-template-columns:1fr 420px;gap:1rem;align-items:start;max-width:100%;box-sizing:border-box}

/* Type pill */
.ticket-type{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.78rem;background:rgba(255,255,255,0.04);color:var(--muted);border:1px solid rgba(255,255,255,0.05);margin-left:.4rem;vertical-align:middle}

/* Legacy dashboard columns (open/closed) */
.ticket-list-column{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);max-height:640px;overflow:auto}
.ticket-card{padding:.8rem;border-radius:10px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:.4rem;margin-bottom:.6rem;cursor:pointer;transition:border-color .15s,background .15s}
.ticket-card:hover{background:rgba(255,255,255,0.025);border-color:rgba(255,255,255,0.07)}
.ticket-card .meta{display:flex;justify-content:space-between;align-items:center}
.ticket-card .title{font-weight:700}
.ticket-card .small{color:var(--muted);font-size:.9rem}

/* ═══════════════════════════════════════════════
   TICKET CREATION – Modern v2
═══════════════════════════════════════════════ */
.tcv2-panel {
  margin-bottom: 1.2rem;
  background: linear-gradient(160deg, rgba(15,34,51,.95) 0%, rgba(8,22,36,.98) 100%);
  border: 1px solid rgba(96,165,250,.12);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
  animation: tcv2-in .22s ease-out;
}
@keyframes tcv2-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel header */
.tcv2-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.4rem;
  background: rgba(96,165,250,.05);
  border-bottom: 1px solid rgba(96,165,250,.1);
}
.tcv2-head-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(96,165,250,.12);
  color: #60a5fa;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tcv2-head-icon svg { width: 18px; height: 18px; }
.tcv2-head-title { font-size: 1rem; font-weight: 700; color: #e2eaf0; }
.tcv2-head-sub   { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.tcv2-close-btn  {
  margin-left: auto; flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; box-shadow: none; padding: 0;
}
.tcv2-close-btn:hover { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.25); }
.tcv2-close-btn svg { width: 16px; height: 16px; }

/* Sections */
.tcv2-section {
  padding: 1rem 1.4rem .2rem;
}
.tcv2-section-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .65rem;
}
.tcv2-step {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(96,165,250,.15);
  color: #60a5fa;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tcv2-optional { font-weight: 400; opacity: .6; text-transform: none; font-size: .7rem; letter-spacing: 0; }

/* 2-column grid */
.tcv2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* Field */
.tcv2-field { display: flex; flex-direction: column; gap: .35rem; }
.tcv2-label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--muted);
}
.tcv2-label svg { width: 13px; height: 13px; }

/* Select */
.tcv2-select-wrap {
  position: relative;
}
.tcv2-select {
  width: 100%;
  padding: .6rem .9rem .6rem .85rem;
  padding-right: 2.2rem;
  background: #0d1c2e;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #e2eaf0;
  font-size: .88rem;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.tcv2-select:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(96,165,250,.1);
}
.tcv2-select option { background: #0d1c2e; color: #e6eef8; }
.tcv2-select-arrow {
  position: absolute;
  right: .7rem; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted);
  pointer-events: none;
}

/* Textarea */
.tcv2-textarea-wrap { position: relative; }
.tcv2-textarea {
  width: 100%;
  min-height: 160px;
  padding: .8rem 1rem;
  padding-bottom: 1.8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #e2eaf0;
  font-size: .9rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.tcv2-textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(96,165,250,.1);
}
.tcv2-textarea::placeholder { color: var(--muted); opacity: .55; }
.tcv2-char-counter {
  position: absolute;
  right: .75rem; bottom: .55rem;
  font-size: .7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: .7;
}

/* Dropzone */
.tcv2-dropzone {
  position: relative;
  border: 2px dashed rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  transition: border-color .2s, background .2s;
  cursor: pointer;
  overflow: hidden;
  min-height: 90px;
}
.tcv2-dropzone:hover, .tcv2-drag-over {
  border-color: var(--accent-2) !important;
  background: rgba(96,165,250,.05) !important;
}
.tcv2-file-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.tcv2-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.3rem 1rem;
  pointer-events: none;
}
.tcv2-upload-icon { width: 28px; height: 28px; color: var(--muted); opacity: .5; }
.tcv2-dropzone-text { font-size: .84rem; color: var(--muted); }
.tcv2-browse { color: var(--accent-2); text-decoration: underline; }
.tcv2-dropzone-hint { font-size: .72rem; color: var(--muted); opacity: .55; }

/* Preview */
.tcv2-preview {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem;
  position: relative;
}
.tcv2-preview img { max-height: 64px; max-width: 120px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,.07); }
.tcv2-preview-name { font-size: .78rem; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcv2-preview-remove {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(239,68,68,.12); color: #f87171;
  border: 1px solid rgba(239,68,68,.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: none; padding: 0;
  transition: all .15s; z-index: 3;
}
.tcv2-preview-remove:hover { background: rgba(239,68,68,.25); }
.tcv2-preview-remove svg { width: 14px; height: 14px; }

/* Actions row */
.tcv2-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.4rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.04);
  margin-top: .8rem;
  flex-wrap: wrap;
}
.tcv2-btn-row { display: flex; gap: .55rem; margin-left: auto; }
.tcv2-submit-btn { gap: .45rem; }
.tcv2-msg    { font-size: .82rem; flex: 1; }
.tcv2-msg-success { color: #4ade80; }
.tcv2-msg-error   { color: #f87171; }

/* Responsive */
@media (max-width: 600px) {
  .tcv2-grid-2 { grid-template-columns: 1fr; }
  .tcv2-head { flex-wrap: wrap; }
  .tcv2-actions { flex-direction: column; align-items: stretch; }
  .tcv2-btn-row { margin-left: 0; }
}

/* ── Ticket creation card (legacy, keep untouched) ── */
.ticket-create-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.2rem;border-radius:14px;border:1px solid var(--card-border);box-shadow:0 8px 30px rgba(2,6,23,0.12)}
.ticket-create-card .tc-header{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.8rem}
.ticket-create-card .tc-row{display:flex;gap:.6rem;align-items:flex-start}
.ticket-create-card .tc-field{flex:1;display:flex;flex-direction:column;gap:.25rem}
.ticket-create-card label{font-weight:700;font-size:.88rem;color:var(--muted)}
.ticket-create-card select{padding:.55rem;border-radius:8px;width:100%;background:#0d1c2e;color:var(--text);border:1px solid rgba(255,255,255,0.06);-webkit-appearance:none;appearance:none;}
.ticket-create-card select:focus{box-shadow:0 0 0 2px rgba(124,58,237,.35);outline:none}
.ticket-create-card select option{background:#0d1c2e;color:#e6eef8}
.ticket-create-card textarea#uBody{min-height:140px;height:auto;width:100%;padding:.8rem;border-radius:10px;font-size:1rem;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.015);color:var(--text);resize:vertical;overflow:auto;box-sizing:border-box;line-height:1.55}
.ticket-create-card .tc-attach{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.u-attach-preview img{max-width:160px;border-radius:8px;border:1px solid rgba(255,255,255,0.04)}
.ticket-create-card .tc-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.8rem;flex-wrap:wrap}
.ticket-create-card .muted{font-size:.9rem}

/* ── Ticket tab header & actions bar ── */
.ticket-tab-header{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.8rem;flex-wrap:wrap;
}
.ticket-tab-header h3{margin:0;flex-shrink:0}
.ticket-tab-desc{flex:1;min-width:0}
.ticket-tab-actions{
  display:flex;gap:.5rem;align-items:center;
  margin-left:auto;flex-wrap:wrap;flex-shrink:0;
}
.ticket-tab-actions input{padding:.4rem .6rem;border-radius:8px;min-width:0}
.ticket-tab-actions select{padding:.4rem .6rem;border-radius:8px}

/* ── NEW Ticket detail panel v2 (chat-style) ── */
.ticket-detail-v2{
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:82vh;
  box-shadow:0 12px 40px rgba(0,0,0,0.3);
}
/* Header bar */
.tdv2-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem .85rem;
  background:rgba(255,255,255,0.025);
  border-bottom:1px solid rgba(255,255,255,0.04);
  flex-shrink:0;
}
.tdv2-header-left{display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1}
.tdv2-header h3{margin:0;font-size:1.1rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdv2-meta{font-size:.85rem;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:.4rem}
.tdv2-owner-row{font-size:.82rem;color:var(--muted);margin-top:.1rem}
.tdv2-header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0}
.tdv2-status-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.tdv2-status-select-wrap{position:relative;display:inline-flex;align-items:center}
.tdv2-status-select-wrap select{appearance:none;-webkit-appearance:none;padding:.38rem 2.1rem .38rem .75rem;border-radius:10px;font-size:.85rem;font-weight:600;background:#0d1c2e;border:1px solid rgba(255,255,255,0.13);color:var(--text);cursor:pointer;transition:border-color .18s,box-shadow .18s;outline:none;min-width:145px}
.tdv2-status-select-wrap select option{background:#0d1c2e;color:#e6eef8}
.tdv2-status-select-wrap select:hover{border-color:rgba(96,165,250,.45)}
.tdv2-status-select-wrap select:focus{border-color:rgba(96,165,250,.6);box-shadow:0 0 0 3px rgba(96,165,250,.12)}
.tdv2-status-chevron{position:absolute;right:.55rem;pointer-events:none;display:flex;align-items:center;color:var(--muted)}
.tdv2-status-chevron svg{width:13px;height:13px}
.tdv2-status-save-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .9rem;border-radius:10px;font-size:.85rem;font-weight:700;background:linear-gradient(135deg,rgba(96,165,250,.18),rgba(96,165,250,.1));border:1px solid rgba(96,165,250,.3);color:#93c5fd;cursor:pointer;transition:all .18s}
.tdv2-status-save-btn:hover{background:linear-gradient(135deg,rgba(96,165,250,.28),rgba(96,165,250,.18));border-color:rgba(96,165,250,.55);color:#bfdbfe}
.tdv2-status-save-btn:disabled{opacity:.45;cursor:not-allowed}
.tdv2-status-save-btn svg{width:13px;height:13px}

/* Original message block */
.tdv2-original{
  padding:.9rem 1.2rem .8rem;
  border-bottom:1px solid rgba(255,255,255,0.035);
  flex-shrink:0;background:rgba(255,255,255,0.01);
}
.tdv2-original-head{font-size:.82rem;color:var(--muted);margin-bottom:.45rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tdv2-original-head strong{color:var(--text)}
.tdv2-body{
  color:var(--text);font-size:.95rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.tdv2-attachments{margin-top:.55rem;display:flex;flex-direction:column;gap:.25rem}
.tdv2-attachments a{font-size:.85rem;color:var(--accent);text-decoration:none}
.tdv2-attachments a:hover{text-decoration:underline}

/* Message thread area */
.tdv2-thread{
  flex:1 1 auto;overflow-y:auto;
  padding:.9rem 1.2rem;
  display:flex;flex-direction:column;gap:.75rem;
  scroll-behavior:smooth;
}
.tdv2-thread::-webkit-scrollbar{width:4px}
.tdv2-thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}
.tdv2-no-replies{color:var(--muted);font-size:.88rem;text-align:center;padding:.8rem 0}

/* Message bubbles */
.msg-bubble{display:flex;align-items:flex-end;gap:.6rem;max-width:88%}
.msg-bubble.msg-user{align-self:flex-end;flex-direction:row-reverse}
.msg-bubble.msg-staff{align-self:flex-start}

.msg-avatar{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;flex-shrink:0;
  text-transform:uppercase;letter-spacing:0;
}
.msg-avatar-staff{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff}
.msg-avatar-user{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff}

.msg-content{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.msg-bubble.msg-user .msg-content{align-items:flex-end}
.msg-bubble.msg-staff .msg-content{align-items:flex-start}

.msg-meta{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted);flex-wrap:wrap}
.msg-bubble.msg-user .msg-meta{flex-direction:row-reverse}
.msg-author{font-weight:700;color:var(--text);font-size:.8rem}
.msg-time{color:var(--muted);font-size:.76rem}

.msg-text{
  padding:.55rem .85rem;border-radius:14px;
  font-size:.93rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
  max-width:100%;
}
.msg-bubble.msg-user .msg-text{
  background:linear-gradient(135deg,rgba(14,165,233,0.18),rgba(37,99,235,0.15));
  border:1px solid rgba(14,165,233,0.2);
  border-bottom-right-radius:4px;
  color:var(--text);
}
.msg-bubble.msg-staff .msg-text{
  background:linear-gradient(135deg,rgba(124,58,237,0.14),rgba(79,70,229,0.1));
  border:1px solid rgba(124,58,237,0.18);
  border-bottom-left-radius:4px;
  color:var(--text);
}

/* ── Reply / Composer area ── */
.tdv2-reply{
  flex-shrink:0;
  padding:.75rem 1rem .85rem;
  border-top:1px solid rgba(255,255,255,0.045);
  background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.18));
}

/* Outer composer card */
.tdv2-composer{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.tdv2-composer:focus-within{
  border-color:rgba(96,165,250,0.45);
  box-shadow:0 0 0 3px rgba(96,165,250,0.1);
}

/* Textarea inside composer – no own border/bg */
.tdv2-composer-input{
  width:100%;box-sizing:border-box;
  min-height:44px;max-height:220px;
  padding:.75rem 1rem .45rem;
  background:transparent;
  border:none;
  color:var(--text);font-size:.94rem;line-height:1.6;
  resize:none;outline:none;
  font-family:inherit;
  overflow-y:auto;
  field-sizing:content; /* auto-grow where supported */
}
.tdv2-composer-input::placeholder{color:rgba(159,182,194,0.5)}

/* Bottom toolbar row */
.tdv2-composer-actions{
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem .7rem .5rem 1rem;
  border-top:1px solid rgba(255,255,255,0.05);
  background:rgba(0,0,0,0.1);
  gap:.6rem;
}
.tdv2-reply-hint{
  font-size:.75rem;color:rgba(159,182,194,0.45);
  letter-spacing:.01em;
  user-select:none;
}

/* Send button */
.tdv2-send-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .9rem;
  border-radius:9px;
  border:none;cursor:pointer;
  font-size:.85rem;font-weight:700;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  color:#fff;
  box-shadow:0 4px 14px rgba(99,102,241,0.35);
  transition:background .15s,box-shadow .15s,transform .1s;
  white-space:nowrap;
  flex-shrink:0;
}
.tdv2-send-btn:hover{
  background:linear-gradient(135deg,#7c7ff5,#6366f1);
  box-shadow:0 6px 20px rgba(99,102,241,0.50);
}
.tdv2-send-btn:active{transform:scale(.96)}
.tdv2-send-btn svg{
  width:13px;height:13px;flex-shrink:0;
}

/* Legacy compat – keep old selectors alive for other parts of the page */
.ticket-detail-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column}
.ticket-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.ticket-body{margin-top:.8rem;color:var(--muted)}
.comment-list{margin-top:.8rem;overflow:auto;display:flex;flex-direction:column;gap:.6rem}
.comment{background:rgba(255,255,255,0.01);padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.comment-form{display:flex;gap:.6rem;margin-top:.6rem}
.comment-form textarea{flex:1;min-height:64px}
.ticket-actions{display:flex;gap:.6rem;align-items:center;margin-top:.6rem}

/* Role badges */
.role-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700;margin-right:.4rem;color:#fff;vertical-align:middle}
.role-user{background:#60a5fa;color:#07202a}
.role-supporter{background:#16a34a;color:#fff}
.role-developer{background:#7c3aed;color:#fff}
.role-owner{background:#ef4444;color:#fff}

/* Status badges for ticket states */
.status-badge{display:inline-flex;align-items:center;padding:.2rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1;vertical-align:middle}
.status-open{background:rgba(22,163,74,.18);color:#4ade80;border:1px solid rgba(22,163,74,.25)}
.status-in_progress{background:rgba(245,158,11,.16);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}
.status-closed{background:rgba(239,68,68,.14);color:#f87171;border:1px solid rgba(239,68,68,.22)}
.status-unknown{background:rgba(255,255,255,0.04);color:var(--muted);border:1px solid rgba(255,255,255,.05)}

/* Ticket table rows */
.ticket-table-row{transition:background .12s}
.ticket-table-row:hover{background:rgba(255,255,255,0.018)!important}

/* Small user state badges (2FA, active, locked) */
.user-badge{display:inline-block;padding:.18rem .5rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#07202a}
.user-badge-success{background:var(--success);color:#07202a}
.user-badge-muted{background:rgba(255,255,255,0.04);color:var(--muted)}
.user-badge-danger{background:var(--danger);color:#fff}
.user-badge-warning{background:#f59e0b;color:#07202a}
.user-badge-small{font-size:.72rem;padding:.12rem .45rem}

/* Email masking in users list */
.email-cell{display:flex;align-items:center;gap:.5rem}
.email-mask{font-family:monospace;color:var(--muted);letter-spacing:0.06em}
.toggleEmail{padding:.2rem .45rem;font-size:.85rem}

@media(max-width:1000px){
  .tickets-wrap{grid-template-columns:1fr}
  .ticket-detail-panel{height:auto}
  .ticket-detail-v2{max-height:92vh}
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;align-items:center;gap:1rem;padding:0 1rem}
  .phone-mock{width:200px;margin:0 auto}
  .phone-mock .phone-screen{width:180px}
  .hero-content h1{font-size:1.9rem;text-align:center}
  .lead{max-width:60ch;text-align:center;margin:0 auto}
  .hero-ctas{flex-direction:column;align-items:center}
  .hero-ctas .btn{width:100%;max-width:320px}
  .phone-area{margin-bottom:.6rem}
}

@media(max-width:520px){
  .hero-inner{padding:0 .8rem}
  .phone-mock{width:180px}
  .phone-mock .phone-screen{width:160px}
  .hero-content h1{font-size:1.6rem}
  .lead{font-size:.95rem}

  .partner-logo{height:auto;max-height:120px;object-fit:contain}
  .grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
  .partner-card{padding:.6rem}

  .footer-links{flex-wrap:wrap}
  .footer-links a{padding:.35rem .5rem}
}

.table-responsive{overflow:auto}

.gt-cookie-banner{font-size:0.96rem;color:var(--muted);}
.gt-cookie-banner strong{font-weight:700}
.gt-cookie-banner .btn{margin:0}
.gt-cookie-banner #gt-cookie-controls{display:flex;gap:8px}
@media(max-width:520px){
  .gt-cookie-banner{left:8px;right:8px;bottom:10px;padding:10px}
  .gt-cookie-banner #gt-cookie-controls{flex-direction:column}
  .gt-cookie-banner .btn{width:100%;padding:.6rem}
}

.gt-cookie-banner{transform:translateY(14px);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .2s ease;will-change:transform,opacity}
.gt-cookie-banner.show{transform:translateY(0);opacity:1}
.gt-cookie-banner.hide{transform:translateY(18px);opacity:0}

.cookie-modal-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.55);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.cookie-modal{background:var(--card);color:inherit;border-radius:12px;padding:18px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04)}
.cookie-modal h3{margin:0 0 .6rem 0}
.cookie-modal .cookie-options{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.cookie-modal .cookie-option{display:flex;align-items:center;gap:.6rem}
.cookie-modal .cookie-option input[type=checkbox]{width:18px;height:18px}
.cookie-modal .cookie-actions{display:flex;gap:.6rem;margin-top:1rem;justify-content:flex-end}
@media(max-width:520px){
  .cookie-modal{padding:14px}
  .cookie-modal .cookie-actions{flex-direction:column}
  .cookie-modal .cookie-actions .btn{width:100%}
}

/* Projects page styles */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.project-card{display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;min-height:140px}
.project-card h3{margin:0}
.project-card .muted{color:var(--muted)}
.project-card .btn{padding:.5rem .9rem}

@media(max-width:520px){
  .projects-grid{grid-template-columns:1fr}
}

/* project layout: logos centered with consistent header height so descriptions align */
.project-top{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.project-top{min-height:220px;padding-top:8px;padding-bottom:8px}

/* make the first cell a fixed-size logo box and center its contents (covers cases where image is wrapped)
  also ensure direct img children are contained and centered */
.project-top > div:first-child{width:120px;height:120px;display:flex;align-items:center;justify-content:center}
/* stronger centering for images including wrapped cases; use !important to override inline wrappers */
.project-top > div:first-child img.project-logo,
.project-top > div:first-child img{max-width:100% !important;max-height:100% !important;width:auto !important;height:auto !important;display:block !important;margin:0 auto !important;object-fit:contain !important}
.project-top img.project-logo{display:block;margin:0 auto}
.project-top > div{flex:0 0 auto}
.project-logo-caption{font-size:.85rem;color:var(--muted)}

/* ensure headings/paragraphs don't add unintended horizontal margins */
.project-top h3, .project-top p{margin-left:0;margin-right:0}

@media(max-width:700px){
  .project-top{flex-direction:column;align-items:center;text-align:center;min-height:0}
  .project-logo{width:88px;max-width:88px;height:auto}
  .project-card ul{padding-left:1rem;text-align:left}
}

/* Auth V3: compact, modern, single-column card used by login/register */
.auth-v3-page{display:flex;align-items:center;justify-content:center;min-height:64vh;padding:1rem;background:linear-gradient(180deg, rgba(4,16,32,0.06), transparent)}
.auth-v3-card{width:100%;max-width:420px;background:linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.006));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 28px rgba(2,6,23,0.45)}
.auth-v3-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.auth-v3-header img{height:40px;max-height:40px;max-width:120px;width:auto;object-fit:contain;display:block}
.auth-v3-title{font-size:1.05rem;margin:0;color:var(--accent);font-weight:700}
.auth-v3-sub{font-size:.9rem;color:var(--muted);margin:0}
.auth-v3-form{display:flex;flex-direction:column;gap:.45rem}
.auth-v3-row{display:flex;flex-direction:column;gap:.25rem}
.auth-v3-input{padding:.45rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;font-size:.93rem}
.auth-v3-input:focus{outline:none;box-shadow:0 6px 18px rgba(79,70,229,0.06);border-color:rgba(124,58,237,0.22)}
.auth-v3-actions{display:flex;gap:.5rem;align-items:center;justify-content:space-between;margin-top:.4rem}
.auth-v3-actions .btn{padding:8px 12px;font-size:.92rem;border-radius:8px}
.auth-v3-aux{font-size:.9rem;color:var(--muted)}
.auth-v3-note{font-size:.88rem;color:var(--muted);margin-top:.6rem}

@media(max-width:520px){
  .auth-v3-card{padding:10px}
  .auth-v3-header img{height:34px}
}

/* inline validation styles */
.input-invalid{border-color:#ef4444 !important;box-shadow:0 6px 18px rgba(239,68,68,0.12) !important}
.input-valid{border-color:#10b981 !important;box-shadow:0 6px 18px rgba(16,185,129,0.06) !important}
.pwd-match-msg{font-size:.9rem;margin-top:.25rem}
.pwd-match-msg.error{color:#ef4444}
.pwd-match-msg.ok{color:#10b981}
.input-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,0.06); }
.input-valid{ border-color:#10b981 !important; box-shadow:0 0 0 4px rgba(16,185,129,0.06); }
.pwd-match-msg{ font-size:.9rem; margin-top:.25rem; min-height:1.2em; }
.pwd-match-msg.error{ color:#ef4444; }
.pwd-match-msg.ok{ color:#10b981; }
.modal-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.5);z-index:140;display:none}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:150;display:none;min-width:320px;max-width:720px}
.modal-card{background:var(--card);border-radius:12px;padding:1rem;border:1px solid rgba(255,255,255,0.04);box-shadow:0 20px 60px rgba(2,6,23,0.6)}
.modal-header h3{margin:0 0 .4rem 0}
.modal-body{color:var(--muted)}
.modal-actions .btn{min-width:96px}

/* Toast notifications */
.toast-container{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{min-width:200px;max-width:380px;padding:.6rem .9rem;border-radius:10px;background:var(--card);color:var(--text);box-shadow:0 12px 40px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04);display:flex;gap:.6rem;align-items:flex-start}
.toast .toast-title{font-weight:800}
.toast .toast-body{font-size:.95rem;color:var(--muted)}
.toast.success{border-left:4px solid var(--success)}
.toast.error{border-left:4px solid var(--danger)}
.toast.info{border-left:4px solid var(--accent)}
.toast-enter{animation:toastIn .28s ease}
.toast-exit{animation:toastOut .28s ease forwards}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{from{transform:none;opacity:1}to{transform:translateY(8px);opacity:0}}

/* =============================
   SYSTEM TAB – REDESIGNED 2026
   ============================= */

.system-tab-wrap{display:flex;flex-direction:column;gap:1.25rem;max-width:980px}

/* Page header row */
.system-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.15rem}
.system-title{margin:0;font-size:1.3rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:.55rem;line-height:1.2}
.system-title svg{width:20px;height:20px;color:var(--accent-2);flex-shrink:0}
.system-sub{margin:.25rem 0 0;font-size:.86rem;color:var(--muted)}
.system-refresh-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.48rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.04);color:var(--muted);font-size:.88rem;font-weight:700;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;box-shadow:none;flex-shrink:0;cursor:pointer}
.system-refresh-btn:hover{background:rgba(96,165,250,0.12);color:var(--accent-2);border-color:rgba(96,165,250,0.25)}
.system-refresh-btn svg{width:13px;height:13px}

/* Base sys-card */
.sys-card{background:linear-gradient(155deg,rgba(13,26,48,0.84) 0%,rgba(7,16,32,0.9) 100%);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:1.4rem 1.5rem;box-shadow:0 8px 32px rgba(2,6,23,0.38);position:relative;overflow:hidden}
.sys-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,0.22),transparent);pointer-events:none}

.sys-card-header{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.3rem}
.sys-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sys-card-icon svg{width:18px;height:18px}
.sys-icon-blue{background:rgba(96,165,250,0.13);color:var(--accent-2);border:1px solid rgba(96,165,250,0.2)}
.sys-icon-yellow{background:rgba(245,158,11,0.12);color:#fbbf24;border:1px solid rgba(245,158,11,0.2)}
.sys-card-title{margin:0 0 .2rem;font-size:1rem;font-weight:800;color:var(--text)}
.sys-card-sub{margin:0;font-size:.84rem;color:var(--muted);line-height:1.5;max-width:52ch}
.sys-card-header-text{flex:1;min-width:0}
.sys-last-updated{margin-left:auto;font-size:.74rem;white-space:nowrap;padding-top:.25rem;align-self:flex-start;opacity:.7}

/* Health metric grid */
.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}

.health-stat{background:rgba(255,255,255,0.024);border:1px solid rgba(255,255,255,0.055);border-radius:12px;padding:.95rem 1.05rem;display:flex;flex-direction:column;gap:.2rem;position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s,background .18s}
.health-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:rgba(255,255,255,0.04);transition:background .18s}
.health-stat:hover{background:rgba(255,255,255,0.038);border-color:rgba(255,255,255,0.09)}

.health-stat-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(159,182,194,0.6);display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem}
.health-stat-value{font-size:1.22rem;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-.02em}
.health-stat-sub{font-size:.76rem;color:var(--muted);margin-top:.12rem;line-height:1.4}
.hsv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:1px}

/* OK variant */
.health-stat-ok::before{background:rgba(110,231,183,0.5)}
.health-stat-ok .health-stat-value{color:#d1fae5}
.health-stat-ok .hsv-dot{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,0.65)}
/* Error variant */
.health-stat-error{border-color:rgba(239,68,68,0.18);background:rgba(239,68,68,0.03)}
.health-stat-error::before{background:rgba(239,68,68,0.5)}
.health-stat-error .health-stat-value{color:#fca5a5}
.health-stat-error .hsv-dot{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,0.65)}
/* Warn variant */
.health-stat-warn{border-color:rgba(245,158,11,0.16);background:rgba(245,158,11,0.025)}
.health-stat-warn::before{background:rgba(245,158,11,0.5)}
.health-stat-warn .health-stat-value{color:#fde68a}
.health-stat-warn .hsv-dot{background:#fbbf24;box-shadow:0 0 6px rgba(251,191,36,0.65)}
/* Live pulse */
@keyframes pulse-green{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}

/* Maintenance card */
.maintenance-control-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:1rem 1.15rem;background:rgba(255,255,255,0.018);border:1px solid rgba(255,255,255,0.045);border-radius:12px}
.maintenance-toggle{position:relative;display:inline-flex;width:52px;height:28px;flex-shrink:0;cursor:pointer}
.maintenance-toggle input{opacity:0;width:0;height:0;position:absolute}
.maintenance-slider{position:absolute;inset:0;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:999px;cursor:pointer;transition:background .22s,border-color .22s,box-shadow .22s}
.maintenance-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:rgba(255,255,255,0.6);border-radius:50%;transition:transform .22s cubic-bezier(.4,0,.2,1),background .22s;box-shadow:0 1px 4px rgba(0,0,0,0.35)}
.maintenance-toggle input:checked+.maintenance-slider{background:rgba(239,68,68,0.3);border-color:rgba(239,68,68,0.5);box-shadow:0 0 14px rgba(239,68,68,0.22)}
.maintenance-toggle input:checked+.maintenance-slider::before{transform:translateX(24px);background:#ef4444}
.maintenance-toggle input:disabled+.maintenance-slider{opacity:.5;cursor:not-allowed}
.maintenance-status-group{display:flex;flex-direction:column;gap:.2rem}
.maintenance-status-text{font-weight:800;font-size:.94rem;color:var(--muted);transition:color .2s}
.maintenance-msg{font-size:.82rem;min-height:1em}

@media(max-width:700px){
  .health-grid{grid-template-columns:repeat(2,1fr)}
  .sys-card{padding:1.1rem}
  .system-header{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .health-grid{grid-template-columns:1fr}
}

/* System tab polish: compact spacing, consistent type scale, unified status badges */
#tabSystem .admin-tab-wrap{gap:.8rem}
#tabSystem .admin-tab-title{font-size:1.22rem;letter-spacing:.01em}
#tabSystem .admin-tab-subtitle{font-size:.8rem;line-height:1.35;opacity:.82}
#tabSystem .sys-card{padding:1rem 1.05rem;border-radius:14px;box-shadow:0 6px 20px rgba(2,6,23,.24)}
#tabSystem .sys-card-header{gap:.72rem;margin-bottom:.78rem}
#tabSystem .sys-card-icon{width:34px;height:34px;border-radius:9px}
#tabSystem .sys-card-icon svg{width:16px;height:16px}
#tabSystem .sys-card-title{font-size:.93rem;font-weight:750;letter-spacing:.01em;margin-bottom:.14rem}
#tabSystem .sys-card-sub{font-size:.76rem;line-height:1.35;max-width:66ch}
#tabSystem .health-grid{gap:.56rem;grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
#tabSystem .health-stat{padding:.72rem .78rem;border-radius:10px;gap:.14rem}
#tabSystem .health-stat-label{font-size:.63rem;letter-spacing:.08em;margin-bottom:.08rem}
#tabSystem .health-stat-value{font-size:.95rem;font-weight:760;line-height:1.2;letter-spacing:0;display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:.2rem .5rem;border-radius:999px;border:1px solid rgba(148,163,184,.34);background:rgba(15,23,42,.34);color:#e2e8f0}
#tabSystem .health-stat-sub{font-size:.72rem;line-height:1.35;margin-top:.08rem}
#tabSystem .health-stat-ok .health-stat-value{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45);color:#bbf7d0}
#tabSystem .health-stat-warn .health-stat-value{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.45);color:#fde68a}
#tabSystem .health-stat-error .health-stat-value{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.45);color:#fecaca}
#tabSystem #sysCtlBotStatus{font-weight:700;letter-spacing:.01em}
#tabSystem #sysLastUpdated{font-size:.72rem !important}
#tabSystem #sysCountdown{font-size:.71rem !important}
#tabSystem #sysMemDetail{gap:.2rem .65rem;font-size:.78rem !important}
#tabSystem .sys-server-grid{font-size:.78rem !important;gap:.42rem .62rem !important}
#tabSystem .sys-bot-detail-grid{gap:.42rem .62rem !important}
#tabSystem .sys-control-grid > div{padding:.68rem !important;border-radius:10px !important}

@media (max-width: 1000px){
  #tabSystem .admin-tab-header{align-items:flex-start}
  #tabSystem .sys-control-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #tabSystem .sys-server-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width: 700px){
  #tabSystem .sys-card{padding:.84rem .88rem}
  #tabSystem .admin-tab-title{font-size:1.07rem}
  #tabSystem .admin-tab-subtitle{font-size:.75rem}
  #tabSystem .sys-control-grid{grid-template-columns:1fr !important}
  #tabSystem .health-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #tabSystem .health-stat{padding:.62rem .66rem}
  #tabSystem .health-stat-value{font-size:.88rem;padding:.16rem .44rem}
  #tabSystem .sys-server-grid{grid-template-columns:1fr !important}
  #tabSystem .sys-bot-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width: 480px){
  #tabSystem .health-grid{grid-template-columns:1fr !important}
  #tabSystem .sys-bot-detail-grid{grid-template-columns:1fr !important}
  #tabSystem .system-refresh-btn{padding:.38rem .7rem;font-size:.77rem}
}

/* ======================================
   CMS MODERN REFRESH – MAY 2026
   Visual overhaul only, no content changes
   ====================================== */

.cms-site{
  background:
    radial-gradient(1200px 420px at -10% -10%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(880px 460px at 110% -20%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, #08110d 0%, #0b1410 55%, #0a120f 100%);
  color:#ecf6ef;
  font-family:"Segoe UI Variable", "Segoe UI", "Manrope", "Inter", system-ui, sans-serif;
}

.cms-site .site-header{
  background:rgba(7,14,12,.82);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.cms-site .cms-main{
  padding:1.5rem 1.4rem 2rem;
}

.cms-site .cms-top{
  background:linear-gradient(135deg, rgba(34,197,94,.09), rgba(59,130,246,.08));
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:1rem 1.15rem;
  margin-bottom:1.05rem;
  box-shadow:0 16px 34px rgba(2,8,20,.32);
}

.cms-site .cms-sidebar{
  background:
    linear-gradient(184deg, rgba(8,18,14,.98) 0%, rgba(8,16,15,.98) 50%, rgba(8,14,18,.98) 100%);
  border-right:1px solid rgba(255,255,255,.08);
}

.cms-site .side-link{
  border:1px solid transparent;
  border-radius:12px;
  font-weight:700;
}

.cms-site .side-link:hover{
  border-color:rgba(52,211,153,.22);
  background:linear-gradient(90deg, rgba(34,197,94,.12), rgba(34,197,94,.04));
}

.cms-site .side-link.active{
  border-left:0;
  padding-left:.7rem;
  border-color:rgba(96,165,250,.38);
  background:linear-gradient(90deg, rgba(96,165,250,.22), rgba(52,211,153,.12));
  color:#dbeafe;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}

.cms-site .card,
.cms-site .dash-card,
.cms-site .sys-card,
.cms-site .admin-table-wrap,
.cms-site .ticket-table-wrap,
.cms-site .profile-panel,
.cms-site .tdv2-wrap,
.cms-site .tcv2-panel{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg, rgba(15,26,20,.88), rgba(12,22,18,.9));
  box-shadow:0 18px 36px rgba(2,8,20,.3);
}

.cms-site .dash-grid{
  gap:.95rem;
}

.cms-site .dash-card{
  position:relative;
  overflow:hidden;
}

.cms-site .dash-card::after{
  content:"";
  position:absolute;
  inset:auto -10% 0;
  height:3px;
  background:linear-gradient(90deg, #22c55e, #3b82f6);
  opacity:.85;
}

.cms-site .big-num{
  letter-spacing:-.03em;
  text-shadow:0 0 18px rgba(52,211,153,.18);
}

.cms-site table,
.cms-site .cms-table,
.cms-site .admin-table{
  border-radius:14px;
  overflow:hidden;
}

.cms-site .cms-table thead tr,
.cms-site .admin-table thead tr,
.cms-site table thead tr{
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
}

.cms-site .cms-table th,
.cms-site .admin-table th,
.cms-site table th{
  color:#bfe8d2;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.cms-site .cms-table td,
.cms-site .admin-table td,
.cms-site table td{
  border-bottom:1px solid rgba(255,255,255,.06);
}

.cms-site .cms-table tbody tr:hover,
.cms-site .admin-table tbody tr:hover,
.cms-site table tbody tr:hover{
  background:linear-gradient(90deg, rgba(34,197,94,.08), rgba(59,130,246,.08));
}

.cms-site input,
.cms-site select,
.cms-site textarea,
.cms-site .admin-search-input,
.cms-site .tcv2-input,
.cms-site .tcv2-select,
.cms-site .tcv2-textarea{
  background:rgba(7,15,13,.84);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#e5f8ed;
}

.cms-site input:focus,
.cms-site select:focus,
.cms-site textarea:focus,
.cms-site .admin-search-input:focus,
.cms-site .tcv2-input:focus,
.cms-site .tcv2-select:focus,
.cms-site .tcv2-textarea:focus{
  outline:0;
  border-color:rgba(52,211,153,.8);
  box-shadow:0 0 0 4px rgba(52,211,153,.15);
}

.cms-site .btn.primary,
.cms-site button.btn.primary{
  background:linear-gradient(135deg, #22c55e, #3b82f6);
  color:#06140f;
  border:0;
  box-shadow:0 10px 24px rgba(34,197,94,.28);
}

.cms-site .btn.primary:hover,
.cms-site button.btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(59,130,246,.28);
}

.cms-site .btn.ghost,
.cms-site button.btn.ghost{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#d8efe0;
}

.cms-site .btn.ghost:hover,
.cms-site button.btn.ghost:hover{
  background:rgba(255,255,255,.08);
}

.cms-site .admin-tab-header,
.cms-site .system-header,
.cms-site .ticket-tab-header,
.cms-site .tdv2-head,
.cms-site .tcv2-head{
  border-radius:14px;
  background:linear-gradient(135deg, rgba(52,211,153,.08), rgba(59,130,246,.08));
  border:1px solid rgba(255,255,255,.08);
  padding:.85rem .95rem;
}

.cms-site #fuModal .sys-card,
.cms-site .modal-card{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(175deg, rgba(12,24,20,.98), rgba(9,18,16,.98));
}

.cms-site .um-kpi-card{
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:14px;
}

.cms-site .toast{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg, rgba(11,24,19,.95), rgba(10,20,17,.95));
}

@media(max-width:1100px){
  .cms-site .cms-main{padding:1rem .85rem 1.4rem}
  .cms-site .cms-top{padding:.85rem .9rem}
}

@media(max-width:640px){
  .cms-site .admin-tab-header,
  .cms-site .system-header,
  .cms-site .ticket-tab-header,
  .cms-site .tdv2-head,
  .cms-site .tcv2-head{
    padding:.72rem .75rem;
  }
  .cms-site .dash-grid{gap:.7rem}
}


/* ═══════════════════════════════════════════════
   ADMIN TABS – REDESIGNED 2026
   Users · Logs · Rangverwaltung
═══════════════════════════════════════════════ */

/* Page wrapper */
.admin-tab-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tab header row */
.admin-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .25rem;
}
.admin-tab-title-group {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.admin-tab-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(96,165,250,.15);
  color: var(--accent-2);
  flex-shrink: 0;
}
.admin-tab-icon-badge svg { width: 20px; height: 20px; }
.admin-tab-icon-purple { background: rgba(167,139,250,.15); color: #a78bfa; }
.admin-tab-icon-gold   { background: rgba(251,191,36,.15);  color: #fbbf24; }
.admin-tab-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e2eaf0;
  margin: 0;
}
.admin-tab-subtitle {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .1rem;
}

/* Toolbar: search bar above table */
.admin-table-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-search-wrap {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.admin-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}
.admin-search-input {
  width: 100%;
  padding: .45rem .75rem .45rem 2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #e2eaf0;
  font-size: .82rem;
  outline: none;
  transition: border-color .2s;
}
select.admin-search-input {
  background: #0d1c2e;
  padding-left: .75rem;
  -webkit-appearance: none; appearance: none;
}
select.admin-search-input option { background: #0d1c2e; color: #e6eef8; }
.admin-search-input:focus { border-color: var(--accent-2); }
.admin-search-input::placeholder { color: var(--muted); }

/* Scrollable table container */
.admin-table-scroll { overflow-x: auto; }

/* Table tweaks */
.admin-table thead tr { background: rgba(255,255,255,.03); }
.admin-table thead th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .65rem .75rem;
  white-space: nowrap;
}
.admin-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* Generic admin table cell */
.at-cell {
  padding: .6rem .75rem;
  vertical-align: middle;
  font-size: .84rem;
  color: #d6e4ec;
  white-space: nowrap;
}
.at-cell.at-id   { color: var(--muted); font-size: .75rem; }
.at-cell.at-time { color: var(--muted); font-size: .77rem; font-variant-numeric: tabular-nums; }
.at-cell.at-ip   { font-family: monospace; font-size: .77rem; color: var(--muted); }
.at-cell.at-details { white-space: normal; max-width: 260px; font-size: .77rem; color: var(--muted); }
.at-cell.at-perms   { white-space: normal; max-width: 280px; font-size: .77rem; }
.at-cell.at-actions { display: flex; gap: .35rem; align-items: center; }

/* Log action badge */
.log-action-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(96,165,250,.12);
  color: var(--accent-2);
  white-space: nowrap;
}

/* ── Roles: create form ── */
.roles-create-card { padding: 1.2rem 1.4rem; }
.roles-create-form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-width: 680px;
  margin-top: .9rem;
}
.roles-field { display: flex; flex-direction: column; gap: .35rem; }
.roles-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.roles-input {
  padding: .6rem .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #e2eaf0;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.roles-input:focus { border-color: var(--accent-2); }

/* Permission chips */
.perm-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .2rem;
}
.perm-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.perm-chip:hover { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); color: #e2eaf0; }
.perm-chip input[type="checkbox"] {
  accent-color: var(--accent-2);
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.perm-chip:has(input:checked) {
  background: rgba(96,165,250,.18);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* ── Permission groups with danger levels ── */
.perm-groups { display: flex; flex-direction: column; gap: .9rem; }
.perm-group { display: flex; flex-direction: column; gap: .5rem; }
.perm-group-header {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .25rem .65rem;
  border-radius: 6px;
  width: fit-content;
}
.perm-group-header svg { width: 11px; height: 11px; flex-shrink: 0; }
.perm-group-critical { color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); }
.perm-group-high     { color: #fb923c; background: rgba(251,146,60,.1);  border: 1px solid rgba(251,146,60,.25); }
.perm-group-medium   { color: #fbbf24; background: rgba(251,191,36,.1);  border: 1px solid rgba(251,191,36,.25); }
.perm-group-low      { color: #4ade80; background: rgba(74,222,128,.1);  border: 1px solid rgba(74,222,128,.25); }
.perm-level-badge {
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: 8px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.perm-level-badge-critical { background: rgba(248,113,113,.18); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.perm-level-badge-high     { background: rgba(251,146,60,.18);  color: #fb923c; border: 1px solid rgba(251,146,60,.3); }

/* Chip variants per danger level */
.perm-chip-critical { color: #fca5a5; }
.perm-chip-critical:hover { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: #fca5a5; }
.perm-chip-critical:has(input:checked) { background: rgba(248,113,113,.2); border-color: #f87171; color: #f87171; }
.perm-chip-critical:has(input:checked) input[type="checkbox"] { accent-color: #f87171; }

.perm-chip-high { color: #fdba74; }
.perm-chip-high:hover { background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.4); color: #fdba74; }
.perm-chip-high:has(input:checked) { background: rgba(251,146,60,.2); border-color: #fb923c; color: #fb923c; }
.perm-chip-high:has(input:checked) input[type="checkbox"] { accent-color: #fb923c; }

.perm-chip-medium:hover { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.35); color: #fbbf24; }
.perm-chip-medium:has(input:checked) { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #fbbf24; }
.perm-chip-medium:has(input:checked) input[type="checkbox"] { accent-color: #fbbf24; }

.perm-chip-low:hover { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.35); color: #4ade80; }
.perm-chip-low:has(input:checked) { background: rgba(74,222,128,.15); border-color: #4ade80; color: #4ade80; }
.perm-chip-low:has(input:checked) input[type="checkbox"] { accent-color: #4ade80; }

.roles-form-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.roles-msg { font-size: .8rem; margin-top: .25rem; }


/* ═══════════════════════════════════════════════
   VISITOR STATS TAB – 2026
═══════════════════════════════════════════════ */

/* KPI grid */
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .85rem;
}
.stats-kpi-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  transition: border-color .2s;
}
.stats-kpi-card:hover { border-color: rgba(255,255,255,.14); }
.stats-kpi-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stats-kpi-icon svg { width: 18px; height: 18px; }
.stats-kpi-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.stats-kpi-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: #e2eaf0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stats-kpi-sub {
  font-size: .74rem;
  color: var(--muted);
  margin-top: .1rem;
}

/* Bottom three-column grid */
.stats-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .85rem;
  margin-top: .85rem;
}

/* List rows (top pages / referrers) */
.stats-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .8rem;
}
.stats-list-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
}
.stats-list-label {
  flex: 0 0 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #d6e4ec;
}
.stats-list-bar-wrap {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  overflow: hidden;
}
.stats-list-bar {
  height: 100%;
  background: #60a5fa;
  border-radius: 4px;
  transition: width .4s ease;
  min-width: 3px;
}
.stats-list-count {
  flex: 0 0 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: .75rem;
}

/* ═══════════════════════════════════════════════
   STATS TAB – SECTION TABS, TRENDS & CHARTS 2026
═══════════════════════════════════════════════ */

/* Inner section tabs (Besucher / CMS & Support) */
.stats-section-tabs {
  display: flex;
  gap: .3rem;
  margin-bottom: 1rem;
  padding: .3rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  width: fit-content;
}
.stats-section-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.stats-section-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.stats-section-tab:hover { background: rgba(255,255,255,.06); color: #e2eaf0; }
.stats-section-tab.active { background: rgba(52,211,153,.15); color: #34d399; }

/* Section group labels */
.stats-section-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .7rem;
}
.stats-section-label svg { width: 13px; height: 13px; }

/* Trend badges */
.stats-trend {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .12rem .4rem;
  border-radius: 6px;
  vertical-align: middle;
}
.stats-trend-up   { background: rgba(52,211,153,.15); color: #34d399; }
.stats-trend-down { background: rgba(239,68,68,.15);  color: #f87171; }
.stats-trend-flat { background: rgba(255,255,255,.06); color: var(--muted); }

/* KPI card footer (unique + trend side by side) */
.stats-kpi-footer {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .15rem;
  flex-wrap: wrap;
}

/* Two-column chart layout */
.stats-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
@media(max-width: 900px) { .stats-two-col { grid-template-columns: 1fr; } }

/* Doughnut + legend side-by-side */
.stats-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .6rem 0 .3rem;
}
.stats-donut-legend {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}
.stats-legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}
.stats-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stats-legend-label {
  flex: 1;
  color: #d6e4ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-legend-val {
  font-variant-numeric: tabular-nums;
  color: #e2eaf0;
  font-weight: 600;
  font-size: .78rem;
  white-space: nowrap;
}

/* Week-over-week compare panel */
.stats-compare-grid {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: .65rem;
}
.stats-compare-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .5rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}
.stats-compare-row.stats-compare-muted { background: transparent; }
.stats-compare-muted .stats-compare-label { opacity: .55; }
.stats-compare-label {
  flex: 1;
  font-size: .78rem;
  color: #d6e4ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-compare-curr {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #e2eaf0;
  font-size: .82rem;
  white-space: nowrap;
}
.stats-compare-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: .14rem .42rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.stats-compare-up   { background: rgba(52,211,153,.15);  color: #34d399; }
.stats-compare-down { background: rgba(239,68,68,.15);   color: #f87171; }
.stats-compare-prev { background: rgba(255,255,255,.06); color: var(--muted); }
.stats-compare-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: .2rem 0;
}

/* Audit / System overview grid (2×2) */
.stats-audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .75rem;
}
.stats-audit-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: .75rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: border-color .15s;
}
.stats-audit-item:hover { border-color: rgba(255,255,255,.12); }
.stats-audit-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #e2eaf0;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stats-audit-label {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ═══════════════════════════════════════════════
   CMS MOBILE RESPONSIVE – 2026
   Alle Fixes für Handy & Tablet
═══════════════════════════════════════════════ */

/* Verhindert horizontales Überlaufen auf allen Seiten */
body{overflow-x:hidden}
.cms-main, .cms-layout{max-width:100%;overflow-x:hidden}

/* ── Hamburger-Button (nur mobil sichtbar) ── */
.cms-mobile-menu-btn{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:9px;
  padding:.45rem .55rem;
  color:var(--muted);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:1;
  box-shadow:none;
  width:auto !important;   /* nie durch .btn-Regel überschreiben */
  transition:background .15s,color .15s;
}
.cms-mobile-menu-btn:hover{background:rgba(255,255,255,0.07);color:var(--text)}
.cms-mobile-menu-btn svg{width:20px;height:20px;display:block;flex-shrink:0}

/* ─────────────────────────────────────────
   ≤ 1000px  – Tablet & Handy
───────────────────────────────────────── */
@media(max-width:1000px){
  /* Hamburger anzeigen */
  .cms-mobile-menu-btn{display:inline-flex}

  /* Header kompakter */
  .site-header .container{padding-left:.9rem !important;padding-right:.9rem !important}
  .site-header .header-inner{height:56px !important}

  /* Profilname + Chevron im Header ausblenden */
  .cms-header-name{display:none !important}

  /* Buttons im Header NIEMALS 100%-breit werden */
  .site-header .btn,
  .header-actions .btn,
  .header-actions button{width:auto !important;min-width:0 !important}

  /* Profil-Panel und Notification-Panel im Viewport halten */
  .profile-panel,
  #notificationsPanel,
  #profileMenu{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    top:60px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
  }
}

/* ─────────────────────────────────────────
   ≤ 640px  – Smartphone
───────────────────────────────────────── */
@media(max-width:640px){
  /* Header noch kompakter */
  .site-header .container{padding-left:.7rem !important;padding-right:.7rem !important}
  .site-header .header-inner{height:52px !important}
  .header-actions{gap:.3rem !important}

  /* Nur Avatar im Profil-Button, kein Text */
  #profileBtn .cms-header-name,
  #profileBtn span,
  #profileBtn i[data-feather="chevron-down"]{display:none !important}
  #profileBtn{padding:.3rem !important}

  /* CMS-Layout-Padding */
  .cms-main{padding:.8rem !important}

  /* Dash-Grid: 1 Spalte */
  .dash-grid{grid-template-columns:1fr !important}

  /* Admin-Header umbrechbar */
  .admin-tab-header{flex-wrap:wrap;gap:.55rem}
  .admin-tab-header > *:not(.admin-tab-title-group){min-width:0;flex-wrap:wrap}

  /* Toolbar: Suche nimmt ganze Zeile */
  .admin-table-toolbar{flex-wrap:wrap;gap:.45rem}
  .admin-search-wrap{max-width:100% !important;width:100%}

  /* System-Header */
  .system-header{flex-direction:column;gap:.5rem}

  /* Stats KPI: 2 Spalten */
  .stats-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .stats-kpi-value{font-size:1.25rem}

  /* Tickets: einspaltig */
  .tickets-wrap{grid-template-columns:1fr !important}
  .ticket-detail-v2{max-height:72vh}

  /* Chart */
  .charts-row{grid-template-columns:1fr !important}
  .chart-card canvas{height:200px !important}

  /* Card-Padding */
  .card{padding:.85rem .95rem}
  .sys-card{padding:.85rem .95rem}

  /* Toast */
  .toast-container{left:8px;right:8px;bottom:8px;align-items:stretch}
  .toast{max-width:100%;min-width:0;width:100%}

  /* Modal */
  .modal{left:8px;right:8px;top:50%;bottom:auto;transform:translateY(-50%);min-width:0;max-width:none}

  /* Profile-Header-Info */
  #profileAvatarTop{width:30px;height:30px}
  #profileTopName{font-size:.82rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #profileTopEmail{display:none !important}

  /* Auth-Actions: Buttons stapeln */
  .auth-v3-actions{flex-direction:column;gap:.4rem}
  .auth-v3-actions > div, .auth-v3-aux{width:100%}
  .auth-v3-actions .btn, .auth-v3-aux .btn{width:100% !important;justify-content:center}
}

/* ─────────────────────────────────────────
   ≤ 420px  – Kleines Smartphone
───────────────────────────────────────── */
@media(max-width:420px){
  .cms-main{padding:.55rem !important}
  .card{padding:.7rem .8rem}

  /* reCAPTCHA: skalieren damit es nicht überläuft */
  .g-recaptcha{
    transform:scale(0.85);
    transform-origin:left top;
    max-width:100%;
    margin-bottom:-8px; /* Offset durch scale-Leerraum */
  }

  /* Stats: 1 Spalte */
  .stats-kpi-grid{grid-template-columns:1fr}
  .health-grid{grid-template-columns:1fr !important}
  .big-num{font-size:1.4rem}

  /* Profil-Header-Info ganz ausblenden */
  .cms-profile-header-info{display:none !important}

  /* Auth-Card noch kompakter */
  .auth-v3-card{padding:10px 10px 14px}
}

/* ── Tabellen auf Mobile scrollbar ── */
.cms-table-wrap, .admin-table-scroll, .table-responsive{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
@media(max-width:640px){
  .cms-table th, .cms-table td,
  .admin-table th, .admin-table td{font-size:.76rem;padding:.45rem .5rem}
  .at-cell{padding:.45rem .5rem;font-size:.76rem}
}

/* ═══════════════════════════════════════════════
   TICKET SYSTEM MOBILE – 2026
═══════════════════════════════════════════════ */

/* Prevent iOS auto-zoom on inputs/textareas (needs font-size >= 16px) */
input, textarea, select{font-size:max(1rem, 16px)}
@media(min-width:641px){
  input, textarea, select{font-size:inherit}
}

@media(max-width:760px){
  /* Tab-Header: Description ausblenden, Actions wrappen */
  .ticket-tab-desc{display:none}
  .ticket-tab-header{gap:.5rem}
  .ticket-tab-actions{
    margin-left:0;width:100%;justify-content:flex-start;
    gap:.4rem;
  }
  .ticket-tab-actions input{flex:1;min-width:80px}
  .ticket-tab-actions .btn{flex-shrink:0}

  /* Create-Form: selects untereinander */
  .ticket-create-card .tc-row{flex-direction:column;gap:.5rem}
  .ticket-create-card .tc-field{width:100%}
  .ticket-create-card select{width:100%}
  .ticket-create-card textarea#uBody{min-height:120px}

  /* File-Upload: umbrechbar */
  .ticket-create-card .tc-attach{flex-wrap:wrap}
  #uAttachment{max-width:100%}

  /* Actions: linksbündig + volle Breite */
  .ticket-create-card .tc-actions{
    justify-content:stretch;
    flex-direction:column;gap:.4rem;
  }
  .ticket-create-card .tc-actions .btn{width:100%;justify-content:center}

  /* Detail-Panel: Volle Höhe, kein max-height-Cap der abschneidet */
  .ticket-detail-v2{
    max-height:calc(100dvh - 120px);
    max-height:calc(100vh - 120px);
    border-radius:12px;
  }

  /* Detail-Header: Status-Row unter den Titel */
  .tdv2-header{flex-wrap:wrap;gap:.6rem;padding:.8rem}
  .tdv2-header h3{font-size:1rem}
  .tdv2-header-actions{
    flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-end;
    width:100%;gap:.4rem;
  }
  .tdv2-status-row{flex-wrap:wrap;gap:.3rem}
  .tdv2-status-row select{max-width:140px}

  /* Reply-Hint ausblenden (Touch-Keyboards kennen kein Strg+Enter) */
  .tdv2-reply-hint{display:none}
  .tdv2-composer-actions{padding:.4rem .6rem .45rem}

  /* Thread-Padding reduzieren */
  .tdv2-thread{padding:.7rem .8rem}
  .msg-bubble{max-width:95%}

  /* Original-Message-Bereich */
  .tdv2-original{padding:.7rem .8rem}

  /* Support-Tabelle: nicht essentielle Spalten ausblenden */
  #supportTable th:nth-child(4),
  #supportTable td:nth-child(4),
  #userTicketTable th:nth-child(3),
  #userTicketTable td:nth-child(3){display:none}

  /* Card-Padding für Ticket-Sections */
  #tabTickets .card,
  #tabSupport .card{padding:.8rem .85rem}
}

/* ── Sidebar: Slide-In von links ── */
@media(max-width:1000px){
  .cms-sidebar.mobile-open{
    box-shadow:4px 0 24px rgba(2,6,23,0.6);
  }
  .cms-sidebar.mobile-open .side-link{
    font-size:.95rem;
    padding:.75rem 1rem;
  }
}

/* ── reCAPTCHA container ── */
.recaptcha-wrap{overflow:hidden;max-width:100%;line-height:0}

/* ═══════════════════════════════════════════════
   ROLES – Color picker & visual enhancements
═══════════════════════════════════════════════ */

/* Color swatch cell in roles table */
.role-color-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform .15s;
}
.role-color-swatch:hover { transform: scale(1.15); }

/* Color picker row inside create/edit forms */
.roles-color-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.roles-color-input {
  width: 52px;
  height: 40px;
  padding: 2px 3px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.roles-color-input:hover { border-color: rgba(255,255,255,.2); }

/* Small permission chips displayed inside the roles table */
.role-perm-chip {
  display: inline-block;
  padding: .15rem .52rem;
  background: rgba(96,165,250,.1);
  border: 1px solid rgba(96,165,250,.2);
  border-radius: 12px;
  font-size: .71rem;
  color: #93c5fd;
  margin: .1rem .08rem;
  white-space: nowrap;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   USERS TAB – Modern Redesign
═══════════════════════════════════════════════ */

/* ── KPI Summary Row ── */
.um-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  padding: .85rem 0;
}
.um-kpi-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  background: linear-gradient(145deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.um-kpi-card:hover {
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.um-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.um-kpi-icon svg { width: 20px; height: 20px; }
.um-kpi-data { display: flex; flex-direction: column; gap: .1rem; }
.um-kpi-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  color: #e2eaf0;
}
.um-kpi-label {
  font-size: .74rem;
  color: var(--muted);
  font-weight: 500;
}

/* ── Search/Filter Toolbar ── */
.um-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0 .65rem;
}
.um-search-wrap {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.um-search-icon {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.um-search-input {
  width: 100%;
  padding: .55rem .9rem .55rem 2.3rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #e2eaf0;
  font-size: .84rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.um-search-input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(96,165,250,.1);
}
.um-search-input::placeholder { color: var(--muted); opacity: .7; }
.um-toolbar-right { display: flex; align-items: center; gap: .6rem; }
.um-result-count {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Table Card Container ── */
.um-table-card {
  background: linear-gradient(145deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
}
.um-table-scroll { overflow-x: auto; }

/* ── Table ── */
.um-table {
  width: 100%;
  border-collapse: collapse;
}
.um-table thead tr {
  background: rgba(255,255,255,.035);
}
.um-table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  padding: .7rem .8rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  position: sticky;
  top: 0;
  background: rgba(11,31,42,.95);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.um-th-id { width: 44px; }
.um-th-name { min-width: 120px; }
.um-th-email { width: 36px; }
.um-th-center { text-align: center !important; }
.um-th-actions { width: 160px; text-align: center !important; }

/* ── Table Cells ── */
.um-td {
  padding: .45rem .6rem;
  vertical-align: middle;
  font-size: .82rem;
  color: #d6e4ec;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.025);
}
.um-td-id {
  color: var(--muted);
  font-size: .75rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
}
.um-td-name { white-space: nowrap; }
.um-td-name .um-name-inner {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.um-td-name strong { color: #e2eaf0; font-weight: 600; }
.um-td-email { white-space: nowrap; }
.um-td-email .um-email-inner {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.um-td-time {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.um-td-center { text-align: center; }
.um-td-actions {
  vertical-align: middle;
}
.um-empty { color: var(--muted); opacity: .5; }

/* Row hover */
.um-table tbody tr {
  transition: background .15s;
}
.um-table tbody tr:hover {
  background: rgba(96,165,250,.04);
}

/* ── Avatar Circle ── */
.um-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  letter-spacing: .02em;
}

/* ── Email Eye Button ── */
.um-eye-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: .2rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: color .15s, background .15s;
  box-shadow: none;
}
.um-eye-btn:hover { color: var(--accent-2); background: rgba(96,165,250,.1); }
.um-eye-btn svg { width: 14px; height: 14px; }

/* ── Badges ── */
.um-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}
.um-badge-success {
  background: rgba(22,163,74,.15);
  color: #4ade80;
  border: 1px solid rgba(22,163,74,.2);
}
.um-badge-muted {
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.04);
}
.um-badge-danger {
  background: rgba(239,68,68,.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.18);
}
.um-badge-warning {
  background: rgba(245,158,11,.12);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.2);
}

/* ── Ticket Count Badges ── */
.um-ticket-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 .45rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  background: rgba(96,165,250,.12);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,.15);
}
.um-ticket-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 .45rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  background: rgba(239,68,68,.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.18);
  animation: um-pulse 2s ease-in-out infinite;
}
.um-ticket-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 .45rem;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(255,255,255,.03);
  color: var(--muted);
  opacity: .5;
}
@keyframes um-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.2); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,.08); }
}

/* ── Action Buttons ── */
.um-actions-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: center;
  flex-wrap: wrap;
}
.um-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: none;
  padding: 0;
}
.um-action-btn svg { width: 14px; height: 14px; }
.um-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
.um-action-view:hover   { background: rgba(96,165,250,.15);  color: #60a5fa; border-color: rgba(96,165,250,.3); }
.um-action-key:hover    { background: rgba(251,191,36,.12);  color: #fbbf24; border-color: rgba(251,191,36,.3); }
.um-action-role:hover   { background: rgba(52,211,153,.12);  color: #34d399; border-color: rgba(52,211,153,.3); }
.um-action-2fa:hover    { background: rgba(239,68,68,.12);   color: #f87171; border-color: rgba(239,68,68,.3); }
.um-action-tickets:hover{ background: rgba(139,92,246,.15); color: #a78bfa; border-color: rgba(139,92,246,.3); }
.um-action-mail:hover   { background: rgba(34,211,238,.12);  color: #67e8f9; border-color: rgba(34,211,238,.3); }
.um-action-delete:hover { background: rgba(239,68,68,.12);   color: #f87171; border-color: rgba(239,68,68,.3); }

/* ── User Tickets Modal ── */
.um-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 200;
}
.um-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.um-modal-card {
  background: linear-gradient(165deg, #0f2233 0%, #081624 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 70px rgba(0,0,0,.5);
  animation: um-modal-in .2s ease-out;
}
@keyframes um-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.um-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.um-modal-title-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #e2eaf0;
}
.um-modal-title-row h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.um-modal-title-row svg { color: var(--accent-2); }
.um-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: none;
  padding: 0;
}
.um-modal-close:hover { background: rgba(239,68,68,.12); color: #f87171; }
.um-modal-close svg { width: 16px; height: 16px; }
.um-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.3rem;
}

/* Tickets List inside modal */
.um-tickets-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.um-ticket-item {
  padding: .75rem .9rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.um-ticket-item:hover {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
}
.um-ticket-item-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.um-ticket-item-header .um-ticket-open-btn {
  margin-left: auto;
  padding: .2rem .6rem;
  font-size: .74rem;
}
.um-ticket-item-id {
  font-size: .73rem;
  font-weight: 700;
  color: var(--muted);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.um-ticket-item-title {
  font-size: .88rem;
  font-weight: 600;
  color: #e2eaf0;
  margin-bottom: .35rem;
}
.um-ticket-item-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.um-ticket-item-meta span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  color: var(--muted);
}
.um-tickets-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
  text-align: center;
  gap: .6rem;
}
.um-tickets-empty p { margin: 0; font-size: .88rem; }

/* ── Legacy compat (keep old classes working) ── */
.users-summary-bar { display: none; }
.user-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: .45rem;
  vertical-align: middle;
  color: #fff;
  opacity: .9;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ── Responsive: Users ── */
@media (max-width: 900px) {
  .um-kpi-row { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .um-search-wrap { max-width: 100%; }
  .um-toolbar { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .um-kpi-row { grid-template-columns: 1fr; gap: .5rem; }
  .um-kpi-card { padding: .7rem .9rem; }
  .um-kpi-value { font-size: 1.2rem; }
  .um-modal-card { max-width: 100%; margin: .5rem; border-radius: 14px; }
  .um-modal { padding: .5rem; }
}

/* ═══════════════════════════════════════════════
   STATS KPI CARDS – Stronger visual depth
═══════════════════════════════════════════════ */

/* Override base stats-kpi-card with gradient + depth */
.stats-kpi-card {
  background: linear-gradient(145deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%);
  border: 1px solid rgba(255,255,255,.09);
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.stats-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.02) 0%, transparent 60%);
  pointer-events: none;
}
.stats-kpi-card:hover {
  border-color: rgba(255,255,255,.17);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transform: translateY(-2px);
}
.stats-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, #e2eaf0, #c8d9e7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════
   CMS RESPONSIVE POLISH – All Devices 2026
   Tablet (≤1000px) · Phone (≤760 / ≤640 / ≤480px)
   Ergänzt & verfeinert das bestehende Breakpoint-System
════════════════════════════════════════════════════════════════= */

/* ── Scroll-Container: Custom thin scrollbar für alle Tabellen ── */
.um-table-scroll,
.admin-table-scroll,
.cms-table-wrap,
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.um-table-scroll::-webkit-scrollbar,
.admin-table-scroll::-webkit-scrollbar { height: 4px; }
.um-table-scroll::-webkit-scrollbar-thumb,
.admin-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 4px;
}

/* ── Stats-Section-Tabs: scrollbar auf kleinen Screens ── */
.stats-section-tabs {
  width: auto;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stats-section-tabs::-webkit-scrollbar { display: none; }

/* ── CMS-Top: kompakter Seitentitel ── */
@media (max-width: 760px) {
  .cms-top {
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    gap: .4rem;
  }
  .cms-top h1 { font-size: 1.2rem; }
  .cms-top .muted { font-size: .82rem; }
}

/* ── Admin-Tab-Header: Aktionsbuttons umbrechen ── */
@media (max-width: 760px) {
  .admin-tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }
  .admin-tab-title-group { width: 100%; }

  /* Maintenance-Toggle-Row umbrechen */
  .maintenance-control-row { flex-wrap: wrap; gap: .65rem; }
}

/* ── Users-Toolbar: Suche nimmt volle Breite ≤640px ── */
@media (max-width: 640px) {
  .um-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
  }
  .um-search-wrap { max-width: 100%; }
  .um-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── Ticket-Tab: Aktionsleiste mobil ── */
@media (max-width: 640px) {
  .ticket-tab-header { flex-wrap: wrap; gap: .5rem; }
  .ticket-tab-desc { display: none; }
  .ticket-tab-actions {
    width: 100%;
    justify-content: flex-start;
    gap: .35rem;
    flex-wrap: nowrap;
  }
  .ticket-tab-actions input {
    flex: 1 1 0;
    min-width: 0;
  }
  .ticket-tab-actions .btn { flex-shrink: 0; white-space: nowrap; }
}

/* ── Admin-Toolbar: Suche immer volle Breite ≤640px ── */
@media (max-width: 640px) {
  .admin-table-toolbar { flex-wrap: wrap; gap: .4rem; padding: .5rem .65rem; }
  .admin-search-wrap { max-width: 100%; width: 100%; flex: 1 1 100%; }
}

/* ── tcv2-Panel: engeres Padding auf Mobil ── */
@media (max-width: 640px) {
  .tcv2-section { padding: .8rem .95rem .15rem; }
  .tcv2-head { padding: .85rem 1rem; gap: .6rem; }
  .tcv2-actions { padding: .55rem .95rem .8rem; }
}

/* ── Profil-Einstellungen: Name + Ändern-Button umbrechen ── */
@media (max-width: 520px) {
  /* Name-Zeile: Input und Button stapeln */
  #profileForm > div:first-child {
    flex-wrap: wrap;
    gap: .4rem;
  }
  #profileForm > div:first-child > div { flex: 1 1 100%; }
  #pChangeName { width: 100% !important; justify-content: center; }

  /* Passwort-Buttons umbrechen */
  #pSave, #pCancel { flex: 1 1 auto; }

  /* 2FA-Aktionen umbrechen */
  #twofaActions { flex-wrap: wrap; }
  #twofaActions .btn { flex: 1 1 auto; min-width: 120px; justify-content: center; }
}

/* ── Sehr kleine Screens (≤ 480px): Kompakt-Modus ── */
@media (max-width: 480px) {

  /* CMS Main: minimales Padding */
  .cms-main { padding: .55rem !important; }

  /* Titelgröße */
  .cms-top h1 { font-size: 1.05rem; }

  /* Dashboard-Karten */
  .dash-card { padding: .8rem .9rem; }
  .big-num { font-size: 1.45rem; }

  /* Users-Aktionsbuttons etwas kleiner */
  .um-action-btn { width: 28px; height: 28px; }
  .um-action-btn svg { width: 13px; height: 13px; }
  .um-actions-row { gap: .2rem; }
  .um-kpi-row { gap: .35rem; }
  .um-kpi-card { padding: .65rem .8rem; gap: .65rem; }
  .um-kpi-icon { width: 36px; height: 36px; border-radius: 10px; }
  .um-kpi-value { font-size: 1.15rem; }

  /* Tabellen-Zellen */
  .um-td { padding: .5rem .55rem; font-size: .79rem; }
  .um-table thead th { padding: .55rem .55rem; font-size: .68rem; }

  /* Sticky-Thead auf kleinen Screens deaktivieren
     (kann mit overflow-x:auto auf iOS kollidieren) */
  .um-table thead th { position: static; }

  /* Modal: fast fullscreen */
  .um-modal { padding: .25rem; }
  .um-modal-card { border-radius: 12px; max-height: 92vh; }

  /* tcv2 head wrappen erlauben */
  .tcv2-head { flex-wrap: wrap; }
  .tcv2-head-title { font-size: .9rem; }
  .tcv2-head-sub { font-size: .74rem; }
  .tcv2-close-btn { margin-left: auto; }

  /* Stats KPI */
  .stats-kpi-value { font-size: 1.3rem; }

  /* Admin-tab Icon-Badge kleiner */
  .admin-tab-icon-badge { width: 36px; height: 36px; border-radius: 10px; }
  .admin-tab-icon-badge svg { width: 17px; height: 17px; }
  .admin-tab-title { font-size: 1.05rem; }
}

/* ── Sidebar mobile: Touch-Zielgröße ── */
@media (max-width: 1000px) {
  .cms-sidebar.mobile-open .side-link {
    min-height: 44px;
    padding: .7rem 1rem;
    font-size: .92rem;
  }
  .cms-sidebar.mobile-open .sidebar-header button {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
  }
}

/* ── Dropdown-Panels: Header-Höhe berücksichtigen ── */
@media (max-width: 640px) {
  .profile-panel,
  #notificationsPanel,
  #profileMenu {
    top: 56px !important;
  }
}

/* ── Avatar-Upload Zeile: umbrechen ── */
@media (max-width: 480px) {
  #pAvatarFile { font-size: .8rem; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   Language Switcher  (gt-lang-*)
   ═══════════════════════════════════════════════════════════ */
.gt-lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.gt-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: .32rem .55rem .32rem .48rem;
  cursor: pointer;
  color: var(--text, #e6eef8);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  transition: background .17s, border-color .17s, box-shadow .17s;
  outline-offset: 2px;
}
.gt-lang-btn:hover {
  background: rgba(110,231,183,.09);
  border-color: rgba(110,231,183,.22);
  box-shadow: 0 0 0 3px rgba(110,231,183,.07);
}
.gt-lang-btn:focus-visible {
  outline: 2px solid rgba(110,231,183,.55);
}

.gt-lang-flag {
  width: 20px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.gt-lang-code {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .07em;
  color: inherit;
}

.gt-lang-chevron {
  width: 9px;
  height: 9px;
  color: rgba(180,200,215,.6);
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.gt-lang-switcher.open .gt-lang-chevron {
  transform: rotate(180deg);
}

/* ── Dropdown ── */
.gt-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  left: auto;
  min-width: 158px;
  background: var(--card, #0d1e35);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  box-shadow:
    0 20px 50px rgba(2,6,23,.7),
    0 0 0 1px rgba(110,231,183,.04),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: .3rem;
  z-index: 9999;
  transform-origin: top right;
  animation: gtLangDrop .16s cubic-bezier(.4,0,.2,1);
}
.gt-lang-switcher.open .gt-lang-dropdown {
  display: block;
}

@keyframes gtLangDrop {
  from { opacity: 0; transform: scale(.94) translateY(-5px); }
  to   { opacity: 1; transform: scale(1)  translateY(0);     }
}

.gt-lang-opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .65rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(160,185,205,.85);
  transition: background .13s, color .13s;
  user-select: none;
  -webkit-user-select: none;
}
.gt-lang-opt:hover,
.gt-lang-opt:focus {
  background: rgba(110,231,183,.07);
  color: var(--text, #e6eef8);
  outline: none;
}
.gt-lang-opt.active {
  color: var(--accent, #6ee7b7);
  background: rgba(110,231,183,.08);
  font-weight: 700;
}
.gt-lang-opt.active::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #6ee7b7);
  flex-shrink: 0;
}
.gt-lang-opt .gt-lang-flag {
  width: 22px;
  height: 17px;
}
.gt-lang-name {
  flex: 1;
}

/* ── Public homepage variant (slightly larger flags, themed) ── */
.home .gt-lang-btn {
  background: rgba(255,255,255,.04);
  border-color: rgba(110,231,183,.12);
}
.home .gt-lang-btn:hover {
  background: rgba(110,231,183,.1);
  border-color: rgba(110,231,183,.28);
}

/* ── Mobile adjustments ── */
@media (max-width: 600px) {
  .gt-lang-code { display: none; }
  .gt-lang-btn  { padding: .32rem .42rem; }
  .gt-lang-dropdown {
    right: 0;
    left: auto;
    min-width: 145px;
  }
}

/* --- Community Teaser Section --------------------------------------- */
.community-teaser-section {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(74,222,128,.07) 0%, rgba(16,29,50,.0) 60%);
  border-top: 1px solid rgba(74,222,128,.12);
}
.community-teaser-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}
.community-teaser-text {
  flex: 1;
}
.community-teaser-text .section-title {
  margin-bottom: 14px;
}
.community-teaser-text .section-sub {
  margin-bottom: 28px;
}
.community-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--accent, #4ade80);
  color: #0a1628;
  font-weight: 700;
  font-size: .95rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 0 20px rgba(74,222,128,.25);
}
.community-btn:hover {
  background: #86efac;
  transform: translateY(-2px);
  box-shadow: 0 4px 28px rgba(74,222,128,.35);
}
.community-teaser-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex-shrink: 0;
}
.ctb {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: .9rem;
  color: var(--text-muted, #94a3b8);
  min-width: 170px;
}
.ctb svg {
  flex-shrink: 0;
  stroke: var(--accent, #4ade80);
}
@media (max-width: 768px) {
  .community-teaser-inner {
    flex-direction: column;
    gap: 36px;
  }
  .community-teaser-badges {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
}