/* Core tokens and layout for onthu */
:root{--bg:#0f0f10;--text:#eee;--card:#111;--border:#2a2a2a;--accent:#10b981}
html,body{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}

/* Header */
.site-header{display:flex;align-items:center;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}

/* Grid: sidebar | content | right */
.app-grid{display:grid;grid-template-columns:220px 1fr 240px;gap:18px;min-height:calc(100vh - 52px);padding:18px;box-sizing:border-box}

/* Sidebar */
.sidebar{padding:18px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.brand{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}
.side-nav{display:flex;flex-direction:column;margin-top:6px}
.side-nav .nav-link{color:var(--text);text-decoration:none;padding:12px;border-radius:6px;display:block;margin-bottom:6px;border:1px solid rgba(255,255,255,0.02)}
.side-nav .nav-link.active,.side-nav .nav-link:hover{background:#161616;font-weight:600}

/* Content */
.content{padding:6px 28px}
.card{max-width:940px;margin:0 auto;padding:22px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,0.35)}

/* Controls */
label{display:block;margin-top:14px;font-weight:700;color:rgba(255,255,255,0.9)}
input[type="text"],input[type="number"],select,textarea{width:100%;padding:10px 12px;margin-top:8px;background:#0b0b0b;border:1px solid var(--border);color:var(--text);border-radius:6px;box-sizing:border-box}
button{cursor:pointer;border:0;padding:10px 14px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700}
button.full-white{background:#fff;color:#111;font-weight:700}

/* Right column */
.right-col{padding:18px;border-left:1px solid var(--border);box-sizing:border-box}

/* Utilities */
.result{margin-top:12px;font-weight:700}
.hidden{display:none}

/* Theme override for light mode */
body.light{--bg:#fff;--text:#111;--card:#fff;--border:#ddd;--accent:#4f46e5;color:var(--text)}

/* Responsive */
@media (max-width:960px){.app-grid{grid-template-columns:1fr;padding:12px}.right-col{display:none}.sidebar{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--border);padding:8px}.side-nav{flex-direction:row;gap:8px;margin-top:0}.side-nav .nav-link{padding:8px;border-radius:6px}}