:root{--black:#0a0a0f;--dark:#12121a;--card:#1a1a26;--purple:#7b2fff;--cyan:#00c8ff;--pink:#e8179e;--yellow:#ffe600;--white:#f0f0ff;--gray:#8888aa;--nav-h:70px;--modal-gap:18px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--black);color:var(--white);overflow-x:hidden !important;overflow-y:scroll;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.scroll-locked{overflow:hidden !important;position:fixed !important;width:100% !important;overscroll-behavior:none}
body::before{content:'';position:fixed;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;opacity:.4}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(10,10,15,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,23,158,.2)}
.nav-logo{text-decoration:none;display:flex;align-items:center}.nav-logo:hover img{filter:drop-shadow(0 0 16px rgba(232,23,158,.8)) drop-shadow(0 0 30px rgba(0,200,255,.5))}
.nav-logo img{height:52px;width:auto;filter:drop-shadow(0 0 10px rgba(232,23,158,.5)) drop-shadow(0 0 20px rgba(0,200,255,.3));transition:filter .3s}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:var(--gray);text-decoration:none;font-size:.9rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;transition:color .2s;cursor:pointer}
.nav-links a:hover{color:var(--cyan)}
.nav-cta{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border:none;padding:10px 24px;border-radius:50px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;transition:opacity .2s,transform .2s;white-space:nowrap}
.nav-cta:hover{opacity:.85;transform:scale(1.03)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:24px;height:2px;background:var(--white);display:block}
.page{display:none;padding-top:calc(var(--nav-h) + 12px);position:relative;z-index:1;background:radial-gradient(circle at 15% 10%,rgba(123,47,255,.05),transparent 35%),radial-gradient(circle at 85% 0%,rgba(0,200,255,.05),transparent 30%)}
.page.active{display:block}

/* HERO */
#hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-bg{position:absolute;inset:0;background:var(--black)}
.hero-bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.55;filter:saturate(1.3);z-index:0}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,15,.55) 0%,rgba(10,10,15,.25) 40%,rgba(10,10,15,.35) 70%,rgba(10,10,15,.85) 100%);z-index:1}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(232,23,158,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(232,23,158,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);z-index:2}
.hero-content{position:relative;z-index:10;max-width:900px;padding:0 20px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,23,158,.12);border:1px solid rgba(232,23,158,.35);border-radius:50px;padding:6px 18px;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:28px;animation:fadeUp .8s ease both}
.hero-badge::before{content:'●';color:var(--pink);font-size:.5rem;animation:pulse 1.5s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2.4rem,10.5vw,7.8rem);line-height:1;letter-spacing:1px;animation:fadeUp .8s .1s ease both}
.hero-title .line1{color:var(--white);display:block}
.hero-title .line2{display:block;background:linear-gradient(90deg,#e8179e 0%,#00c8ff 25%,#c026d3 50%,#00c8ff 75%,#e8179e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:300% 100%;animation:fadeUp .8s .2s ease both,gradFlow 6s ease-in-out infinite alternate}
@keyframes gradFlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.hero-sub{margin:24px auto 40px;font-size:1.1rem;color:var(--gray);max-width:520px;line-height:1.7;animation:fadeUp .8s .3s ease both}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeUp .8s .4s ease both}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;border:none;padding:14px 36px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 0 30px rgba(232,23,158,.35);transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(232,23,158,.55)}
.btn-secondary{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.2);padding:14px 36px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan)}
.hero-stats{display:flex;justify-content:center;gap:60px;margin-top:80px;animation:fadeUp .8s .5s ease both}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:2.8rem;letter-spacing:2px;background:linear-gradient(135deg,var(--pink),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:.75rem;color:var(--gray);text-transform:uppercase;letter-spacing:2px}
.scroll-indicator{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gray);font-size:.75rem;letter-spacing:2px;text-transform:uppercase;animation:bounce 2s ease infinite}
.scroll-indicator::after{content:'';width:1px;height:40px;background:linear-gradient(to bottom,var(--gray),transparent)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.section{padding:100px 40px;max-width:1200px;margin:0 auto}
.section-label{font-size:.75rem;color:var(--pink);letter-spacing:4px;text-transform:uppercase;margin-bottom:12px}
.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(2.4rem,4.8vw,3.8rem);letter-spacing:1px;line-height:1.02;margin-bottom:16px}
.section-sub{color:var(--gray);font-size:1rem;line-height:1.7;max-width:560px;margin-bottom:60px}
.glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent);opacity:.3}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.service-card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:36px 32px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.service-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.15)}
.service-card[data-c="1"]{--accent:linear-gradient(90deg,var(--pink),var(--purple))}
.service-card[data-c="2"]{--accent:linear-gradient(90deg,var(--cyan),var(--pink))}
.service-card[data-c="3"]{--accent:linear-gradient(90deg,var(--purple),var(--cyan))}
.service-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:20px;background:rgba(255,255,255,.06)}
.service-card h3{font-size:1.3rem;font-weight:700;margin-bottom:12px}
.service-card p{color:var(--gray);font-size:.9rem;line-height:1.7}

/* PORTFOLIO */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.portfolio-item{border-radius:16px;overflow:hidden;position:relative;cursor:pointer;background:var(--card);aspect-ratio:4/3}
.portfolio-item.big{grid-column:span 2;aspect-ratio:16/9}
.portfolio-item img,.portfolio-item video{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.portfolio-item:hover img,.portfolio-item:hover video{transform:scale(1.05)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,15,.9) 0%,transparent 60%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:24px}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-overlay span{font-weight:600;font-size:.95rem}
.vid-badge{position:absolute;top:10px;right:10px;background:rgba(232,23,158,.85);border-radius:50px;padding:4px 10px;font-size:.7rem;font-weight:700;letter-spacing:1px}

/* GALLERY */
.gallery-filters{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.filter-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--gray);padding:8px 18px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.filter-btn.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;border-color:transparent}
.gallery-grid{columns:3;column-gap:16px;margin-top:20px}
.gallery-item{break-inside:avoid;margin-bottom:16px;border-radius:12px;overflow:hidden;cursor:pointer;position:relative}
.gallery-item img{width:100%;display:block;transition:transform .4s}
.gallery-item video{width:100%;display:block;max-height:320px;object-fit:cover}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-vid-badge{position:absolute;top:8px;right:8px;background:rgba(232,23,158,.9);border-radius:50px;padding:3px 10px;font-size:.7rem;font-weight:700}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox-inner{max-width:90vw;max-height:88vh;display:flex;align-items:center;justify-content:center}
.lightbox-inner img,.lightbox-inner video{max-width:90vw;max-height:85vh;border-radius:12px;object-fit:contain;box-shadow:0 0 80px rgba(232,23,158,.3)}
.lightbox-inner video{width:80vw}
.lightbox-close{position:absolute;top:24px;right:32px;background:none;border:none;color:var(--white);font-size:2.5rem;cursor:pointer;opacity:.7;transition:opacity .2s;line-height:1}
.lightbox-close:hover{opacity:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:50px;height:50px;color:var(--white);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lightbox-nav:hover{background:rgba(232,23,158,.4)}
.lightbox-prev{left:16px}.lightbox-next{right:16px}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--gray);font-size:.82rem;letter-spacing:2px;text-align:center}

/* VIDEO EMBED */
.video-embed-card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:20px;overflow:hidden;position:relative}
.video-embed-card.yt .video-thumb{background:linear-gradient(135deg,#ff0000,#cc0000)}
.video-embed-card.ig .video-thumb{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.video-embed-card.tk .video-thumb{background:linear-gradient(135deg,#010101,#ff0050)}
.video-thumb{height:200px;display:flex;align-items:center;justify-content:center;font-size:3rem;cursor:pointer;position:relative;overflow:hidden;transition:opacity .2s}
.video-thumb:hover{opacity:.85}
.video-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.play-btn{position:relative;z-index:2;width:60px;height:60px;background:rgba(0,0,0,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:2px solid rgba(255,255,255,.5)}
.video-info{padding:16px 20px}
.video-info h4{font-size:.95rem;font-weight:700;margin-bottom:4px}
.video-info span{font-size:.75rem;color:var(--gray)}
.video-platform{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.7);border-radius:4px;padding:3px 8px;font-size:.7rem;font-weight:700;letter-spacing:1px}
.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:20px}

/* BOOKING */
.booking-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.form-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:40px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 16px;color:var(--white);font-family:'Outfit',sans-serif;font-size:.95rem;outline:none;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--pink)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select option{background:var(--dark)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn-submit{width:100%;background:linear-gradient(135deg,var(--pink),var(--purple));border:none;color:#fff;padding:14px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .2s;margin-top:8px}
.btn-submit:hover{opacity:.85;transform:translateY(-1px)}
.booking-features{list-style:none;display:flex;flex-direction:column;gap:14px}
.booking-features li{display:flex;align-items:center;gap:12px;color:var(--white);font-size:.95rem}
.booking-features li::before{content:'✓';width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;flex-shrink:0;line-height:24px;text-align:center}

/* ABOUT */
.about-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:60px}
.value-card{background:var(--card);border-radius:16px;padding:28px 24px;border:1px solid rgba(255,255,255,.07);text-align:center;transition:transform .3s}
.value-card:hover{transform:translateY(-4px)}
.value-icon{font-size:2.2rem;margin-bottom:14px}
.value-card h4{font-weight:700;margin-bottom:8px}
.value-card p{color:var(--gray);font-size:.85rem;line-height:1.6}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:40px}
.team-card{background:var(--card);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.07);text-align:center;transition:transform .3s}
.team-card:hover{transform:translateY(-6px)}
.team-avatar{width:100%;height:220px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.team-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.team-info{padding:20px}
.team-info h4{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.team-role{color:var(--cyan);font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.team-desc{color:var(--gray);font-size:.82rem;margin-top:8px;line-height:1.5}
.dj-card{background:linear-gradient(135deg,rgba(232,23,158,.12),rgba(123,47,255,.1));border:1px solid rgba(232,23,158,.25);border-radius:20px;padding:36px 32px;display:flex;gap:32px;align-items:center;margin-top:40px}
.dj-avatar{width:110px;height:110px;border-radius:50%;flex-shrink:0;overflow:hidden;box-shadow:0 0 30px rgba(232,23,158,.4);border:2px solid rgba(232,23,158,.4)}
.dj-avatar img{width:100%;height:100%;object-fit:cover}
.dj-info h3{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;letter-spacing:3px;margin-bottom:4px}
.dj-role{color:var(--pink);font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.dj-info p{color:var(--gray);font-size:.9rem;line-height:1.7}

/* EMPLOYEE */
#page-employee{background:#0a0a0f;padding-top:var(--nav-h,70px)}
#page-employee.active{min-height:calc(100dvh - var(--nav-h,70px));display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.login-wrapper{min-height:calc(100dvh - var(--nav-h,70px));display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-card{background:var(--card);border:1px solid rgba(232,23,158,.25);border-radius:24px;padding:50px 44px;width:100%;max-width:420px;box-shadow:0 0 60px rgba(232,23,158,.1);text-align:center}
.login-card img{width:120px;height:auto;margin-bottom:20px}
.login-card h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.login-card>p{color:var(--gray);font-size:.9rem;margin-bottom:32px;text-align:left}
.login-error{background:rgba(232,23,158,.1);border:1px solid rgba(232,23,158,.3);border-radius:8px;padding:10px 14px;color:var(--pink);font-size:.85rem;margin-bottom:16px;display:none;text-align:left}
.employee-dashboard{display:none}
.employee-dashboard.active-dash{
  display:flex;
  flex-direction:row;
  gap:24px;
  align-items:flex-start;
  justify-content:flex-start;
  flex:1 1 auto;
  min-height:calc(100vh - var(--nav-h));
  width:100%;
  max-width:100vw;
  overflow:visible;
  position:relative;
  box-sizing:border-box;
  margin:0;
  padding:24px;
}
.employee-dashboard.active-dash::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(123,47,255,.08),transparent 35%),radial-gradient(circle at 80% 0%,rgba(0,200,255,.06),transparent 30%),radial-gradient(circle at 60% 80%,rgba(232,23,158,.07),transparent 35%);filter:blur(10px);z-index:0;animation:dashGlow 10s ease-in-out infinite alternate}
.employee-dashboard.active-dash::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,23,158,.08),rgba(0,200,255,.05));mix-blend-mode:screen;opacity:.5;pointer-events:none;z-index:0}
.emp-sidebar{position:relative;z-index:1;background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.08);overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;min-width:220px}
.employee-dashboard.active-dash{
  display:flex !important;
  flex-direction:row !important;
  gap:24px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  flex:1 1 auto !important;
  width:100% !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:24px !important;
}
.employee-dashboard.active-dash .emp-sidebar{
  width:260px;
  max-width:260px;
  height:100%;
  flex:0 0 260px;
}
.employee-dashboard.active-dash .emp-content{
  width:100%;
  max-width:100%;
  min-width:0;
  flex:1 1 auto;
}
.emp-sidebar-top{padding:28px 20px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.emp-sidebar-logo{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;letter-spacing:4px;background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.emp-sidebar-welcome{color:var(--pink);font-size:.65rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:2px}
.emp-sidebar-name{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;letter-spacing:2px;color:var(--white)}
.emp-nav{padding:16px 12px}
.emp-nav-group{margin-bottom:20px}
.emp-nav-label{display:block;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.25);font-weight:700;padding:0 8px;margin-bottom:6px}
.emp-nav-item{display:block;width:100%;box-sizing:border-box;background:none;border:none;color:var(--gray);padding:9px 12px;border-radius:10px;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;text-align:left;line-height:1.5;margin-bottom:2px}
.emp-nav-item:hover{background:rgba(255,255,255,.06);color:var(--white)}
.emp-nav-item.active{background:linear-gradient(135deg,rgba(232,23,158,.18),rgba(123,47,255,.18));color:var(--white);font-weight:700;border:1px solid rgba(232,23,158,.3)}
.emp-sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.06)}
.btn-logout{width:100%;background:rgba(232,23,158,.1);border:1px solid rgba(232,23,158,.3);color:var(--pink);padding:8px 20px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer}
.emp-content{
  position:relative;
  z-index:1;
  padding:32px;
  min-width:0;
  width:100%;
  overflow-y:auto;
  height:100%;
  -webkit-overflow-scrolling:touch;
  background:transparent;
  color:var(--white);
}
.employee-dashboard .editor-panel{background:transparent;display:none;}
.employee-dashboard .editor-panel.active{display:block;animation:dashFade .45s ease;min-height:100%;background:transparent}
/* Fallback: erstes Panel zeigen falls kein JS */
.employee-dashboard .emp-content > .editor-panel:first-of-type{display:block;}

