:root{
  --gold:#c8a04b; --gold-2:#e6c878; --ink:#23282d; --ink-2:#3a4047; --anthra:#2b2f33;
  --bg:#f4f6f8; --card:#ffffff; --line:#e6e9ee; --muted:#7a838d; --ok:#2e9b57; --err:#c0473f;
  --shadow:0 6px 24px rgba(20,30,40,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--gold);text-decoration:none}
.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--anthra)}
.bar .brand{display:flex;align-items:center;gap:10px}
.bar img{height:34px}
.bar .who{color:#cdd3da;font-size:14px}
.bar .who a{color:var(--gold-2)}

/* auth screens */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 500px at 50% -10%,#3a4047,#23282d)}
.auth .box{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:30px;width:380px;max-width:92vw}
.auth img{height:52px;display:block;margin:0 auto 6px}
.auth h1{font-size:20px;text-align:center;margin:6px 0 2px}
.auth p.sub{text-align:center;color:var(--muted);margin:0 0 18px;font-size:14px}

input,select{width:100%;padding:11px 12px;margin:6px 0;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fbfcfd}
input:focus,select:focus{outline:none;border-color:var(--gold)}
label.fld{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}

button{cursor:pointer;border:0;border-radius:10px;font-size:15px;font-weight:600;padding:11px 16px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1c1c1c;transition:filter .15s}
button:hover{filter:brightness(1.05)}
button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
button.ghost{background:#eef1f5;color:var(--ink)}
button.dark{background:var(--anthra);color:#fff}
button.sm{padding:7px 11px;font-size:13px}
button.r{background:#f6e3e1;color:var(--err)}
.full{width:100%}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;margin:16px 0}
.card h2{margin:0 0 12px;font-size:17px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}.ok{color:var(--ok)}.err{color:var(--err)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:#eef1f5;color:var(--ink-2)}
.pill.on{background:#e4f6ec;color:var(--ok)}.pill.off{background:#f3e7e6;color:var(--err)}
table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:14px}
code{background:#eef1f5;padding:1px 6px;border-radius:5px;font-size:13px}
h1.page{font-size:24px;margin:22px 0 4px}.lead{color:var(--muted);margin:0 0 8px}

/* shade card */
.shade{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.shade .nm{font-weight:700;font-size:15px}
.shade .meta{color:var(--muted);font-size:12px;margin:2px 0 10px}
.shade .ctl{display:flex;gap:6px}
.bar2{height:7px;border-radius:6px;background:#eceff3;overflow:hidden;margin-top:10px}
.bar2 > i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* pergola simulation */
.sim{display:flex;justify-content:center;padding:8px}
.sim svg{max-width:100%;height:auto}
.legend{display:flex;gap:14px;justify-content:center;color:var(--muted);font-size:12px;margin-top:8px;flex-wrap:wrap}
.legend b{color:var(--ink)}