@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --cream:#FAF7F1; --cream-soft:#F3EEE3; --surface:#FFFFFF;
  --navy-900:#12213F; --navy-700:#1E3563; --navy-500:#3A5487;
  --gold-500:#BF8A2E; --gold-600:#A5741F; --gold-100:#F8EEDA;
  --border:#E7E1D3; --border-soft:#EFEAE0;
  --text-primary:#1B2135; --text-secondary:#6B6558; --text-muted:#9C9587;
  --green-500:#1E9E63; --green-100:#E1F5EA;
  --yellow-500:#C1860F; --yellow-100:#FBF0D3;
  --red-500:#C33B4C; --red-100:#FBE2E6;
  --radius-sm:9px; --radius-md:14px; --radius-lg:22px;
  --shadow-card:0 1px 2px rgba(27,33,53,.03), 0 8px 20px rgba(27,33,53,.05);
  --shadow-pop:0 14px 34px rgba(27,33,53,.12);
  --font-display:'Fraunces', serif; --font-ui:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:var(--font-ui); background:var(--cream); color:var(--text-primary); -webkit-font-smoothing:antialiased;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
a{text-decoration:none; color:inherit;}

/* alerts */
.alert{padding:11px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:14px;}
.alert-success{background:var(--green-100); color:var(--green-500);}
.alert-error{background:var(--red-100); color:var(--red-500);}
.alert-warning{background:var(--yellow-100); color:#8a5f04;}

/* ============ LOGIN ============ */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:
  radial-gradient(900px 500px at 15% -10%, #FFF9EC 0%, transparent 60%),
  radial-gradient(700px 400px at 100% 100%, #EFF2F8 0%, transparent 55%), var(--cream);}
.login-card{width:100%; max-width:400px; background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-pop); padding:38px 34px 30px;}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:26px;}
.login-brand .mark{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:16px;}
.login-brand .name{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--navy-900);}
.login-brand .name span{display:block; font-family:var(--font-ui); font-size:9px; letter-spacing:2.5px; color:var(--gold-600); font-weight:700; margin-top:2px;}
.login-card h1{font-family:var(--font-display); font-size:22px; font-weight:600; margin-bottom:4px;}
.login-card p.sub{font-size:13px; color:var(--text-secondary); margin-bottom:22px;}
.field-group{margin-bottom:14px;}
.field-group label{font-size:12.5px; font-weight:600; color:var(--text-secondary); display:block; margin-bottom:6px;}
.field-group input{width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; font-family:inherit; background:var(--cream); color:var(--text-primary);}
.field-group input:focus{outline:none; border-color:var(--gold-500); background:var(--surface);}
.security-note{display:flex; gap:8px; align-items:flex-start; background:var(--cream-soft); border-radius:10px; padding:11px 12px; margin:18px 0; font-size:11.5px; color:var(--text-secondary); line-height:1.5;}
.security-note svg{flex-shrink:0; margin-top:1px; color:var(--gold-600);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; border-radius:11px; transition:transform .1s, background .15s, border-color .15s;}
.btn:active{transform:scale(.98);}
.btn-navy{background:var(--navy-900); color:#fff;}
.btn-navy:hover{background:var(--navy-700);}
.btn-gold{background:var(--gold-500); color:#fff;}
.btn-gold:hover{background:var(--gold-600);}
.btn-ghost{background:var(--surface); color:var(--navy-900); border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--navy-500);}
.btn-sm{padding:9px 15px; font-size:12.5px;}
.btn-md{padding:12px 18px; font-size:13.5px;}
.btn-lg{padding:16px 22px; font-size:15.5px; border-radius:14px;}
.login-card .btn{width:100%; margin-top:4px;}
.login-foot{text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:16px;}

/* ============ ADMIN SHELL ============ */
.app{display:flex; min-height:100vh;}
.railnav{width:232px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:26px 16px; position:sticky; top:0; height:100vh;}
.railnav .brand{display:flex; align-items:center; gap:10px; padding:2px 6px 26px;}
.railnav .brand .mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:14px;}
.railnav .brand .name{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--navy-900);}
.railnav .brand .name span{display:block; font-family:var(--font-ui); font-size:8.5px; letter-spacing:2px; color:var(--gold-600); font-weight:700; margin-top:2px;}
.railnav nav{display:flex; flex-direction:column; gap:2px; flex:1;}
.railnav .navitem{display:flex; align-items:center; gap:11px; padding:10.5px 12px; border-radius:10px; color:var(--text-secondary); font-size:13.5px; font-weight:600; text-align:left; width:100%; transition:background .15s,color .15s; position:relative;}
.railnav .navitem svg{flex-shrink:0;}
.railnav .navitem:hover{background:var(--cream-soft);}
.railnav .navitem.active{background:var(--gold-100); color:var(--navy-900);}
.railnav .navitem.active svg{color:var(--gold-600);}
.railnav .navitem .pill{margin-left:auto; background:var(--red-500); color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:100px;}
.rail-divider{height:1px; background:var(--border); margin:14px 4px;}
.railnav .user{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:10px;}
.railnav .user .avatar{width:32px; height:32px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
.railnav .user .who{font-size:12px; color:var(--text-secondary); line-height:1.3;}
.railnav .user .who b{display:block; color:var(--navy-900); font-size:13px;}
.railnav .logout{font-size:11.5px; color:var(--text-muted); margin-top:8px; padding:0 8px; display:flex; align-items:center; gap:6px;}
.railnav .logout:hover{color:var(--red-500);}

.main{flex:1; min-width:0;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:26px 40px 0;}
.topbar .titles h1{font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-.2px; color:var(--navy-900);}
.topbar .titles p{font-size:13.5px; color:var(--text-secondary); margin-top:3px;}
.topbar .today{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); padding:9px 15px; border-radius:100px; font-size:13px; color:var(--navy-700); font-weight:500; box-shadow:var(--shadow-card);}
.content{padding:22px 40px 60px;}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.kpi{background:var(--surface); border-radius:var(--radius-md); padding:19px 20px; box-shadow:var(--shadow-card); border:1px solid var(--border-soft);}
.kpi .label{font-size:11.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px;}
.kpi .value{font-family:var(--font-mono); font-size:25px; font-weight:600; margin-top:9px; color:var(--navy-900);}
.kpi .sub{font-size:12px; color:var(--text-secondary); margin-top:4px;}
.kpi.green .value{color:var(--green-500);}
.kpi.alert{border-color:var(--red-500); background:var(--red-100);}
.kpi.alert .value{color:var(--red-500);}
.kpi.alert .label{color:var(--red-500);}

