/* Mini Qualanta for the demo: Qualanta tokens, fixed frame, one scrolling table per tab */
:root {
  --ink: #0b1f1c; --ink-2: #1e3330; --slate: #4f5f5b; --slate-2: #6b7a76; --line: #dfe7e5; --line-2: #ecf2f0;
  --paper: #fff; --paper-2: #f5f8f7; --aqua-50: #f0fdf9; --aqua-100: #ddfaf2; --aqua-200: #b5f3e3; --aqua-400: #3fd3b2;
  --aqua-500: #1db596; --aqua-600: #12977f; --aqua-700: #0b7462; --deep: #062e28;
  --good: #3a7a1f; --good-soft: #e6f3dc; --warn: #a65a00; --warn-soft: #fbebd0; --bad: #c2271c; --bad-soft: #fce3e0;
  --info: #3f5b9a; --info-soft: #e4eaf6; --neutral: #55625f; --neutral-soft: #ecf0ef;
  --display: 'Sora', system-ui, sans-serif; --sans: 'Onest', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --h: 32px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--paper-2); color: var(--ink); font: 14px/1.4 var(--sans); }
* { scrollbar-width: thin; scrollbar-color: rgba(18,151,127,.32) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(18,151,127,.32); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }
button { font: inherit; cursor: pointer; }
.app { display: flex; height: 100%; }
.nav { flex: none; width: 216px; background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 12px; gap: 18px; overflow: hidden; }
.nav .wm { height: 26px; width: auto; align-self: flex-start; margin-left: 8px; }
.nav nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav a { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; cursor: pointer; }
.nav a:hover { background: var(--paper-2); }
.nav a.on { background: var(--aqua-100); color: var(--aqua-700); box-shadow: inset 3px 0 0 var(--aqua-600); }
.nav a .c { font-size: 12px; font-weight: 600; min-width: 22px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); padding: 0 6px; }
.nav a .c.ok { background: var(--aqua-100); color: var(--aqua-700); }
.me { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.me i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; background: var(--deep); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.me b { display: block; font-size: 13px; } .me span { font-size: 12px; color: var(--slate); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ph { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 22px 10px; background: var(--paper); }
.ph-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px; }
.ph h1 { font: 600 24px/1.1 var(--display); white-space: nowrap; letter-spacing: -.01em; }
.ph p { color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-a { display: flex; gap: 8px; flex: none; }
.btn { height: var(--h); padding: 0 14px; border-radius: 8px; border: 1px solid var(--aqua-500); background: var(--aqua-400); color: var(--deep); font-weight: 600; white-space: nowrap; }
.btn:hover { background: var(--aqua-500); color: #fff; }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.tabs { flex: none; display: flex; gap: 4px; padding: 0 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
.tabs button, .m-tabs button { height: 38px; border: 0; background: none; padding: 0 12px; color: var(--slate); font-weight: 500; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; position: relative; }
.tabs button.on, .m-tabs button.on { color: var(--aqua-700); border-bottom-color: var(--aqua-600); }
.tabs .n, .m-tabs .n { font-size: 12px; color: var(--slate-2); background: var(--neutral-soft); border-radius: 9px; padding: 0 6px; }
.tabs .dot, .m-tabs .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 16px 22px 18px; }
.stats { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.stat small { display: flex; align-items: center; gap: 6px; color: var(--slate); font-size: 13px; }
.stat small i { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.stat b { display: block; font: 600 26px/1.15 var(--display); margin-top: 2px; }
.stat span { font-size: 12px; color: var(--slate-2); }
.card { flex: 1; min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.card > header { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.card > header h3 { font: 600 15px var(--sans); flex: 1; }
.search { height: var(--h); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; width: 200px; font: inherit; }
.sel { height: var(--h); border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; background: #fff; }
.scroll { flex: 1; min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; background: var(--paper-2); text-align: left; font-weight: 500; color: var(--slate); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--aqua-50); }
tr.flash td { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--aqua-100); } 100% { background: transparent; } }
.mono { font-family: var(--mono); font-size: 12.5px; color: var(--slate); }
.b { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b.good { background: var(--good-soft); color: var(--good); } .b.warn { background: var(--warn-soft); color: var(--warn); }
.b.bad { background: var(--bad-soft); color: var(--bad); } .b.info { background: var(--info-soft); color: var(--info); }
.b.neutral { background: var(--neutral-soft); color: var(--neutral); } .b.aqua { background: var(--aqua-100); color: var(--aqua-700); }
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.chain { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chain .row { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; align-items: center; gap: 6px; }
.node { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; min-height: 52px; }
.node small { display: block; font-family: var(--mono); font-size: 11px; color: var(--slate-2); text-transform: uppercase; letter-spacing: .06em; }
.node b { font-weight: 600; font-size: 13.5px; }
.node.you { background: var(--deep); color: #fff; border-color: var(--deep); } .node.you small { color: var(--aqua-400); }
.node.agent { background: var(--aqua-50); border-color: var(--aqua-200); }
.node.hot { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }
.chain .arr { text-align: center; color: var(--aqua-600); font-weight: 700; }
.rbar { display: flex; gap: 3px; } .rbar i { width: 18px; height: 8px; border-radius: 2px; background: var(--line); }
.rbar i.h { background: var(--bad); } .rbar i.m { background: #e0a030; } .rbar i.l { background: var(--aqua-500); }
.checks { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; gap: 14px; }
.tablet { background: var(--deep); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; min-height: 0; }
.tablet .scr { flex: 1; min-height: 0; background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.tablet h4 { font: 600 15px var(--display); }
.q { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.q .yn { display: flex; gap: 4px; } .q .yn button { height: 28px; width: 40px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; }
.q .yn button.y { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.q .yn button.n { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.hl { outline: 3px solid var(--aqua-500) !important; outline-offset: 2px; border-radius: 10px; position: relative; z-index: 5; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { outline-color: var(--aqua-400); outline-offset: 5px; } }
.tour { position: fixed; z-index: 50; width: 340px; background: var(--deep); color: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 18px 50px rgba(3,43,38,.35); right: 22px; bottom: 22px; }
.tour-n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-400); margin-bottom: 6px; }
.tour b { font: 600 17px/1.25 var(--display); display: block; } .tour p { color: rgba(240,253,249,.82); margin-top: 6px; font-size: 13.5px; }
.tour-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tour .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.modal-bg { position: fixed; inset: 0; background: rgba(3,43,38,.4); display: grid; place-items: center; z-index: 40; }
.modal { width: min(820px, 92%); height: min(520px, 88%); background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.modal header { flex: none; display: flex; align-items: center; padding: 14px 18px 4px; } .modal h2 { flex: 1; font: 600 19px var(--display); }
.modal .x { border: 0; background: none; font-size: 24px; color: var(--slate); width: 32px; height: 32px; }
.m-tabs { flex: none; display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.m-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.modal footer { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px; } .kv dt { color: var(--slate); } .kv dd { margin: 0; font-weight: 500; }
.exc { border-left: 3px solid var(--bad); background: var(--bad-soft); padding: 8px 12px; border-radius: 0 8px 8px 0; }
.exc.ok { border-color: var(--good); background: var(--good-soft); }

/* Tour animation: the cursor, its press, rows rising in, the scan bar and toasts */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transform: translate(70vw, 60vh); transition: transform .7s cubic-bezier(.45,.05,.25,1), opacity .3s; filter: drop-shadow(0 3px 6px rgba(3,43,38,.35)); }
.cursor svg { display: block; transition: transform .15s; } .cursor.down svg { transform: scale(.82); }
.cursor .ripple { position: absolute; left: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--aqua-500); animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.rise { animation: rise .45s both cubic-bezier(.2,.7,.3,1); animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scan { flex: none; margin: 12px 14px; padding: 12px 14px; border-radius: 10px; background: var(--aqua-50); border: 1px solid var(--aqua-200); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.scan b { font: 600 14px var(--display); color: var(--aqua-700); } .scan span { color: var(--slate); }
.scan i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--aqua-500), var(--aqua-400)) 0 0 / 0 100% no-repeat, var(--aqua-100); animation: scanbar 1.6s ease-in-out forwards; }
@keyframes scanbar { to { background-size: 100% 100%, auto; } }
tr.pick td { background: var(--warn-soft) !important; transition: background .4s; }
.toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -20px); opacity: 0; z-index: 55; background: var(--deep); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 12px 30px rgba(3,43,38,.3); white-space: nowrap; }
.toast b { color: var(--aqua-400); margin-right: 8px; }
.toast.in { animation: toast 3.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.tour { width: 320px; }