@keyframes dashGlow{from{opacity:.4;transform:scale(1)}to{opacity:.8;transform:scale(1.05)}}
@keyframes dashFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Keep tab-btn for inner tabs (Angebote etc.) */
.tab-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--gray);padding:8px 18px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.tab-btn.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;border-color:transparent}
.editor-panel{display:none}
.editor-panel.active{display:block;width:100%}
.edit-card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:28px;margin-bottom:20px}
.edit-card h4{font-size:1rem;font-weight:700;margin-bottom:20px}
.account-shell{display:flex;flex-direction:column;gap:18px}
.account-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.account-kicker,.account-card-kicker{font-size:.72rem;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.account-hero-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.account-security-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--gray);font-size:.72rem;font-weight:700}
.account-security-badge.is-active{background:rgba(0,200,255,.12);border-color:rgba(0,200,255,.24);color:var(--cyan)}
.account-assume-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.16)}
.account-assume-banner strong{display:block;font-size:.88rem;margin-bottom:3px}
.account-assume-banner span{color:var(--gray);font-size:.8rem;line-height:1.45}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.account-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:20px}
.account-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.account-card h5{font-size:1rem;font-weight:700;margin:0}
.account-toggle{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);cursor:pointer}
.account-toggle input{width:16px;height:16px;accent-color:var(--cyan);margin-top:2px;flex-shrink:0}
.account-inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:900px){
  .account-grid{grid-template-columns:1fr}
}
.website-editor-hero{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px;background:linear-gradient(135deg,rgba(232,23,158,.12),rgba(0,200,255,.12));border:1px solid rgba(255,255,255,.08)}
.website-editor-kicker{font-size:.75rem;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;margin:0 0 6px}
.website-editor-hero h4{margin:0;font-size:1.35rem}
.website-editor-lead{color:var(--gray);margin:6px 0 0;max-width:760px;line-height:1.55}
.website-editor-actions{display:flex;gap:10px;flex-wrap:wrap}
.website-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.website-stat-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px 18px}
.website-stat-value{font-family:'Barlow Condensed',sans-serif;font-size:2rem;letter-spacing:2px;color:var(--cyan);line-height:1}
.website-stat-label{margin-top:6px;font-size:.76rem;letter-spacing:1px;text-transform:uppercase;color:var(--gray)}
.website-workflow-card{margin-bottom:18px}
.website-workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.website-step-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px}
.website-step-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-weight:800;font-size:.86rem;margin-bottom:12px}
.website-step-title{font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:6px}
.website-step-copy{font-size:.84rem;line-height:1.5;color:var(--gray)}
.website-step-meta{margin-top:10px;font-size:.74rem;color:var(--cyan);letter-spacing:.04em}
.website-step-card--action{
  width:100%;
  text-align:left;
  font-family:'Outfit',sans-serif;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.website-step-card--action:hover{
  transform:translateY(-2px);
  border-color:rgba(0,200,255,.2);
  background:rgba(255,255,255,.045);
}
.website-section-nav{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.workspace-hero{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px;background:linear-gradient(135deg,rgba(232,23,158,.1),rgba(0,200,255,.08));border:1px solid rgba(255,255,255,.08)}
.workspace-kicker{font-size:.75rem;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;margin:0 0 6px}
.workspace-hero h4{margin:0;font-size:1.3rem}
.workspace-lead{color:var(--gray);margin:6px 0 0;max-width:760px;line-height:1.55}
.workspace-actions{display:flex;gap:10px;flex-wrap:wrap}
.workspace-section-nav{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.equipment-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.equipment-section-head h4{margin:0;font-size:1.12rem}
.equipment-section-copy{color:var(--gray);margin:6px 0 0;max-width:760px;line-height:1.55}
.equipment-subnav{display:flex;gap:8px;flex-wrap:wrap}
.equipment-subpanel{margin-bottom:20px}
.equipment-inline-note{margin:12px 0 0;font-size:.8rem;color:var(--gray);line-height:1.55}
.equip-instance-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.equip-instance-card:hover{transform:translateY(-2px);border-color:rgba(0,200,255,.22);background:rgba(255,255,255,.045)}
.equip-instance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.equip-instance-title{font-size:.96rem;font-weight:700;color:var(--white)}
.equip-instance-copy{font-size:.76rem;color:var(--gray);margin-top:4px}
.equip-instance-meta{font-size:.8rem;color:var(--gray);margin-bottom:8px}
.equip-instance-preview{font-size:.76rem;color:var(--cyan);line-height:1.45;word-break:break-word}
.tool-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.edit-field{margin-bottom:16px}
.edit-field label{display:block;font-size:.75rem;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.edit-field input,.edit-field textarea,.edit-field select{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;color:var(--white);font-family:'Outfit',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s}
.edit-field input:focus,.edit-field textarea:focus{border-color:var(--pink)}
.edit-field textarea{resize:vertical;min-height:80px}
.btn-save{background:linear-gradient(135deg,var(--pink),var(--purple));border:none;color:#fff;padding:10px 28px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.btn-save:hover{opacity:.85}
.btn-danger{background:rgba(232,23,158,.1);border:1px solid rgba(232,23,158,.3);color:var(--pink);padding:8px 18px;border-radius:50px;font-family:'Outfit',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer}
.btn-danger:hover{background:rgba(232,23,158,.22)}
.project-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;margin-bottom:8px}
.project-row img,.project-row .vid-prev{width:72px;height:48px;object-fit:cover;border-radius:6px;background:var(--dark);flex-shrink:0}
.project-row .vid-prev{display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:rgba(232,23,158,.15)}
.project-row input{flex:1;background:none;border:none;color:var(--white);font-family:'Outfit',sans-serif;font-size:.88rem}
.project-row input:focus{outline:1px solid var(--pink);border-radius:4px;padding:2px 4px}
.add-project-form{background:rgba(232,23,158,.06);border:1px dashed rgba(232,23,158,.25);border-radius:12px;padding:20px}
.add-project-form h5{font-size:.82rem;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.cal-step{display:flex;gap:12px;margin-bottom:10px;font-size:.85rem}
.cal-step-num{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;margin-top:1px}

/* FOOTER */
footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.06);padding:60px 40px 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-brand p{color:var(--gray);font-size:.9rem;line-height:1.7;margin-top:12px;max-width:300px}
.footer-heading{font-size:.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:16px;font-weight:600}
.footer-link{display:block;color:var(--white);text-decoration:none;font-size:.9rem;margin-bottom:10px;opacity:.7;transition:opacity .2s;cursor:pointer}
.footer-link:hover{opacity:1;color:var(--cyan)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:var(--gray);font-size:.8rem}
.social-link{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--white);text-decoration:none;font-size:.85rem;transition:background .2s}
.social-link:hover{background:rgba(232,23,158,.2);border-color:var(--pink)}

.toast{position:fixed;bottom:32px;right:32px;z-index:9998;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;padding:14px 24px;border-radius:14px;font-weight:600;font-size:.9rem;transform:translateY(80px);opacity:0;transition:transform .4s,opacity .4s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}

@media(max-width:768px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(10,10,15,.97);padding:24px 20px;gap:20px;z-index:999} .nav-links.open .mobile-cta{display:block!important}
  .hero-title{letter-spacing:1px}
  .hero-stats{gap:30px}
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-item.big{grid-column:span 1}
  .gallery-grid{columns:2}
  .booking-layout{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:24px}
  .footer-top>div:first-child{grid-column:span 2}
  .section{padding:60px 20px}
  .login-card{padding:36px 24px}
  .equipment-section-head{align-items:flex-start}
  .equipment-subnav{width:100%}
  /* Mobile: simple stacked layout, no fixed positioning to avoid blank screen */
  .employee-dashboard.active-dash{
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-height:calc(100vh - var(--nav-h));
    height:auto;
    overflow:visible;
    background:linear-gradient(180deg,#0b0b12,#0f1018);
    padding-bottom:20px;
  }
  .emp-sidebar{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    height:auto;
    max-height:none;
    position:sticky;
    top:0;
    z-index:5;
    background:rgba(11,11,18,.96);
    backdrop-filter:blur(8px);
  }
  .emp-nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px}
  .emp-nav-group{margin-bottom:0}
  .emp-nav-label{display:none}
  .emp-nav-item{width:auto;padding:6px 14px;font-size:.78rem;border-radius:50px;margin-bottom:0}
  .emp-content{
    padding:16px;
    min-height:calc(100vh - var(--nav-h) - 90px);
    height:auto;
    overflow:visible;
    -webkit-overflow-scrolling:touch;
    background:transparent;
  }
  .emp-sidebar-top{padding:16px 20px}
  .emp-sidebar-footer{padding:12px 20px}
  .dj-card{flex-direction:column;text-align:center}
  .lightbox-nav{display:none}
  .videos-grid{grid-template-columns:1fr}
}

/* ── CALENDAR ── */
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.cal-month-title{font-family:'Barlow Condensed',sans-serif;font-size:2rem;letter-spacing:3px}
.cal-nav-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--white);width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}
.cal-nav-btn:hover{background:rgba(232,23,158,.25);border-color:var(--pink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.cal-day-header{background:rgba(232,23,158,.1);padding:10px;text-align:center;font-size:.72rem;font-weight:700;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08)}
.cal-day{min-height:80px;padding:8px;border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);cursor:pointer;transition:background .2s;position:relative}
.cal-day:hover{background:rgba(232,23,158,.06)}
.cal-day.today{background:rgba(232,23,158,.1);border:1px solid rgba(232,23,158,.3)}
.cal-day.other-month{opacity:.3}
.cal-day.has-event{background:rgba(123,47,255,.08)}
.cal-day-num{font-size:.82rem;font-weight:600;margin-bottom:4px;color:var(--gray)}
.cal-day.today .cal-day-num{color:var(--pink);font-weight:800}
.cal-event-chip{background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:4px;padding:2px 6px;font-size:.68rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity .2s}
.cal-event-chip:hover{opacity:.8}
.cal-event-chip.type-event{background:linear-gradient(90deg,var(--pink),var(--purple))}
.cal-event-chip.type-probe{background:linear-gradient(90deg,var(--cyan),var(--purple))}
.cal-event-chip.type-anfrage{background:linear-gradient(90deg,var(--yellow),#ff8800);color:#000}
.cal-event-chip.type-sonstiges{background:rgba(255,255,255,.15)}
/* Event-Status sichtbar im Kalender-Grid */
.cal-event-chip.status-confirmed{box-shadow:0 0 0 2px rgba(74,222,128,.55)}
.cal-event-chip.status-cancelled{opacity:.4;text-decoration:line-through}
.cal-event-chip.status-completed{filter:grayscale(.55);opacity:.6}
/* Sync-Indikator */
#calSyncStatus{font-size:.72rem;color:var(--gray);display:flex;align-items:center;gap:5px;transition:color .3s}
#calSyncStatus .sync-dot{width:7px;height:7px;border-radius:50%;background:var(--gray);flex-shrink:0;transition:background .3s}
#calSyncStatus.ok .sync-dot{background:#4ade80}
#calSyncStatus.syncing .sync-dot{background:var(--cyan);animation:pulse 1s infinite}
#calSyncStatus.err .sync-dot{background:var(--pink)}
/* event modal */
/* Desktop: Modals starten komplett unterhalb des fixen Headers. */
.event-modal{position:fixed;top:calc(var(--nav-h) + var(--modal-gap));right:0;bottom:0;left:0;z-index:9990;display:flex;align-items:flex-start;justify-content:center;padding:0 20px 24px;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto}
.event-modal.open{opacity:1;pointer-events:all}
.event-modal-card{background:var(--dark);border:1px solid rgba(232,23,158,.3);border-radius:20px;padding:36px;width:100%;max-width:480px;box-shadow:0 0 60px rgba(232,23,158,.15);position:relative}
.event-modal-card h3{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;letter-spacing:2px;margin-bottom:20px}
.event-modal-akte{display:flex;flex-direction:column;gap:18px;padding:32px 32px 24px;background:
  radial-gradient(circle at top right, rgba(0,200,255,.08), transparent 30%),
  radial-gradient(circle at top left, rgba(232,23,158,.08), transparent 28%),
  var(--dark)}
.event-modal-akte h3{margin-bottom:0;padding-right:44px}
.event-akte-summary{padding:20px 22px;border-radius:18px;border:1px solid rgba(0,200,255,.16);background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.025))}
.event-akte-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.event-akte-kicker,.event-section-kicker{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.event-akte-title{font-family:'Barlow Condensed',sans-serif;font-size:2rem;letter-spacing:2px;line-height:1;color:var(--white)}
.event-akte-status{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid rgba(232,23,158,.25);background:rgba(232,23,158,.12);font-size:.78rem;font-weight:700;color:var(--white);white-space:nowrap}
.event-akte-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.event-akte-meta-item{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0}
.event-akte-meta-item span{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--gray)}
.event-akte-meta-item strong{font-size:.95rem;line-height:1.35;color:var(--white);overflow-wrap:anywhere}
.event-section-card{padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.event-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.event-section-head h4{margin:0;font-size:1.02rem;font-weight:700;color:var(--white)}
.event-section-grid{display:grid;gap:12px}
.event-section-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.event-section-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.event-modal-akte .event-section-grid > .edit-field{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-self:stretch;
  margin-bottom:0;
}
.event-modal-akte .event-section-grid > .edit-field > label{
  min-height:40px;
  display:flex;
  align-items:flex-end;
  margin-bottom:8px;
  line-height:1.15;
}
.event-modal-akte .event-section-grid > .edit-field > input,
.event-modal-akte .event-section-grid > .edit-field > select,
.event-modal-akte .event-section-grid > .edit-field > textarea{
  flex:0 0 auto;
}
.event-section-note{margin-bottom:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:.82rem;line-height:1.45;color:var(--gray)}
.event-inline-row{display:flex;gap:12px;flex-wrap:wrap}
.event-inline-row > *{min-width:0}
.event-inline-row-bottom{align-items:flex-end}
.event-inline-row-compact > input[type="number"]{flex:0 0 78px}
.event-inline-row-compact > button{flex-shrink:0}
.event-modal-akte input,
.event-modal-akte select,
.event-modal-akte textarea{width:100%}
.event-modal-akte #evEquipList:empty::before,
.event-modal-akte #eventDocsList:empty::before,
.event-modal-akte #evChecklistItems:empty::before{
  content:'Noch keine Einträge vorhanden.';
  display:block;
  padding:12px 14px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.12);
  color:var(--gray);
  font-size:.84rem;
}
.event-modal-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:4px}
.event-modal-actions .btn-save{min-width:180px}
.event-modal-actions .btn-danger{margin-left:auto}
/* stats row */
.cal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.cal-stat{background:var(--card);border-radius:14px;padding:20px;text-align:center;border:1px solid rgba(255,255,255,.07)}
.cal-stat-num{font-family:'Barlow Condensed',sans-serif;font-size:2.2rem;letter-spacing:2px}
.cal-stat-num.pink{color:var(--pink)}
.cal-stat-num.cyan{color:var(--cyan)}
.cal-stat-num.yellow{color:var(--yellow)}
.cal-stat-num.purple{color:#9b6fff}
.cal-stat-label{font-size:.72rem;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.next-event-card{background:linear-gradient(135deg,rgba(232,23,158,.12),rgba(123,47,255,.1));border:1px solid rgba(232,23,158,.25);border-radius:16px;padding:24px;margin-bottom:32px;display:flex;gap:20px;align-items:center}
.next-event-date{background:linear-gradient(135deg,var(--pink),var(--purple));border-radius:12px;padding:12px 16px;text-align:center;flex-shrink:0;min-width:70px}
.next-event-date .day{font-family:'Barlow Condensed',sans-serif;font-size:2.2rem;line-height:1;letter-spacing:2px}
.next-event-date .month{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;opacity:.85}
@media(max-width:768px){.cal-stats{grid-template-columns:repeat(2,1fr)}.cal-day{min-height:50px;padding:4px}.cal-event-chip{display:none}.cal-day.has-event::after{content:'●';color:var(--pink);font-size:.5rem;position:absolute;bottom:3px;right:4px}}

.account-btn{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s;text-align:left;width:100%}
.account-btn:hover{background:rgba(232,23,158,.1);border-color:rgba(232,23,158,.4);transform:translateX(3px)}
.acc-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.acc-name{font-weight:700;font-size:.95rem;color:var(--white)}
.acc-role{font-size:.75rem;margin-top:2px}
.role-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:50px;font-size:.7rem;font-weight:700;letter-spacing:.5px}
.role-admin{background:rgba(232,23,158,.2);color:var(--pink);border:1px solid rgba(232,23,158,.3)}
.role-staff{background:rgba(0,200,255,.15);color:var(--cyan);border:1px solid rgba(0,200,255,.25)}
.role-dj{background:rgba(123,47,255,.2);color:#9b6fff;border:1px solid rgba(123,47,255,.3)}
/* Permission lock overlay */
.perm-locked{opacity:.4;pointer-events:none;position:relative}
.perm-locked::after{content:'🔒 Keine Berechtigung';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--gray);background:rgba(10,10,15,.6);border-radius:inherit}
.perm-notice{background:rgba(232,23,158,.08);border:1px solid rgba(232,23,158,.2);border-radius:10px;padding:12px 16px;font-size:.82rem;color:var(--gray);margin-bottom:16px;display:none}

.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:rgba(18,18,26,.97);border:1px solid rgba(232,23,158,.25);border-radius:14px;padding:8px;min-width:200px;display:none;flex-direction:column;gap:2px;z-index:2000;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.nav-dropdown-menu.open{display:flex}
.nav-dropdown-menu a{padding:10px 14px;border-radius:8px;color:var(--gray);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s;display:block;text-decoration:none;white-space:nowrap}
.nav-dropdown-menu a:hover{background:rgba(232,23,158,.12);color:var(--white)}

.wa-btn{position:fixed;bottom:28px;right:28px;z-index:900;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 4px 20px rgba(37,211,102,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none;font-size:1.6rem}
.wa-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.6)}
.wa-tooltip{position:absolute;right:70px;background:rgba(18,18,26,.95);color:var(--white);font-size:.8rem;font-weight:600;padding:8px 14px;border-radius:8px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;border:1px solid rgba(255,255,255,.1)}
.wa-btn:hover .wa-tooltip{opacity:1}