.timeline-card{background:var(--navy-900); border-radius:var(--radius-lg); padding:24px 26px 20px; margin-bottom:22px; position:relative; overflow:hidden;}
.timeline-card::after{content:""; position:absolute; inset:0; background:radial-gradient(600px 200px at 85% -10%, rgba(191,138,46,.22), transparent 70%); pointer-events:none;}
.timeline-card h3{color:#fff; font-family:var(--font-display); font-size:16.5px; font-weight:600; display:flex; align-items:center; gap:9px;}
.timeline-card h3 .dot{width:7px; height:7px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 4px rgba(191,138,46,.28);}
.timeline-track{position:relative; margin-top:24px; height:60px;}
.timeline-line{position:absolute; top:26px; left:0; right:0; height:2px; background:rgba(255,255,255,.14);}
.timeline-stop{position:absolute; top:20px; transform:translateX(-50%); text-align:center; cursor:pointer;}
.timeline-stop .node{width:11px; height:11px; border-radius:50%; border:2px solid var(--navy-900);}
.timeline-stop.pendiente .node{background:var(--yellow-500);}
.timeline-stop.pagado .node{background:var(--green-500);}
.timeline-stop.revision .node{background:var(--gold-500);}
.timeline-stop .t{font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,.7); margin-top:8px; white-space:nowrap;}
.timeline-stop .g{font-size:9.5px; color:rgba(255,255,255,.45); margin-top:1px; white-space:nowrap;}

