/* DomFather mini-app — cyberpunk terminal, tuned for legibility.
   Palette (never use dim #3b4b3f for text — borders only):
   bg #0c150f · neon #00ff9c · cyan #00daf3 · text #e3efe4 · text-2 #b9cbbc
   muted #8ba492 · amber #ffc043 · red #ff8f84 · panel rgba(11,17,13,.82) */

:root{
  --bg:#0c150f; --neon:#00ff9c; --cyan:#00daf3; --amber:#ffc043; --red:#ff8f84;
  --text:#e3efe4; --text2:#b9cbbc; --muted:#8ba492;
  --panel:rgba(11,17,13,.82); --panel-solid:#111a13;
  --line:rgba(0,255,156,.22); --line-strong:rgba(0,255,156,.42);
  --glow:0 0 14px rgba(0,255,156,.18);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:15px; line-height:1.55; letter-spacing:.01em;
  min-height:100dvh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:'Space Mono',monospace;font-weight:700;margin:0;overflow-wrap:anywhere}

/* ── ambient layers ── */
#shader{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.28;pointer-events:none}
#scan{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.06) 3px,rgba(0,0,0,0) 3px);
  mix-blend-mode:overlay;opacity:.5}
#app{position:relative;z-index:5}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:rgba(12,21,15,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 0 18px rgba(0,255,156,.10)}
.brand{display:flex;align-items:center;gap:9px;font-family:'Space Mono';font-weight:700;
  font-size:19px;letter-spacing:.16em;color:var(--neon);text-shadow:0 0 12px rgba(0,255,156,.55)}
.brand .material-symbols-outlined{font-size:22px}
.bal-chip{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);
  border-radius:10px;background:rgba(20,30,23,.7);box-shadow:var(--glow)}
.bal-chip .lbl{font-size:10px;letter-spacing:.18em;color:var(--muted);font-family:'Space Mono'}
.bal-chip .val{font-family:'Space Mono';font-weight:700;font-size:16px;color:var(--neon);
  text-shadow:0 0 8px rgba(0,255,156,.4)}

/* ── layout ── */
main{max-width:640px;margin:0 auto;padding:18px 16px calc(96px + var(--safe-b));display:flex;flex-direction:column;gap:16px}
.eyebrow{font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;display:flex;align-items:center;gap:7px;margin:2px 0}
.h1{font-size:clamp(20px,6vw,26px);letter-spacing:.03em;line-height:1.2;color:var(--text)}
.h1 .accent{color:var(--neon);text-shadow:0 0 10px rgba(0,255,156,.4)}
.sub{color:var(--text2);font-size:13.5px}

/* ── panel ── */
.panel{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:12px;padding:16px;box-shadow:var(--glow)}
.panel.hi{border-color:var(--line-strong)}
.divider{height:1px;background:var(--line);border:0;margin:2px 0}

/* ── status ── */
.led{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 8px currentColor}
.led.on{background:var(--neon);color:var(--neon);animation:pulse 2.4s ease-in-out infinite}
.led.warn{background:var(--amber);color:var(--amber)}
.led.off{background:var(--red);color:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--line-strong);
  border-radius:7px;font-family:'Space Mono';font-size:10.5px;font-weight:700;letter-spacing:.12em;
  color:var(--text2);text-transform:uppercase;white-space:nowrap}
.chip.t1{color:var(--amber);border-color:rgba(255,192,67,.5)}
.chip.t2{color:var(--cyan);border-color:rgba(0,218,243,.5)}
.chip.t3{color:var(--neon);border-color:var(--line-strong)}
.chip.ok{color:var(--neon)} .chip.warn{color:var(--amber)} .chip.bad{color:var(--red);border-color:rgba(255,143,132,.5)}

/* ── terminal input ── */
.field{display:flex;align-items:center;gap:10px;background:rgba(7,16,10,.85);border:1px solid var(--line);
  border-radius:11px;padding:13px 14px;transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,218,243,.22)}
.field .prompt{color:var(--neon);font-size:12.5px;flex:0 0 auto;opacity:.85;user-select:none}
.field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--cyan);
  font-family:'JetBrains Mono';font-size:16px;letter-spacing:.01em;caret-color:var(--cyan)}
