:root{
  --bg: #0b0b0c;
  --bg-card: #121215;
  --bg-soft: #0f0f12;
  --text: #e9e9ee;
  --text-dim: #a7a7b3;
  --border: #24242a;
  --brandA: #7eb3d5;
  --brandB: #9fc99f;
  --high: #C7DB9C;
  --medium: #FFF0BD;
  --low: #FDAB9E;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; background:linear-gradient(180deg, #0c0c10 0%, #0a0a0d 50%, #0a0a0c 100%); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
a{ color:var(--text); text-decoration:none; }
.row{ display:flex; align-items:center; }
.between{ justify-content:space-between; }
.gap{ gap:10px; }
.spacer{ flex:1; }
.btn{ background:var(--brandA); color:#0b0b0c; padding:8px 12px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn:disabled{ opacity:.6; cursor:default; }
.app-header{ position:sticky; top:0; backdrop-filter:saturate(120%) blur(8px); background:rgba(12,12,16,.7); border-bottom:1px solid var(--border); z-index:10; }
.nav{ max-width:1100px; margin:0 auto; padding:10px 12px; gap:16px; }
.brand{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text); }
.logo{ width:24px; height:24px; border-radius:6px; }
.view{ max-width:1100px; margin:0 auto; padding:16px; }
.login{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.card{ background:var(--bg-card); border:1px solid var(--border); padding:20px; border-radius:12px; max-width:520px; width:100%; }
.list{ list-style:none; margin:0; padding:0; }
.list li{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--border); background:var(--bg-card); border-radius:12px; margin-bottom:10px; gap:10px; }
.list .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status,.meta{ color:var(--text-dim); font-size:12px; }
.section{ background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:14px; }
.section h3{ margin:0 0 8px 0; font-size:14px; }
.fields{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.field{ display:flex; flex-direction:column; gap:6px; }
input, select, textarea{ background:var(--bg-soft); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px; }
textarea{ min-height:80px; resize:vertical; }
.app-footer{ border-top:1px solid var(--border); padding:10px 12px; max-width:1100px; margin:0 auto; color:var(--text-dim); }

/* Rings */
.ring-sm{ width:34px; height:34px; position:relative; }
.ring-sm svg{ width:34px; height:34px; transform:rotate(-90deg); }
.ring-sm .track{ fill:none; stroke: #1d1d23; stroke-width: 6; stroke-linecap:round; }
.ring-sm .indicator{ fill:none; stroke: var(--brandB); stroke-width: 6; stroke-linecap:round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .4s ease, stroke .2s ease; }
.ring-sm .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-dim); }
.ring-xl{ width:160px; height:160px; position:relative; }
.ring-xl svg{ width:160px; height:160px; transform:rotate(-90deg); }
.ring-xl .track{ fill:none; stroke:#1d1d23; stroke-width:14; stroke-linecap:round; }
.ring-xl .indicator{ fill:none; stroke: var(--brandB); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .4s ease, stroke .2s ease; }
.ring-xl .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; }

@media (max-width: 840px){
  .fields{ grid-template-columns: 1fr; }
  .nav{ gap:10px; overflow:auto; }
}