/* ── PRICING ── */
.price-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:36px 28px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.price-card:hover{transform:translateY(-6px)}
.price-card.featured{border-color:rgba(232,23,158,.4);background:linear-gradient(160deg,rgba(232,23,158,.08),rgba(123,47,255,.06))}
.price-card.featured::before{content:'⭐ BELIEBT';position:absolute;top:18px;right:-28px;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-size:.65rem;font-weight:800;letter-spacing:2px;padding:5px 40px;transform:rotate(35deg)}
.price-tag{font-family:'Barlow Condensed',sans-serif;font-size:3.2rem;letter-spacing:2px;line-height:1}
.price-sub{color:var(--gray);font-size:.78rem;margin-bottom:24px}
.price-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.price-features li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--gray)}
.price-features li::before{content:'✓';color:var(--cyan);font-weight:700;flex-shrink:0}
.price-features li.no::before{content:'✗';color:rgba(255,255,255,.2)}
.price-features li.no{opacity:.4}
/* ── FAQ ── */
.faq-item{border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden}
.faq-q{width:100%;background:none;border:none;color:var(--white);text-align:left;padding:20px 0;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q::after{content:'+';font-size:1.4rem;color:var(--pink);flex-shrink:0;transition:transform .25s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--gray);font-size:.9rem;line-height:1.7}
.faq-item.open .faq-a{max-height:300px;padding-bottom:18px}
/* ── GENRE CHIPS (Wunschliste) ── */
.genre-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--gray);padding:7px 16px;border-radius:50px;font-family:Outfit,sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}
.genre-chip.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;border-color:transparent}
/* ── EQUIPMENT ── */
.equip-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px 16px;margin-bottom:8px;cursor:pointer;transition:border-color .2s}
.equip-row:hover{border-color:rgba(232,23,158,.3)}
.equip-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.equip-status{font-size:.7rem;padding:3px 10px;border-radius:50px;font-weight:700;white-space:nowrap}
.status-ok{background:rgba(0,200,100,.15);color:#00c864}
.status-wartung{background:rgba(255,165,0,.15);color:#ffa500}
.status-defekt{background:rgba(232,23,158,.15);color:var(--pink)}
.status-verliehen{background:rgba(0,200,255,.15);color:var(--cyan)}
.status-ausgelagert{background:rgba(168,85,247,.15);color:#c084fc}
/* ── OFFER LINES ── */
.offer-line{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-bottom:8px;align-items:center}
.offer-line input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;color:var(--white);font-family:Outfit,sans-serif;font-size:.88rem;outline:none;width:100%}
.offer-line input.price-in{width:90px}
/* ── REVIEWS ── */
.review-card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:24px;position:relative;overflow:hidden}
.review-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--pink),var(--cyan))}
.review-stars{color:var(--yellow);font-size:1rem;letter-spacing:2px;margin-bottom:10px}
.review-text{color:var(--gray);font-size:.9rem;line-height:1.7;margin-bottom:14px;font-style:italic}
.review-author{font-weight:700;font-size:.88rem}
.review-event{color:var(--gray);font-size:.76rem}

/* ── INVOICE ── */
.inv-line{display:grid;grid-template-columns:1fr 60px 80px 80px 30px;gap:6px;margin-bottom:6px;align-items:center}
.inv-line input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:7px 10px;color:var(--white);font-family:Outfit,sans-serif;font-size:.83rem;outline:none;width:100%}
.inv-line input:focus{border-color:var(--pink)}
.inv-line-header{display:grid;grid-template-columns:1fr 60px 80px 80px 30px;gap:6px;margin-bottom:4px;font-size:.7rem;color:var(--gray);letter-spacing:1px;text-transform:uppercase}
.template-chip{background:rgba(123,47,255,.15);border:1px solid rgba(123,47,255,.3);color:#9b6fff;padding:5px 12px;border-radius:50px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.template-chip:hover{background:rgba(123,47,255,.3)}
/* ── INV PREVIEW ── */
#invPreviewPane h1{font-size:22px;margin:0;color:#e8179e}
#invPreviewPane table{width:100%;border-collapse:collapse;font-size:11px}
#invPreviewPane th{background:#e8179e;color:#fff;padding:7px 10px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px}
#invPreviewPane td{padding:7px 10px;border-bottom:1px solid #f0f0f0}
#invPreviewPane .total-row td{font-weight:700;background:#fafafa;font-size:12px}
/* ── EQUIP QR ── */
.equip-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px}
.equip-card:hover{border-color:rgba(232,23,158,.3);background:rgba(232,23,158,.04)}
.equip-qr-mini{width:36px;height:36px;border-radius:6px;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.equip-qr-mini canvas{width:36px!important;height:36px!important}
/* ── INSTAGRAM FEED ── */
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px}
.ig-post-card{display:block;aspect-ratio:1;overflow:hidden;position:relative;background:var(--card);cursor:pointer}
.ig-post-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ig-post-card:hover img{transform:scale(1.06)}
.ig-post-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 55%);opacity:0;transition:opacity .25s;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff;font-size:.78rem;line-height:1.5}
.ig-post-overlay p{margin-top:6px;font-size:.75rem;color:rgba(255,255,255,.8)}
.ig-post-card:hover .ig-post-overlay{opacity:1}
.ig-stories-bar{display:flex;gap:14px;overflow-x:auto;padding:4px 0 20px;scrollbar-width:none;margin-bottom:8px}
.ig-stories-bar::-webkit-scrollbar{display:none}
.ig-story-bubble{flex-shrink:0;width:76px;height:76px;border-radius:50%;overflow:hidden;padding:3px;background:linear-gradient(135deg,#f09433,#e1306c,#833ab4);box-shadow:0 2px 16px rgba(0,0,0,.35);cursor:pointer;display:block;text-decoration:none}
.ig-story-bubble img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid var(--black)}
/* ── SAVED DOCS PANEL ANIMATION ── */
#docEditorArea{transition:opacity .2s ease}
#savedDocsPanel{transition:opacity .25s ease,transform .25s ease}

/* ══════════════════════════════════════════════════════════
   MOBILE – Mitarbeiterbereich
   Alle Regeln gelten nur für ≤768px / ≤480px.
   Desktop bleibt 100% unverändert.
   ══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. ROOT-OVERFLOW  (html + body)
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  html{overflow-x:clip}      /* Root-Level; verhindert Scroll, erlaubt sticky */
  body{max-width:100vw}
}

