:root { --lime:#8be20b; --lime-soft:#c9ff75; --bg:#020503; --panel:#071009; --panel-2:#0b160e; --line:#203826; --muted:#849187; --white:#f2f7f2; --serif:Georgia,"Times New Roman",serif; --sans:Inter,Arial,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { color-scheme:dark; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--white); background:radial-gradient(circle at 8% 25%,#102215 0,transparent 31%),radial-gradient(circle at 90% 80%,#0d1d11 0,transparent 28%),var(--bg); font-family:var(--sans); }
button,input,a { font:inherit; }
button,a { cursor:pointer; }
.account-orbit { position:fixed; z-index:-1; border:1px solid rgba(139,226,11,.12); border-radius:50%; pointer-events:none; }
.account-orbit-one { width:680px; height:680px; right:-330px; top:-300px; box-shadow:0 0 0 50px rgba(139,226,11,.018),0 0 0 100px rgba(139,226,11,.012); }
.account-orbit-two { width:430px; height:430px; left:-260px; bottom:-220px; }
.account-header { width:min(1240px,calc(100% - 42px)); min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:30px; margin:auto; border-bottom:1px solid rgba(139,226,11,.16); }
.account-brand { width: 248px; }
.account-brand img { width:100%; height:64px; object-fit:contain; object-position:left center; display:block; }
.account-header nav { display:flex; align-items:center; gap:24px; }
.account-header nav a,.account-header nav span { display:flex; align-items:center; gap:8px; color:#aab7ac; font-size:11px; font-weight:800; text-decoration:none; }
.account-header nav svg { width:17px; color:var(--lime); }
main { width:min(1240px,calc(100% - 42px)); margin:auto; }
.account-access { min-height:calc(100vh - 92px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; padding:50px 0 70px; }
.access-kicker,.access-label { display:flex; align-items:center; gap:8px; color:var(--lime); font-size:9px; font-weight:950; letter-spacing:.18em; }
.access-kicker svg { width:17px; }
.access-story h1 { margin:18px 0; font:400 clamp(48px,6vw,86px)/.92 var(--serif); letter-spacing:-.055em; }
.access-story h1 em { color:#a7b0a8; font-style:italic; }
.access-story>p { max-width:550px; color:#8d9990; font-size:14px; line-height:1.75; }
.story-track { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:42px 0 24px; }
.story-track::before { content:""; position:absolute; left:7%; right:7%; top:21px; height:1px; background:linear-gradient(90deg,var(--lime) 0 42%,#29422e 42%); }
.story-track span { position:relative; display:grid; justify-items:start; gap:5px; min-width:0; }
.story-track span>i,.story-track span>svg { position:relative; z-index:1; width:43px; height:43px; padding:12px; border:1px solid #29452f; border-radius:50%; color:#5d6a60; background:#071009; }
.story-track .done>svg,.story-track .active>svg { border-color:var(--lime); color:#061007; background:var(--lime); box-shadow:0 0 28px rgba(139,226,11,.18); }
.story-track b { margin-top:5px; font-size:9px; }
.story-track small { color:#667168; font-size:8px; }
.access-benefits { display:flex; flex-wrap:wrap; gap:8px; }
.access-benefits span { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #1e3423; border-radius:999px; color:#859288; background:rgba(7,14,9,.75); font-size:9px; font-weight:800; }
.access-benefits svg { width:14px; color:var(--lime); }
.access-card { padding:35px; border:1px solid #28482f; border-radius:28px; background:linear-gradient(145deg,rgba(12,25,15,.96),rgba(4,9,6,.98)); box-shadow:0 35px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.03); }
.access-card h2 { margin:9px 0 5px; font:400 36px/1 var(--serif); }
.access-card h2 em { color:#a5afa7; }
.access-card>p { margin:0 0 22px; color:#77847a; font-size:11px; }
.account-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; margin-bottom:17px; border:1px solid #223d28; border-radius:13px; background:#050a06; }
.account-tabs button { min-height:44px; border:0; border-radius:9px; color:#79857b; background:transparent; font-size:10px; font-weight:900; }
.account-tabs button.active { color:#061007; background:var(--lime); }
.account-form { display:grid; gap:13px; }
.register-form { grid-template-columns:1fr 1fr; }
.account-form label { display:grid; gap:7px; color:#a4b0a6; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.account-form input { width:100%; height:50px; padding:0 14px; border:1px solid #29482f; border-radius:11px; outline:0; color:#eff6f0; background:#09110b; }
.account-form input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(139,226,11,.07); }
.account-form .full { grid-column:1/-1; }
.account-form>small { display:flex; align-items:center; gap:7px; color:#6f7d72; font-size:9px; }
.account-form>small svg { width:14px; color:var(--lime); }
.account-form>button { min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:11px; color:#061007; background:var(--lime); font-size:11px; font-weight:950; }
.account-form>button svg { width:17px; }
.account-error { padding:11px; border:1px solid rgba(255,102,102,.3); border-radius:10px; color:#ffb2b2; background:rgba(180,40,40,.12); font-size:10px; line-height:1.45; }
.privacy-note { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; color:#657168; font-size:8px; text-align:center; }
.privacy-note svg { width:13px; color:#769a7c; }
.customer-portal { padding:42px 0 80px; }
.portal-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.portal-topline>span { display:flex; align-items:center; gap:8px; color:var(--lime); font-size:9px; font-weight:950; letter-spacing:.15em; }
.portal-topline svg { width:16px; }
.portal-topline button { display:flex; align-items:center; gap:7px; border:0; color:#839087; background:transparent; font-size:9px; font-weight:850; }
.portal-hero { min-height:245px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding:38px; border:1px solid #28492f; border-radius:26px; background:radial-gradient(circle at 83% 15%,rgba(139,226,11,.18),transparent 24%),linear-gradient(120deg,#071009,#0d2112); overflow:hidden; }
.portal-hero span { color:var(--lime); font-size:9px; font-weight:900; letter-spacing:.16em; }
.portal-hero h1 { margin:8px 0; font:400 clamp(42px,6vw,74px)/.95 var(--serif); }
.portal-hero h1 em { color:#aab4ac; }
.portal-hero p { margin:0; color:#7e8d81; font-size:11px; }
.portal-hero>a { display:flex; align-items:center; gap:8px; padding:14px 19px; border-radius:999px; color:#061007; background:var(--lime); font-size:10px; font-weight:950; text-decoration:none; }
.portal-hero>a svg { width:17px; }
.portal-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 42px; }
.portal-metrics article { display:flex; align-items:center; gap:13px; padding:20px; border:1px solid #1f3724; border-radius:16px; background:#071009; }
.portal-metrics article>span { width:44px; height:44px; display:grid; place-items:center; border:1px solid #315538; border-radius:12px; color:var(--lime); background:#0c1b10; }
.portal-metrics svg { width:21px; }
.portal-metrics article>div { display:grid; gap:4px; }
.portal-metrics small { color:#768278; font-size:8px; font-weight:800; text-transform:uppercase; }
.portal-metrics strong { font:400 25px var(--serif); }
.orders-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:17px; }
.orders-heading span { color:var(--lime); font-size:8px; font-weight:950; letter-spacing:.16em; }
.orders-heading h2 { margin:5px 0; font:400 35px var(--serif); }
.orders-heading p { margin:0; color:#748077; font-size:10px; }
.orders-heading button { display:flex; align-items:center; gap:7px; padding:11px 14px; border:1px solid #294a30; border-radius:999px; color:#aab6ac; background:#08100a; font-size:9px; font-weight:900; }
.orders-heading button svg { width:14px; }
.customer-orders { display:grid; gap:14px; }
.customer-order { border:1px solid #203a26; border-radius:20px; background:linear-gradient(140deg,#08110a,#050a06); overflow:hidden; }
.order-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid #1c3121; }
.order-head>div { display:flex; align-items:center; gap:12px; }
.order-head .order-icon { width:43px; height:43px; display:grid; place-items:center; border:1px solid #31563a; border-radius:12px; color:var(--lime); background:#0c1a10; }
.order-icon svg { width:20px; }
.order-head h3 { margin:0 0 3px; font:400 18px var(--serif); }
.order-head small { color:#6f7c72; font-size:8px; }
.order-head>span { padding:7px 10px; border:1px solid #315037; border-radius:999px; color:#b7c4b9; font-size:8px; font-weight:900; }
.order-head>span.cancelled { border-color:#6b3333; color:#ffabab; }
.order-body { display:grid; grid-template-columns:.75fr 1.25fr; gap:28px; padding:22px; }
.order-summary { display:grid; align-content:start; gap:12px; }
.order-summary>div { display:flex; justify-content:space-between; gap:20px; padding-bottom:10px; border-bottom:1px solid #16291b; color:#7d8a80; font-size:9px; }
.order-summary strong { color:#e9f0ea; font-size:10px; }
.order-summary .order-total strong { color:var(--lime); font:400 20px var(--serif); }
.order-items { display:grid; gap:7px; margin-top:4px; }
.order-items span { display:flex; justify-content:space-between; gap:12px; color:#89968c; font-size:9px; }
.order-items b { color:#dce6de; }
.tracking-box { padding:18px; border:1px solid #29472f; border-radius:16px; background:#08110a; }
.tracking-box>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }
.tracking-box h4 { margin:0 0 3px; font-size:10px; }
.tracking-box p { margin:0; color:#708077; font-size:8px; }
.tracking-code { display:grid; justify-items:end; gap:3px; color:var(--lime); font-size:11px; }
.tracking-code small { color:#67756a; font-size:7px; }
.tracking-line { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.tracking-line::before { content:""; position:absolute; left:6%; right:6%; top:14px; height:2px; background:#223b28; }
.tracking-line::after { content:""; position:absolute; left:6%; top:14px; width:var(--track-progress,0%); max-width:88%; height:2px; background:var(--lime); box-shadow:0 0 10px rgba(139,226,11,.35); }
.tracking-step { position:relative; z-index:1; display:grid; justify-items:center; gap:6px; color:#5f6b61; text-align:center; }
.tracking-step>span { width:29px; height:29px; display:grid; place-items:center; border:1px solid #29452f; border-radius:50%; background:#08110a; }
.tracking-step svg { width:13px; }
.tracking-step b { font-size:7px; }
.tracking-step.done,.tracking-step.active { color:#dfe8e1; }
.tracking-step.done>span,.tracking-step.active>span { border-color:var(--lime); color:#061007; background:var(--lime); }
.tracking-step.active>span { box-shadow:0 0 22px rgba(139,226,11,.25); }
.orders-empty { min-height:280px; display:grid; place-items:center; align-content:center; gap:9px; border:1px dashed #29462f; border-radius:20px; color:#758177; text-align:center; }
.orders-empty>svg { width:45px; height:45px; color:var(--lime); }
.orders-empty h3 { margin:4px 0 0; color:#e7eee8; font:400 25px var(--serif); }
.orders-empty p { margin:0; font-size:10px; }
.orders-empty a { margin-top:7px; padding:12px 18px; border-radius:999px; color:#061007; background:var(--lime); font-size:9px; font-weight:950; text-decoration:none; }
.account-toast { position:fixed; z-index:50; left:50%; bottom:24px; max-width:calc(100% - 30px); padding:12px 18px; border:1px solid #3d663f; border-radius:999px; color:#eff6f0; background:#0b170e; box-shadow:0 15px 55px #000; opacity:0; transform:translate(-50%,25px); pointer-events:none; transition:.25s; font-size:10px; font-weight:850; }
.account-toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) { .account-access { grid-template-columns:1fr; gap:40px; } .access-story { padding-top:30px; } .order-body { grid-template-columns:1fr; } }
@media (max-width:650px) { .account-header,main { width:min(100% - 26px,1240px); } .account-header nav span { display:none; } .account-access { padding-top:30px; } .access-card { padding:24px 17px; border-radius:20px; } .register-form,.portal-metrics { grid-template-columns:1fr; } .register-form label { grid-column:1/-1; } .story-track { grid-template-columns:repeat(2,1fr); gap:18px; } .story-track::before { display:none; } .portal-hero { align-items:flex-start; flex-direction:column; padding:26px 20px; } .orders-heading { align-items:flex-start; flex-direction:column; } .order-head { align-items:flex-start; } .order-head>span { flex:0 0 auto; } .tracking-box { padding:14px 8px; } .tracking-step b { font-size:6px; } .tracking-code { justify-items:start; } .tracking-box>div:first-child { align-items:flex-start; flex-direction:column; } }