/* Style B — Y2K white/orange glass UI */
*{box-sizing:border-box} html,body{height:100%} body{margin:0;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
button{font:inherit;cursor:pointer}

:root{
  --bg:#f4f5f7;
  --card:#ffffffcc;
  --glass:rgba(255,255,255,.58);
  --border:#e5e7eb;
  --text:#0b0c10;
  --muted:#6b7280;
  --accent:#ff6a00; /* orange */
  --accent-2:#ff9a3c;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.6);
}

body.bg.light{background: radial-gradient(circle at 20% 0%, #ffffff, #f3f6fb 55%, #eaf0f9 100%)}
.glass{
  backdrop-filter: blur(10px) saturate(140%);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.splash{position:fixed;inset:0;display:grid;place-items:center}
.splash-inner{text-align:center;color:var(--text);letter-spacing:.06em;padding:24px}
.splash .mark{width:96px;margin:0 auto 18px}
.splash h1{margin:0 0 6px;font-weight:900}
.splash .tag{opacity:.8;margin:0 0 20px;color:var(--muted)}
.splash .sys{opacity:.6;margin-top:16px;font-size:12px;color:var(--muted)}
.btn.enter.accent{padding:12px 26px;border-radius:999px;border:1px solid var(--accent);background:linear-gradient(180deg,var(--accent),var(--accent-2));color:white}
.btn.enter.accent:hover{filter:brightness(1.05)}

.topbar{position:fixed;top:16px;left:16px;right:16px;display:grid;grid-template-columns:220px 1fr 100px;align-items:center;padding:10px 14px;opacity:0;transition:opacity .5s ease}
.topbar[aria-hidden="false"]{opacity:1}
.logo img{height:24px;filter:contrast(1.05)}
.actions{display:flex;gap:10px;justify-content:center}
.chip{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#111;box-shadow:0 1px 0 #fff inset}
.chip:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,106,0,.1)}

.syslights{display:flex;gap:6px;justify-self:end}
.dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;box-shadow:0 0 8px #0000 inset}
.dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e}

.canvas{padding-top:88px;max-width:1100px;margin:0 auto}
.hero{margin:80px 24px 24px;text-align:center}
.hero h2{font-size:clamp(24px,5vw,38px);margin:0 0 8px;color:var(--text)}
.hero p{color:var(--muted);margin:0}

/* Popups */
.popup{position:absolute;top:160px;left:120px;width:560px;min-width:280px;min-height:200px;color:var(--text);background:#fff}
.popup-titlebar{cursor:move;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:linear-gradient(#fff, #f6f6f6)}
.popup .title{font-weight:800;letter-spacing:.06em}
.win-buttons{display:flex;gap:6px}
.win-buttons .min,.win-buttons .close{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#111;display:grid;place-items:center}
.win-buttons .close{background:linear-gradient(180deg,#fff0,#fff0), linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent}
.popup-body{padding:14px 16px;max-height:60vh;overflow:auto}
.popup-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:
  linear-gradient(135deg, transparent 50%, var(--border) 50%)}

/* Content blocks */
.section-title{margin:0 0 8px;font-weight:900;letter-spacing:.08em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.card figcaption{padding:8px 10px;color:var(--muted);font-size:13px}

.product{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}
.product h4{margin:0}
.price{color:var(--accent);font-weight:800}

/* Responsive */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
  .product{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .grid{grid-template-columns:1fr}
}