/* ─────────────────────────────────────────────────────────
   2. DASHBOARD
   Ursprünglich wurde der Container hier auf Mobile per
   position:fixed erzwungen. Das kollidiert aber mit dem
   restlichen Employee-Layout und hat dazu geführt, dass
   einzelne Tabs nur noch in einer Ecke zusammengedrückt
   erschienen, während der restliche Bereich schwarz blieb.
   Deshalb hier bewusst KEIN fixed-Viewport-Hack mehr.
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .employee-dashboard.active-dash{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:calc(100dvh - var(--nav-h,70px)) !important;
    height:auto !important;
    overflow:visible !important;
    grid-template-columns:unset !important;
    grid-template-rows:unset !important;
    width:100% !important;
    max-width:100% !important;
    background:#0a0a0f !important;
  }

  .emp-sidebar{
    position:relative !important;
    top:auto !important;
    flex-shrink:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.1) !important;
    background:rgba(10,10,15,.98) !important;
    z-index:10 !important;
  }
  .emp-sidebar-top{display:none !important;height:0 !important;padding:0 !important;overflow:hidden !important}
  .emp-sidebar-footer{display:none !important;height:0 !important;padding:0 !important;overflow:hidden !important}

  .emp-nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0 !important;
    padding:8px 10px !important;
    box-sizing:border-box !important;
  }
  .emp-nav::-webkit-scrollbar{display:none}

  .emp-nav-group{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    flex-shrink:0 !important;
    align-items:center !important;
    gap:4px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .emp-nav-group + .emp-nav-group{
    margin-left:4px !important;
    padding-left:8px !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
  }
  .emp-nav-label{display:none !important}

  .emp-nav-item{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
    padding:7px 12px !important;
    font-size:.78rem !important;
    border-radius:50px !important;
    min-height:38px !important;
    margin:0 !important;
    touch-action:manipulation;
  }

  .emp-content{
    flex:1 1 auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    min-height:0 !important;
    padding:16px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ─────────────────────────────────────────────────────────
   3. MODALS: starten unterhalb des Headers
   WHY: top:var(--nav-h) überschreibt top:0 aus inset:0.
   Header bleibt sichtbar. Modal deckt Tab-Leiste + Content ab.
   Close-Button 8px unter Modal-Oberkante (= 78px vom Viewport).
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .event-modal{
    top:var(--nav-h,70px) !important;   /* Modal startet UNTER dem Header */
    align-items:flex-start !important;
    padding:12px 8px !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .event-modal-card{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:calc(90vh - var(--nav-h,70px)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain;
    min-height:0 !important;
    border-radius:12px !important;
    padding:52px 16px 32px !important;   /* Platz für Close-Button oben */
    box-shadow:none !important;
    margin:0 !important;
  }
  .event-modal-akte{
    gap:14px !important;
    padding:52px 14px 22px !important;
  }
  .event-akte-summary{
    padding:16px !important;
    border-radius:14px !important;
  }
  .event-akte-title{font-size:1.5rem !important}
  .event-akte-grid,
  .event-section-grid-2,
  .event-section-grid-3{
    grid-template-columns:1fr !important;
  }
  .event-modal-akte .event-section-grid > .edit-field > label{
    min-height:0 !important;
  }
  .event-section-card{
    padding:14px !important;
    border-radius:14px !important;
  }
  .event-section-head{
    margin-bottom:12px !important;
  }
  .event-inline-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .event-inline-row-compact > input[type="number"],
  .event-inline-row-compact > button,
  .event-modal-actions .btn-save,
  .event-modal-actions .btn-danger{
    width:100% !important;
    min-width:0 !important;
  }
  .event-modal-actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .event-modal-actions .btn-danger{
    margin-left:0 !important;
  }
  /* Inline-Grids in Modal-Formularen → 1 Spalte */
  .event-modal-card [style*="grid-template-columns:1fr 1fr"],
  .event-modal [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* paketModal inner card: volle Breite + scrollbar auf Mobile */
  #paketModal > div {
    width:100% !important;
    max-width:100% !important;
    max-height:calc(90dvh - var(--nav-h,70px)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain;
    border-radius:12px !important;
  }
  /* Close-Button: 8px unter Modal-Oberkante (= 78px vom Viewport) */
  .event-modal-card > button:first-child{
    position:fixed !important;
    top:calc(var(--nav-h,70px) + 8px) !important;
    right:14px !important;
    z-index:10010 !important;
    width:44px !important;
    height:44px !important;
    min-height:auto !important;
    padding:0 !important;
    border-radius:50% !important;
    background:rgba(18,18,26,.96) !important;
    border:1px solid rgba(255,255,255,.3) !important;
    color:#fff !important;
    font-size:1.5rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    line-height:1 !important;
    box-shadow:0 2px 12px rgba(0,0,0,.5) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   4. KALENDER
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .cal-stats{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;margin-bottom:16px !important}
  .cal-stat{padding:12px 8px !important}
  .cal-stat-num{font-size:1.5rem !important}
  .cal-stat-label{font-size:.65rem !important}
  .next-event-card{flex-direction:column !important;gap:10px !important;padding:14px !important;margin-bottom:16px !important}
  .cal-header{flex-direction:column !important;align-items:stretch !important;gap:10px !important;margin-bottom:12px !important}
  .cal-header > div:first-child{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px !important}
  .cal-month-title{font-size:1.4rem !important;letter-spacing:2px !important}
  .cal-nav-btn{width:40px !important;height:40px !important;min-height:40px !important;flex-shrink:0}
  .cal-header > button.btn-save{width:100% !important;justify-content:center !important}
  .cal-grid{width:100% !important;border-radius:10px !important;overflow:hidden !important}
  .cal-day-header{padding:5px 2px !important;font-size:.58rem !important;letter-spacing:0 !important}
  .cal-day{min-height:40px !important;padding:3px 2px !important}
  .cal-day-num{font-size:.7rem !important;margin-bottom:2px}
  .cal-event-chip{display:none !important}
  .cal-day.has-event::after{content:'●';color:var(--pink);font-size:.45rem;position:absolute;bottom:2px;right:3px}
}

/* ─────────────────────────────────────────────────────────
   5. FORMULARE & EDITOREN
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .edit-card{padding:14px !important}
  .website-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .website-workflow-grid{grid-template-columns:1fr !important}
  .tool-card-grid{grid-template-columns:1fr !important}
  .form-row{grid-template-columns:1fr !important}
  #docEditorArea{grid-template-columns:1fr !important;gap:12px !important}
  #docEditorArea [style*="grid-template-columns:1fr 1fr"],
  #angeboteSec-docs [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  #invLineItems{overflow-x:auto !important;-webkit-overflow-scrolling:touch;max-width:100%;padding-bottom:6px}
  .inv-line,.inv-line-header{min-width:440px}
  #offerLines{overflow-x:auto !important;-webkit-overflow-scrolling:touch;max-width:100%}
  .offer-line{min-width:300px}
  select[style*="width:200px"]{width:100% !important;max-width:100% !important}
}

/* ─────────────────────────────────────────────────────────
   6. EQUIPMENT / INVENTAR
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .equip-row{flex-wrap:wrap !important;gap:8px !important;padding:10px 12px !important}
  .equip-row .equip-status{margin-left:auto}
  .equip-card{flex-wrap:wrap !important}
}

/* ─────────────────────────────────────────────────────────
   7. TOUCH-TARGETS  ≥44px
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .btn-save,.btn-submit,.btn-logout,.btn-primary,.btn-secondary,
  .tab-btn,.account-btn,.cal-nav-btn{min-height:44px !important;touch-action:manipulation}
  .tab-btn{min-height:40px !important}
}

/* ─────────────────────────────────────────────────────────
   8. QR-SCANNER
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  #scannerContainer,#packScanContainer{width:100% !important;max-width:100% !important;overflow:hidden}
  #qrVideo,#packVideo{width:100% !important;max-height:260px;object-fit:cover;display:block}
}

/* ─────────────────────────────────────────────────────────
   9. ÖFFENTLICHE SEITE  (Hero, Footer)
   ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .hero-stats{gap:24px}
  .footer-top{grid-template-columns:1fr 1fr;gap:24px}
  .footer-top>div:first-child{grid-column:span 2}
}

/* ─────────────────────────────────────────────────────────
   480px – EXTRA KOMPAKT  (iPhone SE / kleines Android)
   ───────────────────────────────────────────────────────── */
@media(max-width:480px){
  .emp-content{padding:10px !important}
  .emp-nav-item{padding:6px 10px !important;font-size:.72rem !important;min-height:36px !important}
  .cal-stat{padding:10px 6px !important}
  .cal-stat-num{font-size:1.25rem !important}
  .cal-stat-label{font-size:.6rem !important}
  .cal-month-title{font-size:1.2rem !important}
  .cal-day{min-height:36px !important}
  .cal-day-num{font-size:.65rem !important}
  .login-card{padding:28px 16px}
  .section{padding:40px 12px}
  .toast{left:12px;right:12px;bottom:12px;text-align:center}
  .hero-stats{gap:16px;flex-wrap:wrap;justify-content:center;margin-top:40px}
  .stat-num{font-size:2rem}
  .footer-top{grid-template-columns:1fr}
  .footer-top>div:first-child{grid-column:span 1}
  footer{padding:40px 16px 24px}
  .lightbox-close{top:12px;right:12px;font-size:1.8rem}
  .edit-card{padding:12px !important}
}

/* ── Startup Intro ───────────────────────────────────────────────────────── */
:root{--intro-dur:3.8s}
/* Keyframes */
@keyframes _introLogo {
  0%   { opacity:0; transform:scale(.82) translateY(12px); filter:blur(12px) brightness(.6); }
  28%  { opacity:1; transform:scale(1) translateY(0);   filter:blur(0)    brightness(1); }
  82%  { opacity:1; transform:scale(1) translateY(0);   filter:blur(0)    brightness(1); }
  100% { opacity:0; transform:scale(1.07) translateY(-10px);filter:blur(4px)  brightness(1.4); }
}
@keyframes _introGlow {
  0%   { opacity:0; transform:scale(.4); }
  28%  { opacity:1; transform:scale(1);  }
  82%  { opacity:.8;transform:scale(1.05);}
  100% { opacity:0; transform:scale(1.3); }
}
@keyframes _introOverlay {
  0%,82% { opacity:1; }
  100%   { opacity:0; }
}
@keyframes _introFrame {
  0% { opacity:0; transform:scale(1.04); }
  24%,82% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(.98); }
}
@keyframes _introCopy {
  0% { opacity:0; transform:translateY(10px); letter-spacing:.18em; }
  26%,82% { opacity:1; transform:translateY(0); letter-spacing:.24em; }
  100% { opacity:0; transform:translateY(-6px); letter-spacing:.28em; }
}
@keyframes _introBar {
  0% { transform:scaleX(0); opacity:0; }
  14% { transform:scaleX(.12); opacity:1; }
  84% { transform:scaleX(1); opacity:1; }
  100% { transform:scaleX(1.02); opacity:0; }
}
/* Base — always positioned, invisible until .playing */
#dashIntro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,200,255,.08), transparent 24%),
    radial-gradient(circle at 80% 0%, rgba(232,23,158,.12), transparent 24%),
    linear-gradient(180deg, #03050a 0%, #090d15 100%);
}
#dashIntro.playing {
  display: flex !important;
  animation: _introOverlay var(--intro-dur) cubic-bezier(.4,0,.6,1) forwards;
}
#dashIntroGlow {
  position: absolute;
  width: min(70vw, 600px);
  height: min(70vw, 600px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232,23,158,.24) 0%,
    rgba(123,47,255,.12) 40%,
    transparent 70%);
  pointer-events: none;
}
#dashIntro.playing #dashIntroGlow {
  animation: _introGlow var(--intro-dur) cubic-bezier(.4,0,.6,1) forwards;
}
.dash-intro-stage{
  position:relative;
  z-index:1;
  width:min(72vw, 520px);
  min-height:min(62vh, 520px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px, 4vh, 36px);
  padding:clamp(24px, 4vw, 40px);
}
.dash-intro-frame{
  position:absolute;
  inset:4vh 4vw;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  pointer-events:none;
  opacity:0;
}
#dashIntro.playing .dash-intro-frame{
  animation:_introFrame var(--intro-dur) cubic-bezier(.4,0,.6,1) forwards;
}
.dash-intro-copy{
  position:relative;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
  width:min(100%, 420px);
}
#dashIntro.playing .dash-intro-copy{
  animation:_introCopy var(--intro-dur) cubic-bezier(.4,0,.6,1) forwards;
}
.dash-intro-line{
  font-size:.72rem;
  letter-spacing:.26em;
  color:rgba(152,165,186,.82);
  text-align:center;
}
.dash-intro-line--strong{
  margin-top:10px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.9rem,4.2vw,3.2rem);
  letter-spacing:.14em;
  color:var(--white);
  line-height:.96;
}
#dashIntroLogo {
  position: relative;
  width: clamp(140px, 26vw, 240px);
  filter: drop-shadow(0 0 0px rgba(232,23,158,0));
  display:block;
  margin-inline:auto;
}
#dashIntro.playing #dashIntroLogo {
  animation: _introLogo var(--intro-dur) cubic-bezier(.4,0,.6,1) forwards;
}
/* Legacy classes kept for potential other uses */
.dash-intro-sub {
  display: none; /* removed from intro — keep rule to avoid errors */
}
.dash-intro-bar{
  position:relative;
  width:min(320px,54vw);
  height:2px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  margin-inline:auto;
}
.dash-intro-bar-fill{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
}
#dashIntro.playing .dash-intro-bar-fill{
  animation:_introBar calc(var(--intro-dur) - .4s) cubic-bezier(.25,.8,.25,1) forwards;
}

@media (max-width: 720px){
  .dash-intro-stage{
    width:min(88vw, 420px);
    min-height:min(56vh, 420px);
    gap:20px;
  }
  .dash-intro-line{
    font-size:.68rem;
    letter-spacing:.22em;
  }
  .dash-intro-line--strong{
    font-size:clamp(1.8rem,10vw,2.6rem);
    letter-spacing:.1em;
  }
  .dash-intro-bar{
    width:min(260px, 62vw);
  }
}

/* ── Control Home Nav item ───────────────────────────────────────────────── */
.ctrl-home-item {
  background: linear-gradient(135deg, rgba(0,200,255,.1), rgba(232,23,158,.08)) !important;
  border: 1px solid rgba(0,200,255,.2) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  color: var(--cyan) !important;
  margin-bottom: 4px;
}
.ctrl-home-item.active,
.ctrl-home-item:hover {
  background: linear-gradient(135deg, rgba(0,200,255,.2), rgba(232,23,158,.15)) !important;
  border-color: rgba(0,200,255,.4) !important;
}

