:root{--bg:#f4f6fb;--card:#fff;--text:#121827;--muted:#667085;--line:#e6e8ef;--primary:#6d28d9;--primary2:#2563eb;--green:#22c55e;--red:#ef4444;--orange:#f59e0b;--dark:#070b14;}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text); min-height:100vh; display:flex; flex-direction:column;}
button,input,select,textarea{font-family:inherit}
button{border:0;cursor:pointer}
.topbar{height:66px;display:flex;justify-content:space-between;align-items:center;padding:0 34px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo{width:40px;height:40px;display:grid;place-items:center;background:#ede9fe;border-radius:13px}
.brand strong{display:block;font-size:20px}
.brand small{color:var(--muted);font-size:12px}
nav{display:flex;gap:8px}
nav button,.secondary{background:#f3f4f6;color:#111827;padding:11px 15px;border-radius:10px;font-weight:700}
nav button:hover,.secondary:hover{background:#e5e7eb}
.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-radius:11px;padding:12px 18px;font-weight:900}
.danger{background:#fee2e2;color:#991b1b;border-radius:9px;padding:9px 12px;font-weight:800}
.hero{min-height:340px;background:linear-gradient(90deg,rgba(7,11,20,.92),rgba(7,11,20,.35)),url("https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?auto=format&fit=crop&w=1800&q=80");background-size:cover;background-position:center;color:#fff;display:flex;align-items:center}
.hero-inner{max-width:1180px;margin:auto;width:100%;padding:42px 24px}
.pill{display:inline-flex;background:rgba(109,40,217,.92);color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;letter-spacing:.04em}
.hero h1{font-size:46px;line-height:1.05;margin:18px 0 10px}
.hero p{font-size:18px;color:#e5e7eb;max-width:650px}
.searchbar{display:grid;grid-template-columns:1fr 210px 130px;max-width:880px;background:#fff;border-radius:16px;overflow:hidden;margin-top:24px;box-shadow:0 20px 55px rgba(0,0,0,.25)}
.searchbar input,.searchbar select{border:0;padding:17px;outline:none;border-right:1px solid var(--line)}
.searchbar button{border-radius:0}
.container{max-width:1180px;margin:0 auto;padding:30px 24px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card,.panel,.side-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(20,24,39,.06)}
.card{overflow:hidden}
.card-img{height:165px;background-size:cover;background-position:center;position:relative}
.badge{position:absolute;left:13px;top:13px;background:rgba(109,40,217,.94);padding:7px 10px;border-radius:9px;color:#fff;font-size:12px;font-weight:900}
.card-body{padding:17px}
.card-body h3{margin:0 0 10px}
.meta{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:14px}
.card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px}
.status{font-weight:900;font-size:13px}
.ok{color:var(--green)}
.warn{color:var(--orange)}
.bad{color:var(--red)}
.details-hero{min-height:350px;color:#fff;background-size:cover;background-position:center;position:relative;display:flex;align-items:end}
.details-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,11,20,.94),rgba(7,11,20,.28))}
.details-inner{position:relative;max-width:1180px;margin:auto;width:100%;padding:32px 24px}
.details-inner h1{font-size:48px;margin:12px 0}
.two-col{max-width:1180px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1fr 370px;gap:24px}
.panel{padding:22px}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.info{border:1px solid var(--line);border-radius:13px;padding:13px}
.info small{display:block;color:var(--muted);margin-bottom:5px}
.price{display:flex;justify-content:space-between;font-size:22px;font-weight:900;border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.seat-layout{max-width:1280px;margin:auto;padding:26px 24px;display:grid;grid-template-columns:1fr 370px;gap:24px}
.seat-map{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;overflow:auto}
.stage{width:330px;max-width:100%;margin:12px auto 24px;background:#111827;color:#fff;padding:18px;border-radius:9px;text-align:center;font-weight:900;letter-spacing:.08em}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:16px 0}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px}
.seats-grid{display:grid;gap:8px;justify-content:center}
.seat{width:25px;height:25px;border-radius:50%;transition:.13s;border:2px solid transparent}
.seat:hover{transform:scale(1.18)}
.available{background:#7bd957}
.reserved{background:#cfd3da;cursor:not-allowed}
.blocked{background:#ef4444;cursor:not-allowed}
.vip{background:#f59e0b}
.selected{background:#2563eb!important;border-color:#111827}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.form-group label{font-size:13px;font-weight:800}
.form-group input,.form-group select,.form-group textarea{border:1px solid var(--line);border-radius:10px;padding:13px;outline:none}
.form-group textarea{min-height:110px}
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 66px)}
.sidebar{background:#070b14;color:#fff;padding:22px}
.sidebar button{width:100%;text-align:left;background:transparent;color:#e5e7eb;padding:12px;border-radius:10px;margin-bottom:6px}
.sidebar button:hover{background:#4c1d95}
.admin-main{padding:26px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.stat strong{display:block;font-size:30px;color:var(--primary)}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.table th,.table td{padding:13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{background:#f8fafc}
.notice{background:#eef2ff;border:1px solid #c7d2fe;color:#312e81;padding:13px;border-radius:12px;margin:12px 0}
.confirm{max-width:780px;margin:44px auto;padding:24px}
footer,.footer{margin-top:auto; display:flex;justify-content:space-between;gap:20px;padding:28px 34px;background:#fff;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:950px){.grid,.two-col,.seat-layout,.admin-layout,.stats{grid-template-columns:1fr}
.searchbar{grid-template-columns:1fr}
.topbar{padding:0 16px}
nav{display:none}
.info-grid{grid-template-columns:1fr}
}
.actions{display:flex;gap:7px;flex-wrap:wrap;}
.details-hero.concert:before{background:linear-gradient(0deg,rgba(4,5,15,.96),rgba(109,40,217,.35));}
.classic-panel{border-left:5px solid var(--primary2);}
.concert-panel{background:#0b1020;color:#fff;border-color:#1f2a44;}
.concert-panel .meta,.concert-panel p{color:#cbd5e1;}
.concert-panel .info{background:#111827;border-color:#263249;}
.balcony{background:#a855f7;}
.admin-seat-box{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:10px;}
.admin-seat{height:44px;border-radius:10px;font-size:11px;font-weight:900;color:#111;background:#e5e7eb;}
.admin-seat.available{background:#bbf7d0;}
.admin-seat.reserved{background:#e5e7eb;}
.admin-seat.blocked{background:#fecaca;}
.admin-seat.vip{background:#fde68a;}
.admin-seat.balcony{background:#ddd6fe;}
.venue-layout-info{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0 18px;color:var(--muted);}
.venue-layout-info b{color:var(--text);}
.venue-layout-wrapper{margin-top:10px;}
.venue-layout-wrapper.concert-layout .stage,.venue-layout-wrapper.theatre-layout .stage{width:330px;max-width:100%;margin:12px auto 24px;background:#111827;color:#fff;padding:18px;border-radius:9px;text-align:center;font-weight:900;letter-spacing:.08em;}
.venue-layout-wrapper.sport-layout{display:grid;grid-template-columns:1fr 280px 1fr;gap:22px;align-items:center;justify-content:center;}
.sport-arena{min-height:260px;border:3px solid #111827;border-radius:28px;display:grid;place-items:center;background:linear-gradient(90deg,transparent 49%,rgba(17,24,39,.28) 50%,transparent 51%),linear-gradient(0deg,rgba(34,197,94,.14),rgba(34,197,94,.05));color:#111827;font-weight:900;text-align:center;}
.sport-arena span{display:block;font-size:13px;color:var(--muted);margin-top:5px;}
.sport-side{display:flex;justify-content:center;}
.sport-side .seats-grid{justify-content:center;}
.venue-layout-wrapper.conference-layout{display:grid;grid-template-columns:1fr 150px;gap:22px;align-items:center;}
.conference-stage{min-height:260px;background:#111827;color:#fff;border-radius:16px;display:grid;place-items:center;text-align:center;padding:18px;font-weight:900;letter-spacing:.05em;}
.conference-stage small{display:block;color:#cbd5e1;margin-top:6px;font-weight:600;letter-spacing:0;}
.venue-layout-wrapper.theatre-layout .stage{background:linear-gradient(135deg,#3b0764,#111827);}
.venue-layout-wrapper.workshop-layout{display:grid;grid-template-columns:1fr 180px;gap:22px;align-items:center;}
.workshop-zone{min-height:230px;border:2px dashed #7c3aed;border-radius:18px;background:#f5f3ff;display:grid;place-items:center;text-align:center;color:#4c1d95;font-weight:900;padding:18px;}
@media(max-width:950px){.venue-layout-wrapper.sport-layout,.venue-layout-wrapper.conference-layout,.venue-layout-wrapper.workshop-layout{grid-template-columns:1fr;}
.sport-arena,.conference-stage,.workshop-zone{min-height:160px;}
}
.toast-box{position:fixed;right:22px;bottom:22px;z-index:9999;display:grid;gap:10px;}
.toast{background:#111827;color:#fff;padding:13px 16px;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.25);font-weight:800;max-width:360px;}
.toast.success{background:#166534;}
.toast.error{background:#991b1b;}
.toast.warning{background:#92400e;}
.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px;}
.quick-status{display:inline-flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.quick-status button{background:#eef2ff;color:#3730a3;border-radius:999px;padding:8px 12px;font-weight:900;}
.form-hint{color:var(--muted);font-size:13px;margin-top:-6px;margin-bottom:12px;}
.preview-img{width:100%;max-height:220px;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin-top:10px;background:#f3f4f6;}
.selected-counter{display:inline-flex;align-items:center;gap:8px;background:#ecfeff;border:1px solid #a5f3fc;color:#155e75;border-radius:999px;padding:8px 12px;font-weight:900;margin:8px 0 12px;}
.project-note{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:22px;color:var(--muted);}
.project-note b{color:var(--text);}
.status-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900;background:#e5e7eb;}
.status-pill.active{background:#dcfce7;color:#166534;}
.status-pill.draft{background:#fef3c7;color:#92400e;}
.status-pill.cancelled,.status-pill.ended,.status-pill.sold_out{background:#fee2e2;color:#991b1b;}
.admin-warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;padding:13px;margin:12px 0;font-weight:700;}
.empty-state{background:#fff;border:1px dashed #cbd5e1;border-radius:18px;padding:28px;text-align:center;color:var(--muted);}
.empty-state h3{color:var(--text);margin-top:0;}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
#app{flex: 1; animation:pageFadeIn .38s ease both;}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(14px);filter:blur(3px);}
to{opacity:1;transform:translateY(0);filter:blur(0);}
}
.page-transition-out{animation:pageFadeOut .18s ease both;}
@keyframes pageFadeOut{from{opacity:1;transform:translateY(0);filter:blur(0);}
to{opacity:0;transform:translateY(10px);filter:blur(2px);}
}
.hero{position:relative;overflow:hidden;}
.hero:after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 20% 30%,rgba(109,40,217,.32),transparent 28%),radial-gradient(circle at 80% 20%,rgba(37,99,235,.22),transparent 30%),radial-gradient(circle at 50% 90%,rgba(245,158,11,.16),transparent 34%);animation:auroraMove 10s ease-in-out infinite alternate;pointer-events:none;}
@keyframes auroraMove{from{transform:translate3d(-2%,-2%,0) rotate(0deg) scale(1);}
to{transform:translate3d(2%,3%,0) rotate(6deg) scale(1.06);}
}
.hero-inner{position:relative;z-index:2;animation:heroEnter .8s cubic-bezier(.2,.9,.2,1) both;}
@keyframes heroEnter{from{opacity:0;transform:translateY(26px) scale(.98);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.pill{animation:pillPulse 2.8s ease-in-out infinite;}
@keyframes pillPulse{0%,100%{box-shadow:0 0 0 rgba(109,40,217,0);}
50%{box-shadow:0 0 28px rgba(109,40,217,.48);}
}
.card,.panel,.info,.stat,.event-card,.summary-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;}
.card:hover,.panel:hover,.stat:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(20,24,39,.12);border-color:rgba(109,40,217,.24);}
.card-img{transition:transform .35s ease,filter .35s ease;}
.card:hover .card-img{transform:scale(1.04);filter:saturate(1.08) contrast(1.03);}
.card{animation:cardPop .45s ease both;}
.card:nth-child(1){animation-delay:.04s;}
.card:nth-child(2){animation-delay:.08s;}
.card:nth-child(3){animation-delay:.12s;}
.card:nth-child(4){animation-delay:.16s;}
.card:nth-child(5){animation-delay:.20s;}
.card:nth-child(6){animation-delay:.24s;}
@keyframes cardPop{from{opacity:0;transform:translateY(18px) scale(.97);}
to{opacity:1;transform:translateY(0) scale(1);}
}
button{position:relative;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;}
button:hover{transform:translateY(-1px);filter:brightness(1.03);}
button:active{transform:translateY(1px) scale(.98);}
.primary{box-shadow:0 10px 25px rgba(109,40,217,.26);}
.primary:hover{box-shadow:0 16px 36px rgba(109,40,217,.34);}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rippleEffect .55s linear;background:rgba(255,255,255,.55);pointer-events:none;}
@keyframes rippleEffect{to{transform:scale(4);opacity:0;}
}
.seat{box-shadow:0 2px 0 rgba(0,0,0,.08);}
.seat:hover:not(:disabled){transform:scale(1.28);box-shadow:0 0 0 5px rgba(37,99,235,.12);}
.seat.selected{animation:selectedSeatPulse 1.2s ease-in-out infinite;}
@keyframes selectedSeatPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
50%{box-shadow:0 0 0 8px rgba(37,99,235,0);}
}
.stage,.conference-stage,.workshop-zone,.sport-arena{animation:stageGlow 3.5s ease-in-out infinite;}
@keyframes stageGlow{0%,100%{box-shadow:0 0 0 rgba(109,40,217,0);}
50%{box-shadow:0 0 28px rgba(109,40,217,.22);}
}
.notice{animation:noticeEnter .3s ease both;}
@keyframes noticeEnter{from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
.table tbody tr{transition:background .18s ease,transform .18s ease;}
.table tbody tr:hover{background:#f8fafc;transform:scale(1.005);}
input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
input:focus,select:focus,textarea:focus{border-color:rgba(109,40,217,.55) !important;box-shadow:0 0 0 4px rgba(109,40,217,.10);transform:translateY(-1px);}
.topbar{backdrop-filter:blur(14px);background:rgba(255,255,255,.88);}
.logo{animation:logoFloat 3s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-2deg);}
50%{transform:translateY(-3px) rotate(2deg);}
}
.status-pill,.badge{transition:transform .18s ease,box-shadow .18s ease;}
.status-pill:hover,.badge:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12);}
.loading-overlay{position:fixed;inset:0;background:rgba(244,246,251,.72);backdrop-filter:blur(8px);z-index:9998;display:grid;place-items:center;animation:fadeIn .18s ease both;}
.loader{width:54px;height:54px;border:5px solid #ddd6fe;border-top-color:#6d28d9;border-radius:50%;animation:spin .85s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}
}
@keyframes fadeIn{from{opacity:0;}
to{opacity:1;}
}
.reveal{opacity:1;transform:none;}
.reveal.revealed{animation:revealUp .5s ease both;}
@keyframes revealUp{from{opacity:0;transform:translateY(18px);}
to{opacity:1;transform:translateY(0);}
}
.confirm.panel{animation:successPop .55s cubic-bezier(.2,.9,.25,1.2) both;}
@keyframes successPop{0%{opacity:0;transform:translateY(18px) scale(.94);}
70%{transform:translateY(0) scale(1.02);}
100%{opacity:1;transform:translateY(0) scale(1);}
}
.confetti-piece{position:fixed;width:9px;height:14px;top:-20px;z-index:9999;opacity:.95;animation:confettiFall 1.7s ease-out forwards;pointer-events:none;}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(620deg);opacity:0;}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none !important;transition:none !important;}
}
.glass-panel{background:rgba(255,255,255,.76) !important;backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.55) !important;box-shadow:0 24px 80px rgba(15,23,42,.14) !important;}
.dark-glass{background:rgba(7,11,20,.72) !important;backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14) !important;color:#fff;}
.progress-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 22px;}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;color:var(--muted);font-size:13px;font-weight:800;position:relative;overflow:hidden;}
.step.active{background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(37,99,235,.10));border-color:rgba(109,40,217,.35);color:var(--primary);}
.step.done{background:#ecfdf5;border-color:#bbf7d0;color:#166534;}
.step strong{display:block;font-size:18px;margin-bottom:3px;}
.ticket-wrap{max-width:860px;margin:42px auto;padding:24px;}
.ticket{display:grid;grid-template-columns:1fr 230px;background:#fff;border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:0 28px 90px rgba(15,23,42,.16);position:relative;}
.ticket:before,.ticket:after{content:"";position:absolute;top:50%;width:36px;height:36px;background:var(--bg);border-radius:50%;transform:translateY(-50%);z-index:3;}
.ticket:before{left:-18px;}
.ticket:after{right:-18px;}
.ticket-main{padding:28px;position:relative;}
.ticket-main:after{content:"";position:absolute;right:0;top:24px;bottom:24px;border-right:2px dashed #d1d5db;}
.ticket-side{background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.20),transparent 35%),linear-gradient(160deg,#6d28d9,#2563eb);color:white;padding:26px;display:grid;align-content:center;justify-items:center;text-align:center;}
.ticket-code{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:12px 14px;border-radius:14px;font-size:24px;font-weight:950;letter-spacing:.06em;margin:12px 0;}
.fake-qr{width:116px;height:116px;border-radius:14px;background:linear-gradient(90deg,#111 50%,transparent 50%) 0 0/22px 22px,linear-gradient(#111 50%,transparent 50%) 0 0/22px 22px,#fff;border:8px solid #fff;box-shadow:0 10px 28px rgba(0,0,0,.22);}
.ticket-title{font-size:34px;margin:8px 0 10px;line-height:1.05;}
.ticket-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0;}
.ticket-meta div{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:13px;}
.ticket-meta small{display:block;color:var(--muted);margin-bottom:4px;}
.ticket-seats{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:16px;padding:14px;color:#4c1d95;font-weight:800;}
.seat-modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(8px);z-index:9997;display:grid;place-items:center;padding:18px;animation:fadeIn .18s ease both;}
.seat-modal{width:min(440px,100%);background:#fff;border-radius:24px;padding:24px;border:1px solid var(--line);box-shadow:0 30px 100px rgba(0,0,0,.32);animation:modalPop .26s cubic-bezier(.2,.9,.2,1) both;}
@keyframes modalPop{from{opacity:0;transform:translateY(18px) scale(.96);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.seat-modal h3{margin-top:0;font-size:26px;}
.seat-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0;}
.seat-modal-grid div{background:#f8fafc;border:1px solid var(--line);border-radius:13px;padding:12px;}
.seat-modal-grid small{display:block;color:var(--muted);margin-bottom:4px;}
.floating-summary{position:sticky;top:88px;}
.premium-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0;}
.premium-stat{background:radial-gradient(circle at 80% 20%,rgba(109,40,217,.18),transparent 34%),#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 12px 35px rgba(15,23,42,.08);}
.premium-stat strong{display:block;font-size:28px;color:var(--primary);}
.premium-stat span{color:var(--muted);font-weight:700;}
@media(max-width:900px){.ticket{grid-template-columns:1fr;}
.ticket-main:after{display:none;}
.ticket-meta,.progress-steps,.premium-stat-grid{grid-template-columns:1fr;}
}


.preview-btn{background:#ecfeff !important;color:#155e75 !important;}
.admin-main-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:18px;border-radius:16px;font-weight:800;}
.admin-mini-note{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;padding:12px;border-radius:12px;margin-bottom:16px;font-weight:700;}

.sport-stadium-layout{display:grid !important;grid-template-areas:"top top top" "left field right" "bottom bottom bottom";grid-template-columns:minmax(180px,1fr) minmax(320px,420px) minmax(180px,1fr);gap:22px;align-items:center;justify-content:center;margin:22px 0;}
.sport-stand{display:flex !important;flex-wrap:wrap;gap:8px;justify-content:center;align-content:center;}
.sport-stand.top{grid-area:top;max-width:760px;margin:0 auto;}
.sport-stand.bottom{grid-area:bottom;max-width:760px;margin:0 auto;}
.sport-stand.left{grid-area:left;max-width:220px;margin-left:auto;}
.sport-stand.right{grid-area:right;max-width:220px;margin-right:auto;}
.sport-field-premium{grid-area:field;min-height:300px;border:4px solid #14532d;border-radius:34px;background:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(circle at 50% 50%,transparent 18%,rgba(255,255,255,.55) 19%,transparent 20%),repeating-linear-gradient(90deg,#22c55e 0 42px,#16a34a 42px 84px);color:white;display:grid;place-items:center;text-align:center;font-weight:950;letter-spacing:.04em;box-shadow:inset 0 0 50px rgba(0,0,0,.15),0 20px 55px rgba(20,83,45,.18);text-shadow:0 2px 8px rgba(0,0,0,.35);}
.sport-field-premium small{display:block;font-size:13px;font-weight:700;margin-top:6px;}

.table-scroll{width:100%;overflow-x:auto;overflow-y:visible;border-radius:16px;border:1px solid var(--line);background:#fff;}
.table-scroll .table{border:0;min-width:980px;}
.table thead th{position:sticky;top:0;z-index:5;background:#f8fafc;}
.scroll-top-btn{position:fixed;right:24px;bottom:24px;z-index:80;background:linear-gradient(135deg,#6d28d9,#2563eb);color:white;border:0;border-radius:999px;padding:12px 16px;font-weight:900;box-shadow:0 16px 40px rgba(109,40,217,.28);display:none;}
.scroll-top-btn.visible{display:inline-flex;}

@media(max-width:950px){.sport-stadium-layout{grid-template-areas:"top" "field" "left" "right" "bottom";grid-template-columns:1fr;}.sport-stand.left,.sport-stand.right,.sport-stand.top,.sport-stand.bottom{max-width:100%;margin:0 auto;}.sport-field-premium{min-height:190px;}.table-scroll .table{min-width:850px;}}


/* =========================================================
   SAFE MERGE: dodatki scalone z osobnych plikow CSS
   ========================================================= */


/* === admin-fix.css === */
/* FULL ADMIN RESTORE FIX */

.admin-fix-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}

.admin-fix-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 16px;
  border-radius: 14px;
  font-weight: 800;
}

.admin-fix-empty {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 24px;
  color: #667085;
}

.admin-fix-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
}

.admin-fix-table-wrap table {
  min-width: 980px;
}

.admin-layout {
  min-height: calc(100vh - 66px);
}

.admin-main {
  padding: 28px !important;
}

.logo {
  font-size: 22px;
}


/* === no-flicker.css === */
/* NO PAGE FLICKER FIX */
/* Wyłącza miganie przy zmianie zakładek i wejściu w panel admina */

#app {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.page-transition-out {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Wyłącza opóźnione reveal'e, które mogą powodować drugi "przeskok" */
.reveal,
.reveal.revealed {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Panel admina ma pojawiać się od razu, bez efektów */
.admin-layout,
.admin-main,
.sidebar,
.panel,
.stat,
.card,
.table,
.seat-layout,
.seat-map {
  animation: none !important;
}

/* Usuwa niepotrzebne płynne przewijanie, które czasem daje wrażenie przeładowania */
html {
  scroll-behavior: auto !important;
}

/* Admin nie powinien "wjeżdżać" ani blurać */
.admin-main {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}


/* === no-layout-shift.css === */
/* NO LAYOUT SHIFT FIX */
/* Stabilizuje widoki, żeby tekst nie skakał przy wejściu w wydarzenie i panel admina */

/* Główna aplikacja ma zawsze stabilną powierzchnię */
#app {
  min-height: calc(100vh - 72px);
  contain: layout paint;
}

/* Header nie może zmieniać wysokości */
header,
.topbar,
.navbar {
  min-height: 72px;
}

/* Hero wydarzenia / szczegóły eventu */
.event-hero,
.details-hero,
.hero-event,
.event-header {
  min-height: 360px;
  display: flex;
  align-items: center;
}

/* Kontener szczegółów wydarzenia trzyma miejsce zanim dojdą dane */
.details-inner,
.details-section,
.event-details,
#app > section {
  min-height: 260px;
}

/* Karta szczegółów i karta rezerwacji nie zmieniają gwałtownie wysokości */
.details-grid,
.event-details-grid {
  align-items: stretch;
}

.panel,
.card,
.seat-map,
.admin-main,
.sidebar {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Przycisk wróć ma stałe miejsce — nie wciska treści po czasie */
.event-back-wrap {
  min-height: 46px;
  margin-bottom: 18px;
}

.event-back-btn,
.secondary,
.primary,
button {
  min-height: 42px;
}

/* Admin: po zalogowaniu niech panel ma stałe ramy */
.admin-layout {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 240px 1fr;
}

.sidebar {
  min-height: calc(100vh - 72px);
}

.admin-main {
  min-height: calc(100vh - 72px);
  padding-top: 28px;
}

/* Dashboard: statystyki mają stałe wysokości */
.stats,
.premium-stat-grid {
  min-height: 110px;
}

.stat,
.premium-stat {
  min-height: 90px;
}

/* Tabele admina nie powodują nagłego rozszerzania */
.table,
table {
  table-layout: fixed;
}

.table th,
.table td {
  vertical-align: middle;
}

/* Formularze: inputy i selecty stałej wysokości */
input,
select,
textarea {
  min-height: 42px;
}

/* Usuwa ostatnie animacje/przejścia, które mogą dawać efekt skoku */
#app,
#app *,
.admin-layout,
.admin-main,
.event-hero,
.details-hero,
.panel,
.card {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* Obrazki/hero nie powinny dociągać się i zmieniać wysokości po fakcie */
img,
.card-img,
.event-hero,
.details-hero {
  background-size: cover;
  background-position: center;
}

/* Rezerwacja miejsc — prawa karta nie skacze */
.seat-layout {
  align-items: flex-start;
}

.seat-layout aside,
.seat-layout .panel {
  min-height: 420px;
}

/* Mobile */
@media (max-width: 900px) {
  .admin-layout {
    display: block;
  }

  .sidebar,
  .admin-main {
    min-height: auto;
  }

  .event-hero,
  .details-hero,
  .hero-event,
  .event-header {
    min-height: 280px;
  }
}


/* === seat-layout-fix.css === */
/* SEAT LAYOUT FIX */
/* Cofnięcie efektu rozciągania sceny, boiska i kropek po no-layout-shift.css */

/* Nie pozwalamy mapie miejsc dziedziczyć rozciągania */
.seat-map,
.venue-layout-wrapper,
.sport-stadium-layout,
.concert-layout,
.theatre-layout,
.conference-layout,
.workshop-layout {
  contain: none !important;
  transform: none !important;
  min-height: auto !important;
  height: auto !important;
  align-items: center !important;
}

/* Scena koncertowa/teatralna ma wrócić do normalnego rozmiaru */
.stage {
  width: 330px !important;
  max-width: 90% !important;
  min-height: auto !important;
  height: auto !important;
  margin: 16px auto 24px !important;
  padding: 18px !important;
  display: block !important;
  text-align: center !important;
  border-radius: 10px !important;
}

/* Grid kropek nie może się rozciągać na całą sekcję */
.seats-grid {
  display: grid !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  min-height: auto !important;
  height: auto !important;
}

/* Pojedyncze miejsce ma stały rozmiar */
.seat {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  flex: 0 0 25px !important;
}

/* Sport: boisko na środku, trybuny dookoła, ale bez rozciągania */
.sport-stadium-layout {
  display: grid !important;
  grid-template-areas:
    "top top top"
    "left field right"
    "bottom bottom bottom" !important;
  grid-template-columns: minmax(140px, 220px) minmax(260px, 360px) minmax(140px, 220px) !important;
  grid-template-rows: auto auto auto !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  overflow-x: auto !important;
  margin: 22px auto !important;
}

/* Trybuny sportowe */
.sport-stand {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  align-content: center !important;
  min-height: auto !important;
  height: auto !important;
}

.sport-stand.top {
  grid-area: top !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

.sport-stand.bottom {
  grid-area: bottom !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

.sport-stand.left {
  grid-area: left !important;
  max-width: 190px !important;
  margin-left: auto !important;
}

.sport-stand.right {
  grid-area: right !important;
  max-width: 190px !important;
  margin-right: auto !important;
}

/* Boisko normalne, nie rozciągnięte */
.sport-field-premium,
.sport-arena {
  grid-area: field !important;
  width: 320px !important;
  max-width: 100% !important;
  min-height: 230px !important;
  height: 230px !important;
  border-radius: 28px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

/* Konferencje / warsztaty też bez rozjazdu */
.conference-stage,
.workshop-zone {
  min-height: 220px !important;
  height: auto !important;
  max-height: none !important;
}

/* Prawa karta rezerwacji może być wysoka, ale nie wpływa na mapę */
.seat-layout {
  align-items: flex-start !important;
}

.seat-layout aside,
.seat-layout .panel {
  min-height: auto !important;
}

/* Usuwamy table-layout fixed z mapy miejsc, bo potrafi psuć szerokości */
.seat-map table,
.seat-map .table {
  table-layout: auto !important;
}

/* Mobile */
@media (max-width: 950px) {
  .sport-stadium-layout {
    grid-template-areas:
      "top"
      "field"
      "left"
      "right"
      "bottom" !important;
    grid-template-columns: 1fr !important;
  }

  .sport-stand.left,
  .sport-stand.right,
  .sport-stand.top,
  .sport-stand.bottom {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .sport-field-premium,
  .sport-arena {
    width: 100% !important;
    max-width: 360px !important;
    height: 190px !important;
    min-height: 190px !important;
  }

  .seats-grid {
    width: max-content !important;
    max-width: 100% !important;
  }
}

/* FIX: logo jako SVG zamiast emoji, żeby na każdym komputerze wyglądało tak samo */
.logo {
  font-size: 0 !important;
  overflow: hidden;
}

.logo-img {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 8px;
}


/* === event-floating-back.css === */
/* Przycisk powrotu przyklejony do górnej części ekranu. Nie zajmuje miejsca w layoucie, więc nie wpada do stopki. */
.event-floating-back {
  all: unset;
  box-sizing: border-box !important;
  position: fixed !important;
  top: 84px !important;
  left: 18px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 99999 !important;
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: calc(100vw - 36px) !important;
  padding: 11px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #111827 !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.22) !important;
  backdrop-filter: blur(12px) !important;
  font-family: Inter, Segoe UI, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.event-floating-back.visible {
  display: inline-flex !important;
}

.event-floating-back:hover {
  background: #f3f4f6 !important;
}

.event-floating-back .arrow {
  font-size: 18px !important;
  line-height: 1 !important;
}

.event-floating-back span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.event-back-wrap,
.stable-event-back-wrap,
.stable-back-event {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 700px) {
  .event-floating-back {
    top: 82px !important;
    left: 12px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 10px 13px !important;
    font-size: 13px !important;
  }
}


/* AUDIT FIX: stopka i pływający przycisk */
footer { flex-shrink: 0; }
@media (max-width: 700px) {
  footer, .footer { padding: 14px 16px; font-size: 13px; }
}