.field input::placeholder{color:var(--muted);opacity:.9}
.inp{width:100%;background:rgba(7,16,10,.85);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;color:var(--text);font-family:'JetBrains Mono';font-size:15px;outline:0}
.inp:focus{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,218,243,.18)}
label.fld{display:block;font-size:11px;letter-spacing:.14em;color:var(--text2);font-family:'Space Mono';
  text-transform:uppercase;margin:0 0 6px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:'Space Mono';font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 20px;border-radius:999px;font-size:13px;transition:transform .08s,box-shadow .15s,background .15s;width:100%}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--neon);color:#03231a;box-shadow:0 0 18px rgba(0,255,156,.35)}
.btn-primary:hover{box-shadow:0 0 26px rgba(0,255,156,.55)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon)}
.btn-cyan{background:var(--cyan);color:#04222a;box-shadow:0 0 18px rgba(0,218,243,.35)}
.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(255,143,132,.5)}
.btn-sm{padding:8px 14px;font-size:11px;width:auto}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ── quick action tiles ── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 12px;
  display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.tile:hover{border-color:var(--line-strong);box-shadow:var(--glow);background:rgba(0,255,156,.05)}
.tile .material-symbols-outlined{font-size:30px;color:var(--neon);filter:drop-shadow(0 0 8px rgba(0,255,156,.4))}
.tile .cap{font-family:'Space Mono';font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--text)}

/* ── list rows ── */
.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px dotted var(--line)}
.row:last-child{border-bottom:0}
.dom{font-family:'Space Mono';font-weight:700;font-size:18px;letter-spacing:.01em;color:var(--text);overflow-wrap:anywhere}
.dom .tld{color:var(--neon)}
.price{font-family:'Space Mono';font-weight:700;font-size:20px;color:var(--neon);text-shadow:0 0 8px rgba(0,255,156,.35)}
.price .yr{font-family:'JetBrains Mono';font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}
.kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:14px}
.kv .k{color:var(--text2)} .kv .v{color:var(--text);font-weight:700}
.mono{font-family:'JetBrains Mono'}

/* ── bottom nav ── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;
  align-items:stretch;background:rgba(7,16,10,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(0,255,156,.10);
  padding-bottom:var(--safe-b)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;
  color:var(--text2);text-decoration:none;cursor:pointer;transition:color .12s;position:relative}
.nav a .material-symbols-outlined{font-size:23px}
.nav a .lbl{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.1em}
.nav a.active{color:var(--neon)}
.nav a.active .material-symbols-outlined{filter:drop-shadow(0 0 8px rgba(0,255,156,.5))}
.nav a.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--neon);box-shadow:0 0 8px var(--neon)}

/* ── misc ── */
.blink{display:inline-block;width:9px;height:17px;background:var(--cyan);vertical-align:-3px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.spin{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--neon);border-radius:50%;animation:sp .7s linear infinite;margin:22px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.center{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:30px 12px;color:var(--text2)}
.stack{display:flex;flex-direction:column;gap:12px}
.rowflex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);z-index:60;
  background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:10px;padding:11px 16px;
  color:var(--text);font-size:13.5px;box-shadow:0 0 20px rgba(0,0,0,.5);max-width:88%;text-align:center;
  opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
.toast.err{border-color:rgba(255,143,132,.6);color:var(--red)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.amount-chip{padding:9px 14px;border:1px solid var(--line-strong);border-radius:9px;background:transparent;
  color:var(--text);font-family:'Space Mono';font-weight:700;font-size:13px;cursor:pointer}
.amount-chip.active{background:var(--neon);color:#03231a}
.seg{display:flex;gap:6px;background:rgba(7,16,10,.7);border:1px solid var(--line);border-radius:10px;padding:4px}
.seg button{flex:1;padding:9px;border:0;background:transparent;color:var(--text2);font-family:'Space Mono';
  font-weight:700;font-size:12px;letter-spacing:.1em;border-radius:7px;cursor:pointer}
.seg button.active{background:var(--neon);color:#03231a}

/* ── regular browser / desktop ── */
@media (min-width:700px){
  main{padding-top:26px}
  /* floating, centered bottom nav instead of full-width bar */
  .nav{left:0;right:0;margin:0 auto;max-width:560px;border:1px solid var(--line);border-bottom:0;
    border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,255,156,.12)}
  .hdr{padding-left:max(16px,calc((100vw - 720px)/2));padding-right:max(16px,calc((100vw - 720px)/2))}
}
@media (min-width:900px){
  main{max-width:720px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  /* subtle hover affordances only make sense with a mouse */
  .panel[onclick]:hover,.tile:hover{border-color:var(--line-strong)}
}
@media (hover:hover){ .btn:hover{filter:brightness(1.05)} }