/* ══════════════════════════════════════
   SOUNTRA CONTROL CENTER
══════════════════════════════════════ */

.ctrl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,200,255,.12);
}
.ctrl-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ctrl-subtitle {
  font-size: .72rem;
  color: var(--gray);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.ctrl-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0,200,255,.6);
  animation: ctrlPulse 1.8s ease infinite;
}
@keyframes ctrlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,255,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(0,200,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,255,0); }
}
.ctrl-refresh-btn {
  background: rgba(0,200,255,.08);
  border: 1px solid rgba(0,200,255,.2);
  color: var(--cyan);
  font-family: Outfit, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  letter-spacing: .5px;
}
.ctrl-refresh-btn:hover {
  background: rgba(0,200,255,.16);
  border-color: rgba(0,200,255,.4);
}

/* Stat grid (4 cols) */
.ctrl-grid-4 {
  display: none; /* reduziert Doppel-Stat-Anzeigen für schlankere Übersicht */
}
.ctrl-marquee {
  display:none;
  gap:12px;
  align-items:center;
  overflow:hidden;
  padding:10px 14px;
  margin:12px 0 6px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(232,23,158,.08),rgba(0,200,255,.08));
  position:relative;
}
.ctrl-marquee::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(10,10,15,.6),transparent);
  pointer-events:none;
}
.ctrl-marquee-track{
  display:flex;
  gap:18px;
  align-items:center;
  animation:ctrlMarquee 18s linear infinite;
}
.ctrl-marquee-pill{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:6px 12px;
  font-size:.82rem;
  color:var(--white);
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
}
.ctrl-marquee-pill span{color:var(--gray);font-size:.72rem;letter-spacing:.5px}
@keyframes ctrlMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.ctrl-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .2s ease, box-shadow .22s ease;
}
.ctrl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  opacity: .5;
}
.ctrl-card:hover {
  border-color: rgba(0,200,255,.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,200,255,.07);
}
.ctrl-card-label {
  font-size: .68rem;
  color: var(--gray);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.ctrl-stat-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--white), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.ctrl-card-sub {
  font-size: .72rem;
  color: var(--gray);
}

/* Two-column layout */
.ctrl-utility-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
}
.ctrl-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ctrl-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ctrl-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.ctrl-summary-label {
  color: var(--gray);
  font-size: .8rem;
}
.ctrl-summary-value {
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ctrl-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.ctrl-actions-grid .ctrl-qa-btn {
  width: 100%;
}

/* Panels */
.ctrl-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow: hidden;
}
.ctrl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--white);
  background: rgba(255,255,255,.02);
}
.ctrl-badge {
  background: rgba(0,200,255,.12);
  color: var(--cyan);
  border: 1px solid rgba(0,200,255,.2);
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  letter-spacing: .5px;
}
.ctrl-user-list {
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
}
.ctrl-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.ctrl-user-row:last-child { border-bottom: none; }
.ctrl-user-row:hover { background: rgba(255,255,255,.03); }
.ctrl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ctrl-dot.online  { background: #4ade80; box-shadow: 0 0 6px #4ade80aa; }
.ctrl-dot.recent  { background: #fbbf24; }
.ctrl-dot.offline { background: #6b7280; }
.ctrl-user-name { font-weight: 600; flex: 1; }
.ctrl-user-meta { color: var(--gray); font-size: .72rem; }
.ctrl-flag {
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .5px;
}
.ctrl-flag.admin { background: rgba(232,23,158,.15); color: var(--pink); border: 1px solid rgba(232,23,158,.25); }

/* Log table */
.ctrl-log-head {
  display: grid;
  grid-template-columns: 120px 120px 110px 1fr 80px;
  gap: 0;
  padding: 8px 18px;
  font-size: .65rem;
  color: var(--gray);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(0,0,0,.2);
}
.ctrl-log-row {
  display: grid;
  grid-template-columns: 120px 120px 110px 1fr 80px;
  gap: 0;
  padding: 9px 18px;
  font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
  align-items: center;
}
.ctrl-log-row:last-child { border-bottom: none; }
.ctrl-log-row:hover { background: rgba(255,255,255,.03); }
.ctrl-log-time { color: var(--gray); font-size: .72rem; font-variant-numeric: tabular-nums; }
.ctrl-log-user { font-weight: 600; }
.ctrl-log-ip   { color: var(--gray); font-size: .72rem; font-family: monospace; }
.ctrl-log-device { color: var(--gray); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl-log-status { font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-align: center; letter-spacing: .5px; }
.ctrl-log-status.ok      { background: rgba(74,222,128,.1); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.ctrl-log-status.fail    { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.ctrl-log-status.new-dev { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.ctrl-log-status.otp     { background: rgba(0,200,255,.1); color: var(--cyan); border: 1px solid rgba(0,200,255,.2); }

.ctrl-clear-btn {
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.18);
  color: #f87171;
  font-family: Outfit, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
}
.ctrl-clear-btn:hover { background: rgba(248,113,113,.16); }
.ctrl-empty {
  padding: 24px;
  text-align: center;
  color: var(--gray);
  font-size: .82rem;
}

/* Leaflet map dark override */
.leaflet-container {
  background: #0d0d1a !important;
  font-family: Outfit, sans-serif;
}
.ctrl-map-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 0 10px currentColor;
  cursor: pointer;
}

/* ── Entrance Animations ────────────────── */
@keyframes ctrlFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ctrlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ctrlScan {
  0%   { transform: scaleX(0); opacity: .6; }
  60%  { transform: scaleX(1); opacity: .3; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes ctrlSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ctrlBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* Boot state: hide elements until loaded */
.ctrl-booting .ctrl-card,
.ctrl-booting .ctrl-panel {
  opacity: 0;
}
.ctrl-booting .ctrl-subtitle {
  animation: ctrlBlink .6s ease infinite;
}

/* Loaded state: staggered entrance */
.ctrl-loaded .ctrl-card {
  animation: ctrlFadeUp .45s cubic-bezier(.22,.68,0,1.2) both;
}
.ctrl-loaded .ctrl-card:nth-child(1) { animation-delay: .04s; }
.ctrl-loaded .ctrl-card:nth-child(2) { animation-delay: .09s; }
.ctrl-loaded .ctrl-card:nth-child(3) { animation-delay: .14s; }
.ctrl-loaded .ctrl-card:nth-child(4) { animation-delay: .19s; }

.ctrl-loaded .ctrl-panel {
  animation: ctrlFadeUp .5s cubic-bezier(.22,.68,0,1.2) both;
}
/* Two-column panels */
.ctrl-loaded .ctrl-grid-2 .ctrl-panel:nth-child(1) { animation-delay: .28s; }
.ctrl-loaded .ctrl-grid-2 .ctrl-panel:nth-child(2) { animation-delay: .34s; }
/* Log panel */
.ctrl-loaded > .ctrl-panel { animation-delay: .42s; }

/* Scan-line on the ctrl-title during boot */
.ctrl-title { position: relative; overflow: hidden; }
.ctrl-booting .ctrl-title::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,200,255,.25) 50%, transparent 100%);
  transform-origin: left center;
  animation: ctrlScan .9s ease forwards;
}

/* Refresh button spin */
.ctrl-refresh-btn.spinning {
  animation: ctrlSpin .65s cubic-bezier(.4,0,.2,1);
}


/* Stat number entrance — scale in */
@keyframes ctrlStatPop {
  0%   { transform: scale(.8); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.ctrl-loaded .ctrl-stat-num {
  animation: ctrlStatPop .5s cubic-bezier(.22,.68,0,1.2) both;
  animation-delay: .35s;
}

/* Quick Actions */
.ctrl-quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ctrl-qa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white);
  font-family: Outfit, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .15s;
  letter-spacing: .3px;
  text-align: left;
}
.ctrl-qa-btn:hover {
  background: rgba(0,200,255,.1);
  border-color: rgba(0,200,255,.3);
  color: var(--cyan);
  transform: translateY(-1px);
}
.ctrl-qa-btn:active { transform: translateY(0); }

/* Today row */
.ctrl-today-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.ctrl-today-icon { font-size: 1rem; flex-shrink: 0; }
.ctrl-today-label { flex: 1; font-size: .82rem; color: var(--gray); }
.ctrl-today-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  min-width: 28px;
  text-align: right;
}

/* Next event card */
.ctrl-next-event-panel {}
.ctrl-next-ev-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.ctrl-next-ev-date {
  font-size: .8rem;
  color: var(--cyan);
  font-weight: 600;
  margin-bottom: 4px;
}
.ctrl-next-ev-loc {
  font-size: .78rem;
  color: var(--gray);
  margin-bottom: 10px;
}
.ctrl-next-ev-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ctrl-map-meta {
  color: var(--gray);
  font-size: .72rem;
}
.ctrl-map-fallback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px 18px;
}
.ctrl-map-row {
  appearance: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  color: var(--white);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.ctrl-map-row:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(0,200,255,.18);
  transform: translateY(-1px);
}
.ctrl-map-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ctrl-map-row__head strong {
  font-size: .84rem;
  text-align: left;
}
.ctrl-map-row__meta {
  color: var(--gray);
  font-size: .74rem;
  text-align: left;
}
.ctrl-map-row__status {
  font-size: .68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.ctrl-map-row__status.is-upcoming {
  color: var(--pink);
  border-color: rgba(232,23,158,.18);
  background: rgba(232,23,158,.08);
}
.ctrl-map-row__status.is-past {
  color: var(--gray);
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

/* Responsive */
@media(max-width:1100px) {
  .ctrl-grid-4 { grid-template-columns: repeat(2,1fr); }
  .ctrl-utility-grid,
  .ctrl-grid-2 { grid-template-columns: 1fr; }
}
@media(max-width:600px) {
  .ctrl-grid-4 { grid-template-columns: 1fr 1fr; }
  .ctrl-actions-grid { grid-template-columns: 1fr; }
  .ctrl-map-row__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .ctrl-log-head, .ctrl-log-row { grid-template-columns: 90px 90px 1fr 60px; }
  .ctrl-log-head span:nth-child(3), .ctrl-log-row .ctrl-log-ip { display: none; }
}

/* ===== SOCIAL MEDIA BOARD ===== */
.sm-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
  min-height: 300px;
}
.sm-col {
  flex: 0 0 260px;
  min-width: 220px;
  max-width: 300px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sm-col-header {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sm-col-count {
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .72rem;
  color: var(--gray);
}
.sm-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sm-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(232,23,158,.35);
  transform: translateY(-1px);
}
.sm-card-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}
.sm-card-meta {
  font-size: .73rem;
  color: var(--gray);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.sm-card-platform {
  background: rgba(255,255,255,.07);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .7rem;
}
.sm-card-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sm-card-actions button {
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--white);
  cursor: pointer;
  transition: background .15s;
}
.sm-card-actions button:hover { background: rgba(255,255,255,.13); }
.sm-card-actions .btn-approve { border-color: rgba(34,197,94,.35); color: #4ade80; }
.sm-card-actions .btn-approve:hover { background: rgba(34,197,94,.15); }
.sm-card-actions .btn-reject { border-color: rgba(239,68,68,.3); color: #f87171; }
.sm-card-actions .btn-reject:hover { background: rgba(239,68,68,.12); }
.sm-card-actions .btn-post { border-color: rgba(59,130,246,.35); color: #60a5fa; }
.sm-card-actions .btn-post:hover { background: rgba(59,130,246,.15); }

/* Social filter bar */
.sm-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: center;
}
.sm-filters select, .sm-filters input {
  font-size: .78rem;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--white);
}

/* Social calendar */
.sm-kal-list { display: flex; flex-direction: column; gap: 10px; }
.sm-kal-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  transition: background .15s;
}
.sm-kal-card:hover { background: rgba(255,255,255,.09); }
.sm-kal-date {
  font-size: .72rem;
  color: var(--gray);
  min-width: 60px;
  text-align: right;
  margin-top: 2px;
}

/* Social archive */
.sm-archiv-list { display: flex; flex-direction: column; gap: 10px; }
.sm-archiv-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background .15s;
}
.sm-archiv-card:hover { background: rgba(255,255,255,.08); }
.sm-archiv-stats {
  display: flex;
  gap: 12px;
  font-size: .73rem;
  color: var(--gray);
  flex-wrap: wrap;
}

/* Social templates */
.sm-vorlagen-list { display: flex; flex-direction: column; gap: 10px; }
.sm-vorlage-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.sm-vorlage-name { font-weight: 600; font-size: .85rem; margin-bottom: 3px; }
.sm-vorlage-prev { font-size: .75rem; color: var(--gray); white-space: pre-wrap; max-height: 48px; overflow: hidden; }

/* Responsive */
@media(max-width:700px) {
  .sm-board { gap: 10px; }
  .sm-col { flex: 0 0 200px; min-width: 180px; }
}

/* ===== SOCIAL MEDIA MODAL — ENHANCED LAYOUT ===== */
.sm-modal-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: 24px;
  align-items: start;
}
@media(max-width: 780px) {
  .sm-modal-grid { grid-template-columns: 1fr; }
  .sm-preview-col { display: none; }
}

/* Preview column */
.sm-preview-col { position: sticky; top: 0; }
.sm-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sm-preview-header select {
  font-size: .73rem;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-family: Outfit, sans-serif;
  outline: none;
}

/* Phone frame */
.sm-ig-phone {
  background: #0e0e0e;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  min-height: 260px;
}

/* ── Feed Post ── */
.sm-ig-feed { background: #0e0e0e; }
.sm-ig-feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.sm-ig-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5c842, #e8179e, #7b2fff);
  flex-shrink: 0;
  border: 2px solid transparent;
  outline: 2px solid rgba(232,23,158,.6);
}
.sm-ig-avatar-sm {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5c842, #e8179e);
  flex-shrink: 0;
}
.sm-ig-username { font-size: .78rem; font-weight: 700; color: #fff; line-height: 1.2; }
.sm-ig-sublabel { font-size: .63rem; color: #888; }
.sm-ig-dots { margin-left: auto; color: #fff; font-size: 1.1rem; letter-spacing: 2px; cursor: default; }
.sm-ig-feed-media {
  width: 100%;
  aspect-ratio: 1;
  background: #1a1a1a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.15);
  font-size: 2.5rem;
}
.sm-ig-feed-actions {
  display: flex;
  gap: 14px;
  padding: 10px 12px 4px;
  font-size: 1.15rem;
}
.sm-ig-feed-caption {
  padding: 0 12px 14px;
  font-size: .73rem;
  color: #e0e0e0;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow: hidden;
}

/* ── Story ── */
.sm-ig-story {
  background: #0e0e0e;
  display: flex;
  flex-direction: column;
  height: 480px;
  position: relative;
  overflow: hidden;
}
.sm-ig-story-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 8px;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, transparent 100%);
}
.sm-ig-story-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.4);
  border-radius: 2px;
}
.sm-ig-story-bar-fill {
  width: 45%;
  height: 100%;
  background: #fff;
  border-radius: 2px;
}
.sm-ig-story-user {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .77rem;
  color: #fff;
  font-weight: 600;
}
.sm-ig-story-media {
  flex: 1;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.2);
  font-size: 3rem;
}
.sm-ig-story-caption {
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
  font-size: .74rem;
  color: #eee;
  line-height: 1.45;
  white-space: pre-wrap;
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

/* ── Reel ── */
.sm-ig-reel { background: #0e0e0e; }
.sm-ig-reel-media {
  width: 100%;
  aspect-ratio: 9/16;
  background: linear-gradient(160deg, #0d0d1a, #1a0d2e);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-height: 330px;
  overflow: hidden;
}
.sm-ig-reel-play {
  position: absolute;
  font-size: 2.5rem;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}
.sm-ig-reel-sidebar {
  position: absolute;
  right: 10px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 1.2rem;
  color: #fff;
}
.sm-ig-reel-caption {
  padding: 10px 12px 14px;
  font-size: .73rem;
  color: #e0e0e0;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow: hidden;
}
.sm-ig-reel-user { font-weight: 700; margin-bottom: 4px; font-size: .77rem; }

/* Copy button */
.sm-copy-btn {
  width: 100%;
  margin-top: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white);
  padding: 9px 14px;
  border-radius: 9px;
  font-size: .78rem;
  cursor: pointer;
  font-family: Outfit, sans-serif;
  transition: background .15s;
  text-align: center;
}
.sm-copy-btn:hover { background: rgba(255,255,255,.11); }

/* ── Media Upload Zone ── */
.sm-media-upload {
  border: 2px dashed rgba(255,255,255,.13);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.sm-media-upload:hover {
  border-color: rgba(232,23,158,.4);
  background: rgba(232,23,158,.04);
}
.sm-media-upload.has-media {
  border-color: rgba(0,200,255,.3);
  background: rgba(0,200,255,.04);
}

/* ── Social In-Tab Stats Bar ── */
.sm-in-tab-dash {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sm-dash-stat {
  background: var(--sc, rgba(255,255,255,.05));
  border: 1px solid var(--sb, rgba(255,255,255,.1));
  border-radius: 13px;
  padding: 13px 18px;
  text-align: center;
  min-width: 80px;
  flex: 1;
  transition: transform .15s;
}
.sm-dash-stat:hover { transform: translateY(-1px); }
.sm-ds-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .04em;
}
.sm-ds-label {
  font-size: .66rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .09em;
  white-space: nowrap;
}
.sm-best-post-bar {
  font-size: .78rem;
  color: var(--gray);
  margin-top: -10px;
  margin-bottom: 20px;
  padding: 9px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Board card with thumbnail */
.sm-card-thumb {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 8px;
  display: block;
}
.sm-card-thumb-placeholder {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 8px;
  border: 1px dashed rgba(255,255,255,.07);
}

/* ===== CONTENT COMPOSER ===== */
.sm-composer-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
@media(max-width:900px) {
  .sm-composer-wrap { grid-template-columns: 1fr; }
  .sm-canvas-col { order: -1; }
}

/* Controls panel */
.sm-composer-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sm-composer-section { display: flex; flex-direction: column; gap: 8px; }
.sm-composer-section h6 {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray);
  font-weight: 700;
  margin: 0;
}

/* Aspect ratio buttons */
.sm-ratio-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sm-ratio-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: var(--white);
  font-family: Outfit, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.sm-ratio-btn small { font-size: .62rem; color: var(--gray); display: block; }
.sm-ratio-btn span { display:block; font-weight:700; }
.sm-format-note{
  font-size:.74rem;
  color:rgba(152,165,186,.84);
  line-height:1.5;
}
.sm-ratio-btn:hover, .sm-ratio-btn.active {
  background: rgba(232,23,158,.18);
  border-color: rgba(232,23,158,.5);
  color: #fff;
}

/* Layout preset buttons */
.sm-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sm-preset-nav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.sm-preset-tab{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:var(--gray);
  font-size:.7rem;
  font-weight:700;
  padding:6px 11px;
  cursor:pointer;
  font-family:Outfit,sans-serif;
}
.sm-preset-tab.active{
  background:rgba(0,200,255,.12);
  border-color:rgba(0,200,255,.35);
  color:var(--cyan);
}
.sm-layout-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: var(--white);
  font-family: Outfit, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  padding: 9px 6px 7px;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background .15s, border-color .15s;
}
.sm-layout-btn span { font-size: .62rem; color: var(--gray); display: block; margin-top: 2px; }
.sm-layout-btn:hover, .sm-layout-btn.active {
  background: rgba(0,200,255,.12);
  border-color: rgba(0,200,255,.35);
}

/* Control inputs */
.sm-c-input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--white);
  font-family: Outfit, sans-serif;
  font-size: .82rem;
  outline: none;
  box-sizing: border-box;
}
.sm-c-input::placeholder { color: rgba(255,255,255,.25); }
.sm-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .75rem;
  color: var(--gray);
}
.sm-color-row input[type=color] {
  width: 36px; height: 26px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  padding: 1px 2px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.sm-slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .73rem;
  color: var(--gray);
}
.sm-slider-row input[type=range] {
  width: 100%;
  accent-color: var(--pink);
  cursor: pointer;
}
.sm-free-controls{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sm-free-note,.sm-video-note{
  font-size:.7rem;
  color:rgba(152,165,186,.8);
  line-height:1.5;
}
.sm-asset-meta{
  font-size:.7rem;
  color:rgba(152,165,186,.8);
  line-height:1.5;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.sm-swatch-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sm-color-swatch{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  cursor:pointer;
  padding:0;
}
.sm-video-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.sm-upload-btn {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--white);
  font-family: Outfit, sans-serif;
  font-size: .78rem;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.sm-upload-btn:hover { background: rgba(255,255,255,.1); }

/* Canvas area */
.sm-canvas-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sm-canvas-hint{
  width:100%;
  text-align:center;
  font-size:.72rem;
  color:rgba(152,165,186,.82);
}
.sm-canvas-wrap {
  background: #080810;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 16px 60px rgba(0,0,0,.6);
  position: relative;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-canvas-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  height: auto;
}
.sm-composer-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.sm-channel-switch{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.sm-channel-pill{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:var(--white);
  border-radius:999px;
  padding:9px 16px;
  font-family:Outfit,sans-serif;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
}
.sm-channel-pill.active{
  background:linear-gradient(135deg,rgba(232,23,158,.2),rgba(0,200,255,.16));
  border-color:rgba(232,23,158,.24);
}
.sm-composer-status{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.sm-composer-status__card{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  gap:5px;
}
.sm-composer-status__card span{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray);
  font-weight:700;
}
.sm-composer-status__card strong{
  color:var(--white);
  font-size:1rem;
}
.sm-composer-status__card small{
  color:rgba(152,165,186,.84);
  font-size:.76rem;
  line-height:1.5;
}
.sm-composer-queues{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}
.sm-composer-queue{
  margin-bottom:0;
}
.sm-queue-card{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:10px;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.sm-queue-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,200,255,.2);
  background:rgba(255,255,255,.045);
}
.sm-queue-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.sm-queue-card__head strong{
  color:var(--white);
  font-size:.92rem;
}
.sm-queue-card__head span{
  color:var(--cyan);
  font-size:.72rem;
  white-space:nowrap;
}
.sm-queue-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:rgba(152,165,186,.84);
  font-size:.74rem;
  margin-bottom:8px;
}
.sm-queue-card__copy{
  color:rgba(244,247,251,.74);
  font-size:.82rem;
  line-height:1.55;
  margin-bottom:12px;
}
.sm-queue-card__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sm-queue-empty{
  padding:18px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.08);
  color:rgba(152,165,186,.84);
  font-size:.82rem;
  text-align:center;
}

