/* =========================
RESET & ROOT
========================= */
*{box-sizing:border-box}

:root{
--bg-main:#05080d;
--bg-card:#0c1219;
--bg-soft:#101722;

--silver:#d6deea;
--silver-soft:#9ca6b3;

--accent:#6d8bff;
--accent-glow:rgba(109,139,255,.35);
}

html{scroll-behavior:smooth}

body{
margin:0;
min-height:100vh;
background:
radial-gradient(circle at top,rgba(109,139,255,.08),transparent 60%),
linear-gradient(180deg,#04070c,#05080d,#04070c);
color:var(--silver);
font-family:'Geist',system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased;
}

/* =========================
APP
========================= */
.app{
max-width:520px;
margin:auto;
padding:18px 14px 36px;
}

/* =========================
HEADER
========================= */
.header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:26px;
padding:14px 16px;
border-radius:18px;
background:linear-gradient(180deg,#0c1219,#070b10);
border:1px solid rgba(255,255,255,.06);
box-shadow:0 0 25px rgba(0,0,0,.8);
}

.logo{display:flex;align-items:center;gap:12px}

.logo-icon img{
width:185px;
height:auto;
filter:drop-shadow(0 0 12px rgba(109,139,255,.25));
}

/* === SHIMMER TEXT EFFECT === */
.logo-text .brand{
display:inline-block;
font-size:20px;
font-weight:800;
letter-spacing:1.6px;
background:linear-gradient(120deg,
#7da2ff 10%,
#ffffff 30%,
#7da2ff 50%,
#6d8bff 70%);
background-size:200% auto;
color:transparent;
background-clip:text;
-webkit-background-clip:text;
animation:shimmer 3.5s linear infinite;
}

@keyframes shimmer{
to{background-position:200% center}
}

.logo-text .tagline{
display:block;
font-size:11px;
letter-spacing:1px;
color:var(--silver-soft);
}

/* =========================
CURRENCY (MINIMAL)
========================= */
.currency-mini{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
padding:4px 8px;
border-radius:9px;
background:#080d13;
border:1px solid rgba(255,255,255,.08);
font-size:10px;
}

.currency-mini select{
background:#05080d;
border:1px solid rgba(255,255,255,.12);
color:var(--silver);
border-radius:7px;
font-size:10px;
padding:3px 5px;
}

/* =========================
MENU GRID
========================= */
.menu-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:18px;
}

.menu-grid button{
min-height:62px;
padding:12px;
border-radius:18px;
border:1px solid rgba(255,255,255,.06);
font-size:14px;
font-weight:600;
color:var(--silver);
cursor:pointer;
background:linear-gradient(145deg,#101722,#070b10);
box-shadow:0 8px 24px rgba(0,0,0,.85);
transition:transform .18s ease, box-shadow .18s ease;
will-change:transform;
}

.menu-grid button:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 0 16px var(--accent-glow);
}

.menu-grid button:active{
transform:scale(.97);
}

/* =========================
PANEL
========================= */
.panel{
display:none;
margin-top:16px;
padding:18px;
border-radius:18px;
background:linear-gradient(180deg,#0d141d,#070b10);
border:1px solid rgba(255,255,255,.06);
box-shadow:0 12px 38px rgba(0,0,0,.85);
}

.panel.show{
display:block;
animation:panelIn .3s cubic-bezier(.4,0,.2,1);
}

@keyframes panelIn{
from{opacity:0;transform:translateY(10px) scale(.98)}
to{opacity:1;transform:none}
}

/* =========================
FORM
========================= */
select,input{
width:100%;
padding:13px;
margin:6px 0 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:#070b10;
color:var(--silver);
font-size:14px;
}

select:focus,input:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 12px var(--accent-glow);
}

/* =========================
BUTTON PANEL
========================= */
.panel button{
width:100%;
padding:14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(145deg,#101722,#070b10);
color:var(--silver);
font-weight:600;
cursor:pointer;
transition:.18s ease;
}

.panel button:hover{
transform:translateY(-2px);
box-shadow:0 0 14px var(--accent-glow);
}

.panel button:active{
transform:scale(.97);
}

/* =========================
OUTPUT
========================= */
.result-box,pre{
margin-top:16px;
background:#070b10;
padding:16px;
border-radius:16px;
font-size:13px;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 8px 28px rgba(0,0,0,.85);
}

/* =========================
SCROLLBAR
========================= */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#6d8bff,#3f4fff);
border-radius:10px
}
::-webkit-scrollbar-track{background:#04070c}

/* =========================
RESPONSIVE
========================= */
@media(max-width:420px){
.logo-text .brand{font-size:18px}
.menu-grid button{font-size:13px}
.logo-icon img{width:170px}
}