:root { --ink:#12332f; --muted:#687a76; --line:#dbe5e2; --paper:#fff; --soft:#f3f8f6; --teal:#087566; --danger:#b52525; font-family:Inter, ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--soft); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; } button,input,select { font:inherit; } button { cursor:pointer; border:0; border-radius:8px; padding:11px 16px; font-weight:700; color:#fff; background:var(--teal); } button:disabled { cursor:wait; opacity:.65; } .shell { min-height:100vh; } .login-card { width:min(430px,calc(100% - 32px)); margin:10vh auto; padding:40px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 20px 50px #183f3615; } .brand { display:flex; align-items:center; gap:9px; letter-spacing:.08em; font-size:.8rem; font-weight:800; } .brand-mark { display:grid; place-items:center; width:27px; height:27px; color:#fff; background:var(--teal); border-radius:50%; letter-spacing:0; } .separator { color:#9aaca7; } h1 { margin:4px 0 8px; font-size:clamp(1.55rem,2vw,2rem); } h2 { margin-top:0; } .eyebrow { margin:18px 0 6px; color:var(--teal); font-weight:800; font-size:.72rem; letter-spacing:.12em; } .muted { color:var(--muted); line-height:1.55; } form { display:grid; gap:16px; margin-top:25px; } label { display:grid; gap:7px; color:#38534e; font-size:.88rem; font-weight:700; } input,select { width:100%; padding:11px 12px; color:var(--ink); border:1px solid #afc3bd; border-radius:7px; background:#fff; } input:focus,select:focus { outline:3px solid #a9ddd4; border-color:var(--teal); } .message { min-height:1.3em; margin:14px 0; color:var(--teal); font-weight:600; } .message.error { color:var(--danger); } .topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:var(--paper); border-bottom:1px solid var(--line); } .ghost,.secondary { color:var(--teal); background:var(--paper); border:1px solid #9ab6b0; } .layout { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 64px); } nav { padding:24px 16px; border-right:1px solid var(--line); background:#f8fbfa; } .nav-item { width:100%; margin-bottom:5px; text-align:left; color:#42635c; background:transparent; } .nav-item:hover,.nav-item.active { color:#075d51; background:#dcefe9; } .content { width:min(1050px,100%); padding:46px; } .panel { max-width:920px; padding:32px; background:var(--paper); border:1px solid var(--line); border-radius:13px; } .form-grid { grid-template-columns:minmax(0,1fr) 180px auto; align-items:end; } .form-grid button { height:44px; } .generated { margin-top:28px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:20px; border-radius:10px; background:#e5f4ef; } .generated span { color:var(--muted); font-size:.86rem; } .generated strong { font-size:1.25rem; letter-spacing:.08em; } .generated p { grid-column:1/-1; margin:0; } .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; } .panel-heading .eyebrow { margin-top:0; } .table-wrap { overflow-x:auto; margin-top:24px; } table { width:100%; border-collapse:collapse; text-align:left; } th { color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; } th,td { padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:middle; } td:last-child,th:last-child { text-align:right; } .danger { background:var(--danger); } .danger-label { color:var(--danger); } .table-delete { padding:7px 10px; font-size:.82rem; } dialog { width:min(460px,calc(100% - 32px)); border:0; border-radius:13px; box-shadow:0 25px 80px #001d1580; } dialog::backdrop { background:#072d2670; } .dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; } [hidden] { display:none!important; }
@media (max-width:720px) { .topbar { padding:0 16px; } .topbar strong { display:none; } .layout { display:block; } nav { display:flex; overflow:auto; padding:10px; border-right:0; border-bottom:1px solid var(--line); } .nav-item { white-space:nowrap; margin:0; } .content { padding:20px 16px; } .panel { padding:22px 16px; } .form-grid { grid-template-columns:1fr; } .generated { grid-template-columns:1fr; } }