:root{
--bg:#050b07;
--panel:#0b1b12;
--panel2:#0e2217;
--border:rgba(255,255,255,.10);
--text:#e9f2ec;
--muted:rgba(233,242,236,.70);

--green:#1f8b4c;
--green2:#2aa85f;
--amber:#b57a18;

--radius:22px;
--radius2:16px;

--pad:16px;
--gap:12px;

/* “glove-friendly” sizes */
--btnH:52px;
--inputH:54px;
--stepBtn:58px;
--countW:64px;
--font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:var(--font);
color:var(--text);
background:
radial-gradient(1000px 700px at 20% 0%, rgba(36,120,70,.20), transparent 60%),
radial-gradient(900px 700px at 90% 20%, rgba(0,140,90,.14), transparent 55%),
linear-gradient(180deg, #040806, var(--bg));
}

/* Top bar */
.topbar{
position:sticky;
top:0;
z-index:10;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 14px 10px;
background:linear-gradient(180deg, rgba(3,7,5,.92), rgba(3,7,5,.70));
backdrop-filter: blur(10px);
border-bottom:1px solid rgba(255,255,255,.06);
}

.brand-title{
font-weight:800;
font-size:26px;
line-height:1.05;
}
.brand-sub{
color:var(--muted);
margin-top:4px;
font-size:15px;
}

.top-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:flex-end;
}

/* Layout */
.container{
padding:14px;
max-width:820px;
margin:0 auto;
}

.card{
background:linear-gradient(180deg, rgba(11,27,18,.92), rgba(11,27,18,.75));
border:1px solid rgba(255,255,255,.08);
border-radius:var(--radius);
padding:var(--pad);
margin:14px 0;
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.card h2{
margin:0 0 12px 0;
font-size:24px;
letter-spacing:.2px;
}

/* Rows / fields */
.row{
display:flex;
gap:var(--gap);
align-items:flex-end;
margin:10px 0;
}
.row-between{justify-content:space-between; align-items:center}
.row-wrap{flex-wrap:wrap}

.field{display:flex; flex-direction:column; gap:8px; min-width:140px}
.field-grow{flex:1; min-width:220px}

label{
color:var(--muted);
font-size:15px;
}

input, select, textarea{
width:100%;
color:var(--text);
background:rgba(0,0,0,.20);
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:12px 14px;
min-height:var(--inputH);
font-size:18px;
outline:none;
}
textarea{min-height:96px; resize:vertical}

input::placeholder{color:rgba(233,242,236,.45)}

.hint{
color:rgba(233,242,236,.65);
font-size:14px;
margin-top:6px;
}

.pill{
padding:12px 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.18);
font-weight:800;
font-size:18px;
}

/* Buttons */
.btn{
min-height:var(--btnH);
padding:0 18px;
border-radius:18px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.18);
color:var(--text);
font-size:18px;
font-weight:800;
}
.btn:active{transform:translateY(1px)}
.btn-small{min-height:48px; padding:0 16px; font-size:18px}

.btn-primary{
background:linear-gradient(180deg, rgba(42,168,95,.95), rgba(31,139,76,.95));
border-color:rgba(255,255,255,.10);
}
.btn-warn{
background:linear-gradient(180deg, rgba(210,140,25,.95), rgba(160,105,15,.95));
border-color:rgba(255,255,255,.10);
}
.btn-ghost{
background:transparent;
}

/* Segment buttons */
.seggrid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:12px;
margin:10px 0 14px;
}
.segrow{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:10px 0 14px;
}

.segbtn{
user-select:none;
text-align:center;
padding:14px 10px;
border-radius:18px;
border:1px solid rgba(255,255,255,.12);
background:rgba(0,0,0,.18);
font-size:20px;
font-weight:900;
min-height:56px;
display:flex;
align-items:center;
justify-content:center;
flex: 1 0 auto;
min-width:72px;
}
.segbtn.active{
background:linear-gradient(180deg, rgba(42,168,95,.95), rgba(31,139,76,.95));
border-color:rgba(255,255,255,.10);
}

/* Counters */
.counters{
display:flex;
flex-direction:column;
gap:12px;
margin-top:8px;
}

.counter{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:14px;
border-radius:18px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.14);
}

.counter .left{
display:flex;
flex-direction:column;
gap:6px;
min-width:160px;
}
.counter .label{
font-size:20px;
font-weight:900;
}
.counter .sub{
font-size:14px;
color:rgba(233,242,236,.60);
}

.counter .right{
display:flex;
align-items:center;
gap:10px;
}

.stepbtn{
width:var(--stepBtn);
height:var(--stepBtn);
border-radius:18px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.22);
color:var(--text);
font-size:30px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
}
.stepbtn:active{transform:translateY(1px)}

.count{
width:var(--countW);
text-align:center;
font-size:26px;
font-weight:900;
padding:10px 0;
}

/* History list */
.huntitem{
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.12);
border-radius:18px;
padding:14px;
margin:10px 0;
}
.huntitem .top{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
}
.huntitem .title{
font-weight:900;
font-size:18px;
}
.huntitem .meta{
margin-top:8px;
color:rgba(233,242,236,.65);
font-size:14px;
line-height:1.25;
}
.badge{
padding:8px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
letter-spacing:.6px;
border:1px solid rgba(255,255,255,.12);
}
.badge.progress{background:rgba(0,0,0,.18)}
.badge.final{background:rgba(42,168,95,.20)}

/* iPhone small screens: give more breathing room */
@media (max-width:430px){
.brand-title{font-size:24px}
.card{padding:14px}
.field{min-width:150px}
.seggrid{grid-template-columns:repeat(4, 1fr)}
}