/* Operator-grade theme: Teal / Gray / Navy (mobile-first) */

:root{
  --bg: #eef6f7;
  --card: #ffffff;
  --text: #0f2433;
  --muted: #5b6d76;
  --accent: #007a87;    /* teal-ish */
  --accent2: #0a3e6b;   /* navy */
  --ok: #1aa45a;
  --warn: #b06a00;
  --err: #cc3b3b;
  --glass: rgba(255,255,255,0.8);
  --radius: 12px;
  --font: Inter, "Segoe UI", Roboto, Arial, system-ui;
}

*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font); background:linear-gradient(180deg,var(--bg), #dff3f4 300px); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.topbar{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:14px 16px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:white;
  position:sticky; top:0; z-index:50; box-shadow:0 6px 22px rgba(10,20,30,0.12);
}
.topbar .brand{font-weight:800; font-size:17px}
.topbar .title{font-size:13px; opacity:0.95}
.icon-btn{background:transparent;border:none;color:white;font-size:18px;padding:6px;border-radius:8px}

.wrap{max-width:1100px;margin:12px auto;padding:0 12px}
.grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:900px){ .grid{grid-template-columns: 1fr 420px; } }

.card{background:var(--card); border-radius:var(--radius); padding:12px; box-shadow:0 10px 30px rgba(6,18,28,0.06); overflow:hidden}
.card-head h3{margin:0;font-size:16px;color:var(--accent)}
.card-head .sub{font-size:12px;color:var(--muted); margin-top:4px}

.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(10,30,40,0.04)}
.kv:last-child{border-bottom:none}
.kv span{color:var(--muted);font-size:13px}
.kv b{font-weight:700;color:var(--text)}

.card-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{flex:1;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent2));color:white;border:none;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid rgba(10,30,40,0.06);color:var(--text)}
.small{font-size:13px;color:var(--muted)}
.pre{background:linear-gradient(180deg, rgba(10,30,40,0.02), rgba(10,30,40,0.01)); padding:10px;border-radius:8px;border:1px solid rgba(10,30,40,0.03);overflow:auto;max-height:160px}
.note{background:rgba(10,30,40,0.02); padding:8px;border-radius:8px;margin-top:8px;font-size:13px;color:var(--muted)}

.meter{height:10px;background:rgba(10,30,40,0.05);border-radius:6px;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%}

.smallCanvas{width:100%;height:120px;border-radius:10px;background:linear-gradient(180deg,#fff, #f7fbfb);border:1px solid rgba(10,30,40,0.03)}

.footer{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.brandFooter{color:var(--accent);font-weight:800}

/* responsive tweaks */
@media (max-width:520px){
  .btn{font-size:14px;padding:12px}
  .card{padding:10px}
}