:root{
  --bg:#030713;--panel:#071324;--panel2:#091b31;--line:rgba(119,190,255,.22);
  --text:#eef6ff;--muted:#9fb3c9;--blue:#4db6ff;--cyan:#42ffe8;--orange:#ff9d2e;
  --green:#32f8a6;--red:#ff5078;--yellow:#ffd166;--violet:#8f73ff;
  --shadow:0 22px 60px rgba(0,0,0,.42);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:
radial-gradient(circle at 20% -10%,rgba(77,182,255,.20),transparent 34%),
radial-gradient(circle at 95% 15%,rgba(255,157,46,.14),transparent 28%),
linear-gradient(180deg,#020510,#06101d 54%,#030713);color:var(--text);min-height:100vh}
a{color:inherit}.wrap{width:min(1180px,calc(100% - 28px));margin:auto}
.hero{padding:36px 0 22px;position:relative;overflow:hidden}
.topline{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}.logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--blue),#12294a 55%,var(--orange));display:grid;place-items:center;font-weight:900;box-shadow:0 0 24px rgba(77,182,255,.35)}
.brand small{color:var(--muted);letter-spacing:.16em;text-transform:uppercase}.brand h1{font-size:clamp(31px,5vw,60px);margin:0;line-height:.95}
.admin-link,.ghost-btn,.primary-btn,.danger-btn,.neutral-btn{border:1px solid var(--line);border-radius:18px;padding:12px 16px;background:rgba(8,20,36,.72);color:var(--text);text-decoration:none;font-weight:800;cursor:pointer}
.primary-btn{background:linear-gradient(135deg,var(--blue),#2269ff 55%,var(--orange));border:0;box-shadow:0 0 25px rgba(77,182,255,.28)}
.danger-btn{background:linear-gradient(135deg,#5b1223,#ff5078);border:0}.neutral-btn{background:rgba(255,255,255,.08)}
.hero-card{margin-top:22px;padding:24px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,rgba(9,23,42,.88),rgba(4,9,20,.72));box-shadow:var(--shadow);position:relative}
.hero-card:after{content:"";position:absolute;inset:auto 20px -2px 20px;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--orange),transparent);filter:blur(.3px)}
.hero-card h2{font-size:clamp(28px,4vw,48px);margin:0 0 8px}.hero-card p{color:var(--muted);max-width:800px;line-height:1.55}
.event-strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.pill{border:1px solid rgba(77,182,255,.24);background:rgba(77,182,255,.08);border-radius:999px;padding:10px 13px;color:#d7f2ff;font-weight:750}.pill.orange{border-color:rgba(255,157,46,.32);background:rgba(255,157,46,.10);color:#ffe2bf}
.layout{display:grid;grid-template-columns:1.45fr .75fr;gap:18px;margin:16px auto 36px}
.panel{border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,rgba(8,20,36,.82),rgba(4,9,19,.82));box-shadow:var(--shadow);padding:18px}
.panel h3{margin:2px 0 14px;font-size:23px}.legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.legend span{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.free{background:var(--green)}.reserved{background:var(--red)}.unavailable{background:var(--yellow)}
.floor{position:relative;aspect-ratio:1.62/1;border-radius:28px;overflow:hidden;background:
radial-gradient(circle at 18% 22%,rgba(77,182,255,.16),transparent 22%),
radial-gradient(circle at 83% 70%,rgba(255,157,46,.13),transparent 24%),
linear-gradient(135deg,#06101d,#0a1b31 52%,#030713);
border:1px solid rgba(119,190,255,.20)}
.floor:before{content:"BAR";position:absolute;left:4%;top:5%;width:34%;height:11%;border-radius:18px;background:linear-gradient(90deg,rgba(77,182,255,.15),rgba(255,157,46,.12));border:1px solid rgba(119,190,255,.18);display:flex;align-items:center;padding-left:16px;color:#b9dfff;font-size:12px;letter-spacing:.25em}
.floor:after{content:"LOŽA CHILL";position:absolute;right:5%;bottom:4%;font-weight:900;color:rgba(255,255,255,.07);font-size:clamp(28px,5vw,70px);letter-spacing:.04em}
.table{position:absolute;border:0;border-radius:18px;color:white;font-weight:950;box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:.17s transform,.17s filter;background:rgba(255,255,255,.1)}
.table:hover{transform:translateY(-2px) scale(1.025);filter:brightness(1.12)}.table b{font-size:19px}.table small{font-size:11px;opacity:.86}
.table.free{background:linear-gradient(135deg,rgba(50,248,166,.90),rgba(15,111,86,.92))}
.table.reserved{background:linear-gradient(135deg,rgba(255,80,120,.95),rgba(86,18,40,.94))}
.table.unavailable{background:linear-gradient(135deg,rgba(255,209,102,.94),rgba(118,75,16,.95));color:#1e1500}
.info-box{display:grid;gap:11px}.status-card{padding:14px;border:1px solid rgba(119,190,255,.16);border-radius:22px;background:rgba(255,255,255,.045)}
.status-card strong{display:block;margin-bottom:5px}.status-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.recommend{margin-top:12px;display:none}.recommend.active{display:block}
.reco-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}.reco-chip{padding:9px 11px;border-radius:999px;border:1px solid rgba(50,248,166,.32);background:rgba(50,248,166,.08);color:#dfffee;font-weight:800;cursor:pointer}
.privacy{width:min(1180px,calc(100% - 28px));margin:0 auto 22px;color:rgba(180,196,214,.62);font-size:11px;line-height:1.45;text-align:center}
dialog{border:0;border-radius:28px;padding:0;background:transparent;color:var(--text);width:min(520px,calc(100% - 26px))}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.modal{background:linear-gradient(180deg,#0a1a30,#040b17);border:1px solid var(--line);border-radius:28px;padding:20px;box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.modal h3{font-size:25px;margin:0}.x{width:40px;height:40px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;font-size:22px;cursor:pointer}
form{display:grid;gap:12px;margin-top:15px}label{display:grid;gap:7px;color:#d7e8ff;font-weight:750}input,select{width:100%;border:1px solid rgba(119,190,255,.24);border-radius:16px;background:rgba(3,8,17,.78);color:white;padding:13px 14px;font-size:16px;outline:none}input:focus,select:focus{border-color:rgba(77,182,255,.8);box-shadow:0 0 0 3px rgba(77,182,255,.13)}
.small-note{font-size:12px;color:var(--muted);line-height:1.45}.msg{min-height:20px;font-size:14px}.msg.ok{color:var(--green)}.msg.err{color:var(--red)}
.admin-shell{width:min(1260px,calc(100% - 28px));margin:28px auto}.admin-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:18px}.login{width:min(460px,calc(100% - 28px));margin:70px auto}
.controls{display:flex;gap:10px;flex-wrap:wrap}.toggle-on{background:linear-gradient(135deg,rgba(50,248,166,.9),rgba(19,113,90,.95));border:0}.toggle-off{background:linear-gradient(135deg,rgba(255,80,120,.9),rgba(91,18,40,.95));border:0}
.res-list{display:grid;gap:10px;max-height:360px;overflow:auto}.res-card{padding:12px;border:1px solid rgba(119,190,255,.18);border-radius:17px;background:rgba(255,255,255,.045);display:grid;gap:6px}.res-card small{color:var(--muted)}
@media(max-width:860px){.layout,.admin-grid{grid-template-columns:1fr}.floor{aspect-ratio:.86/1}.floor:before{width:50%}.table b{font-size:15px}.table small{font-size:9px}.hero{padding-top:22px}}


/* V3: Loža Chill bird-eye floor sketch, closer to POS layout */
.floor{
  background:
    radial-gradient(circle at 18% 25%,rgba(77,182,255,.12),transparent 25%),
    radial-gradient(circle at 88% 70%,rgba(255,157,46,.10),transparent 28%),
    linear-gradient(135deg,#020813,#071526 50%,#030713)!important;
}
.floor:before,.floor:after{display:none!important}
.floor-zone{
  position:absolute;
  border:1px solid rgba(215,238,255,.20);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,rgba(255,255,255,.00) 2px 18px),
    linear-gradient(135deg,rgba(186,145,104,.23),rgba(118,83,58,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.18);
  z-index:0;
}
.floor-zone.upper{
  left:40%;top:2%;width:57%;height:54%;
  clip-path:polygon(0 0,100% 0,100% 88%,86% 88%,86% 100%,0 100%);
  border-radius:18px 18px 18px 0;
}
.floor-zone.lower{
  left:3%;top:43%;width:66%;height:54%;
  clip-path:polygon(0 0,100% 0,100% 86%,66% 86%,66% 100%,0 100%);
  border-radius:18px 0 18px 18px;
}
.floor-zone.right{
  left:84%;top:59%;width:13%;height:31%;
  border-radius:0 18px 18px 0;
}
.floor-zone.bar{
  left:3%;top:5%;width:37%;height:38%;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(180,210,236,.16),rgba(255,255,255,.07));
}
.floor-zone.bar:after{
  content:"BAR";
  position:absolute;left:18px;top:16px;
  color:#bfe6ff;font-size:12px;letter-spacing:.28em;font-weight:900;
}
.floor-zone.entry{
  left:69%;top:90%;width:29%;height:7%;
  border-radius:6px 6px 18px 18px;
  background:linear-gradient(90deg,rgba(255,157,46,.20),rgba(77,182,255,.12));
}
.zone-label{
  position:absolute;z-index:1;
  color:rgba(215,238,255,.34);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.20em;
  font-weight:900;
  pointer-events:none;
}
.zone-label.l1{left:7%;top:36%}
.zone-label.l2{left:51%;top:50%}
.zone-label.l3{right:10%;bottom:4%}
.table{z-index:3}
.table small{white-space:nowrap}
@media(max-width:860px){
  .floor-zone.upper{left:36%;top:2%;width:61%;height:54%}
  .floor-zone.lower{left:3%;top:43%;width:68%;height:54%}
  .floor-zone.right{left:84%;top:59%;width:13%;height:31%}
}
.event-editor{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(119,190,255,.16);
  border-radius:22px;
  background:rgba(255,255,255,.045);
  display:grid;
  gap:10px;
}
.event-editor .event-row{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:10px;
  align-items:end;
}
.event-editor label{font-size:13px}
.event-editor input{padding:11px 12px}
@media(max-width:760px){
  .event-editor .event-row{grid-template-columns:1fr}
}


/* V4 visual cleanup */
.floor{
  background:
    radial-gradient(circle at 18% 18%,rgba(77,182,255,.10),transparent 24%),
    radial-gradient(circle at 88% 72%,rgba(255,157,46,.08),transparent 30%),
    linear-gradient(135deg,#020813,#071526 52%,#030713)!important;
}
.floor-shell{
  position:absolute;
  inset:3%;
  clip-path:polygon(0 0,100% 0,100% 58%,86% 58%,86% 92%,100% 92%,100% 100%,52% 100%,52% 94%,0 94%,0 0);
  border:1px solid rgba(215,238,255,.26);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,rgba(255,255,255,0) 2px 18px),
    linear-gradient(135deg,rgba(192,151,112,.26),rgba(123,89,63,.20));
  border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 18px 40px rgba(0,0,0,.18);
  z-index:0;
}
.bar-box{
  position:absolute;
  left:3.2%;
  top:5%;
  width:36%;
  height:37%;
  border:1px solid rgba(215,238,255,.22);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(198,219,240,.16),rgba(255,255,255,.07));
  z-index:1;
}
.bar-box::before{
  content:"BAR";
  position:absolute;
  left:18px;
  top:14px;
  color:#bfe9ff;
  font-size:12px;
  letter-spacing:.28em;
  font-weight:900;
}
.sank-box{
  position:absolute;
  left:69%;
  top:90%;
  width:28%;
  height:6%;
  border-radius:8px 8px 18px 18px;
  border:1px solid rgba(255,157,46,.30);
  background:linear-gradient(90deg,rgba(96,34,43,.75),rgba(64,19,30,.72));
  z-index:1;
}
.sank-box::before{
  content:"ŠANK";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ffd6c8;
  font-size:11px;
  letter-spacing:.22em;
  font-weight:900;
}
.neon-mark{
  position:absolute;
  left:4%;
  bottom:2.6%;
  color:#57c8ff;
  font-size:clamp(18px,2.3vw,28px);
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 0 6px rgba(87,200,255,.5),0 0 22px rgba(87,200,255,.32);
  z-index:1;
  pointer-events:none;
}
.table{z-index:3}
.table small{white-space:nowrap}
@media(max-width:860px){
  .neon-mark{font-size:18px;left:5%;bottom:2.4%}
}


/* V5 cleanup */
.floor-shell{
  clip-path:polygon(0 0,100% 0,100% 58%,86% 58%,86% 92%,100% 92%,100% 100%,52% 100%,52% 94%,0 94%,0 0)!important;
}
.bar-box{display:none!important;}
.neon-mark{display:none!important;}


/* V6 boundary corrections */
.floor-shell{
  position:absolute;
  left:2.4%;
  top:2.4%;
  width:95%;
  height:95.2%;
  clip-path:polygon(0 0,100% 0,100% 60%,86.2% 60%,86.2% 93%,100% 93%,100% 100%,50.5% 100%,50.5% 94.2%,0 94.2%,0 0)!important;
  border:1px solid rgba(215,238,255,.28);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,rgba(255,255,255,0) 2px 18px),
    linear-gradient(135deg,rgba(192,151,112,.26),rgba(123,89,63,.20));
  border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 18px 40px rgba(0,0,0,.18);
  z-index:0;
}
.not-object-boundary{
  position:absolute;
  left:2.8%;
  top:4.4%;
  width:36.2%;
  height:37%;
  border:1px solid rgba(215,238,255,.24);
  border-radius:20px;
  background:rgba(255,255,255,.02);
  z-index:1;
  pointer-events:none;
}
.sank-box{
  position:absolute;
  left:69%;
  top:90%;
  width:28%;
  height:6%;
  border-radius:8px 8px 18px 18px;
  border:1px solid rgba(255,157,46,.30);
  background:linear-gradient(90deg,rgba(96,34,43,.75),rgba(64,19,30,.72));
  z-index:1;
}
.floor-entry-label{
  position:absolute;
  left:56%;
  top:88.1%;
  transform:translateX(-50%);
  color:#d8ecff;
  font-size:12px;
  letter-spacing:.24em;
  font-weight:900;
  z-index:2;
  pointer-events:none;
}


/* V7 final floor/legend cleanup */
.floor-shell{
  left:1.6% !important;
  top:1.4% !important;
  width:97.2% !important;
  height:96.8% !important;
  clip-path:polygon(0 0,100% 0,100% 62%,86.2% 62%,86.2% 95%,100% 95%,100% 100%,49.3% 100%,49.3% 93.5%,0 93.5%,0 0) !important;
}
.not-object-boundary{
  left:2.5% !important;
  top:4.3% !important;
  width:36.5% !important;
  height:37.4% !important;
  background:transparent !important;
  border:1px solid rgba(215,238,255,.22) !important;
}
.floor-entry-label{display:none !important;}
.legend{
  display:grid !important;
  grid-template-columns:repeat(3,max-content) !important;
  gap:14px 20px !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
.legend span{
  white-space:nowrap !important;
  color:#cfe4ff !important;
  font-size:13px !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
}
.dot{
  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.07), 0 0 16px rgba(255,255,255,.06) !important;
}
.dot.free{
  background:radial-gradient(circle at 35% 35%, #80ffd0 0%, #36f6a8 45%, #11865f 100%) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 0 16px rgba(54,246,168,.34) !important;
}
.dot.reserved{
  background:radial-gradient(circle at 35% 35%, #ff9db2 0%, #ff547d 45%, #8b1736 100%) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 0 16px rgba(255,84,125,.30) !important;
}
.dot.unavailable{
  background:radial-gradient(circle at 35% 35%, #ffe8a0 0%, #ffd166 45%, #9b6710 100%) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 0 16px rgba(255,209,102,.28) !important;
}
@media(max-width:860px){
  .legend{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
}


/* V8: expanded cafe footprint, softer rounded edges, removed old top-left non-cafe box */
.floor-shell{
  left:0.8% !important;
  top:1.0% !important;
  width:98.1% !important;
  height:97.2% !important;
  clip-path:polygon(0 0,100% 0,100% 63%,86.8% 63%,86.8% 95.6%,100% 95.6%,100% 100%,48.6% 100%,48.6% 93.2%,0 93.2%,0 0) !important;
  border-radius:30px !important;
}
.not-object-boundary{
  display:none !important;
}
.sank-box{
  border-radius:14px 14px 20px 20px !important;
}


/* V9: add gray where requested, remove red-marked top-left area */
.floor-shell{
  left:1.2% !important;
  top:1.4% !important;
  width:98.0% !important;
  height:97.0% !important;
  clip-path:none !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 70% 60%, rgba(255,157,46,.05), transparent 30%),
    linear-gradient(135deg, rgba(155,134,124,.18), rgba(96,89,93,.22)) !important;
  border:1px solid rgba(215,238,255,.25) !important;
}
.top-left-cutout{
  position:absolute;
  left:2.2%;
  top:3.8%;
  width:33.8%;
  height:37.2%;
  background:
    radial-gradient(circle at 18% 16%, rgba(77,182,255,.08), transparent 36%),
    linear-gradient(135deg,#020813,#071526 58%,#030713);
  border-radius:18px;
  clip-path:polygon(0 0, 94% 0, 97% 7%, 98% 18%, 99% 31%, 100% 48%, 100% 100%, 0 100%, 0 0);
  z-index:1;
  pointer-events:none;
}
.sank-box{
  border-radius:14px 14px 20px 20px !important;
}


/* V10: top-left cutout flush to top/left with only 90-degree lines */
.floor-shell{
  left:1.2% !important;
  top:1.4% !important;
  width:98.0% !important;
  height:97.0% !important;
  clip-path:none !important;
  border-radius:30px !important;
}
.top-left-cutout{
  position:absolute;
  left:1.2% !important;
  top:1.4% !important;
  width:34.8% !important;
  height:38.5% !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(77,182,255,.08), transparent 36%),
    linear-gradient(135deg,#020813,#071526 58%,#030713) !important;
  border-radius:0 !important;
  clip-path:none !important;
  z-index:1;
  pointer-events:none;
  border-right:1px solid rgba(215,238,255,.22);
  border-bottom:1px solid rgba(215,238,255,.22);
}


/* V11: cutout moved right, closer to tables 13/14/15 */
.top-left-cutout{
  left:1.2% !important;
  top:1.4% !important;
  width:41.8% !important;
  height:38.8% !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(77,182,255,.08), transparent 36%),
    linear-gradient(135deg,#020813,#071526 58%,#030713) !important;
  border-radius:0 !important;
  clip-path:none !important;
  z-index:1;
  pointer-events:none;
  border-right:1px solid rgba(215,238,255,.22);
  border-bottom:1px solid rgba(215,238,255,.22);
}


/* V12: cutout moved just a touch away from tables, with slightly rounded inner corner */
.top-left-cutout{
  left:1.2% !important;
  top:1.4% !important;
  width:40.6% !important;
  height:38.8% !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(77,182,255,.08), transparent 36%),
    linear-gradient(135deg,#020813,#071526 58%,#030713) !important;
  border-radius:0 0 16px 0 !important;
  clip-path:none !important;
  z-index:1;
  pointer-events:none;
  border-right:1px solid rgba(215,238,255,.22);
  border-bottom:1px solid rgba(215,238,255,.22);
}


/* V13: hide guest admin shortcut and fix cutout fill/rounding */
body:not(.admin-page) .admin-link{
  display:none !important;
}
.top-left-cutout{
  left:1.2% !important;
  top:1.4% !important;
  width:40.6% !important;
  height:38.8% !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(77,182,255,.08), transparent 36%),
    linear-gradient(135deg,#020813,#071526 58%,#030713) !important;
  border-radius:0 0 16px 16px !important;
  clip-path:none !important;
  z-index:1;
  pointer-events:none;
  border-right:1px solid rgba(215,238,255,.22);
  border-bottom:1px solid rgba(215,238,255,.22);
  box-shadow: inset -1px -1px 0 rgba(215,238,255,.05);
}


/* V14: remove the upward curve on the left cutout corner, keep only the right rounded inner corner */
.top-left-cutout{
  border-radius:0 0 16px 0 !important;
}


/* V15: keep the colored bottom-right corner, remove only the left upward curve */
.top-left-cutout{
  border-radius:0 0 16px 0 !important;
  box-shadow:none !important;
}