/* TOKENS */
:root { --bg:#2c3440; --surface:#616161; --surface-2:#3d4858; --ink:#e8e4dc; --ink-muted:#9aaa9e; --teal:#02D0CD; --teal-dark:#01b0ae; --border:rgba(255,255,255,0.09); --radius:5px; --radius-card:16px; --font-body:'DM Sans',system-ui,sans-serif; --shadow-card:0 10px 30px rgba(0,0,0,0.3); --transition:0.2s ease; --accent:#02D0CD; --accent2:#ef821e; --text-dim:#9aaa9e; }
body.light { --bg:#f2f0ec; --surface:#e8e4dd; --surface-2:#e8e4dc; --ink:#1a1a18; --ink-muted:#5a5a55; --teal:#019997; --teal-dark:#017a78; --border:#d4cfc6; --accent:#019997; }

/* BANNER */
.banner { width:100%; margin:5px auto 10px; position:relative; overflow:hidden; border-radius:var(--radius-card); box-shadow:var(--shadow-card); display:block; }
.banner img { display:block; width:100%; height:100px; object-fit:cover; object-position:center 60%; z-index:1; }
.banner::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0.2)); z-index:2; }
.banner-title { position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); color:#f1ede6; font-size:2.2rem; font-weight:700; z-index:3; text-shadow:0 4px 12px rgba(0,0,0,0.8); white-space:nowrap; }
.banner-subtitle { position:absolute; top:70%; left:50%; transform:translate(-50%,-50%); color:#f1ede6; font-size:1.2rem; font-weight:700; z-index:3; text-shadow:0 4px 12px rgba(0,0,0,0.8); white-space:nowrap; }
.banner-about { position:absolute !important; top:10px; right:15px; z-index:4; }
.banner-about button { width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.3s,transform 0.2s; }
.banner-about button:hover { background:rgba(0,0,0,0.85); transform:scale(1.1); }

/* MAIN & GALLERY */
main { max-width:1400px; margin:0 auto; padding:32px 0 64px; }
.gallery { column-count:1; column-gap:1rem; }
@media (min-width:600px) { .gallery { column-count:3; } }
@media (min-width:1024px) { .gallery { column-count:4; } }

/* CARD */
.card { display:inline-block; width:100%; margin-bottom:16px; break-inside:avoid; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); cursor:pointer; transition:transform 0.3s ease; }
.card:hover { transform:scale(1.02); }
.card-image { width:100%; height:auto; }
.card-content { padding:1rem; }
.card-title { font-size:1.2rem; font-weight:600; }
.card-subtitle { font-size:0.9rem; color:#555; margin-top:0.5rem; }

/* MODAL */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:1000; }
.modal-content { position:relative; width:95%; height:95%; margin:2.5% auto; background:#000; border-radius:20px; overflow:hidden; }
.close-btn { position:absolute; top:20px; right:20px; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:24px; cursor:pointer; z-index:1001; display:flex; align-items:center; justify-content:center; transition:background var(--transition); }
.close-btn:hover { background:rgba(255,255,255,0.25); }
#viewer { width:100%; height:100%; }

/* ABOUT OVERLAY */
.about-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:10001; backdrop-filter:blur(5px); }
.about-content { position:relative; width:90%; max-width:700px; max-height:80vh; margin:5vh auto; background:linear-gradient(135deg,#fff 0%,#ccc 100%); color:#4a596f; border-radius:20px; padding:3rem; box-shadow:0 20px 60px rgba(0,0,0,0.5); overflow-y:auto; }
.about-close-btn { position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.1); border:1px solid rgba(0,0,0,0.2); color:#333; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s,transform 0.3s; }
.about-close-btn:hover { background:rgba(0,0,0,0.2); transform:rotate(90deg); }

/* TOOLTIP */
.tooltip { position:relative; }
.tooltiptext { visibility:hidden; opacity:0; position:absolute; bottom:-40px; right:0; background:rgba(0,0,0,0.85); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px; white-space:nowrap; transition:opacity 0.25s; }
.tooltip:hover .tooltiptext { visibility:visible; opacity:1; }

/* SECTION */
.section { margin-bottom:28px; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface); }
.section-header { padding:10px 18px; background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.section-header h2 { font-family:'Syne',sans-serif; font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:0.1em; }
.section-header .dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }
.section-body { padding:0; }

/* MEDIA */
.webcam-img { width:100%; height:auto; display:block; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.video-wrapper video { position:absolute; inset:0; width:100%; height:100%; background:#000; }

/* HISTORY GRID */
.history-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.prev-day-item { background:var(--bg); }
.prev-day-label { font-family:'Syne',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); padding:8px 10px; border-bottom:1px solid var(--border); }
.prev-day-item .video-wrapper { padding-bottom:56.25%; }

/* LOT */
.lot-img { width:100%; height:auto; display:block; }
.lot-caption { padding:10px 18px 14px; font-size:12px; color:var(--text-dim); line-height:1.5; background:var(--bg); border-top:1px solid var(--border); }

/* GALLERY GRID (inner) */
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; background:var(--bg); }
.gallery-grid a { display:block; border:1px solid var(--accent); border-radius:4px; overflow:hidden; transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s; }
.gallery-grid a:hover { border-color:var(--accent2); box-shadow:0 0 0 2px var(--accent2),0 0 28px rgba(239,130,46,0.5); transform:translateY(-3px); }
.gallery-grid img { width:100%; height:auto; display:block; }

@media (max-width:600px) {
  .banner-about { top:8px; right:10px; }
  .banner-title { font-size:1.6rem; }
  .banner-subtitle { font-size:1rem; }
}