/* Mobile-first responsive styling */
:root{
  --bg:#0f1724; --card:#0b1220; --muted:#94a3b8; --accent:#06b6d4; --success:#10b981; --danger:#ef4444; --glass: rgba(255,255,255,0.03);
  --rounded:12px; --pad:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; background:linear-gradient(180deg,#071029 0%, #061425 100%); color:#e6eef6}
.wrap{max-width:980px; margin:28px auto; padding:18px;}
header{display:flex; align-items:center; justify-content:space-between; gap:12px}
h1{font-size:20px;margin:0}
p.lead{margin:4px 0 0; color:var(--muted); font-size:13px}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--rounded); padding:var(--pad); box-shadow: 0 6px 20px rgba(2,6,23,0.6);}

.grid{display:grid; grid-template-columns: 1fr; gap:12px; margin-top:14px}
@media(min-width:860px){ .grid{grid-template-columns: 1fr 320px} }

label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.input, select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:var(--glass); color:inherit; font-size:15px}

/* Select dropdown styling */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--card) !important;
    color: #e6eef6 !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

select::-ms-expand {
    display: none;
}

select option {
    background-color: var(--bg) !important;
    color: #e6eef6 !important;
    padding: 10px !important;
}

select:focus {
    outline: none;
    border-color: var(--accent) !important;
}

select option:hover,
select option:focus,
select option:active,
select option:checked {
    background: var(--accent) !important;
    color: #002 !important;
}

.row{display:flex; gap:10px}
.row .col{flex:1}

.small{font-size:12px; color:var(--muted)}
.actions{display:flex; gap:8px; margin-top:12px}
button{background:var(--accent); color:#002; border:none; padding:10px 12px; border-radius:10px; font-weight:600; cursor:pointer}
button.secondary{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted)}

.result{padding:12px; border-radius:10px; background: linear-gradient(180deg, rgba(6,14,22,0.6), rgba(6,10,18,0.4));}
.result .item{display:flex; justify-content:space-between; margin-bottom:8px; align-items:center}
.big{font-size:20px; font-weight:700}
.muted{color:var(--muted)}

footer{margin-top:18px; color:var(--muted); font-size:13px; text-align:center}

/* tiny responsive tweaks */
@media(max-width:420px){ h1{font-size:18px} }

/* helper chips */
.chip{display:inline-block; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.02); font-size:12px}