.analytics-card{background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border-soft); box-shadow:var(--shadow-card); padding:22px 24px; margin-bottom:22px;}
.analytics-card .ah{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.analytics-card h3{font-family:var(--font-display); font-size:16.5px; font-weight:600;}
.analytics-card .period{font-size:11.5px; color:var(--text-muted); font-weight:600;}
.analytics-card p.desc{font-size:12.5px; color:var(--text-secondary); margin-bottom:18px;}
.occ-chart{display:flex; align-items:flex-end; gap:12px; height:120px; padding:0 4px;}
.occ-bar-col{flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:8px;}
.occ-bar{width:100%; max-width:34px; border-radius:7px 7px 3px 3px; background:var(--navy-500);}
.occ-bar.low{background:var(--gold-500);}
.occ-pct{font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--text-secondary);}
.occ-day{font-size:11px; font-weight:700; color:var(--text-muted); margin-top:2px;}
.insight-box{display:flex; gap:10px; align-items:flex-start; background:var(--gold-100); border-radius:11px; padding:13px 15px; margin-top:18px;}
.insight-box svg{flex-shrink:0; color:var(--gold-600); margin-top:1px;}
.insight-box p{font-size:12.5px; color:var(--navy-900); line-height:1.5;}
.insight-box b{color:var(--gold-600);}

.panels{display:grid; grid-template-columns:1.3fr 1fr; gap:18px;}
.panel{background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border-soft); box-shadow:var(--shadow-card);}
.panel .panel-head{display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--border-soft);}
.panel .panel-head h3{font-family:var(--font-display); font-size:16px; font-weight:600;}
.panel .panel-head a{font-size:12px; color:var(--navy-700); font-weight:700;}
.panel .panel-body{padding:8px 10px 12px;}
.arrival-row{display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:11px; cursor:pointer; transition:background .15s;}
.arrival-row:hover{background:var(--cream-soft);}
.arrival-row .initials{width:36px; height:36px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}
.arrival-row .info{flex:1; min-width:0;}
.arrival-row .info .name{font-size:13.5px; font-weight:600;}
.arrival-row .info .meta{font-size:11.5px; color:var(--text-muted); margin-top:1px;}
.reserva-row{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px; cursor:pointer;}
.reserva-row:hover{background:var(--cream-soft);}
.reserva-row .room{width:36px; height:36px; border-radius:10px; background:var(--gold-100); color:var(--gold-600); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800;}
.reserva-row .info .name{font-size:12.5px; font-weight:600;}
.reserva-row .info .meta{font-size:11px; color:var(--text-muted); margin-top:1px;}

.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:100px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge .d{width:6px; height:6px; border-radius:50%;}
.badge.pagado{background:var(--green-100); color:var(--green-500);}
.badge.pagado .d{background:var(--green-500);}
.badge.pendiente{background:var(--yellow-100); color:var(--yellow-500);}
.badge.pendiente .d{background:var(--yellow-500);}
.badge.revision{background:var(--gold-100); color:var(--gold-600);}
.badge.revision .d{background:var(--gold-500);}
.badge.cancelado{background:var(--cream-soft); color:var(--text-secondary);}
.badge.cancelado .d{background:var(--text-muted);}