/* ===== SOCIAL DASHBOARD ===== */
.sm-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.sm-dash-kpi {
  background: var(--kc, rgba(255,255,255,.05));
  border: 1px solid var(--kb, rgba(255,255,255,.1));
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
  transition: transform .15s;
}
.sm-dash-kpi:hover { transform: translateY(-2px); }
.sm-dash-kpi-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: 5px;
}
.sm-dash-kpi-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray);
}
.sm-dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media(max-width:700px) { .sm-dash-row { grid-template-columns: 1fr; } }
.sm-dash-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 16px 18px;
}
.sm-dash-panel-head {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray);
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sm-perf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  font-size: .82rem;
}
.sm-perf-row:last-child { border-bottom: none; }
.sm-perf-row:hover { color: var(--cyan); }
.sm-perf-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; }
.sm-perf-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--pink), var(--cyan)); }

/* IG Connection status */
.sm-ig-connection {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.sm-ig-conn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.sm-ig-conn-dot.connected { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.5); }
.sm-ig-conn-dot.disconnected { background: #888; }

/* Publish button on board cards */
.sm-publish-btn {
  background: linear-gradient(135deg, rgba(232,23,158,.4), rgba(123,47,255,.4));
  border: 1px solid rgba(232,23,158,.5);
  color: #fff;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: Outfit, sans-serif;
  transition: opacity .15s;
}
.sm-publish-btn:hover { opacity: .8; }
.sm-publish-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Carousel preview */
.sm-ig-carousel {
  background: #0e0e0e;
  position: relative;
}
.sm-ig-carousel-slides {
  display: flex;
  overflow: hidden;
  aspect-ratio: 1;
}
.sm-ig-carousel-slide {
  min-width: 100%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.15);
  font-size: 2rem;
  transition: transform .3s;
}
.sm-ig-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 8px;
}
.sm-ig-carousel-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}
.sm-ig-carousel-dot.active { background: #fff; width: 18px; border-radius: 3px; }
.sm-tk-phone{
  background:#050505;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.sm-tk-media{
  position:relative;
  aspect-ratio:9/16;
  background:#111;
}
.sm-tk-topbar{
  position:absolute;
  top:10px;
  left:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:.62rem;
  font-weight:700;
}
.sm-tk-sidebar{
  position:absolute;
  right:10px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:1.05rem;
  text-align:center;
}
.sm-tk-copy{
  padding:14px 14px 18px;
  color:#fff;
  font-size:.8rem;
  line-height:1.5;
}
.sm-tk-copy strong{
  display:block;
  margin-bottom:6px;
}
.sm-tk-cover{
  background:#0a0a0a;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.sm-tk-cover-media{
  aspect-ratio:3/4;
  background:#111;
}
.sm-tk-cover-copy{
  padding:14px;
  color:#fff;
  font-size:.86rem;
  line-height:1.5;
}
.sm-tk-grid{
  background:#080808;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.sm-tk-grid-media{
  aspect-ratio:1/1;
  background:#111;
}
.sm-tk-grid-meta{
  padding:10px 12px;
  color:var(--gray);
  font-size:.72rem;
}

/* ═══════════════════════════════════════════════════════ */
/* COMPOSER EXTENDED – Font, Logo, Palette, Toolbar       */
/* ═══════════════════════════════════════════════════════ */

/* Panel: make scrollable on tall content */
.sm-composer-panel {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sm-composer-panel::-webkit-scrollbar { width: 4px; }
.sm-composer-panel::-webkit-scrollbar-track { background: transparent; }
.sm-composer-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Layout grid – 3 columns for 15 presets */
.sm-layout-grid { grid-template-columns: 1fr 1fr 1fr; }

/* Section divider */
.sm-section-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0 -16px;
}

/* Ghost small button */
.sm-ghost-btn {
  background: none;
  border: none;
  color: var(--gray);
  font-size: .72rem;
  cursor: pointer;
  text-align: left;
  padding: 2px 0;
  font-family: Outfit, sans-serif;
  transition: color .15s;
}
.sm-ghost-btn:hover { color: rgba(255,255,255,.5); }

/* Font selector grid */
.sm-font-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.sm-font-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--white);
  font-size: .7rem;
  font-weight: 600;
  padding: 8px 6px 6px;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background .15s, border-color .15s;
}
.sm-font-btn small { font-size: .58rem; color: var(--gray); display: block; margin-top: 2px; font-family: Outfit, sans-serif; }
.sm-font-btn:hover, .sm-font-btn.active {
  background: rgba(232,23,158,.15);
  border-color: rgba(232,23,158,.45);
}

