:root { color-scheme: light; --primary:#803489; --primary-dark:#61236a; --primary-soft:#f5edf6; --gold:#c69a43; --green:#28795d; --red:#b8424f; --amber:#9a6d0e; --ink:#20272b; --muted:#657178; --line:#d9e0e1; --surface:#fff; --background:#f2f5f4; font-family: Inter, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--background); color:var(--ink); font-size:14px; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--primary); }
.app-header { position:sticky; top:0; z-index:5; min-height:64px; padding:0 22px; display:flex; align-items:center; gap:26px; border-top:5px solid var(--primary); border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand img { width:38px; height:38px; }
.brand strong { display:block; font-size:15px; }
.brand small { display:block; margin-top:1px; color:var(--muted); font-size:11px; }
.main-nav { display:flex; gap:4px; flex:1; }
.main-nav a { padding:8px 12px; border-radius:6px; color:var(--ink); text-decoration:none; font-weight:650; }
.main-nav a:hover { background:var(--primary-soft); }
.main-nav a.active { background:var(--primary-soft); color:var(--primary); }
.main-nav a.nav-primary { margin-left:auto; color:#fff; background:var(--primary); }
.main-nav a.nav-primary:hover { background:var(--primary-dark); }
.session { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.ghost { padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; font-weight:650; }
#app { width:min(1180px,100%); margin:0 auto; padding:24px 22px 60px; }
.loading { min-height:55vh; display:grid; place-content:center; justify-items:center; color:var(--muted); }
.loading span { width:34px; height:34px; border:3px solid #e0d1e3; border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { margin:0 0 4px; font-size:26px; line-height:1.1; }
.page-head p { margin:0; color:var(--muted); }
.eyebrow { color:var(--primary); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.panel { border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 8px 24px rgba(31,45,50,.05); }
.panel + .panel { margin-top:16px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-size:16px; }
.panel-head span { color:var(--muted); font-size:12px; }
.panel-body { padding:18px; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px; }
.metric { padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.metric span { display:block; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.metric strong { display:block; margin-top:6px; font-size:26px; }
.metric.warn strong { color:var(--amber); }
.metric.danger strong { color:var(--red); }
.metric.ok strong { color:var(--green); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.03em; background:#fafbfb; }
tbody tr:hover { background:#fbf7fc; }
tr.clickable { cursor:pointer; }
td small { display:block; color:var(--muted); }
.table-scroll { overflow:auto; }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; background:#ecf5f0; color:#1e624b; }
.pill.warn { background:#fbf4e6; color:var(--amber); }
.pill.danger { background:#f8e9ea; color:#8a2e3a; }
.pill.muted { background:#eef1f3; color:#435058; }
.pill.type { background:var(--primary-soft); color:var(--primary); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 18px; }
.field { display:grid; gap:6px; }
.field.span-2 { grid-column:1 / -1; }
.field label,.field > span { color:#4f5b61; font-size:12px; font-weight:800; }
.field input,.field select,.field textarea { width:100%; min-height:42px; padding:8px 12px; border:1px solid #bdc9cc; border-radius:6px; outline:none; background:#fff; font-size:14px; }
.field textarea { min-height:80px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(128,52,137,.12); }
.field small { color:var(--muted); font-size:12px; }
.modules { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; }
.modules label { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }
.modules label:has(input:checked) { border-color:#cfb6d2; background:var(--primary-soft); }
.modules input { margin-top:3px; }
.modules strong { display:block; font-size:13px; }
.modules small { color:var(--muted); font-size:12px; line-height:1.4; }
.primary,.secondary,.danger,.button { min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:6px; font-weight:750; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.primary { color:#fff; background:var(--primary); }
.primary:hover { background:var(--primary-dark); }
.button,.secondary { color:var(--ink); background:#fff; border-color:var(--line); }
.button:hover,.secondary:hover { background:#f6f8f8; }
.danger { color:var(--red); background:#fff; border-color:#e2b9be; }
.primary:disabled,.button:disabled,.danger:disabled { opacity:.5; cursor:wait; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px; }
.login { width:min(420px,100%); margin:8vh auto 0; }
.login .panel-body { display:grid; gap:14px; }
.login h1 { margin:0 0 6px; font-size:24px; }
.login p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.note { display:block; padding:12px 14px; border-left:3px solid var(--gold); background:#fbf8f1; color:#665b44; font-size:12px; line-height:1.5; border-radius:0 6px 6px 0; }
.note.danger { border-left-color:var(--red); background:#fbf0f1; color:#6d2230; }
.note.info { border-left-color:var(--primary); background:var(--primary-soft); color:#4a2450; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 22px; margin:0; }
.facts dt { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.facts dd { margin:3px 0 0; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
code,.mono { font:600 12px ui-monospace, Consolas, monospace; }
.key-box { position:relative; }
.key-box textarea { width:100%; min-height:190px; padding:12px; border:1px solid #dfd1e1; border-radius:6px; background:#fbf8fc; color:#3b1d40; font:12px/1.55 ui-monospace, Consolas, monospace; resize:vertical; }
.history { margin:0; padding:0; list-style:none; }
.history li { display:grid; grid-template-columns:150px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.history li:last-child { border-bottom:0; }
.history time { color:var(--muted); font-size:12px; }
.empty { padding:34px 20px; text-align:center; border:1px dashed #bdc8ca; border-radius:8px; background:rgba(255,255,255,.55); }
.empty strong { display:block; font-size:16px; }
.empty p { margin:7px auto 0; max-width:480px; color:var(--muted); font-size:13px; line-height:1.5; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line); }
.toolbar input,.toolbar select { min-height:38px; padding:6px 10px; border:1px solid #bdc9cc; border-radius:6px; }
.toolbar input { flex:1; min-width:200px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips span { padding:3px 8px; border-radius:4px; background:#edf1f1; color:#435058; font-size:11px; font-weight:700; }
.two-columns { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start; }
.two-columns > .panel + .panel { margin-top:0; }
.modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(31,45,50,.45); }
.modal { width:min(640px,100%); max-height:90vh; overflow:auto; border-radius:10px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:18px 20px 12px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:18px; }
.modal-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.modal-body { padding:18px 20px; display:grid; gap:14px; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--line); background:#fafbfb; }
#toast { position:fixed; left:50%; bottom:24px; z-index:40; max-width:calc(100% - 32px); padding:12px 16px; border-radius:6px; color:#fff; background:#252c30; box-shadow:0 8px 30px rgba(0,0,0,.2); opacity:0; transform:translate(-50%,15px); transition:.2s; pointer-events:none; font-size:13px; font-weight:700; }
#toast.show { opacity:1; transform:translate(-50%,0); }
#toast.error { background:var(--red); }
@media (max-width:820px) { .app-header{flex-wrap:wrap;padding:10px 14px;gap:10px} .main-nav{order:3;width:100%;overflow:auto} .two-columns{grid-template-columns:1fr} .history li{grid-template-columns:1fr} #app{padding:18px 14px 50px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }