:root { color-scheme: light; --ink:#17231d; --muted:#69756e; --paper:#f5f3eb; --panel:#fffef9; --line:#dedfd5; --green:#2f6848; --mint:#bde9d0; --red:#9e4035; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); }
button,input { font:inherit; }
button { cursor:pointer; }
.brand { display:flex; align-items:center; gap:.7rem; font-size:.78rem; font-weight:800; letter-spacing:.18em; }
.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; color:white; background:var(--ink); border-radius:50%; letter-spacing:0; }
.eyebrow { color:var(--green); font-size:.7rem; font-weight:800; letter-spacing:.17em; }
.auth-shell { display:grid; grid-template-columns:1.25fr .75fr; min-height:100vh; padding:3rem; gap:3rem; background:radial-gradient(circle at 20% 80%,#d9eedc 0,transparent 32%),var(--paper); }
.auth-copy { align-self:center; max-width:750px; }
.auth-copy h1 { font-family:Georgia,serif; font-size:clamp(3.4rem,7vw,7.4rem); font-weight:400; line-height:.92; letter-spacing:-.055em; margin:.4rem 0 2rem; }
.auth-copy>p:last-child { max-width:520px; color:var(--muted); font-size:1.1rem; line-height:1.7; }
.auth-panel { align-self:center; background:var(--panel); padding:3.2rem; border:1px solid var(--line); border-radius:1.2rem; box-shadow:0 28px 70px #29473518; }
.auth-panel h2 { font-family:Georgia,serif; font-size:2.5rem; font-weight:400; margin:.4rem 0 2rem; }
form,label { display:grid; gap:.5rem; }
form { gap:1.2rem; }
label { color:var(--muted); font-size:.78rem; font-weight:700; }
input { width:100%; padding:.9rem 1rem; color:var(--ink); background:white; border:1px solid var(--line); border-radius:.5rem; }
.primary,.quiet,.danger,.text-button { border:0; border-radius:.45rem; padding:.72rem 1rem; font-weight:750; }
.primary { color:white; background:var(--green); }
.quiet { color:var(--ink); background:#e9ece5; }
.danger { color:var(--red); background:#f6e5e1; }
.text-button { color:var(--green); background:transparent; padding-left:0; margin-top:1rem; }
.form-status,.error { color:var(--red); min-height:1.3rem; }
.portal-frame { display:grid; grid-template-columns:245px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:2rem 1.3rem; border-right:1px solid var(--line); background:#ecebe3; }
nav { display:grid; gap:.25rem; margin-top:3rem; }
nav button { padding:.72rem .9rem; text-align:left; color:var(--muted); background:transparent; border:0; border-radius:.4rem; }
nav button.active { color:var(--ink); background:var(--panel); font-weight:750; box-shadow:0 1px 4px #17231d0d; }
.account-chip { display:flex; align-items:center; gap:.6rem; margin-top:auto; overflow:hidden; }
.avatar { display:grid; place-items:center; flex:0 0 2rem; height:2rem; border-radius:50%; background:var(--mint); font-weight:800; }
.account-email { overflow:hidden; text-overflow:ellipsis; font-size:.78rem; }
.content { padding:3.1rem clamp(2rem,5vw,5rem); max-width:1500px; width:100%; }
.page-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:2rem; }
.page-header h1 { margin:.2rem 0 0; font-family:Georgia,serif; font-size:3.2rem; font-weight:400; letter-spacing:-.04em; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat-card,.panel { background:var(--panel); border:1px solid var(--line); border-radius:.75rem; }
.stat-card { padding:1.4rem; }
.stat-card p { margin:0; color:var(--muted); }
.stat-card strong { display:block; margin:.8rem 0 .25rem; font-family:Georgia,serif; font-size:3rem; font-weight:400; }
.stat-card span,.muted,.row-copy span { color:var(--muted); font-size:.82rem; }
.split { display:grid; grid-template-columns:1.5fr 1fr; gap:1rem; margin-top:1rem; }
.panel { padding:1.3rem; margin-bottom:1rem; }
.panel h2 { margin:.2rem 0 1rem; font-family:Georgia,serif; font-weight:400; }
.resource-row { display:flex; align-items:center; gap:.8rem; min-height:3.8rem; border-top:1px solid var(--line); }
.resource-row:first-child { border-top:0; }
.state { width:.52rem; height:.52rem; flex:0 0 .52rem; border-radius:50%; background:#93a099; }
.state-online,.state-active,.state-running,.state-sent { background:#43a268; box-shadow:0 0 0 4px #43a2681a; }
.state-disabled,.state-failed,.state-error { background:#c65a4d; }
.row-copy { display:grid; gap:.17rem; flex:1; min-width:0; }
.row-copy strong,.row-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill { padding:.28rem .55rem; border-radius:2rem; color:var(--muted); background:#ecefe9; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; }
.empty { color:var(--muted); padding:2rem; text-align:center; }
.machine-states,.machine-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; }
.machine-states { margin-bottom:1rem; }
.machine-metrics { grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); }
.metric-cell { display:grid; gap:.2rem; padding:.8rem; border:1px solid var(--line); border-radius:.5rem; }
.metric-cell strong { font-size:.9rem; }
.metric-label,.freshness { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.freshness-fresh { color:var(--green); }.freshness-stale { color:#8a641f; }
.execution-summary { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; padding:1rem 0; font-size:.8rem; }
.execution-summary span { color:var(--muted); }
.power-summary { margin-top:.8rem; }
.power-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.5rem; }
.power-actions button { width:auto; border:0; border-radius:.45rem; padding:.72rem 1rem; font-weight:750; }
button.secondary { color:var(--ink); background:#dcecdf; }
.capabilities { display:flex; flex-wrap:wrap; gap:.35rem; }
.device-panel .quiet,.device-panel .danger { font-size:.72rem; }
.pairing-dialog { width:min(92vw,480px); padding:2rem; border:1px solid var(--line); border-radius:1rem; color:var(--ink); background:var(--panel); }
.pairing-dialog::backdrop { background:#17231d99; backdrop-filter:blur(4px); }
.pairing-dialog h2 { font-family:Georgia,serif; font-size:2rem; font-weight:400; }
.qr { display:grid; place-items:center; margin:1.4rem auto; }
.qr svg { width:min(100%,280px); height:auto; }
.fallback { margin:1rem 0; }
.profile { max-width:680px; padding:2rem; }
@media (max-width:900px) { .auth-shell { grid-template-columns:1fr; padding:1.5rem; }.auth-copy { display:none; }.portal-frame { grid-template-columns:1fr; }.sidebar { position:static; height:auto; }.sidebar nav { grid-template-columns:repeat(2,1fr); margin-top:1.5rem; }.account-chip { margin-top:1.5rem; }.stats,.split { grid-template-columns:1fr 1fr; }.content { padding:2rem 1.2rem; } }
@media (max-width:560px) { .stats,.split,.machine-states { grid-template-columns:1fr; }.page-header h1 { font-size:2.4rem; }.resource-row { flex-wrap:wrap; }.auth-panel { padding:2rem; } }