:root{
  --brand-blue:#0f4c81;
  --brand-blue-2:#145b9e;
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,.82);
  --gold:#f0b429;
  --card-bg:rgba(255,255,255,0.06);
  --card-border:rgba(255,255,255,0.35);
  --good:#3fe08f;
  --bad:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 50% -10%, var(--brand-blue-2), var(--brand-blue));
  overflow-x:hidden;
}
.bodoni{ font-family: 'Bodoni Moda', serif; }

#bg-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1; opacity:.28;
}

.site-header{ padding:28px 20px 0; }
.brand{ display:flex; align-items:center; gap:14px; }
.logo{ width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 2px 0 rgba(0,0,0,.15)); }
.brand-title{ margin:0; font-size:28px; letter-spacing:.3px; font-weight:700; }

.hero{ display:flex; justify-content:center; padding:24px 16px 60px; }
.hero-inner{ max-width:980px; width:100%; text-align:center; }

.card-logo{
  display:inline-block; background:var(--card-bg);
  border:2px solid var(--card-border); border-radius:16px;
  padding:8px 10px; margin:10px auto 16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.card-logo img{ width:190px; height:auto; display:block; }

.headline{ font-size:46px; margin:10px 0 8px; font-weight:800; text-shadow:0 2px 0 rgba(0,0,0,.12); }
.subtext{ margin:0 auto 20px; max-width:720px; color:var(--ink-dim); }

.cta-row{ display:flex; gap:12px; justify-content:center; margin:16px 0 24px; }
.btn{
  border:2px solid transparent; padding:12px 18px;
  border-radius:14px; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary{ background:var(--gold); color:#10253f; box-shadow:0 6px 0 #c8971d; }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); border-style:solid; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

.draw-card{
  position:relative; margin:18px auto 0; text-align:left;
  background:var(--card-bg); border:2px solid var(--card-border);
  border-radius:16px; padding:14px; box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.reset-btn{
  position:absolute; top:10px; right:10px;
  border:2px dashed rgba(255,255,255,.6); background:transparent; color:#fff;
  padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:700;
}
.reset-btn:hover{ background:rgba(255,255,255,.08); }

.draw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.pad-header{ display:flex; align-items:baseline; gap:8px; padding:2px 2px 8px 2px; }
.pad-header span{ font-weight:800; }
.pad-header small{ color:var(--ink-dim); }

#drawPad, #candleView{
  width:100%; height:auto; display:block;
  background:rgba(0,0,0,.2);
  border:2px dashed rgba(255,255,255,.35);
  border-radius:12px;
}

.result-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; margin-bottom:8px;
  border-radius:10px; background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.25); min-height:38px;
}
.result-bar .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.6); display:inline-block; }

.site-footer{ text-align:center; padding:30px 16px 40px; color:var(--ink-dim); }
.scribble{ border-top:2px dashed rgba(255,255,255,.25); padding-top:12px; display:inline-block; }

@media (max-width: 980px){ .hero-inner{ max-width:92vw; } }
@media (max-width: 860px){
  .headline{ font-size:34px; }
  .card-logo img{ width:150px; }
  .draw-grid{ grid-template-columns:1fr; }
}

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 16px;
  color: var(--ink-dim);
  background: radial-gradient(1200px 800px at 50% -10%, var(--brand-blue-2), var(--brand-blue));
  border-top: 2px dashed rgba(255,255,255,.25);
}

.site-footer .x-link{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:2px solid rgba(255,255,255,.35);
  border-radius:10px;
  background:rgba(0,0,0,0.15);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
}
.site-footer .x-link:hover{ background:rgba(255,255,255,.12); }
.site-footer .x-icon{ width:18px; height:18px; display:block; }
.site-footer .x-text{ line-height:1; }

@media (max-width: 860px){
  .site-footer .x-text { display: none; }
}