/* ============================================================
   CODECASTER v1.0 — restyled to match royy.my.id design system
   Warm cream light theme, navy + brown accents, Inter only
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --bg:#f0ede8;
  --bg2:#e8e4de;
  --surface:#fffdf8;
  --surface2:#f5f2ec;
  --border:#e2d8c8;
  --border2:#d4c8b4;
  --ink:#2c2416;
  --mid:#8a7a65;
  --light:#c4b8a5;
  --navy:#2d4d7a;
  --navy2:#1e3a5f;
  --navy-light:#4a6fa5;
  --brown:#b5843a;
  --brown2:#9a6e2e;
  --danger:#c0524a;
  --success:#4ade80;
  --shadow:0 2px 20px rgba(0,0,0,.08);
  --shadow-lg:0 8px 40px rgba(0,0,0,.12);
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* subtle grid background, same device as roydev's site */
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.5;
  pointer-events:none;
  z-index:0;
}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:64px;
  border-bottom:1px solid var(--border);
  background:rgba(240,237,232,.92);
  backdrop-filter:blur(12px);
}
.nav-logo{
  font-size:16px; font-weight:800; letter-spacing:-.5px;
  color:var(--ink); display:flex; align-items:center; gap:8px;
}
.nav-logo-dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
}
.nav-stats{ display:flex; gap:10px; }
.stat-chip{
  display:flex; flex-direction:column; align-items:center;
  padding:5px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:12px;
  min-width:64px;
}
.stat-label{ font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); }
.stat-value{ font-size:14px; font-weight:800; color:var(--navy); letter-spacing:-.2px; }
#cameraChip.cam-error .stat-value{ color:var(--danger); }
#cameraChip.cam-ok .stat-value{ color:var(--success); }

/* ---------- Hero ---------- */
.hero{ position:relative; z-index:1; padding:64px 48px 40px; max-width:900px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brown);
  background:rgba(181,132,58,.1);
  border:1px solid rgba(181,132,58,.25);
  border-radius:99px;
  padding:5px 14px;
  margin-bottom:24px;
  transition: all .2s ease;
}
.hero-eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--danger);
  flex-shrink:0;
  transition: background .2s ease;
}
.hero-eyebrow.online{ color:var(--navy); background:rgba(45,77,122,.08); border-color:rgba(45,77,122,.22); }
.hero-eyebrow.online .hero-eyebrow-dot{ background:var(--success); box-shadow:0 0 0 3px rgba(74,222,128,.18); }

.hero h1{ font-size:44px; font-weight:900; letter-spacing:-1.5px; line-height:1.1; color:var(--ink); margin-bottom:16px; }
.hero h1 .accent{ color:var(--navy); }
.hero-sub{ font-size:15px; color:var(--mid); line-height:1.7; font-weight:400; max-width:560px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  padding:9px 18px; border-radius:12px; cursor:pointer;
  text-decoration:none; transition:all .2s; border:none; letter-spacing:-.1px;
}
.btn-navy{ background:linear-gradient(135deg,var(--navy),var(--navy-light)); color:#fff; box-shadow:0 4px 16px rgba(45,77,122,.3); }
.btn-navy:hover{ opacity:.88; transform:translateY(-1px); box-shadow:0 6px 20px rgba(45,77,122,.4); }
.btn-outline{ background:var(--surface); color:var(--ink); border:1px solid var(--border); }
.btn-outline:hover{ background:var(--surface2); border-color:var(--border2); }
.btn-outline:active{ transform:scale(0.97); }

/* ---------- Sections ---------- */
section{ position:relative; z-index:1; padding:24px 48px 56px; max-width:1200px; margin:0 auto; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brown); margin-bottom:20px;
}

/* ---------- App grid layout ---------- */
.app-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:start; }

.project-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  position:relative;
  transition:all .25s;
}
.project-card:hover{ box-shadow:var(--shadow); border-color:var(--border2); }

.p-tag{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brown); margin-bottom:12px;
}

/* video card header row */
.video-card .panel-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
  flex-wrap:wrap; gap:10px;
}
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
.capture-btn{ padding:7px 16px; font-size:11.5px; }
.capture-icon{ font-size:13px; color:var(--navy); }
.toolbar .btn{ padding:7px 14px; font-size:11.5px; }
.toolbar .btn.active-toggle{
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  color:#fff; border-color:transparent;
}
.icon-toggle-btn{ padding:6px 12px; font-size:13px; line-height:1; }
.icon-toggle-btn.muted{ opacity:.5; }

