:root{
  --bg:#f7f7f7; --text:#0f172a; --muted:#64748b; --card:#ffffff; --shadow:0 10px 20px rgba(0,0,0,.06);
  --goldbar:#caa15d; --teal:#0aa58b; --blue:#0b5bd3; --grayBox:#d9d9d9; --red:#d11033; --purple:#6a5ad7;
}
*{box-sizing:border-box;} html,body{height:100%;}
body{margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text);}
.topbar{ position:sticky; top:0; z-index:5; background:var(--goldbar); padding:16px 20px; text-align:center; }
.topbar h1{ margin:0; font-size:clamp(22px,3.5vw,36px); font-weight:800; letter-spacing:.06em; }
.actions{ position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; gap:8px; }
.btn{ border:none; border-radius:10px; padding:10px 14px; background:#f3f4f6; font-weight:700; cursor:pointer; box-shadow:var(--shadow); }
.btn.primary{ background:#111827; color:#fff; }
.status{ font-size:14px; font-weight:700; color:#111827; }
.container{ max-width:1200px; margin:24px auto 56px; padding:0 16px; }
.date-pill{ display:block; width:max-content; margin:12px auto 28px; background:#e5e7eb; color:#111827; border-radius:999px; padding:12px 22px; font-weight:700; box-shadow:var(--shadow); }
.rate-grid{ display:grid; grid-template-columns: repeat(4, minmax(240px,1fr)); gap:20px; justify-content:center; }
#cardsMount{ display:contents; }
.card{ background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:14px; display:flex; flex-direction:column; gap:12px; }
.card-title{ text-align:center; margin:2px 0 6px; font-size:18px; font-weight:800; letter-spacing:.03em; }
.bar{ position:relative; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; overflow:hidden; }
.bar .small{ font-size:14px; font-weight:700; text-align:center; padding:0 10px; }
.bar.today{ background:var(--teal); color:#fff; } .bar.eight{ background:var(--blue); color:#fff; }
.bar.yesterday{ background:var(--grayBox); color:#334155; } .bar.change{ background:var(--red); color:#fff; }
.bar.note{ background:var(--purple); color:#fff; min-height:56px; }
.copy-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:rgba(255,255,255,.95); padding:6px 8px; border-radius:8px; cursor:pointer; font-weight:900; box-shadow:var(--shadow); }
.copy-btn.copied{ background:#16a34a; color:#fff; }
.bottom-stats{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:28px; }
.stat{ display:flex; align-items:center; gap:10px; position:relative; }
.stat-label{ min-width:140px; border-radius:14px; padding:16px 24px; text-align:center; font-weight:800; letter-spacing:.05em; color:#1f2937; box-shadow:var(--shadow); }
.stat-label.gold{ background:#d7b377; } .stat-label.silver{ background:#d1d5db; }
.stat-value{ min-width:140px; border-radius:14px; padding:16px 24px; text-align:center; font-weight:900; font-size:22px; background:#e5decf; box-shadow:var(--shadow); }
.stat .copy-btn{ right:-12px; }
.editable[contenteditable="true"]{ outline:2px dashed rgba(255,255,255,.85); outline-offset:4px; padding:2px 6px; border-radius:8px; }
@media (max-width:1100px){ .rate-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (max-width:640px){ .rate-grid{ grid-template-columns: 1fr; } }