:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f172a;
  --accent-2:#2563eb;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--accent);}
a{color:var(--accent-2);text-decoration:none}
.app{max-width:1100px;margin:20px auto;padding:16px}

.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.title{font-weight:600;font-size:20px}
.controls{display:flex;gap:10px;align-items:center}
.controls .small{color:var(--muted);font-size:13px}
button{background:#fff;border:1px solid #e6e9ef;padding:8px 12px;border-radius:8px;cursor:pointer}
button:hover{box-shadow:0 6px 18px rgba(16,24,40,0.06)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:800px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:0 6px 18px rgba(15,23,42,0.03)}
.cards{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.cards .mini{min-width:150px;flex:1 1 150px;padding:10px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdff);text-align:left}
.mini .code{font-size:12px;color:var(--muted)}
.mini .val{font-weight:700;font-size:18px;margin-top:6px}
.mini .diff{font-size:12px;color:var(--muted);margin-top:6px}

.converter .row{display:flex;gap:8px;align-items:center;margin-top:10px}
.converter input[type=number]{padding:8px;border-radius:8px;border:1px solid #e6e9ef;flex:1}
select{padding:8px;border-radius:8px;border:1px solid #e6e9ef}
.converter button{padding:8px 12px}
.result{margin-left:8px;font-weight:700}

.hint{color:var(--muted);margin-top:8px;display:block}

.charts canvas{width:100%}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

.settings label{display:block;margin:8px 0;color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.foot{text-align:center;margin-top:16px;color:var(--muted)}