*{box-sizing:border-box}
:root{
 --bg:#07090b;
 --panel:#0d1114;
 --panel2:#11171a;
 --line:rgba(213,177,92,.18);
 --gold:#d5b15c;
 --gold2:#f0d58a;
 --text:#f3f1ea;
 --muted:#8e9697;
 --green:#82c7a0;
}
html{background:var(--bg)}
body{
 margin:0;
 background:
 radial-gradient(circle at 85% 5%,rgba(213,177,92,.10),transparent 28%),
 radial-gradient(circle at 5% 38%,rgba(78,120,113,.07),transparent 32%),
 var(--bg);
 color:var(--text);
 font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
button{font:inherit}
.app{
 max-width:520px;
 margin:auto;
 min-height:100vh;
 padding:24px 18px 110px;
}
header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:5px 2px 28px;
}
.brand{
 font-size:27px;
 font-weight:900;
 letter-spacing:7px;
 color:var(--gold2);
}
.market-title{
 font-size:10px;
 letter-spacing:5px;
 color:#777f80;
 margin-top:2px;
}
.lang{
 border:1px solid var(--line);
 background:#0b0e10;
 color:var(--gold2);
 border-radius:50px;
 padding:9px 13px;
 font-size:11px;
 font-weight:800;
}
.hero{
 border:1px solid var(--line);
 border-radius:25px;
 padding:25px 20px 20px;
 background:linear-gradient(145deg,rgba(213,177,92,.07),rgba(12,16,18,.86) 40%,rgba(10,13,15,.95));
 box-shadow:0 18px 55px rgba(0,0,0,.28);
}
.eyebrow{
 color:var(--gold);
 font-size:9px;
 letter-spacing:2.2px;
 font-weight:800;
}
h1{
 font-size:34px;
 line-height:1.03;
 letter-spacing:-1.4px;
 margin:13px 0 12px;
}
.hero p{
 color:var(--muted);
 line-height:1.45;
 font-size:13px;
 max-width:330px;
}
.ask{
 width:100%;
 margin-top:17px;
 border:1px solid rgba(213,177,92,.26);
 border-radius:16px;
 padding:15px 16px;
 display:flex;
 align-items:center;
 gap:11px;
 background:rgba(5,7,8,.62);
 color:#d7d8d4;
 text-align:left;
}
.ask span:first-child{color:var(--gold2);font-size:20px}
.ask b{margin-left:auto;color:var(--gold)}
.section-title{
 margin:27px 4px 11px;
 font-size:9px;
 font-weight:900;
 letter-spacing:2.2px;
 color:#6f7778;
}
.grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
}
.card{
 position:relative;
 min-height:154px;
 text-align:left;
 padding:17px;
 border:1px solid rgba(255,255,255,.07);
 border-radius:19px;
 background:linear-gradient(145deg,#111619,#0a0d0f);
 color:var(--text);
 overflow:hidden;
}
.card:after{
 content:"";
 position:absolute;
 width:75px;height:75px;
 right:-30px;top:-30px;
 border:1px solid rgba(213,177,92,.09);
 border-radius:50%;
}
.icon{font-size:24px;color:var(--gold);margin-bottom:23px}
.card strong{display:block;font-size:15px;letter-spacing:.8px}
.card small{display:block;color:var(--muted);font-size:10px;line-height:1.35;margin-top:6px;padding-right:10px}
.state{
 display:inline-block;
 margin-top:12px;
 font-size:8px;
 font-weight:900;
 letter-spacing:1px;
 padding:5px 7px;
 border-radius:7px;
}
.state.free{color:var(--green);background:rgba(130,199,160,.08)}
.state.paid{color:var(--gold2);background:rgba(213,177,92,.09)}
.feed{
 border:1px solid var(--line);
 border-radius:19px;
 padding:18px;
 background:linear-gradient(110deg,rgba(213,177,92,.06),rgba(12,16,18,.9));
}
.feed-top{display:flex;gap:10px}
.feed strong{font-size:15px}
.feed p{font-size:11px;color:var(--muted);line-height:1.45;margin:6px 0 0}
.pulse{
 width:8px;height:8px;border-radius:50%;
 background:var(--green);
 margin-left:auto;
 box-shadow:0 0 13px rgba(130,199,160,.8);
}
.outline{
 margin-top:15px;
 background:transparent;
 color:var(--gold2);
 border:0;
 padding:0;
 font-size:11px;
 font-weight:800;
}
.mini-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
}
.mini-grid button{
 display:flex;
 align-items:center;
 gap:8px;
 padding:14px 12px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.06);
 background:#0c1012;
 color:#777e7f;
 font-size:11px;
 text-align:left;
}
.mini-grid button b{color:#a1a6a5;font-size:10px;letter-spacing:.5px}
.mini-grid button span{margin-left:auto;font-size:10px}
.special{margin-top:10px}
.special button{
 width:100%;
 display:flex;
 align-items:center;
 gap:13px;
 text-align:left;
 border-radius:18px;
 border:1px solid rgba(213,177,92,.14);
 padding:16px;
 background:linear-gradient(100deg,#101416,#0b0e10);
 color:var(--text);
}
.special button>span:last-child{margin-left:auto}
.special-icon{font-size:25px;color:var(--gold)}
.special b{display:block;font-size:13px}
.special small{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.plan-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
}
.plan-row button{
 border:1px solid rgba(255,255,255,.07);
 background:#0d1113;
 border-radius:13px;
 padding:13px;
 color:#b8bcba;
 display:flex;
 justify-content:space-between;
}
.plan-row b{font-size:10px}
.plan-row span{font-size:11px;color:var(--gold2)}
.plan-row .ultra{
 border-color:rgba(213,177,92,.3);
 background:rgba(213,177,92,.07);
}
.period{display:block;color:#62696a;font-size:9px;margin:9px 3px}
footer{
 position:fixed;
 z-index:20;
 bottom:0;
 left:50%;
 transform:translateX(-50%);
 width:min(520px,100%);
 display:grid;
 grid-template-columns:repeat(4,1fr);
 padding:10px 12px max(10px,env(safe-area-inset-bottom));
 background:rgba(7,9,11,.94);
 backdrop-filter:blur(18px);
 border-top:1px solid rgba(213,177,92,.12);
}
footer button{
 border:0;background:transparent;color:#687071;
 display:flex;flex-direction:column;align-items:center;gap:4px;
 font-size:19px;
}
footer button span{font-size:8px;font-weight:800}
footer .active,footer .toir{color:var(--gold2)}
.sheet{
 position:fixed;inset:0;z-index:100;
 background:rgba(0,0,0,.68);
 backdrop-filter:blur(7px);
 display:flex;
 align-items:flex-end;
 justify-content:center;
}
.sheet.hidden{display:none}
.sheet-card{
 position:relative;
 width:min(520px,100%);
 border-radius:27px 27px 0 0;
 border:1px solid var(--line);
 border-bottom:0;
 padding:30px 23px max(28px,env(safe-area-inset-bottom));
 background:linear-gradient(150deg,#121719,#080b0d);
 box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.close{
 position:absolute;right:17px;top:14px;
 border:0;background:transparent;color:#7b8282;
 font-size:27px;
}
.sheet-icon{font-size:31px;color:var(--gold2)}
.sheet h2{font-size:24px;margin:12px 0 9px}
.sheet p{color:#9aa09f;line-height:1.55;font-size:13px}
.primary{
 width:100%;
 margin-top:14px;
 border:1px solid rgba(213,177,92,.35);
 background:linear-gradient(100deg,#c5a14f,#e3c978);
 color:#111;
 border-radius:14px;
 padding:14px;
 font-weight:900;
}
@media(max-width:360px){
 h1{font-size:30px}
 .app{padding-left:13px;padding-right:13px}
}

/* ===== TOIR ONBOARDING ===== */

.onboarding{
 position:fixed;
 inset:0;
 z-index:1000;
 background:
 radial-gradient(circle at 80% 5%,rgba(213,177,92,.13),transparent 30%),
 #07090b;
 overflow:auto;
 padding:25px 17px;
}

.onboarding.hidden,
.ob-step.hidden{display:none}

.onboard-card{
 width:min(480px,100%);
 min-height:calc(100vh - 50px);
 margin:auto;
 display:flex;
 flex-direction:column;
 justify-content:center;
}

.ob-logo{
 color:var(--gold2);
 font-size:30px;
 font-weight:900;
 letter-spacing:8px;
}

.ob-sub{
 color:#777f80;
 font-size:10px;
 letter-spacing:6px;
 margin:3px 0 55px;
}

.ob-kicker{
 color:var(--gold);
 font-size:9px;
 font-weight:900;
 letter-spacing:2px;
 margin-bottom:15px;
}

.ob-step h2{
 font-size:32px;
 line-height:1.08;
 margin:0 0 13px;
}

.ob-step h2 span{color:#777}

.ob-step p{
 color:var(--muted);
 font-size:13px;
 line-height:1.5;
 margin:0 0 22px;
}

.ob-buttons{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
}

.ob-buttons button,
.ob-next{
 border:1px solid var(--line);
 background:linear-gradient(145deg,#121719,#0b0e10);
 color:var(--text);
 border-radius:17px;
 padding:17px;
 font-weight:800;
}

.ob-next{
 width:100%;
 margin-top:19px;
 color:#111;
 background:linear-gradient(100deg,#c5a14f,#e3c978);
}

#countryInput{
 width:100%;
 border:1px solid var(--line);
 background:#0c1012;
 color:white;
 border-radius:16px;
 padding:17px;
 outline:none;
 font-size:16px;
}

.interest-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px;
}

.interest-grid button{
 text-align:left;
 border:1px solid rgba(255,255,255,.07);
 background:#0d1113;
 color:#a5aaa9;
 border-radius:15px;
 padding:15px 12px;
}

.interest-grid button.selected{
 border-color:rgba(213,177,92,.55);
 background:rgba(213,177,92,.10);
 color:var(--gold2);
}

.ob-error{
 min-height:20px;
 margin-top:10px;
 color:#d98c83;
 font-size:11px;
 text-align:center;
}

.trial-ring{
 width:95px;
 height:95px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 border:1px solid rgba(213,177,92,.55);
 box-shadow:
  0 0 40px rgba(213,177,92,.10),
  inset 0 0 25px rgba(213,177,92,.08);
 color:var(--gold2);
 font-size:25px;
 font-weight:900;
 margin-bottom:28px;
}

/* ===== TOIR HUNTER ===== */

.hunter-panel{
 position:fixed;
 inset:0;
 z-index:800;
 overflow:auto;
 background:
 radial-gradient(circle at 90% 0%,rgba(213,177,92,.10),transparent 28%),
 var(--bg);
 color:var(--text);
}

.hunter-panel.hidden{display:none}

.hunter-head{
 position:sticky;
 top:0;
 z-index:5;
 display:flex;
 align-items:center;
 gap:13px;
 padding:16px 17px;
 background:rgba(7,9,11,.93);
 backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line);
}

.hunter-head button{
 border:0;
 background:transparent;
 color:var(--gold2);
 font-size:25px;
 padding:3px 6px;
}

.hunter-head b{
 display:block;
 font-size:13px;
 letter-spacing:1.2px;
}

.hunter-head small{
 display:block;
 color:var(--muted);
 font-size:9px;
 margin-top:3px;
}

.hunter-live{
 margin-left:auto;
 color:var(--green);
 font-size:8px;
 font-weight:900;
 letter-spacing:1px;
}

.hunter-body{
 width:min(520px,100%);
 margin:auto;
 padding:28px 17px 100px;
}

.hunter-intro>span{
 color:var(--gold2);
 font-size:32px;
}

.hunter-intro h2{
 margin:10px 0 7px;
 font-size:30px;
}

.hunter-intro p{
 color:var(--muted);
 font-size:12px;
 line-height:1.5;
 margin:0 0 25px;
}

.hunter-form{
 border:1px solid var(--line);
 border-radius:21px;
 padding:17px;
 background:linear-gradient(145deg,#101517,#0a0d0f);
}

.hunter-form label{
 display:block;
 margin:15px 2px 7px;
 color:#72797a;
 font-size:8px;
 font-weight:900;
 letter-spacing:1.4px;
}

.hunter-form label:first-child{margin-top:0}

.hunter-form input,
.hunter-form select{
 width:100%;
 border:1px solid rgba(255,255,255,.08);
 border-radius:12px;
 background:#080b0d;
 color:#eee;
 padding:13px;
 outline:none;
}

.hunter-two{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px;
}

.condition-row{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:7px;
}

.condition-row button{
 border:1px solid rgba(255,255,255,.08);
 background:#090c0e;
 color:#858c8c;
 border-radius:11px;
 padding:11px 5px;
 font-size:10px;
}

.condition-row button.selected{
 color:var(--gold2);
 border-color:rgba(213,177,92,.45);
 background:rgba(213,177,92,.08);
}

.hunter-save{
 width:100%;
 margin-top:18px;
 border:1px solid rgba(213,177,92,.35);
 border-radius:13px;
 padding:14px;
 background:linear-gradient(100deg,#c5a14f,#e3c978);
 color:#111;
 font-weight:900;
}

#hunterError{
 color:#d98c83;
 text-align:center;
 min-height:15px;
 margin-top:8px;
 font-size:10px;
}

.hunter-list-title{
 display:flex;
 align-items:center;
 margin:28px 3px 11px;
 color:#747b7c;
 font-size:9px;
 letter-spacing:1.6px;
}

.hunter-list-title span{
 margin-left:auto;
 min-width:23px;
 text-align:center;
 padding:4px 6px;
 border-radius:20px;
 background:rgba(213,177,92,.09);
 color:var(--gold2);
}

.hunter-job{
 border:1px solid rgba(255,255,255,.07);
 border-radius:16px;
 background:#0d1113;
 padding:14px;
 margin-bottom:9px;
}

.hunter-job.paused{opacity:.58}

.hunter-job-top{
 display:flex;
 align-items:center;
 gap:8px;
}

.hunter-job-top b{
 font-size:12px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.hunter-dot{
 width:7px;
 height:7px;
 flex:none;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 9px rgba(130,199,160,.6);
}

.paused .hunter-dot{
 background:#777;
 box-shadow:none;
}

.hunter-status{
 margin-left:auto;
 color:var(--green);
 font-size:7px;
 font-weight:900;
}

.hunter-meta{
 color:#777f80;
 font-size:9px;
 margin:8px 0 11px 15px;
}

.hunter-actions{
 display:flex;
 gap:7px;
 margin-left:15px;
}

.hunter-actions button{
 border:1px solid rgba(255,255,255,.07);
 border-radius:8px;
 background:#090c0e;
 color:#969c9b;
 padding:7px 10px;
 font-size:8px;
}

.hunter-empty{
 border:1px dashed rgba(255,255,255,.08);
 border-radius:15px;
 color:#697071;
 text-align:center;
 padding:25px 12px;
 font-size:10px;
}