/* Text alignment buttons */
.sm-align-btns { display: flex; gap: 5px; }
.sm-align-btn {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  color: var(--gray);
  font-size: .75rem;
  padding: 6px 0;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
  font-family: Outfit, sans-serif;
}
.sm-align-btn:hover, .sm-align-btn.active {
  background: rgba(0,200,255,.1);
  border-color: rgba(0,200,255,.35);
  color: var(--cyan);
}

/* Toggle button (uppercase, safe zone) */
.sm-toggle-btn {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--gray);
  font-family: Outfit, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
.sm-toggle-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.sm-toggle-btn.active {
  background: rgba(0,200,255,.1);
  border-color: rgba(0,200,255,.3);
  color: var(--cyan);
}

/* Logo position grid */
.sm-logo-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.sm-logo-pos-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  color: var(--gray);
  font-family: Outfit, sans-serif;
  font-size: .67rem;
  padding: 7px 4px;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.sm-logo-pos-btn:hover, .sm-logo-pos-btn.active {
  background: rgba(123,47,255,.15);
  border-color: rgba(123,47,255,.45);
  color: #c4a1ff;
}
.sm-logo-library{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.sm-logo-library-empty{
  grid-column:1/-1;
  font-size:.72rem;
  color:rgba(152,165,186,.8);
  padding:12px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.08);
  text-align:center;
}
.sm-logo-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.sm-logo-card__preview{
  border:none;
  background:rgba(255,255,255,.04);
  border-radius:8px;
  min-height:72px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sm-logo-card__preview img{
  max-width:100%;
  max-height:56px;
  object-fit:contain;
}
.sm-logo-card__meta strong{
  display:block;
  font-size:.72rem;
  color:var(--white);
}
.sm-logo-card__meta small{
  color:var(--gray);
  font-size:.64rem;
}

/* Brand palette chips */
.sm-palette-row { display: flex; gap: 7px; flex-wrap: wrap; }
.sm-palette-chip {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.12);
  transition: transform .15s, border-color .15s;
  position: relative;
  flex-shrink: 0;
}
.sm-palette-chip:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,.45);
}
.sm-palette-chip span {
  display: none;
  position: absolute;
  bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: .58rem; color: var(--gray); white-space: nowrap;
  font-family: Outfit, sans-serif;
  background: rgba(0,0,0,.7); padding: 1px 5px; border-radius: 4px;
}
.sm-palette-chip:hover span { display: block; }

/* Canvas toolbar (above canvas) */
.sm-canvas-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
  width: 100%;
}
.sm-canvas-toolbar-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--gray);
  font-family: Outfit, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sm-canvas-toolbar-btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.sm-canvas-toolbar-btn.active {
  background: rgba(255,220,0,.1);
  border-color: rgba(255,220,0,.35);
  color: #ffe566;
}

/* Composer wrap – tighter on mobile */
@media(max-width:700px) {
  .sm-composer-panel { max-height: none; overflow-y: visible; }
  .sm-layout-grid { grid-template-columns: 1fr 1fr; }
  .sm-font-grid { grid-template-columns: 1fr 1fr 1fr; }
  .sm-composer-status,
  .sm-composer-queues { grid-template-columns: 1fr; }
  .sm-video-grid,
  .sm-logo-library { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════ */
/* INSTAGRAM API-MODE SELECTOR            */
/* ═══════════════════════════════════════ */
.ig-mode-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 180px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: Outfit, sans-serif;
  font-size: .82rem;
  color: var(--white);
  line-height: 1.4;
  transition: background .15s, border-color .15s;
  user-select: none;
}
.ig-mode-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.ig-mode-btn.active {
  background: rgba(0,200,255,.08);
  border-color: rgba(0,200,255,.4);
}
.ig-mode-btn span { font-size: .72rem; color: var(--gray); }

/* Pack Overlay */
.pack-overlay { display: none; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pack-overlay.open { display: flex; }
@media(max-width:768px){
  .pack-overlay { padding-bottom: env(safe-area-inset-bottom, 20px); }
}


/* ===== Control Header Reset ===== */
#tab-control{position:static;isolation:auto;overflow:visible;width:100%;max-width:100%;min-width:0}
#tab-control::before{content:none}
#tab-control > *{position:relative;z-index:auto;min-width:0}
.ctrl-grid-2,.ctrl-panel,.ctrl-header{min-width:0}
.ctrl-header-standalone{margin-bottom:14px}
.ctrl-header-standalone .ctrl-subtitle{margin-top:4px}
/* mobile overrides moved to mobile.css */

/* ===== 2026 Redesign Pass ===== */
:root{
  --black:#0a0a0f;
  --dark:#12121a;
  --card:#1a1a26;
  --card-2:#221f34;
  --card-soft:rgba(255,255,255,.04);
  --line:rgba(232,23,158,.12);
  --line-strong:rgba(0,200,255,.24);
  --purple:#7b2fff;
  --cyan:#00c8ff;
  --pink:#e8179e;
  --yellow:#ffe600;
  --white:#f0f0ff;
  --gray:#8888aa;
}
body{
  background:
    radial-gradient(circle at top left, rgba(0,200,255,.08), transparent 30%),
    radial-gradient(circle at top right, rgba(232,23,158,.08), transparent 30%),
    linear-gradient(180deg,#0a0a0f 0%,#11111a 100%);
  color:var(--white);
}
body::before{opacity:.18}
nav{
  background:rgba(10,10,15,.82);
  border-bottom:1px solid rgba(232,23,158,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.nav-links a{color:rgba(244,247,251,.64)}
.nav-links a:hover{color:var(--white)}
.nav-cta{
  background:linear-gradient(135deg,rgba(232,23,158,.16),rgba(123,47,255,.18));
  border:1px solid rgba(232,23,158,.24);
  box-shadow:0 0 24px rgba(232,23,158,.16);
}
.nav-cta:hover{opacity:1;transform:translateY(-1px)}
.page{
  background:
    radial-gradient(circle at 10% 0%,rgba(0,200,255,.06),transparent 28%),
    radial-gradient(circle at 100% 0%,rgba(232,23,158,.07),transparent 26%),
    linear-gradient(180deg,rgba(10,10,15,.96) 0%,rgba(13,12,22,.98) 100%);
}
.section{padding:110px 48px}
.section-label{
  color:var(--pink);
  letter-spacing:3px;
  font-weight:700;
}
.section-title{
  letter-spacing:2px;
  max-width:10ch;
}
.section-sub{color:rgba(152,165,186,.92)}
.glow-line{
  opacity:.16;
  background:linear-gradient(90deg,transparent,rgba(125,227,255,.44),rgba(255,95,168,.35),transparent);
}
#hero{min-height:calc(100vh - 10px)}
.hero-bg-photo{
  opacity:.42;
  filter:saturate(1.05) contrast(1.06) brightness(.82);
}
.hero-bg-overlay{
  background:
    linear-gradient(180deg,rgba(8,10,15,.7) 0%,rgba(8,10,15,.52) 34%,rgba(8,10,15,.76) 100%),
    linear-gradient(120deg,rgba(10,16,24,.26),transparent 35%,rgba(255,95,168,.08) 100%);
}
.hero-grid{
  background-image:
    linear-gradient(rgba(125,227,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,227,255,.03) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.65;
}
.hero-content{max-width:980px}
.hero-badge{
  background:rgba(232,23,158,.12);
  border:1px solid rgba(232,23,158,.35);
  color:var(--cyan);
  padding:8px 18px;
  backdrop-filter:blur(10px);
}
.hero-badge::before{
  content:'●';
  color:var(--pink);
  font-size:.5rem;
  animation:pulse 1.5s ease infinite;
}
.hero-title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:clamp(2.4rem,10.5vw,7.8rem);
  line-height:1;
  letter-spacing:1px;
  text-transform:uppercase;
  text-wrap:balance;
}
.hero-title .line2{
  background:linear-gradient(90deg,#e8179e 0%,#00c8ff 25%,#c026d3 50%,#00c8ff 75%,#e8179e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:300% 100%;
}
.hero-sub{
  max-width:640px;
  color:rgba(244,247,251,.72);
  font-size:1.02rem;
}
.hero-btns{gap:14px}
.btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  box-shadow:0 0 30px rgba(232,23,158,.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 50px rgba(232,23,158,.55);
}
.btn-secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:var(--white);
}
.btn-secondary:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  background:transparent;
}
.hero-stats{
  gap:18px;
  margin-top:54px;
  flex-wrap:wrap;
}
.stat{
  min-width:138px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(14,18,26,.76);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.stat-num{
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:2.3rem;
}
.stat-label{
  color:rgba(152,165,186,.84);
  letter-spacing:1.5px;
}
.scroll-indicator{color:rgba(152,165,186,.7)}

.services-grid,
.about-values,
.team-grid{gap:20px}
.service-card,
.value-card,
.team-card,
.price-card,
.video-embed-card,
.form-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02)),
    var(--card);
  border:1px solid var(--line);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}
.service-card,
.value-card,
.team-card{border-radius:22px}
.service-card:hover,
.value-card:hover,
.team-card:hover,
.price-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
}
.service-icon,
.value-icon{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.service-card p,
.value-card p,
.team-desc{color:rgba(152,165,186,.9)}
.portfolio-item,
.gallery-item,
.video-embed-card{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 34px rgba(0,0,0,.14);
}
.portfolio-overlay{
  background:linear-gradient(180deg,transparent 20%,rgba(9,11,16,.08) 45%,rgba(9,11,16,.92) 100%);
}
.filter-btn,
.genre-chip{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(244,247,251,.72);
}
.filter-btn.active,
.genre-chip.active{
  background:rgba(255,255,255,.95);
  color:#0f1622;
  border-color:transparent;
}

.home-cta-band{
  margin:32px auto 0;
  max-width:1280px;
  padding:88px 40px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(125,227,255,.1), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255,95,168,.14), transparent 30%),
    linear-gradient(135deg,rgba(15,20,29,.96),rgba(10,13,20,.98));
}
.home-cta-band__kicker{
  font-size:.78rem;
  color:var(--cyan);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:14px;
  font-weight:700;
}
.home-cta-band__title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:clamp(2.7rem,5.8vw,5.1rem);
  letter-spacing:1px;
  line-height:1;
  margin-bottom:22px;
  text-transform:uppercase;
}
.home-cta-band__title span{
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.home-cta-band__button{padding:16px 42px}

.booking-layout{gap:42px;align-items:start}
.booking-copy{
  position:sticky;
  top:calc(var(--nav-h) + 42px);
  align-self:start;
}
.booking-title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:clamp(2.5rem,4.8vw,4.1rem);
  letter-spacing:1px;
  line-height:1;
  margin-bottom:18px;
  text-transform:uppercase;
}
.booking-title span{
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.booking-copy-text{
  color:rgba(244,247,251,.72);
  line-height:1.8;
  margin-bottom:28px;
  max-width:42ch;
}
.booking-features{
  gap:12px;
  margin-top:0;
}
.booking-features li{
  color:rgba(244,247,251,.9);
  font-size:.92rem;
}
.booking-features li::before{
  background:rgba(255,255,255,.92);
  color:#101825;
}
.booking-contact-card{
  margin-top:32px;
  padding:22px 24px;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.booking-contact-card__label{
  font-size:.74rem;
  color:var(--pink);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
  font-weight:700;
}
.booking-contact-card__item{
  font-size:.96rem;
  color:var(--white);
}
.booking-contact-card__item + .booking-contact-card__item{margin-top:8px}
.form-card{
  border-radius:28px;
  padding:42px 40px;
}
.booking-form-title{
  font-size:1.22rem;
  font-weight:700;
  margin-bottom:24px;
  color:var(--white);
}
.form-group label{color:rgba(152,165,186,.9)}
.form-group input,
.form-group select,
.form-group textarea{
  background:rgba(9,11,16,.42);
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:rgba(125,227,255,.42);
  box-shadow:0 0 0 3px rgba(125,227,255,.08);
}

.about-intro{
  text-align:center;
  padding:92px 40px 48px;
  max-width:860px;
  margin:0 auto;
}
.about-intro__kicker{
  font-size:.78rem;
  color:var(--pink);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:14px;
  font-weight:700;
}
.about-intro__title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:clamp(3rem,7vw,5.8rem);
  letter-spacing:1px;
  line-height:1;
}
.about-intro__title span{
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.about-intro__copy{
  margin-top:24px;
  color:rgba(244,247,251,.72);
  font-size:1.05rem;
  line-height:1.85;
}
.about-team-wrap{
  padding:0 40px 90px;
  max-width:1200px;
  margin:0 auto;
}
.dj-card{
  background:
    radial-gradient(circle at top left, rgba(125,227,255,.08), transparent 28%),
    linear-gradient(135deg,rgba(22,27,36,.96),rgba(16,20,27,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px rgba(0,0,0,.14);
}
.dj-role{color:var(--cyan)}

#page-employee{
  background:
    radial-gradient(circle at 0% 0%, rgba(123,47,255,.14), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(0,200,255,.1), transparent 22%),
    radial-gradient(circle at 80% 100%, rgba(232,23,158,.08), transparent 28%),
    linear-gradient(180deg,#09090f 0%,#12121c 100%) !important;
}
.login-wrapper{
  background:
    radial-gradient(circle at 20% 20%, rgba(0,200,255,.1), transparent 24%),
    radial-gradient(circle at 85% 10%, rgba(232,23,158,.1), transparent 22%);
}
.login-card{
  background:
    radial-gradient(circle at top right, rgba(0,200,255,.08), transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)),
    #151521;
  border:1px solid rgba(232,23,158,.14);
  border-radius:28px;
  box-shadow:0 28px 60px rgba(0,0,0,.22);
  text-align:left;
}
.login-card img{
  width:104px;
  margin-bottom:18px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.24));
}
.login-card h2{
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:2px;
  font-size:2.2rem;
  text-transform:uppercase;
}
.login-error{
  background:rgba(248,113,113,.08);
  border-color:rgba(248,113,113,.24);
  color:#ffb2b2;
}
.employee-dashboard.active-dash{
  gap:22px !important;
  padding:20px !important;
}
.employee-dashboard.active-dash::before{
  background:
    radial-gradient(circle at 0% 0%, rgba(123,47,255,.16), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(0,200,255,.1), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(232,23,158,.08), transparent 28%);
  filter:none;
  animation:none;
}
.employee-dashboard.active-dash::after{display:none}
.employee-dashboard.active-dash .emp-sidebar{
  width:282px;
  max-width:282px;
  flex-basis:282px;
}
.emp-sidebar{
  background:
    linear-gradient(180deg,rgba(26,22,38,.97),rgba(15,13,24,.99));
  border:1px solid rgba(232,23,158,.14);
  border-right-color:rgba(0,200,255,.14);
  border-radius:24px;
  box-shadow:0 24px 48px rgba(0,0,0,.22);
}
.emp-sidebar-top,
.emp-sidebar-footer{
  border-color:rgba(255,255,255,.06);
}
.emp-sidebar-logo{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem;
  letter-spacing:4px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.emp-sidebar-welcome{color:var(--pink)}
.emp-sidebar-name{
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:2px;
  font-size:1.4rem;
}
.emp-nav{padding:14px}
.emp-nav-label{
  color:rgba(152,165,186,.5);
  letter-spacing:1.5px;
  padding:0 10px;
}
.emp-nav-item{
  color:rgba(244,247,251,.72);
  border:1px solid transparent;
  border-radius:14px;
  padding:10px 12px;
  font-size:.88rem;
  font-weight:600;
}
.emp-nav-item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(0,200,255,.14);
  color:var(--white);
  transform:none;
}
.emp-nav-item.active,
.ctrl-home-item.active{
  background:linear-gradient(135deg,rgba(232,23,158,.18),rgba(123,47,255,.18));
  border-color:rgba(232,23,158,.3);
  box-shadow:0 10px 24px rgba(232,23,158,.14);
  color:var(--white);
}
.btn-logout{
  background:rgba(232,23,158,.1);
  border:1px solid rgba(232,23,158,.3);
  color:var(--pink);
}
.btn-logout:hover{background:rgba(232,23,158,.16)}
.emp-content{
  padding:0;
  overflow:visible;
}
.employee-dashboard .editor-panel.active{
  background:
    radial-gradient(circle at top right, rgba(0,200,255,.06), transparent 22%),
    radial-gradient(circle at top left, rgba(232,23,158,.06), transparent 26%),
    linear-gradient(180deg,rgba(19,17,31,.9),rgba(13,12,22,.94));
  border:1px solid rgba(255,255,255,.07);
  border-radius:28px;
  padding:28px;
  box-shadow:0 24px 48px rgba(0,0,0,.16);
}
.perm-notice{
  background:rgba(0,200,255,.08);
  border-color:rgba(0,200,255,.2);
  color:rgba(244,247,251,.8);
  border-radius:14px;
}
.tab-btn{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(244,247,251,.72);
  border-radius:999px;
  padding:8px 16px;
}
.tab-btn.active{
  background:linear-gradient(135deg,rgba(232,23,158,.2),rgba(0,200,255,.16));
  color:var(--white);
  border-color:rgba(232,23,158,.22);
}
.edit-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)),
    rgba(12,17,24,.74);
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  box-shadow:0 18px 34px rgba(0,0,0,.12);
}
.edit-card h4{
  font-size:1.02rem;
  color:var(--white);
  margin-bottom:16px;
}
.workspace-hero,
.website-editor-hero{
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02)),
    rgba(19,26,36,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
}
.workspace-kicker,
.website-editor-kicker{color:var(--pink)}
.workspace-lead,
.website-editor-lead,
.equipment-section-copy,
.website-step-copy,
.website-stat-label{color:rgba(152,165,186,.88)}
.website-stat-card,
.website-step-card,
.tool-card-grid > *,
.equip-instance-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.edit-field label{color:rgba(152,165,186,.9)}
.edit-field input,
.edit-field textarea,
.edit-field select{
  background:rgba(9,11,16,.46);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
}
.edit-field input:focus,
.edit-field textarea:focus,
.edit-field select:focus{
  border-color:rgba(0,200,255,.42);
  box-shadow:0 0 0 3px rgba(0,200,255,.08);
}
.btn-save{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  border:1px solid transparent;
}
.btn-save:hover{opacity:1;filter:brightness(1.06)}
.btn-danger{
  background:rgba(248,113,113,.08);
  border-color:rgba(248,113,113,.22);
  color:#ffb2b2;
}

