@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --ink:#f4f5f2; --muted:#8e9798; --dim:#626a6c; --bg:#0b0d0f; --panel:#111517; --panel-2:#151a1c; --line:#273032; --acid:#c8f05a; --aqua:#66d8c4; --red:#f17f72; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font:14px Manrope,system-ui,sans-serif; letter-spacing:0; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
button,input { font:inherit; } button { cursor:pointer; } .shell { max-width:1440px; margin:0 auto; padding:0 48px; position:relative; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:flex; gap:11px; align-items:center; color:var(--ink); text-decoration:none; }.brand-mark { width:31px; height:31px; display:grid; place-items:center; color:#111; background:var(--acid); font-size:20px; font-weight:800; transform:skew(-8deg); }.brand strong { display:block; font-size:14px; letter-spacing:.04em; }.brand small { display:block; color:var(--dim); font:10px 'DM Mono',monospace; letter-spacing:.14em; margin-top:2px; }.topbar-meta { display:flex; gap:22px; align-items:center; }.connection { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }.connection i { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }.connection.offline i { background:var(--red); box-shadow:0 0 12px var(--red); }.icon-button { border:1px solid var(--line); background:transparent; color:var(--muted); width:34px; height:34px; font-size:20px; line-height:1; }.icon-button:hover { color:var(--acid); border-color:#6d803e; }
.intro { display:flex; align-items:flex-end; justify-content:space-between; min-height:215px; padding:45px 0 36px; }.eyebrow { margin:0 0 13px; color:var(--acid); font:10px 'DM Mono',monospace; letter-spacing:.16em; }.eyebrow span { color:var(--dim); margin-left:10px; }.intro h1 { font-size:clamp(35px,4.5vw,66px); line-height:1.06; margin:0; letter-spacing:-.04em; font-weight:700; }.intro h1 em { font-style:normal; color:var(--acid); }.lede { color:var(--muted); max-width:560px; line-height:1.7; margin:18px 0 0; }.intro-mark { display:flex; gap:10px; align-items:center; color:var(--dim); font:11px 'DM Mono',monospace; letter-spacing:.16em; padding-bottom:4px; }.intro-mark span:first-child { color:var(--ink); font-size:22px; font-weight:500; }.intro-mark b { color:var(--acid); font-size:15px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--panel); }.metric { min-height:113px; padding:21px 24px; border-right:1px solid var(--line); }.metric:last-child { border:0; }.metric span,.metric small { display:block; color:var(--muted); }.metric strong { display:block; font:500 30px 'DM Mono',monospace; margin:9px 0 4px; letter-spacing:-.04em; }.metric small { color:var(--dim); font-size:11px; }.online-metric strong { color:var(--aqua); }.metric-note strong { font:600 19px Manrope,sans-serif; margin-top:15px; letter-spacing:0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 365px; gap:18px; margin:18px 0 55px; }.directory-panel,.action-panel { background:var(--panel); border:1px solid var(--line); }.directory-panel { min-width:0; }.panel-heading { display:flex; align-items:flex-end; justify-content:space-between; padding:26px 27px 21px; }.panel-heading .eyebrow { margin-bottom:7px; color:var(--dim); }.panel-heading h2 { font-size:23px; margin:0; letter-spacing:-.03em; }.search { display:flex; align-items:center; gap:9px; width:215px; border-bottom:1px solid var(--line); padding:7px 0; color:var(--dim); }.search input { border:0; outline:0; color:var(--ink); background:transparent; width:100%; font-size:12px; }.search input::placeholder { color:var(--dim); }.filters { display:flex; gap:5px; padding:0 27px 21px; border-bottom:1px solid var(--line); }.filter { border:0; background:transparent; color:var(--muted); padding:7px 12px; font-size:12px; }.filter b { color:var(--dim); font:10px 'DM Mono',monospace; margin-left:6px; }.filter.active { color:var(--acid); background:#20291b; }.filter.active b { color:var(--acid); }.table-head { display:grid; grid-template-columns:1.1fr .9fr 1.3fr 74px; padding:13px 27px; color:var(--dim); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; }.address-row { display:grid; grid-template-columns:1.1fr .9fr 1.3fr 74px; align-items:center; min-height:59px; padding:0 27px; border-top:1px solid #20282a; transition:background .2s; }.address-row:hover { background:var(--panel-2); }.address { font:14px 'DM Mono',monospace; }.state { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }.state i { width:6px; height:6px; background:var(--dim); border-radius:50%; }.state.online { color:var(--aqua); }.state.online i { background:var(--aqua); box-shadow:0 0 9px var(--aqua); }.state.external { color:#d0a76c; }.state.external i { background:#d0a76c; }.owner { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.row-action { justify-self:end; background:transparent; color:var(--acid); border:1px solid #53632e; padding:6px 9px; font-size:11px; }.row-action:hover { background:var(--acid); color:#10130e; }.row-action.locked { color:var(--muted); border-color:var(--line); }.empty-state { color:var(--dim); padding:40px; text-align:center; }
.action-panel { padding:25px 27px; min-height:430px; }.panel-kicker { color:var(--dim); font:10px 'DM Mono',monospace; letter-spacing:.13em; display:flex; align-items:center; gap:8px; }.dot { width:6px; height:6px; border-radius:50%; background:var(--dim); }.action-empty { padding:71px 4px 35px; text-align:center; }.wire-icon { margin:0 auto 21px; width:45px; height:45px; display:grid; place-items:center; border:1px solid #495355; color:var(--acid); font-size:25px; }.action-empty h3 { margin:0 0 10px; font-size:19px; }.action-empty p { margin:0; color:var(--muted); line-height:1.7; font-size:12px; }.selected-address { border-left:2px solid var(--acid); padding-left:13px; margin:28px 0 25px; }.selected-address small { display:block; color:var(--dim); font:10px 'DM Mono',monospace; letter-spacing:.12em; }.selected-address strong { display:inline-block; font:23px 'DM Mono',monospace; margin-top:7px; }.selected-address span { color:var(--acid); font:10px 'DM Mono',monospace; margin-left:9px; }.action-panel label { display:block; color:var(--muted); font-size:12px; margin:0 0 18px; }.action-panel input { width:100%; display:block; margin-top:8px; padding:11px 12px; background:#0c1011; color:var(--ink); border:1px solid var(--line); outline:0; }.action-panel input:focus { border-color:#778f38; box-shadow:0 0 0 2px #c8f05a1b; }.action-panel label small { display:block; color:var(--dim); margin-top:6px; font-size:10px; }.confirm-line { display:flex; align-items:center; justify-content:space-between; border-block:1px solid var(--line); padding:11px 0; margin:-3px 0 19px; color:var(--dim); font-size:11px; }.confirm-line strong { color:var(--ink); font-weight:500; }.primary-button,.secondary-button { width:100%; min-height:43px; display:flex; justify-content:space-between; align-items:center; padding:0 14px; font-size:12px; }.primary-button { background:var(--acid); color:#12170e; border:1px solid var(--acid); font-weight:700; }.primary-button:hover { background:#dafb73; }.primary-button:disabled { opacity:.55; cursor:wait; }.secondary-button { justify-content:center; gap:10px; background:transparent; color:var(--acid); border:1px solid #53632e; }.form-message { min-height:18px; color:var(--red); font-size:11px; margin:10px 0 0; }.success-panel { text-align:center; padding:67px 5px 35px; }.success-icon { width:43px; height:43px; display:grid; place-items:center; color:#10140d; background:var(--acid); margin:0 auto 19px; font-size:24px; }.success-panel h3 { margin:0 0 9px; font-size:19px; }.success-panel p { color:var(--muted); line-height:1.6; font-size:12px; margin:0 0 25px; }.toast { position:fixed; bottom:27px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#d3f66a; color:#11160d; padding:11px 18px; font-size:12px; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); } footer { display:flex; justify-content:space-between; padding:0 0 28px; color:var(--dim); font:10px 'DM Mono',monospace; letter-spacing:.08em; }
@media (max-width:850px) { .shell { padding:0 18px; }.intro { min-height:0; padding:34px 0 28px; }.intro-mark { display:none; }.metrics { grid-template-columns:repeat(2,1fr); }.metric:nth-child(2) { border-right:0; }.metric:nth-child(-n+2) { border-bottom:1px solid var(--line); }.workspace { grid-template-columns:1fr; }.action-panel { min-height:0; }.action-empty { padding:40px 4px 28px; }.table-head,.address-row { grid-template-columns:1fr .9fr 1fr; }.table-head span:last-child,.address-row button { display:none; }.owner { font-size:12px; }.panel-heading { display:block; }.search { margin-top:17px; width:100%; } }
@media (max-width:460px) { .topbar { height:69px; }.connection { display:none; }.intro h1 { font-size:35px; }.lede { font-size:12px; }.metric { padding:17px 15px; }.metric strong { font-size:24px; }.metric-note strong { font-size:16px; }.panel-heading,.filters,.table-head,.address-row,.action-panel { padding-left:16px; padding-right:16px; }.filters { overflow:auto; }.filter { white-space:nowrap; }.table-head { font-size:9px; }.address-row { min-height:55px; }.address { font-size:12px; }.state,.owner { font-size:11px; } footer { font-size:9px; } }
 .address-row.interactive { cursor:pointer; }
[hidden] { display:none !important; }
.directory-notice { margin:0; padding:14px 27px; background:#20291b; color:#d9e1c9; font-size:12px; line-height:1.7; border-bottom:1px solid var(--line); }
.action-panel .legacy-confirm { display:flex; align-items:flex-start; gap:10px; color:#dfba88; padding:12px; background:#29241b; line-height:1.6; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }