@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#070B18; --panel:#0C1330;
  --glass:rgba(18,27,58,0.55); --glass-strong:rgba(18,27,58,0.78);
  --border:rgba(120,155,255,0.16); --border-hi:rgba(150,190,255,0.34);
  --line:rgba(150,180,240,0.12);
  --navy:#0A1E4A; --blue:#1746C9; --cyan:#33AEEB; --electric:#63E6FF;
  --ink:#EAF1FF; --sub:#8FA3D6; --dim:#5B6C99;
  --urgent:#FF6B4A; --urgent-glow:rgba(255,107,74,0.35);
  --whatsapp:#22C35E; --whatsapp-glow:rgba(34,195,94,0.45);
  --font-display:'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ background:var(--bg); }
body{
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink);
  position:relative; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---------- ambient cube-facet backdrop ---------- */
.ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 15% 8%, rgba(51,174,235,0.16), transparent 38%),
    radial-gradient(circle at 90% 25%, rgba(23,70,201,0.18), transparent 40%),
    radial-gradient(circle at 30% 95%, rgba(99,230,255,0.10), transparent 42%);
}
.facet{ position:absolute; opacity:0.10;
  clip-path:polygon(50% 0%, 100% 27%, 100% 75%, 50% 100%, 0% 75%, 0% 27%);
  animation:spin 90s linear infinite;
}
.facet.f1{ width:340px; height:340px; top:-90px; left:-110px;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.facet.f2{ width:260px; height:260px; bottom:60px; right:-90px;
  background:linear-gradient(135deg,var(--cyan),var(--electric)); animation-duration:70s; animation-direction:reverse; }
.facet.f3{ width:180px; height:180px; top:46%; right:20%;
  background:linear-gradient(135deg,var(--navy),var(--blue)); opacity:0.06; animation-duration:110s; }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce){ .facet{ animation:none; } }

