/* Fluxari v1 — luxury gold + charcoal, réplica del sistema visual de los mockups */
*{box-sizing:border-box}
:root{
  --bg:#0B0906; --bg2:#14100A; --card:#1A140D; --card2:#221A0E;
  --line:rgba(245,200,107,.28); --line2:rgba(245,200,107,.16);
  --gold:#F5C86B; --gold2:#E9B64F; --gold3:#B57E1E; --gold-bright:#FFD97A;
  --text:#F7F1E3; --muted:#A79B83; --muted2:#7A6F5A;
  --green:#2FBF71; --red:#E4574B;
  --radius:22px; --radius-sm:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
html,body{margin:0;padding:0;background:#000;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--text);background:#241D12;border:1px solid var(--line2);border-radius:12px;padding:11px 12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,200,107,.15)}
select{appearance:none}
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.hidden{display:none!important}
.view{min-height:100dvh}
#app-shell{max-width:520px;margin:0 auto;background:var(--bg);min-height:100dvh;position:relative;box-shadow:0 0 60px rgba(0,0,0,.7)}

/* ---------- Auth — réplica fiel de la referencia: cristal, píldoras, transparencias, bokeh ---------- */
#view-auth{position:relative;overflow:hidden;background:#050302;display:flex;flex-direction:column;justify-content:center;min-height:100dvh}
.auth-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-bokeh{position:absolute;border-radius:50%;filter:blur(28px)}
.auth-bokeh.b1{width:340px;height:340px;left:-110px;top:-60px;background:radial-gradient(circle,rgba(255,180,60,.42),rgba(255,180,60,0) 70%)}
.auth-bokeh.b2{width:280px;height:280px;right:-90px;top:32%;background:radial-gradient(circle,rgba(255,200,90,.30),rgba(255,200,90,0) 70%)}
.auth-bokeh.b3{width:260px;height:260px;left:-100px;bottom:6%;background:radial-gradient(circle,rgba(255,170,50,.28),rgba(255,170,50,0) 70%)}
.auth-bokeh.b4{width:160px;height:160px;right:6%;bottom:12%;background:radial-gradient(circle,rgba(255,220,140,.35),rgba(255,220,140,0) 70%)}
.auth-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-particles span{position:absolute;bottom:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,130,1),rgba(255,200,100,.85) 45%,rgba(255,200,100,0) 72%);box-shadow:0 0 8px rgba(255,205,100,.8);animation:floatUp linear infinite}
.auth-particles span:nth-child(1){left:6%;width:5px;height:5px;animation-duration:11s;animation-delay:0s}
.auth-particles span:nth-child(2){left:14%;width:3px;height:3px;animation-duration:15s;animation-delay:2s}
.auth-particles span:nth-child(3){left:24%;width:6px;height:6px;animation-duration:13s;animation-delay:1s}
.auth-particles span:nth-child(4){left:33%;width:4px;height:4px;animation-duration:17s;animation-delay:4s}
.auth-particles span:nth-child(5){left:44%;width:3px;height:3px;animation-duration:12s;animation-delay:3s}
.auth-particles span:nth-child(6){left:53%;width:6px;height:6px;animation-duration:16s;animation-delay:0.5s}
.auth-particles span:nth-child(7){left:62%;width:4px;height:4px;animation-duration:14s;animation-delay:5s}
.auth-particles span:nth-child(8){left:71%;width:3px;height:3px;animation-duration:18s;animation-delay:1.5s}
.auth-particles span:nth-child(9){left:80%;width:5px;height:5px;animation-duration:12s;animation-delay:2.5s}
.auth-particles span:nth-child(10){left:88%;width:4px;height:4px;animation-duration:15s;animation-delay:3.5s}
.auth-particles span:nth-child(11){left:94%;width:3px;height:3px;animation-duration:19s;animation-delay:0.8s}
.auth-particles span:nth-child(12){left:38%;width:5px;height:5px;animation-duration:20s;animation-delay:6s}
.auth-particles span:nth-child(13){left:10%;width:6px;height:6px;animation-duration:12s;animation-delay:0.4s}
.auth-particles span:nth-child(14){left:20%;width:4px;height:4px;animation-duration:16s;animation-delay:2.2s}
.auth-particles span:nth-child(15){left:29%;width:7px;height:7px;animation-duration:11s;animation-delay:1.1s}
.auth-particles span:nth-child(16){left:48%;width:5px;height:5px;animation-duration:14s;animation-delay:3.1s}
.auth-particles span:nth-child(17){left:58%;width:3px;height:3px;animation-duration:18s;animation-delay:0.9s}
.auth-particles span:nth-child(18){left:67%;width:6px;height:6px;animation-duration:13s;animation-delay:4.4s}
.auth-particles span:nth-child(19){left:76%;width:4px;height:4px;animation-duration:15s;animation-delay:2.8s}
.auth-particles span:nth-child(20){left:91%;width:7px;height:7px;animation-duration:12s;animation-delay:1.8s}
@keyframes floatUp{0%{transform:translateY(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(-105vh);opacity:0}}
.auth-wrap{position:relative;z-index:1;margin:28px 14px;padding:34px 26px 26px;border-radius:30px;border:1px solid rgba(245,200,107,.5);background:linear-gradient(165deg,rgba(52,38,18,.52),rgba(12,9,5,.72));backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 24px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,200,.25),0 0 60px rgba(245,200,107,.12);overflow:hidden;animation:authIn .5s ease both}
.auth-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 42%,rgba(255,240,200,.13) 50%,transparent 58%);background-size:250% 100%;animation:cardShine 7s ease-in-out infinite;pointer-events:none}
@keyframes cardShine{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes authIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.auth-brand{text-align:center;margin:6px 0 4px;position:relative;z-index:1}
.auth-logo{display:block;margin:0 auto;height:106px;width:auto;background:none;border:0;box-shadow:none;animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.auth-brand h1{font-size:58px;font-weight:800;margin:16px 0 4px;letter-spacing:-.5px;color:#FFF}
.auth-tag,.brand-tag{font-size:13px;letter-spacing:5px;color:#CFC6B0;text-transform:uppercase}
.lang-row{display:flex;gap:10px;justify-content:center;margin:18px 0;position:relative;z-index:1}
.lang-btn{background:rgba(0,0,0,.35);border:1px solid rgba(245,200,107,.35);color:#EDE5D3;border-radius:999px;padding:8px 22px;font-size:15px;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.lang-btn.on{background:linear-gradient(120deg,#FFE08A,#F5C86B 55%,#D9A441);color:#241A05;border-color:transparent;box-shadow:0 6px 18px rgba(245,200,107,.4)}
.auth-tabs{position:relative;display:flex;background:rgba(0,0,0,.38);border:1px solid rgba(245,200,107,.28);border-radius:999px;padding:5px;margin:20px 0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1}
.auth-tab{flex:1;position:relative;z-index:1;background:transparent;border:0;color:#D8CFB8;padding:13px 8px;border-radius:999px;font-size:16px;font-weight:600;transition:color .25s ease}
.auth-tab.active{color:#241A05}
.auth-tab-indicator{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(120deg,#FFE08A,#F5C86B 55%,#D9A441);box-shadow:0 8px 20px rgba(245,200,107,.45);transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);z-index:0;opacity:0}
.auth-form{position:relative;z-index:1}
.auth-form.auth-form-enter{animation:formIn .35s ease both}
@keyframes formIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.auth-form label{display:block;font-size:15px;font-weight:600;color:#F5EFE0;margin:20px 0 8px}
.auth-form input{background:rgba(0,0,0,.38);border:1px solid rgba(245,200,107,.32);border-radius:14px;padding:15px 14px;font-size:16px;color:#F7F1E3;caret-color:#F5C86B;-webkit-transform:translateZ(0);transform:translateZ(0);transition:border-color .2s ease,box-shadow .2s ease}
.auth-form input::placeholder{color:#8d8271}
.auth-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,200,107,.18),0 0 26px rgba(245,200,107,.3)}
.field-wrap{position:relative}
.field-wrap input{padding-left:46px}
.field-wrap input[type="password"]{padding-right:48px}
.field-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:#B9AE96;display:flex;pointer-events:none;z-index:1}
.field-ic svg{width:100%;height:100%}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:#B9AE96;display:flex;align-items:center;justify-content:center;z-index:1}
.pw-eye svg{width:22px;height:22px}
.pw-eye:active{color:#F5C86B}
.auth-form .btn-gold{border-radius:999px;padding:16px;font-size:18px;font-weight:800;margin-top:22px;background:linear-gradient(120deg,#FFE08A,#F5C86B 55%,#D9A441);box-shadow:0 10px 28px rgba(245,200,107,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.auth-form .btn-gold:active{transform:scale(.985)}
.auth-form .link-btn{display:block;text-align:left;color:var(--gold);text-decoration:underline;text-underline-offset:5px;font-size:15px;padding:12px 2px 0;background:none;border:0}
#btn-resend{display:block;margin:10px auto 0;text-align:center;text-decoration:underline;text-underline-offset:4px}
.hint{font-size:13px;color:var(--muted);line-height:1.45}
.hint.center{text-align:center}
.auth-msg{min-height:20px;text-align:center;font-size:14px;color:#FFB4AB;margin-top:12px;transition:opacity .2s ease;position:relative;z-index:1}
.auth-msg.ok{color:#7FE3AE}
.auth-foot{border-top:1px solid rgba(245,200,107,.2);padding-top:20px;margin-top:22px;text-align:center;font-size:13px;color:#A79B83;line-height:1.6;position:relative;z-index:1}

.btn-gold{display:block;width:100%;border:0;border-radius:14px;padding:14px;background:linear-gradient(120deg,#F7D789,#E9B64F 55%,#C9922E);color:#241A05;font-weight:800;font-size:16px;margin-top:18px;box-shadow:0 8px 22px rgba(233,182,79,.28);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
.btn-gold:active{transform:scale(.98)}
.btn-gold.sm{width:auto;padding:9px 16px;font-size:14px;margin-top:0}
.btn-gold:disabled{opacity:.55}
.btn-gold.is-busy{animation:busyPulse 1s ease infinite}
@keyframes busyPulse{0%,100%{opacity:1}50%{opacity:.72}}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;background:linear-gradient(180deg,rgba(11,9,6,.97),rgba(11,9,6,.88));backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:11px}
.brand-f{width:44px;height:44px;border-radius:13px;box-shadow:0 0 0 1px var(--line)}
.brand-name{display:block;font-size:24px;font-weight:800;line-height:1}
.brand-tag{display:block;font-size:8.5px;letter-spacing:2.6px;color:var(--muted);margin-top:3px}
.topbar-actions{display:flex;gap:10px;align-items:center}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:#1E1811;color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center}
.icon-btn.sm{width:32px;height:32px;font-size:15px}
.bell-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.avatar-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(140deg,#3A2A0E,#6B4A12);color:#FFE9AE;font-weight:800;font-size:17px;overflow:hidden}
.avatar-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

/* ---------- Layout ---------- */
.main{padding:6px 16px 110px}
.tab{display:none}
.tab.active{display:block}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:8px 2px 14px}
.page-head h1{font-size:28px;margin:0}
.page-head p{color:var(--muted);font-size:14px;margin:6px 0 0;line-height:1.4}
.card{background:linear-gradient(160deg,#211A0F,#15100A);border:1px solid var(--line2);border-radius:var(--radius);padding:16px;margin:14px 0;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h2{font-size:17px;margin:0}
.banner{background:#2A1E08;border:1px solid var(--gold);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5;margin:8px 0 14px;color:#FFE9AE}
.banner button{margin-top:8px}

/* ---------- Hero gold card ---------- */
.hero-card{position:relative;overflow:hidden;border-radius:26px;padding:20px;margin:10px 0 16px;background:linear-gradient(115deg,#241A05 0%,#5A3E0C 38%,#C9922E 62%,#F7D789 100%);border:1px solid rgba(255,215,120,.55);box-shadow:0 16px 40px rgba(233,182,79,.22)}
.hero-card.small{padding:18px}
.hero-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#FFE9AE}
.hero-amount{font-size:38px;font-weight:800;margin:8px 0 4px;letter-spacing:.2px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-sub{font-size:13px;color:rgba(255,233,174,.85)}
.hero-wave{position:absolute;right:-30px;bottom:-55px;width:280px;height:180px;background:radial-gradient(closest-side,rgba(255,255,255,.38),rgba(255,255,255,0));border-radius:50%;pointer-events:none}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 42%);pointer-events:none}

/* ---------- Quick actions ---------- */
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 6px}
.qa{background:linear-gradient(160deg,#211A0F,#15100A);border:1px solid var(--line2);border-radius:18px;color:var(--text);padding:14px 6px 12px;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px}
.qa-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:#2A2113;border:1px solid var(--line2)}
.qa-ic.gold{background:linear-gradient(140deg,#FFD97A,#E9B64F);color:#241A05;border-color:transparent;box-shadow:0 6px 18px rgba(233,182,79,.35)}

/* ---------- Donut + categories ---------- */
.donut-row{display:flex;gap:16px;align-items:center}
.donut-wrap{position:relative;flex:0 0 118px;width:118px;height:118px}
.donut-wrap.big{flex-basis:140px;width:140px;height:140px}
.donut-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-center span{font-size:20px;font-weight:800}
.donut-center small{font-size:11px;color:var(--muted)}
.cat-list{flex:1;min-width:0}
.cat-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px}
.cat-row .c-ic{font-size:16px;width:22px;text-align:center}
.cat-row .c-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-row .c-amt{font-weight:600}
.cat-row .c-pct{color:var(--muted);width:40px;text-align:right}
.month-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line2);margin-top:12px;padding-top:12px;font-size:15px}
.month-total strong{font-size:17px}
.empty{color:var(--muted);font-size:14px;text-align:center;padding:18px 6px;line-height:1.5}

/* ---------- Transactions ---------- */
.tx-list{display:flex;flex-direction:column}
.tx-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid rgba(245,200,107,.10);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:var(--text)}
.tx-row:last-child{border-bottom:0}
.tx-av{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;background:#2A2113;border:1px solid var(--line2);overflow:hidden}
.tx-av img{width:100%;height:100%;object-fit:cover}
.tx-main{flex:1;min-width:0}
.tx-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.tx-amt{font-size:15px;font-weight:700;white-space:nowrap}
.tx-amt.in{color:var(--green)}
.tx-day{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin:16px 2px 4px}
.tx-day strong{color:var(--text);letter-spacing:0}
.search-box{display:flex;align-items:center;gap:8px;background:#1A140D;border:1px solid var(--line2);border-radius:14px;padding:2px 12px;margin:2px 0 12px}
.search-box input{border:0;background:transparent;padding:11px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{background:#1A140D;border:1px solid var(--line2);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13.5px}
.chip.active{background:linear-gradient(120deg,#F7D789,#E9B64F);color:#241A05;border-color:transparent;font-weight:700}
.chip.select{padding-right:8px}
.select{width:auto;min-width:120px;background:#1A140D;border:1px solid var(--line2);border-radius:12px;padding:9px 10px;font-size:14px}

/* ---------- Accounts ---------- */
.acct-list{display:flex;flex-direction:column;gap:10px}
.acct-row{display:flex;align-items:center;gap:12px;background:#1E1811;border:1px solid var(--line2);border-radius:16px;padding:13px 14px;width:100%;text-align:left;color:var(--text)}
.acct-row .tx-av{width:44px;height:44px;flex-basis:44px}
.acct-bal{font-size:16px;font-weight:700}
.acct-type{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- Análisis ---------- */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:10px 4px 0;border-bottom:1px solid var(--line2)}
.bar-group{flex:1;display:flex;gap:4px;align-items:flex-end;justify-content:center;height:100%}
.bar{flex:1;max-width:26px;border-radius:7px 7px 0 0;min-height:3px}
.bar.inc{background:linear-gradient(180deg,#FFD97A,#C9922E)}
.bar.exp{background:linear-gradient(180deg,#8A8171,#4A4234)}
.bar-lab{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.bars-legend{display:flex;gap:18px;justify-content:center;margin-top:12px;font-size:13px;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.dot.gold{background:var(--gold)}
.dot.gray{background:#8A8171}
.trend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.trend-card{background:linear-gradient(160deg,#211A0F,#15100A);border:1px solid var(--line2);border-radius:18px;padding:13px 10px;display:flex;flex-direction:column;gap:5px}
.trend-card .trend-ic{font-size:19px}
.trend-card span{font-size:12.5px;color:var(--muted)}
.trend-card strong{font-size:16px}
.trend-card small{font-size:11.5px;color:var(--muted)}
.trend-card small.up{color:var(--green)}
.trend-card small.down{color:var(--red)}
.insights{display:flex;flex-direction:column;gap:10px}
.insight{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(120deg,#3A2A0E,#221A0E);border:1px solid var(--line);border-radius:16px;padding:13px}
.insight .in-ic{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:linear-gradient(140deg,#FFD97A,#C9922E);display:flex;align-items:center;justify-content:center;font-size:20px;color:#241A05}
.insight p{margin:0;font-size:14px;line-height:1.5}
.insight small{color:var(--muted);font-size:12.5px}

/* ---------- Perfil ---------- */
.profile-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0 8px}
.avatar-big{width:78px;height:78px;border-radius:50%;background:linear-gradient(140deg,#3A2A0E,#6B4A12);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#FFE9AE}
.profile-sub{color:var(--muted);font-size:13px}
.cat-manage{display:flex;flex-direction:column;gap:8px}
.cat-man-row{display:flex;align-items:center;gap:10px;background:#1E1811;border:1px solid var(--line2);border-radius:12px;padding:10px 12px}
.cat-man-row .c-ic{font-size:18px}
.cat-man-row span{flex:1}
.mini-btn{background:#2A2113;border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:6px 11px;font-size:13px}
.btn-danger{background:#3A1210;border:1px solid #E4574B;color:#FFB4AB;border-radius:12px;padding:12px;width:100%;font-size:15px;font-weight:600}
.btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--text);border-radius:12px;padding:12px;width:100%;font-size:15px;margin-top:10px}
.danger-zone{display:flex;flex-direction:column}

/* ---------- Bottom nav + FAB ---------- */
.bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(20,15,8,.97);border-top:1px solid var(--line2);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:30;backdrop-filter:blur(10px)}
.nav-btn{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;padding:4px 0}
.nav-btn.active{color:var(--gold)}
.nav-btn.active .nav-ic{color:var(--gold);text-shadow:0 0 14px rgba(245,200,107,.7)}
.nav-ic{font-size:21px;line-height:1}
.fab{position:fixed;right:calc(50% - 250px);bottom:92px;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(140deg,#FFD97A,#C9922E);color:#241A05;font-size:30px;font-weight:300;line-height:1;box-shadow:0 10px 26px rgba(233,182,79,.45);z-index:31}
@media (max-width:560px){.fab{right:18px}}

/* ---------- Modal / toast ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal{background:#191310;border:1px solid var(--line);border-top-left-radius:24px;border-top-right-radius:24px;width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
.modal h3{margin:0 0 4px;font-size:20px}
.modal .m-sub{color:var(--muted);font-size:13.5px;margin-bottom:6px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn-gold{margin-top:0}
.modal-actions .btn-ghost{margin-top:0}
.seg{display:flex;background:#241D12;border-radius:12px;padding:3px;margin:6px 0}
.seg button{flex:1;background:transparent;border:0;color:var(--muted);padding:9px;border-radius:9px;font-weight:600}
.seg button.on{background:linear-gradient(120deg,#F7D789,#E9B64F);color:#241A05}
.photo-box{border:1px dashed var(--line);border-radius:14px;padding:12px;text-align:center;margin-top:10px}
.photo-box img{max-width:100%;max-height:220px;border-radius:10px;display:block;margin:0 auto 10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;background:#241D12;border:1px solid var(--gold);color:var(--text);padding:12px 18px;border-radius:12px;z-index:60;font-size:14px;max-width:90%;text-align:center;box-shadow:var(--shadow)}
.dup-warn{background:#3A1A08;border:1px solid var(--gold);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;margin-top:10px}
.dup-warn strong{color:#FFE9AE}