/* ---------- Video panel ---------- */
.video-wrap{
  position:relative; width:100%; aspect-ratio:4/3;
  background:#12100c;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--border2);
}
.zoom-layer{
  position:absolute; inset:0;
  transform-origin:center center;
  will-change:transform;
}
#webcam, #overlay, #drawCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scaleX(-1);
}
#drawCanvas{ pointer-events:none; }

.zoom-badge{
  position:absolute; bottom:10px; right:10px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  color:#fff; background:rgba(45,77,122,0.55);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:999px; padding:4px 11px;
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.zoom-badge.visible{ opacity:1; }
.corner{ position:absolute; width:20px; height:20px; border:2px solid var(--brown); opacity:.85; pointer-events:none; }
.corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }

.video-status{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  background:rgba(18,16,12,.78);
  font-size:14px; color:#e8e4de; letter-spacing:.2px;
  transition:opacity .3s ease;
}
.video-status.hidden{ opacity:0; pointer-events:none; }
.video-status.error{ color:#ffb4ac; }

.capture-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; }
.capture-flash.flash{ animation:flashPulse .35s ease-out; }
@keyframes flashPulse{ 0%{opacity:.85;} 100%{opacity:0;} }

/* ---------- HUD stack ---------- */
.hud-stack{ display:flex; flex-direction:column; gap:14px; }
.hud-block{ padding:18px 20px; }

.gesture-readout{ display:flex; align-items:center; gap:14px; }
.gesture-icon{ font-size:32px; }
.gesture-name{ font-size:16px; font-weight:800; letter-spacing:-.3px; color:var(--navy); }

.menu-list{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.menu-list li{
  padding:9px 14px; border:1px solid transparent; border-radius:10px;
  font-weight:600; font-size:13.5px; color:var(--mid);
  transition:all .2s ease; position:relative;
}
.menu-list li.active{ color:var(--ink); background:var(--surface2); border-color:var(--border); }
.menu-list li.active::before{ content:"→"; margin-right:8px; color:var(--navy); font-weight:800; }
.menu-list li.selected{
  color:var(--navy); border-color:rgba(45,77,122,.3);
  background:rgba(45,77,122,.06);
}

.content-body{ font-size:13.5px; line-height:1.65; color:var(--mid); min-height:40px; }
#contentTitle{ color:var(--navy); }

/* pill-style tech tags reused for gesture legend */
.p-tech{ display:flex; flex-wrap:wrap; gap:6px; }
.p-tech span{
  font-size:11px; font-weight:600; color:var(--mid);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:99px; padding:4px 12px;
}
.legend-tech span{ color:var(--ink); }

/* ---------- Gesture history log ---------- */
.history-list{ list-style:none; display:flex; flex-direction:column; gap:6px; max-height:170px; overflow-y:auto; }
.history-list::-webkit-scrollbar{ width:5px; }
.history-list::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:3px; }
.history-list li{
  display:flex; align-items:center; gap:8px;
  font-size:12px; padding:6px 12px; border-radius:99px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--mid);
}
.history-list li .h-icon{ font-size:14px; }
.history-list li .h-name{ color:var(--ink); font-weight:700; flex:1; }
.history-list li .h-time{ font-size:10.5px; color:var(--light); font-variant-numeric:tabular-nums; }
.history-empty{ justify-content:center; background:transparent !important; border-style:dashed !important; }

/* ---------- Footer ---------- */
footer{
  position:relative; z-index:1;
  padding:28px 48px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-copy{ font-size:12px; color:var(--light); }
.footer-links{ font-size:12px; color:var(--light); font-variant-numeric:tabular-nums; }

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .app-grid{ grid-template-columns:1fr; }
}
@media(max-width:768px){
  nav{ padding:0 20px; }
  .nav-stats{ gap:6px; }
  .stat-chip{ min-width:0; padding:5px 10px; }
  .hero{ padding:40px 20px 28px; }
  .hero h1{ font-size:30px; letter-spacing:-1px; }
  section{ padding:16px 20px 40px; }
  footer{ padding:20px; flex-direction:column; align-items:flex-start; }
}