/* Kepler Health — Internal Team Tools. Brand: purple + gold, dark, Outfit + Instrument Serif. */
:root{
  --bg:#1A0A2E; --bg-deep:#110620; --purple-deep:#2E0F45; --purple:#4B1D6E;
  --purple-light:#6B3FA0; --gold:#F2A900; --gold-light:#FFD666;
  --text:#FAF7F2; --text-soft:rgba(250,247,242,.72); --text-mute:rgba(250,247,242,.45);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.18);
  --card:rgba(255,255,255,.04); --good:#6BCB77; --avg:#F2A900; --low:#E94B3C;
  --radius:14px; --shadow:0 14px 40px rgba(11,6,20,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:
    radial-gradient(ellipse at top,rgba(75,29,110,.30) 0%,transparent 52%),
    radial-gradient(ellipse at bottom right,rgba(242,169,0,.07) 0%,transparent 50%),
    var(--bg);
  background-attachment:fixed; color:var(--text); min-height:100vh;
  font-family:'Outfit',system-ui,sans-serif; font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-light);text-decoration:none}
a:hover{text-decoration:underline}
.serif{font-family:'Instrument Serif',serif;font-weight:400}
.serif-italic{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}

/* top gradient bar (brand signature) */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  background:linear-gradient(90deg,var(--purple),var(--gold),var(--purple))}

header.top{display:flex;align-items:center;gap:14px;padding:30px 56px;position:relative}
header.top .kepler-mark{display:flex;align-items:center;gap:12px;letter-spacing:.18em;
  text-transform:uppercase;font-size:13px;font-weight:500;color:var(--text)}
header.top .kepler-mark .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 16px rgba(242,169,0,.6)}
header.top .sub{margin-left:auto;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-soft)}

.wrap{max-width:920px;margin:8px auto 40px;padding:0 28px}
.hero{padding:18px 0 30px}
.hero .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:52px;line-height:1.05;letter-spacing:-.5px}
.hero h1 .italic{font-style:italic;color:var(--gold-light)}
.hero p{color:var(--text-soft);max-width:620px;margin-top:14px;font-size:15px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 26px;margin-bottom:18px;backdrop-filter:blur(4px)}
.card h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:22px;margin-bottom:4px}
.card p.lead{margin:0 0 16px;color:var(--text-mute);font-size:14px}

.grid{display:grid;gap:14px}
.tools{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tool{display:block;border:1px solid var(--line);border-radius:12px;padding:20px;
  background:linear-gradient(160deg,rgba(107,63,160,.12),rgba(255,255,255,.02));transition:.18s}
.tool:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(242,169,0,.18);text-decoration:none}
.tool h3{font-size:16px;color:var(--text);margin-bottom:6px}
.tool span{font-size:13px;color:var(--text-soft)}

label{display:block;font-size:13px;font-weight:500;margin:0 0 7px;color:var(--text)}
input[type=text],select,input[type=file]{width:100%;padding:11px 13px;border:1px solid var(--line-strong);
  border-radius:9px;font:inherit;background:rgba(0,0,0,.25);color:var(--text)}
input[type=text]::placeholder{color:var(--text-mute)}
input[type=text]:focus,select:focus{outline:none;border-color:var(--gold)}
input[type=file]{padding:9px 12px;color:var(--text-soft)}
input[type=file]::file-selector-button{background:var(--purple);color:#fff;border:0;border-radius:7px;
  padding:7px 12px;margin-right:12px;font:inherit;cursor:pointer}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.channel{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;background:rgba(255,255,255,.02)}
.channel .head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.channel .badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#04201d;
  background:var(--gold);padding:3px 9px;border-radius:20px}
.channel.x .badge{background:var(--purple-light);color:#fff}
.hint{font-size:12px;color:var(--text-mute);margin-top:7px}

button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:13px 22px;cursor:pointer}
.btn{background:linear-gradient(120deg,var(--gold),var(--gold-light));color:#3a1d00}
.btn:hover{box-shadow:0 0 22px rgba(242,169,0,.4)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

.note{background:rgba(242,169,0,.08);border:1px solid rgba(242,169,0,.28);border-radius:10px;padding:13px 15px;font-size:13px;color:var(--text-soft)}
.status{margin-top:16px;font-size:14px}
.status.err{color:var(--low)}
.status.ok{color:var(--good)}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes spin{to{transform:rotate(360deg)}}

.gate{position:fixed;inset:0;background:var(--bg-deep);display:grid;place-items:center;z-index:80;
  background-image:radial-gradient(ellipse at 30% 30%,rgba(107,63,160,.35),transparent 55%)}
.gate .box{background:var(--purple-deep);border:1px solid var(--line-strong);border-radius:16px;
  padding:34px;width:340px;text-align:center;box-shadow:var(--shadow)}
.gate .mark{display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.18em;
  text-transform:uppercase;font-size:12px;color:var(--gold-light);margin-bottom:18px}
.gate .mark .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(242,169,0,.6)}
.gate h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:26px;margin-bottom:6px}
.gate p{color:var(--text-mute);font-size:13px;margin:0 0 18px}
.hidden{display:none!important}
footer{color:var(--text-mute);font-size:12px;text-align:center;padding:30px}
footer .dot{color:var(--gold)}