@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0C2834;
  --card:#FFFFFF;
  --ink:#1A2A33;
  --ink-soft:#6C7A81;
  --line:#E0E5E8;
  --accent:#2AA6B5;
  --accent-700:#248F9E;
  --shadow:0 8px 24px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12);
  --radius:14px;
  --space:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0E2C38 0%, var(--bg) 60%);
  color:#F8F9FA;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

#app{max-width:1200px;margin:0 auto}

/* ---------- CARDS ---------- */
.card{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space);
}

/* ---------- AUTH ---------- */
#auth-container{
  max-width:460px;
  margin:40px auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

#auth-container h2{
  margin:0 0 6px 0;
  font-weight:600;
  color:var(--ink);
  text-align:left;
}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.brand__img{height:36px;width:auto;display:block}
.brand__name{font-weight:700;letter-spacing:.08em;color:#0F2D36}

.field,
#auth-container input[type="email"],
#auth-container input[type="password"]{
  width:100%;
}

input[type="email"], input[type="password"], input[type="text"], select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}

input:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(42,166,181,.15);
}

.actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:10px;border:1px solid transparent;
  font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .15s ease;
  width:100%;
}

.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-700)}
.btn--ghost{background:#fff;color:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:#F1FBFD}
.btn--muted{background:#EEF2F4;color:#24424C}
.btn--muted:hover{background:#DFE6EA}

.error{color:#d9534f;margin-top:6px;font-size:.9rem}

/* ---------- MAIN (hidden until auth) ---------- */
#main-content{display:none}

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.session{display:flex;align-items:center;gap:12px;color:var(--ink)}
.session__welcome{font-size:.95rem;color:var(--ink-soft)}

/* ---------- SECTIONS ---------- */
.layout{display:flex;flex-direction:column;gap:24px}
.grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:960px){
  .grid{grid-template-columns:1fr 1fr}
  #viewer-container{grid-column:1 / -1}
}

.grid-compact{display:grid;grid-template-columns:1fr auto;gap:12px}
.field-inline{display:grid;grid-template-columns:1fr auto;gap:12px}

/* ---------- LIST ---------- */
.list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.list li{
  padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;transition:background .15s ease
}
.list li:nth-child(odd){background:#F7FAFB}
.list li:hover{background:#EDF6F8}
.list li:last-child{border-bottom:none}

/* ---------- VIEWER ---------- */
#viewer-container{background:#fff}
#signal{
  width:98% !important;height:auto;max-height:none;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow)
}
.viewer-tools{display:flex;align-items:center;gap:12px;margin-top:12px}
.label{font-size:.9rem;color:var(--ink-soft)}

.meta{
  margin-top:14px;padding:14px;background:#F7FAFB;border:1px solid var(--line);
  border-radius:12px;color:var(--ink-soft);font-size:.95rem
}
.meta strong{color:var(--ink)}

/* ---------- Links ---------- */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

#viewer-container.card { padding: 16px 16px 20px }

#run-model-btn {
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100px;
}

#model-results .card {
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    background: #ffffff;
    max-width: 520px;
}
#model-results .title {
    font-size: 14px;
    margin: 0 0 8px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-soft);
}
#model-results .row {
    display: flex;
    gap: 8px;
    align-items: center;
}
#model-results .icon {
    font-size: 18px;
    line-height: 1;
}
#model-results .label {
    font-weight: 600;
}
#model-results .desc {
    margin-top: 6px;
    color: var(--ink-soft);
}

#model-results .accent-high {
    --border: #f59e0b33;
    outline: 0;
}
#model-results .accent-high .label,
#model-results .accent-high .icon {
    color: #f59e0b;
}

#model-results .accent-low {
    --border: #10b98133;
}
#model-results .accent-low .label,
#model-results .accent-low .icon {
    color: #10b981;
}

#model-results .accent-verylow {
    --border: #16a34a33;
}
#model-results .accent-verylow .label,
#model-results .accent-verylow .icon {
    color: #16a34a;
}