#dashIntro{backdrop-filter:blur(8px);background:rgba(9,11,16,.88)}
.ctrl-home-item{
  background:transparent;
  border:1px solid transparent;
  color:rgba(244,247,251,.76);
}
.ctrl-home-item.active,
.ctrl-home-item:hover{
  background:linear-gradient(135deg,rgba(232,23,158,.14),rgba(123,47,255,.14));
  color:var(--white);
  border-color:rgba(232,23,158,.2);
}
.ctrl-header{
  align-items:flex-end;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ctrl-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.2rem;
  letter-spacing:4px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.ctrl-subtitle{color:rgba(152,165,186,.88)}
.ctrl-pulse-dot{
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,200,255,.6);
}
.ctrl-refresh-btn,
.ctrl-clear-btn,
.maintenance-preview-btn{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  color:rgba(244,247,251,.82);
  border-radius:999px;
}
.ctrl-refresh-btn:hover,
.ctrl-clear-btn:hover,
.maintenance-preview-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:var(--white);
}
.ctrl-marquee{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
}
.ctrl-marquee-pill{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.08);
  border-radius:14px;
}
.ctrl-card,
.ctrl-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)),
    rgba(12,17,24,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:none;
}
.ctrl-card::before{display:none}
.ctrl-card-label,
.ctrl-card-sub,
.ctrl-summary-label,
.ctrl-today-label,
.ctrl-empty,
.ctrl-user-meta,
.ctrl-log-time,
.ctrl-log-ip,
.ctrl-log-device,
.ctrl-map-meta,
.ctrl-map-row__meta,
.ctrl-next-ev-loc,
.ctrl-activity-meta{
  color:rgba(152,165,186,.86);
}
.ctrl-stat-num,
.ctrl-summary-value,
.ctrl-today-val,
.ctrl-next-ev-title{color:var(--white)}
.ctrl-badge{
  background:rgba(232,23,158,.08);
  border-color:rgba(232,23,158,.16);
  color:var(--cyan);
}
.ctrl-user-row,
.ctrl-log-row{
  border-color:rgba(255,255,255,.05);
}
.ctrl-user-row:hover,
.ctrl-log-row:hover{background:rgba(255,255,255,.02)}
.ctrl-log-head{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.05);
}
.ctrl-qa-btn{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:rgba(244,247,251,.86);
}
.ctrl-qa-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(0,200,255,.18);
  color:var(--white);
}
.ctrl-today-row{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.05);
  border-radius:14px;
}
.ctrl-summary-row,
.ctrl-map-row{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.05);
}

.employee-setup-hero{
  margin-bottom:20px;
}
.employee-setup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.employee-setup-card{
  margin-bottom:0;
}
.employee-setup-card--wide{
  margin-top:16px;
}
.employee-setup-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.employee-setup-toggle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(244,247,251,.88);
  font-size:.9rem;
  cursor:pointer;
}
.employee-setup-toggle:first-of-type{
  border-top:none;
  padding-top:2px;
}
.employee-setup-toggle input{
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:var(--pink);
  flex-shrink:0;
}
.employee-setup-note{
  margin-top:8px;
  color:rgba(152,165,186,.82);
  font-size:.8rem;
  line-height:1.55;
}
.employee-setup-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.employee-setup-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.employee-setup-pill{
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  gap:5px;
}
.employee-setup-pill span{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(152,165,186,.78);
  font-weight:700;
}
.employee-setup-pill strong{
  font-size:.98rem;
  color:var(--white);
}
.employee-setup-pill small{
  font-size:.76rem;
  color:rgba(152,165,186,.86);
  line-height:1.5;
}

.maintenance-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,200,255,.08), transparent 25%),
    radial-gradient(circle at 80% 0%, rgba(232,23,158,.12), transparent 24%),
    linear-gradient(180deg,rgba(10,10,15,.98),rgba(13,12,22,1));
  text-align:center;
  font-family:'Outfit',sans-serif;
}
.maintenance-overlay__glow{
  position:absolute;
  inset:auto;
  width:540px;
  height:540px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,23,158,.1) 0%, rgba(232,23,158,0) 68%);
  filter:blur(16px);
  transform:translateY(18%);
}
.maintenance-overlay__shell{
  position:relative;
  z-index:1;
  max-width:560px;
  padding:52px 40px 44px;
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
}
.maintenance-overlay__kicker{
  font-size:.74rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:12px;
  font-weight:700;
}
.maintenance-overlay__icon{
  font-size:3.2rem;
  margin-bottom:18px;
}
.maintenance-overlay__title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.5rem,7vw,4.3rem);
  line-height:.98;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:16px;
}
.maintenance-overlay__message{
  color:rgba(244,247,251,.74);
  font-size:1rem;
  line-height:1.8;
  margin-bottom:18px;
}
.maintenance-overlay__eta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#ffdfa0;
  font-size:.9rem;
  margin-bottom:12px;
}
.maintenance-overlay__meta{
  font-size:.78rem;
  color:rgba(152,165,186,.82);
  margin:6px 0 20px;
}
.maintenance-overlay__signature{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  color:rgba(244,247,251,.82);
  font-size:.86rem;
  letter-spacing:.4px;
}
.maintenance-overlay__seal{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.2rem;
}
.maintenance-overlay__admin{
  margin-top:30px;
  padding:8px 14px;
  background:none;
  border:none;
  color:rgba(255,255,255,.18);
  font-size:.68rem;
  cursor:pointer;
  font-family:'Outfit',sans-serif;
  transition:color .2s ease;
}
.maintenance-overlay__admin:hover{color:rgba(255,255,255,.34)}

.maintenance-card{
  background:
    radial-gradient(circle at top right, rgba(255,209,92,.08), transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),
    rgba(13,18,26,.9);
}
.maintenance-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.maintenance-status-row{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px 22px;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:20px;
}
.maintenance-status-row__indicator{
  width:16px;
  height:16px;
  border-radius:50%;
  flex-shrink:0;
  background:#555;
  box-shadow:0 0 0 4px rgba(85,85,85,.2);
}
.maintenance-status-row__copy{flex:1}
.maintenance-status-row__title{
  font-weight:700;
  font-size:1rem;
  color:var(--white);
}
.maintenance-status-row__text{
  font-size:.82rem;
  color:rgba(152,165,186,.9);
  margin-top:4px;
}
.maintenance-toggle{
  position:relative;
  display:inline-block;
  width:58px;
  height:32px;
  flex-shrink:0;
}
.maintenance-toggle__track{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#243040;
  border-radius:999px;
  transition:.3s;
  border:1px solid rgba(255,255,255,.08);
}
.maintenance-toggle__knob{
  position:absolute;
  left:4px;
  bottom:4px;
  width:22px;
  height:22px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
  display:block;
}
.maintenance-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.maintenance-field--full{grid-column:1 / -1}
.maintenance-actions{margin-top:18px}
.maintenance-note{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(152,165,186,.84);
  font-size:.8rem;
  line-height:1.6;
}
.maintenance-card--subtle{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012)),
    rgba(11,16,23,.84);
}

@media(max-width:900px){
  .section{padding:72px 22px}
  .home-cta-band{padding:64px 24px}
  .booking-copy{
    position:static;
    top:auto;
  }
  .booking-layout{gap:28px}
  .about-intro{padding:76px 22px 36px}
  .about-team-wrap{padding:0 22px 76px}
  .employee-dashboard.active-dash{padding:16px !important}
  .employee-dashboard .editor-panel.active{
    padding:18px;
    border-radius:22px;
  }
  .employee-setup-grid,
  .employee-setup-summary{
    grid-template-columns:1fr;
  }
  .employee-setup-fields{
    grid-template-columns:1fr;
  }
  .maintenance-form-grid{grid-template-columns:1fr}
  .maintenance-field--full{grid-column:auto}
}
@media(max-width:700px){
  .hero-stats{gap:12px}
  .stat{width:100%}
  .home-cta-band__title{letter-spacing:2px}
  .maintenance-overlay__shell{
    width:min(92vw,560px);
    padding:40px 22px 32px;
    border-radius:22px;
  }
  .maintenance-status-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }
}