:root {
  --ink: #171713;
  --paper: #f0eee6;
  --paper-2: #e4e1d7;
  --acid: #d7ff35;
  --red: #f15a42;
  --muted: #77766f;
  --line: rgba(23, 23, 19, .15);
  --shadow: 0 24px 80px rgba(30, 29, 22, .12);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Trebuchet MS", "Gill Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 20; }
.eyebrow { font: 700 11px/1.2 Consolas, monospace; letter-spacing: .17em; text-transform: uppercase; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: #f5f5f3; }
.login-card { width: min(100%, 360px); padding: 32px; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.login-card h1 { font: 600 30px/1.2 "Trebuchet MS", sans-serif; letter-spacing: 0; margin: 0 0 24px; text-align: center; }
.login-card form { display: grid; gap: 12px; }
.login-card input { padding: 13px 14px; border-radius: 7px; background: #fff; }
.login-card .primary { justify-content: center; border-radius: 7px; box-shadow: none; margin-top: 2px; }
.login-card .primary:hover { transform: none; box-shadow: none; background: #30302c; }
.login-card .form-error { margin: 0; min-height: 0; text-align: center; }
form label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.35); padding: 14px 15px; color: var(--ink); outline: none; transition: border-color .2s, background .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); background: white; }
textarea { resize: vertical; min-height: 92px; }
.primary, .secondary { border: 1px solid var(--ink); padding: 13px 18px; font-weight: 800; letter-spacing: .02em; }
.primary { background: var(--ink); color: white; box-shadow: 5px 5px 0 var(--acid); }
.primary:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--acid); }
.secondary { background: transparent; color: var(--ink); }
.wide { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.form-error { min-height: 20px; color: #a42719; margin-top: 12px; font-size: 13px; }
.login-aside { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; background: var(--ink); color: var(--paper); }
.login-aside > div:last-child { position: absolute; bottom: 8%; right: 8%; text-align: right; }
.login-aside strong, .login-aside span { display: block; font: 700 clamp(22px,3vw,52px)/.9 Georgia,serif; }
.login-aside span { color: var(--acid); }
.radar { width: min(55vw,650px); aspect-ratio: 1; border: 1px solid rgba(215,255,53,.4); border-radius: 50%; position: relative; animation: enter .8s ease both; }
.radar i { position: absolute; inset: 14%; border: 1px solid rgba(215,255,53,.25); border-radius: 50%; }
.radar i:nth-child(2) { inset: 29%; }.radar i:nth-child(3) { inset: 44%; }
.radar::before, .radar::after { content:""; position:absolute; background:rgba(215,255,53,.25); }
.radar::before { width: 1px; height: 100%; left: 50%; }.radar::after { height: 1px; width: 100%; top: 50%; }
.radar b { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--acid); top:31%; left:64%; box-shadow:0 0 0 8px rgba(215,255,53,.1),0 0 35px var(--acid); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; z-index: 5; display: flex; flex-direction: column; background: var(--ink); color: white; padding: 24px 18px; }
.brand { display: flex; gap: 11px; align-items: center; color: white; text-decoration: none; margin-bottom: 72px; }
.brand span { width: 46px; height: 46px; display: grid; place-items: center; background: var(--acid); color: var(--ink); font: 900 17px Consolas,monospace; }
.brand b { font: 700 12px/1.05 Georgia,serif; letter-spacing: .12em; }
.sidebar nav { display: grid; gap: 6px; }
.nav-button { border: 0; padding: 13px 12px; background: transparent; color: #aaa99f; text-align: left; font-weight: 700; display: flex; gap: 18px; align-items: center; }
.nav-button span { font: 10px Consolas,monospace; color: #67675f; }
.nav-button.active, .nav-button:hover { background: var(--acid); color: var(--ink); }
.nav-button.active span, .nav-button:hover span { color: var(--ink); }
.sidebar-foot { margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid #34342e; display: flex; justify-content: space-between; align-items: center; }
.server-status { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #aaa99f; }
.server-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.text-button { border: 0; background: transparent; color: inherit; padding: 5px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.workspace { grid-column: 2; min-width: 0; }
.topbar { height: 78px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px,4vw,64px); font: 11px Consolas,monospace; letter-spacing: .08em; }
.breadcrumb { color: var(--muted); }
.operator { display: flex; gap: 12px; align-items: center; }.operator span { color: var(--muted); }.operator strong { background: var(--acid); padding: 7px 10px; }
.panel-view { padding: clamp(28px,4vw,64px); animation: enter .35s ease both; }
.hero-row, .section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 38px; }
h2 { font: 500 clamp(42px,5vw,72px)/.9 Georgia,serif; letter-spacing: -.055em; margin: 14px 0 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.metric { min-height: 176px; padding: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.28); display: flex; flex-direction: column; }
.metric.acid { background: var(--acid); border-color: var(--ink); }.metric.danger strong { color: var(--red); }
.metric span { text-transform: uppercase; font: 700 10px Consolas,monospace; letter-spacing: .08em; }
.metric strong { font: 500 62px/1 Georgia,serif; margin: auto 0 4px; }.metric small { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
.card { border: 1px solid var(--line); background: rgba(255,255,255,.38); padding: 22px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }.card-head small { font: 10px Consolas,monospace; color: var(--muted); }.card-head h3 { font: 500 26px Georgia,serif; margin: 4px 0 0; }.card-head > span { color: var(--muted); font-size: 11px; }
.chart-frame { display:grid; grid-template-columns:minmax(0,1fr) 32px; gap:10px; }.bar-chart { height: 230px; display: flex; align-items: end; gap: 8px; border-bottom: 1px solid var(--line); padding-top: 20px; }
.chart-scale { height:230px; display:flex; flex-direction:column; justify-content:space-between; padding:18px 0 20px; color:var(--muted); font:10px Consolas,monospace; border-left:1px solid var(--line); }.chart-scale span { padding-left:8px; position:relative; }.chart-scale span::before { content:""; position:absolute; left:0; top:50%; width:5px; border-top:1px solid var(--line); }
.bar { flex: 1; min-width: 8px; height: var(--height); background: var(--ink); position: relative; animation: grow .6s cubic-bezier(.2,.8,.2,1) var(--delay,0ms) both; transform-origin: bottom; transition: background .2s ease, filter .2s ease; }
.bar-chart { transition: opacity .18s ease, transform .18s ease; }.bar-chart.is-changing { opacity:.25; transform:translateY(5px); }
.bar-chart.dense { gap:2px; }.bar-chart.dense .bar { min-width:0; }.bar-chart.dense .bar b, .bar-chart.dense .bar span { display:none; }.bar-chart.dense .bar:nth-child(7n + 1) span { display:block; white-space:nowrap; font-size:8px; }
.bar:hover { background: var(--acid); outline: 1px solid var(--ink); }.bar span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font: 9px Consolas,monospace; color: var(--muted); }.bar b { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font:10px Consolas,monospace; }
.event-list { display: grid; }.event-item { display: grid; grid-template-columns: 11px minmax(120px,1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }.event-item:last-child { border-bottom: 0; }.event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }.event-dot.bad { background: var(--red); }.event-dot.good { background: #5f8d21; }.event-copy b { display:block; font-size:13px; }.event-copy small, .event-time { color: var(--muted); font-size: 10px; }.compact .event-item { padding: 9px 0; }
.chart-control { display:grid; gap:5px; color:var(--muted); font:10px Consolas,monospace; text-transform:uppercase; letter-spacing:.08em; }.chart-control select { min-width:116px; padding:7px 9px; font:11px Consolas,monospace; }
.toolbar { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 14px; }
.log-switch { display:flex; gap:8px; margin:-18px 0 14px; }.log-switch button { border:1px solid var(--line); background:transparent; padding:9px 13px; font:700 11px Consolas,monospace; color:var(--muted); transition:.2s; }.log-switch button.active,.log-switch button:hover { color:var(--ink); background:var(--acid); border-color:var(--ink); }
.table-shell { border: 1px solid var(--line); overflow-x: auto; background: rgba(255,255,255,.35); }
table { width: 100%; border-collapse: collapse; min-width: 880px; } th,td { padding: 15px 14px; border-bottom: 1px solid var(--line); text-align:left; } th { color:var(--muted); text-transform:uppercase; font:10px Consolas,monospace; letter-spacing:.08em; } td { font-size:13px; } td code { font-family:Consolas,monospace; }.status { display:inline-flex; align-items:center; gap:7px; padding:5px 8px; border:1px solid var(--line); font-size:10px; text-transform:uppercase; }.status::before { content:""; width:6px; height:6px; border-radius:50%; background:#6f9d2d; }.status.blocked::before,.status.revoked::before { background:var(--red); }.device { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:11px Consolas,monospace; }.actions { display:flex; gap:5px; justify-content:flex-end; }.action-button { border:1px solid var(--line); background:transparent; padding:6px 8px; font-size:10px; }.action-button:hover { border-color:var(--ink); background:var(--ink); color:white; }.action-button.danger:hover { background:var(--red); border-color:var(--red); }
tbody tr[data-license-id] { cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; } tbody tr[data-license-id]:hover td { background:rgba(205,255,55,.18); } tbody tr[data-license-id]:hover { transform:translateX(3px); box-shadow:inset 3px 0 0 var(--acid); }.activation-stat { font:700 16px Georgia,serif; }
.empty { padding: 60px; text-align:center; color:var(--muted); }.pagination { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:14px; }.pagination button { width:36px;height:34px;border:1px solid var(--line);background:transparent; }.pagination span { font:11px Consolas,monospace; }

dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: min(620px, calc(100vw - 30px)); width:100%; } dialog::backdrop { background: rgba(23,23,19,.72); backdrop-filter: blur(5px); }.dialog-card { position:relative; padding:36px; background:var(--paper); border:1px solid var(--ink); box-shadow:10px 10px 0 var(--acid); animation:dialog-in .25s ease both; }.dialog-card h2 { font-size:48px; margin-bottom:20px; }.dialog-close { position:absolute; right:18px; top:14px; border:0; background:transparent; font-size:30px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.hint { color:var(--muted); font-size:12px; }.keys-result textarea { min-height:220px; font:13px/1.7 Consolas,monospace; background:var(--ink); color:var(--acid); }.license-summary { white-space:pre-wrap; margin:0 0 20px; padding:16px; background:var(--ink); color:var(--acid); font:12px/1.7 Consolas,monospace; }.license-details label { display:grid; gap:8px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.license-details textarea { min-height:110px; }.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }.toast { position:fixed; right:24px; bottom:24px; z-index:50; padding:14px 18px; background:var(--ink); color:white; box-shadow:5px 5px 0 var(--acid); transform:translateY(100px); opacity:0; transition:.25s; }.toast.show { transform:none; opacity:1; }

@keyframes enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes grow { from { transform:scaleY(0); } }
@keyframes dialog-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
.license-details .dialog-actions { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:16px; padding:0; }
.license-details .dialog-actions button { min-width:190px; text-align:left; }
.license-details .dialog-actions .action-button { order:4; }
.action-button:disabled { cursor:wait; opacity:.55; }
@media (max-width: 1050px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  .login-shell { grid-template-columns:1fr; }.login-aside { display:none; }.login-card { padding:36px 24px; }
  .app-shell { display:block; }.sidebar { position:fixed; inset:auto 0 0; width:auto; height:64px; padding:7px 10px; flex-direction:row; align-items:center; }.brand,.sidebar-foot { display:none; }.sidebar nav { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }.nav-button { justify-content:center; padding:12px 6px; }.nav-button span { display:none; }
  .workspace { padding-bottom:70px; }.topbar { height:58px; padding:0 18px; }.breadcrumb,.operator span { display:none; }.panel-view { padding:28px 16px; }.hero-row,.section-head { align-items:flex-start; gap:20px; }.hero-row h2,.section-head h2 { font-size:48px; }.metric-grid { grid-template-columns:1fr 1fr; gap:8px; }.metric { min-height:138px; padding:15px; }.metric strong { font-size:48px; }.toolbar { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.dialog-card { padding:28px 20px; }.event-item { grid-template-columns:10px 1fr; }.event-time { grid-column:2; }
}

/* Interactive audit records */
.event-item { width:100%; border-left:0; border-right:0; border-top:0; background:transparent; color:inherit; text-align:left; cursor:pointer; transition:background .16s ease, padding .16s ease; }
.event-item:hover { background:rgba(205,255,55,.16); padding-left:9px; padding-right:9px; }
.event-item:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.compact .event-item:hover { padding-left:7px; padding-right:7px; }
.log-switch { align-items:center; }
#eventScopeCaption { margin-left:6px; color:var(--muted); font:10px Consolas,monospace; letter-spacing:.06em; }
.event-summary { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:16px; background:var(--ink); color:var(--acid); font:12px/1.7 Consolas,monospace; }