.cal-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.cal-toolbar .month{font-family:var(--font-display); font-size:19px; font-weight:600;}
.cal-toolbar .nav{display:flex; gap:6px;}
.cal-toolbar .nav button{width:32px; height:32px; border-radius:9px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--navy-900);}
.cal-toolbar .nav button:disabled{opacity:.3; cursor:not-allowed;}
.legend{display:flex; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
.legend .item{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-secondary); font-weight:500;}
.legend .d{width:8px; height:8px; border-radius:50%;}
.cal-grid{background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--border-soft); box-shadow:var(--shadow-card); overflow:hidden;}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--border-soft);}
.cal-dow div{padding:11px; font-size:11px; font-weight:700; color:var(--text-muted); text-align:center; text-transform:uppercase; letter-spacing:.5px;}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-cell{min-height:92px; border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:8px; position:relative;}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell .num{font-size:12px; font-weight:600; color:var(--text-muted);}
.cal-cell.muted .num{color:var(--border);}
.cal-cell.today .num{background:var(--navy-900); color:#fff; width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center;}
.cal-chip{margin-top:5px; font-size:10px; padding:3px 7px; border-radius:6px; font-weight:600; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cal-chip.pagado{background:var(--green-100); color:var(--green-500);}
.cal-chip.revision{background:var(--gold-100); color:var(--gold-600);}
.cal-chip.pendiente{background:var(--yellow-100); color:#8a5f04;}
.cal-chip.cancelado{background:var(--cream-soft); color:var(--text-secondary);}
.cal-scope-note{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); background:var(--cream-soft); padding:10px 14px; border-radius:10px; margin-bottom:16px;}
.cal-scope-note svg{color:var(--gold-600); flex-shrink:0;}

.back-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary); font-weight:600; margin-bottom:16px;}
.back-link:hover{color:var(--navy-900);}
.detail-grid{display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start;}
.detail-main{background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border-soft); box-shadow:var(--shadow-card); padding:26px;}
.detail-guest{display:flex; align-items:center; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border-soft); margin-bottom:20px;}
.detail-guest .initials{width:54px; height:54px; border-radius:16px; background:var(--navy-900); color:#fff; font-family:var(--font-display); font-size:18px; font-weight:600; display:flex; align-items:center; justify-content:center;}
.detail-guest h2{font-family:var(--font-display); font-size:21px; font-weight:600;}
.detail-guest .sub{font-size:12.5px; color:var(--text-muted); margin-top:3px;}
.detail-fields{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field .k{font-size:11px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px;}
.field .v{font-size:14.5px; font-weight:600; margin-top:6px; color:var(--navy-900);}
.side-card{background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border-soft); box-shadow:var(--shadow-card); padding:22px;}
.side-card .amount-label{font-size:11.5px; color:var(--text-muted); font-weight:600;}
.side-card .amount{font-family:var(--font-mono); font-size:32px; font-weight:700; color:var(--navy-900); margin:8px 0 14px;}
.side-card .btn{width:100%; margin-top:8px;}
.proof-thumb{width:100%; border-radius:12px; border:1px solid var(--border); margin:10px 0 16px; display:flex; align-items:center; justify-content:center; background:var(--cream-soft); height:170px; overflow:hidden;}
.proof-thumb:hover .proof-zoom-hint{background:rgba(18,33,63,.28) !important;}
.proof-thumb:hover .proof-zoom-hint span{opacity:1 !important;}
.verify-meta{font-size:11.5px; color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:2px;}
.mail-note{display:flex; gap:9px; align-items:flex-start; background:var(--gold-100); border-radius:12px; padding:13px 14px; margin-top:6px; text-align:left;}
.mail-note svg{flex-shrink:0; color:var(--gold-600); margin-top:1px;}
.mail-note p{font-size:12px; color:var(--navy-900); line-height:1.5;}

/* ============ CONSERJE (mobile-first) ============ */
.conserje-body{max-width:480px; margin:0 auto; min-height:100vh; background:var(--cream); padding-bottom:88px; position:relative;}
.cj-topbar{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 6px;}
.cj-brand{display:flex; align-items:center; gap:9px;}
.cj-brand .mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:13px;}
.cj-brand span{font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--navy-900);}
.session-chip{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:6px 10px; border-radius:100px;}
.session-chip svg{color:var(--gold-600);}
.cj-head{padding:16px 20px 6px;}
.cj-head h1{font-family:var(--font-display); font-size:23px; font-weight:600;}
.cj-head p{font-size:12.5px; color:var(--text-secondary); margin-top:4px;}
.cj-list{padding:14px 16px 10px; display:flex; flex-direction:column; gap:12px;}
.cj-card{background:var(--surface); border-radius:20px; padding:18px; box-shadow:var(--shadow-card); border:1px solid var(--border-soft); display:flex; align-items:center; gap:14px; cursor:pointer;}
.cj-card.done{opacity:.55; cursor:default;}
.cj-card .initials{width:48px; height:48px; border-radius:14px; background:var(--navy-900); color:#fff; font-family:var(--font-display); font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cj-card .info{flex:1; min-width:0;}
.cj-card .info .name{font-family:var(--font-display); font-size:15.5px; font-weight:600;}
.cj-card .info .room{font-size:12.5px; color:var(--text-secondary); margin-top:2px;}
.cj-card .info .time{font-size:11.5px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:5px;}
.cj-card .go{width:38px; height:38px; border-radius:11px; background:var(--gold-100); color:var(--gold-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cj-card.done .go{background:var(--green-100); color:var(--green-500);}

.bottom-tabs{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--surface); border-top:1px solid var(--border); display:flex; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); gap:4px; z-index:40;}
.bottom-tabs a{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px; border-radius:12px; color:var(--text-muted); font-size:10.5px; font-weight:700;}
.bottom-tabs a.active{color:var(--navy-900); background:var(--gold-100);}
.bottom-tabs a.active svg{color:var(--gold-600);}

.no-money-note{display:flex; gap:8px; align-items:flex-start; margin:0 16px 6px; background:var(--cream-soft); border-radius:11px; padding:10px 12px; font-size:11px; color:var(--text-secondary); line-height:1.45;}
.no-money-note svg{flex-shrink:0; color:var(--gold-600); margin-top:1px;}

.cj-pay-summary{margin:14px 16px 6px; background:var(--surface); border-radius:18px; padding:18px; box-shadow:var(--shadow-card); border:1px solid var(--border-soft); display:flex; align-items:center; gap:14px;}
.cj-pay-summary .initials{width:46px; height:46px; border-radius:14px; background:var(--navy-900); color:#fff; font-family:var(--font-display); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center;}
.cj-pay-summary .name{font-weight:700; font-size:14px;}
.cj-pay-summary .meta{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.cj-section-label{padding:16px 20px 10px; font-size:11.5px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;}
.pay-methods-mobile{padding:0 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pay-method{border:2px solid var(--border); border-radius:16px; padding:16px 10px; text-align:center; background:var(--surface);}
.pay-method.selected{border-color:var(--gold-500); background:var(--gold-100);}
.pay-method .ic{width:36px; height:36px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; background:var(--navy-900); border-radius:10px; color:#fff;}
.pay-method.selected .ic{background:var(--gold-500);}
.pay-method .lbl{font-size:12.5px; font-weight:700;}

.capture-zone{margin:16px;}
.capture-btn{width:100%; border:2px dashed var(--border); border-radius:16px; padding:26px 16px; text-align:center; background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer;}
.capture-btn .ic{width:52px; height:52px; border-radius:50%; background:var(--gold-100); color:var(--gold-600); display:flex; align-items:center; justify-content:center;}
.capture-btn .lbl{font-size:13.5px; font-weight:700; color:var(--navy-900);}
.capture-btn .sub{font-size:11.5px; color:var(--text-muted);}
.capture-preview{width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--border); position:relative;}
.capture-preview img{width:100%; display:block; max-height:220px; object-fit:cover;}
.capture-preview .retake{position:absolute; top:10px; right:10px; background:rgba(18,33,63,.85); color:#fff; font-size:11px; font-weight:700; padding:6px 11px; border-radius:100px; display:flex; align-items:center; gap:5px; cursor:pointer;}
.cj-submit-bar{padding:18px 16px 6px;}

.confirm-wrap{max-width:480px; margin:0 auto; min-height:100vh; display:flex; align-items:center; padding:24px;}
.confirm-card{width:100%; background:var(--surface); border-radius:24px; padding:38px 28px 30px; box-shadow:var(--shadow-pop); text-align:center; border:1px solid var(--border-soft);}
.confirm-icon{width:68px; height:68px; border-radius:50%; background:var(--gold-100); display:flex; align-items:center; justify-content:center; margin:0 auto 20px;}
.confirm-card h2{font-family:var(--font-display); font-size:20px; font-weight:600;}
.confirm-card p.sub{color:var(--text-secondary); font-size:13px; margin-top:8px; line-height:1.5;}
.confirm-steps{text-align:left; margin:24px 0; display:flex; flex-direction:column; gap:10px;}
.confirm-steps .row{display:flex; align-items:center; gap:11px; padding:11px 13px; background:var(--cream-soft); border-radius:11px; font-size:12.5px; font-weight:600;}
.confirm-steps .row svg{flex-shrink:0; color:var(--green-500);}

@media (max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .panels{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .railnav{display:none;}
}