.content{ 
  position:relative; 
  z-index:1; 
  padding-bottom:80px;    /* enough space for the sticky bar */
  min-height:100vh;
  min-height:100dvh;      /* dynamic viewport height for mobile */
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  background:rgba(7,11,24,0.72); border-bottom:1px solid var(--line);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.header-left{ display:flex; align-items:center; gap:12px; }
.cube-mark{ width:30px; height:30px; position:relative; flex-shrink:0; }
.cube-mark i{ position:absolute; inset:0; border-radius:6px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  box-shadow:0 0 18px rgba(51,174,235,0.55);
}
header .word{ line-height:1.15; }
header .word b{
  font-family:var(--font-display); font-weight:700; font-size:16.5px; letter-spacing:0.5px;
  background:linear-gradient(90deg,#fff,var(--electric)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; display:block;
}
header .word span{ font-size:10.5px; color:var(--sub); letter-spacing:2px; text-transform:uppercase; }
header nav{ display:flex; gap:16px; align-items:center; }
header nav a{ color:var(--sub); font-size:12.5px; text-decoration:none; font-weight:600; letter-spacing:0.3px; }
header nav a:hover, header nav a.active{ color:var(--electric); }

/* ---------- toast ---------- */
.msg{ margin:14px 16px 0; padding:13px 16px; border-radius:14px; font-size:13.5px;
  display:none; align-items:center; gap:10px; border:1px solid transparent; }
.msg.error{ display:flex; background:rgba(255,107,74,0.12); border-color:rgba(255,107,74,0.4); color:#ffb3a0; }
.msg.success{ display:flex; background:rgba(34,195,94,0.12); border-color:rgba(34,195,94,0.4); color:#8be6ab; }
.msg svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- glass sections ---------- */
.section{
  position:relative; margin:16px 14px 0; padding:18px 18px 10px; border-radius:20px;
  background:var(--glass); border:1px solid var(--border);
  box-shadow:0 22px 50px rgba(0,3,20,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.section h2{
  margin:0 0 14px; font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase;
  background:linear-gradient(90deg,var(--cyan),var(--electric)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

label{ display:block; font-size:11.5px; color:var(--sub); margin:12px 0 6px; font-weight:600; letter-spacing:0.3px; }
input[type=text], input[type=tel], input[type=email], input[type=password], select, textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:12px;
  font-size:15px; font-family:var(--font-body); color:var(--ink);
  background:rgba(255,255,255,0.04); transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder{ color:var(--dim); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--electric); box-shadow:0 0 0 3px rgba(99,230,255,0.15);
}
select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FA3D6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px;
}
textarea{ min-height:56px; resize:vertical; }

/* ---------- items ---------- */
.item-card{ border-bottom:1px solid var(--line); padding:14px 0; }
.item-card:last-child{ border-bottom:none; }
.item-name{ font-family:var(--font-display); font-weight:700; font-size:14.5px; margin-bottom:10px;
  color:var(--ink); display:flex; align-items:center; gap:8px; }
.item-name::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--electric)); flex-shrink:0; }

.svc-row{ display:flex; gap:8px; flex-wrap:wrap; }
.svc-box{ flex:1; min-width:88px; border-radius:14px; padding:9px 6px; text-align:center;
  background:rgba(255,255,255,0.03); border:1px solid var(--line); transition:border-color .15s, box-shadow .15s, background .15s; }
.svc-box.urgent{ border-color:rgba(255,107,74,0.28); background:rgba(255,107,74,0.05); }
.svc-box.filled{ border-color:var(--border-hi); background:rgba(99,230,255,0.07);
  box-shadow:0 0 0 1px rgba(99,230,255,0.12), 0 8px 20px rgba(51,174,235,0.15); }
.svc-box.urgent.filled{ border-color:var(--urgent); box-shadow:0 0 0 1px rgba(255,107,74,0.25), 0 8px 20px var(--urgent-glow); }

.svc-label{ font-size:10px; color:var(--sub); margin-bottom:3px; letter-spacing:0.5px; text-transform:uppercase; font-weight:600; }
.svc-box.urgent .svc-label{ color:#ff9c85; }
.svc-rate{ font-size:10px; color:var(--dim); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.svc-box input{
  width:100%; text-align:center; padding:8px 4px; font-size:16px; font-family:var(--font-display); font-weight:700;
  border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,0.2); color:var(--ink);
}
.svc-box input:focus{ outline:none; border-color:var(--electric); box-shadow:0 0 0 3px rgba(99,230,255,0.15); }

/* ---------- bottom bar (fixed for mobile) ---------- */
.bar{
  position:sticky;      /* instead of fixed, to keep it within viewport */
  bottom:0; 
  z-index:30;
  background:rgba(9,13,28,0.85); 
  backdrop-filter:blur(20px); 
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:14px;
}
.bar .total{ font-size:11px; color:var(--sub); letter-spacing:1px; text-transform:uppercase; font-weight:600; }
.bar .total b{
  display:block; font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; transition:transform .18s ease;
}
.bar .total b.pulse{ transform:scale(1.12); color:var(--electric); }

.btn-primary, .bar button{
  position:relative; overflow:hidden; border:none; color:#04101f; cursor:pointer;
  background:linear-gradient(100deg,var(--electric),var(--cyan) 55%,var(--blue));
  padding:15px 26px; border-radius:999px; font-family:var(--font-display); font-size:14.5px; font-weight:700;
  letter-spacing:0.3px; box-shadow:0 10px 28px rgba(51,174,235,0.4);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary:active, .bar button:active{ transform:scale(0.97); }
.btn-primary:disabled, .bar button:disabled{ opacity:0.55; box-shadow:none; }

/* ---------- auth page ---------- */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.auth-card{
  position:relative; z-index:1; width:100%; max-width:360px; padding:32px 26px;
  background:var(--glass); border:1px solid var(--border); border-radius:22px;
  box-shadow:0 22px 60px rgba(0,3,20,0.5); text-align:center; backdrop-filter:blur(18px);
}
.auth-card .cube-mark{ margin:0 auto 16px; width:40px; height:40px; }
.auth-card h1{ font-family:var(--font-display); font-size:19px; margin:0 0 4px; }
.auth-card .sub{ color:var(--sub); font-size:12.5px; margin:0 0 20px; }
.auth-card form{ text-align:left; }

/* ---------- admin tables ---------- */
.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{ text-align:left; padding:10px 8px; color:var(--sub); font-size:10.5px;
  text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); }
.data-table td{ padding:10px 8px; border-bottom:1px solid var(--line); }
.data-table tr:last-child td{ border-bottom:none; }
.data-table input[type=number]{ width:80px; padding:6px 8px; font-size:13px; }
.pill-link{ color:var(--electric); text-decoration:none; font-weight:600; font-size:12.5px; }
.pill-link:hover{ text-decoration:underline; }

::selection{ background:rgba(99,230,255,0.3); }