:root{
  --forest:#0f3d2e;--forest-2:#185541;--forest-3:#237359;--lime:#b9ef74;--lime-2:#dfffb7;
  --mint:#e8f7ef;--cream:#f7f5ec;--paper:#ffffff;--ink:#18312a;--muted:#65756f;
  --line:#dce7e1;--amber:#f4bd50;--violet:#7257d4;--red:#d85c5c;--blue:#3d80d9;
  --shadow:0 24px 80px rgba(5,33,24,.22);--r-xl:26px;--r-lg:18px;--r-md:12px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}

button,select,input{font:inherit}
button{cursor:pointer}
.studio-bar{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#0a241c;color:white;border-bottom:1px solid rgba(255,255,255,.1);position:fixed;inset:0 0 auto;z-index:20}
.studio-brand{display:flex;gap:12px;align-items:center}
.studio-brand div{display:grid;gap:2px}
.studio-brand strong{font-size:15px}
.studio-brand span{font-size:12px;color:#a9c4b8}
.mini-logo{width:36px;height:36px;border-radius:12px;background:var(--lime);display:grid;place-items:center;color:var(--forest);font-weight:900;font-size:20px}
.studio-controls{display:flex;align-items:center;gap:10px}
.select-wrap{height:50px;min-width:220px;padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;display:grid;gap:1px;background:rgba(255,255,255,.06)}
.select-wrap span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9fb9ae}
.select-wrap select{background:transparent;border:0;color:white;outline:0;font-size:14px}
.select-wrap option{color:#142920}
.control-button{height:46px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:white;padding:0 16px}
.control-button:hover{background:rgba(255,255,255,.15)}
.control-button.primary{background:var(--lime);color:var(--forest);border-color:var(--lime);font-weight:800}
.control-button.icon-only{width:46px;padding:0;font-size:20px}
.studio-stage{min-height:100vh;background:radial-gradient(circle at 20% 20%,#21483a 0,transparent 28%),#091d17;padding:112px 24px 48px;display:grid;place-items:start center}
.screen-meta{width:min(1366px,calc(100vw - 48px));display:flex;gap:10px;margin-bottom:12px;color:#b8cbc3;font-size:12px}
.screen-meta span{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.05)}

.viewport{background:var(--cream);overflow:hidden;box-shadow:var(--shadow);transition:width .25s,height .25s,border-radius .25s;position:relative}
.viewport.desktop{width:min(1366px,calc(100vw - 48px));aspect-ratio:16/9;border-radius:20px}
.viewport.phone{width:390px;height:844px;border-radius:38px;border:8px solid #1b2824;box-shadow:0 30px 100px rgba(0,0,0,.42)}

.app{width:100%;height:100%;display:flex;background:var(--cream);overflow:hidden}
.app-sidebar{width:224px;background:var(--forest);color:white;padding:24px 16px;display:flex;flex-direction:column;gap:20px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px}
.brand-mark{width:40px;height:40px;border-radius:14px;background:var(--lime);display:grid;place-items:center;color:var(--forest);font-weight:950;font-size:22px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.2)}
.brand-name{font-weight:900;letter-spacing:-.03em;font-size:16px;line-height:1.05}
.brand-name small{display:block;color:var(--lime);font-size:9px;letter-spacing:.13em;margin-top:4px}
.nav-group{display:grid;gap:5px}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#86aa9b;padding:2px 11px 7px}
.nav-item{display:flex;align-items:center;gap:11px;border:0;border-radius:12px;background:transparent;color:#d6e6df;padding:10px 12px;text-align:left;font-size:13px;width:100%}
.nav-item svg{width:17px;height:17px}
.nav-item.active,.nav-item:hover{background:rgba(255,255,255,.11);color:white}
.nav-item.active{box-shadow:inset 3px 0 var(--lime)}
.sidebar-profile{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,.1)}
.avatar{width:38px;height:38px;border-radius:13px;background:var(--lime-2);color:var(--forest);display:grid;place-items:center;font-weight:900}
.profile-copy strong{display:block;font-size:12px}
.profile-copy span{font-size:10px;color:#96b5a9}
.app-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--cream);position:relative}
.app-main>.page{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.topbar{height:72px;flex:0 0 72px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:relative;z-index:4}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--forest-3);font-weight:800}
.topbar-title{font-size:17px;font-weight:850;letter-spacing:-.02em;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:9px}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);display:grid;place-items:center;position:relative}
.icon-btn svg{width:17px}
.notif-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#e65353;right:8px;top:7px;border:2px solid white}
.page{padding:26px 30px 34px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head h1,.hero-copy h1{font-size:28px;line-height:1.08;margin:4px 0 7px;letter-spacing:-.045em}
.page-head p,.hero-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.button{border:0;border-radius:12px;padding:11px 16px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.button svg{width:16px;height:16px}
.button.primary{background:var(--forest);color:white}
.button.lime{background:var(--lime);color:var(--forest)}
.button.soft{background:var(--mint);color:var(--forest)}
.button.outline{background:white;border:1px solid var(--line);color:var(--ink)}
.button.danger{background:#ffe8e8;color:#a53333}
.button.full{width:100%}
.grid{display:grid;gap:16px}
.grid.metrics{grid-template-columns:repeat(4,1fr)}
.metric{background:white;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-height:112px;position:relative;overflow:hidden}
.metric .metric-icon{width:34px;height:34px;border-radius:11px;background:var(--mint);display:grid;place-items:center;color:var(--forest)}
.metric .metric-icon svg{width:17px}
.metric strong{display:block;font-size:24px;letter-spacing:-.04em;margin-top:13px}
.metric span{font-size:11px;color:var(--muted)}
.metric em{position:absolute;right:14px;top:15px;font-size:10px;font-style:normal;color:var(--forest-3);background:var(--lime-2);padding:5px 7px;border-radius:999px}
.content-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr);gap:18px;margin-top:18px}
.card{background:white;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-title-row h2{font-size:15px;margin:0}
.text-link{border:0;background:transparent;color:var(--forest-3);font-weight:800;font-size:11px}
.hero-card{background:linear-gradient(120deg,var(--forest) 0%,#1d664d 72%,#2e8263 100%);color:white;border-radius:24px;padding:25px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;position:relative;overflow:hidden}
.hero-card:after{content:"";width:190px;height:190px;border:45px solid rgba(185,239,116,.12);border-radius:50%;position:absolute;right:-40px;top:-70px}
.hero-copy p{color:#cce0d8;max-width:560px}
.hero-copy .button{margin-top:17px}
.points-orbit{width:126px;height:126px;flex:0 0 126px;border-radius:50%;display:grid;place-items:center;text-align:center;background:conic-gradient(var(--lime) 0 74%,rgba(255,255,255,.13) 74% 100%);position:relative;z-index:1}
.points-orbit:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--forest-2)}
.points-orbit div{position:relative;z-index:1}
.points-orbit strong{display:block;font-size:28px;letter-spacing:-.05em}
.points-orbit span{font-size:10px;color:#cfe2da}
.mission-list{display:grid;gap:10px}
.mission-row{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:11px;background:#fff;cursor:pointer}
.mission-row:hover{border-color:#addb89}
.mission-icon{width:46px;height:46px;border-radius:14px;background:var(--mint);display:grid;place-items:center;font-size:21px}
.mission-copy strong{font-size:12px;display:block}
.mission-copy span{font-size:10px;color:var(--muted)}
.points-pill{font-size:10px;font-weight:900;color:var(--forest);background:var(--lime-2);padding:6px 9px;border-radius:999px}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800}
.status-pill.pending{background:#fff3d6;color:#89600d}
.status-pill.approved{background:#dff7e9;color:#196340}
.status-pill.rejected{background:#ffe5e5;color:#a23a3a}
.status-pill.offline{background:#e7e6ff;color:#5145a4}
.status-pill.neutral{background:#edf2ef;color:#52615c}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.progress-row{margin-bottom:16px}
.progress-copy{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px}
.progress-bar{height:8px;background:#e9f0ec;border-radius:999px;overflow:hidden}
.progress-bar i{display:block;height:100%;background:var(--forest-3);border-radius:999px}
.streak-box{background:var(--cream);border-radius:15px;padding:14px;display:flex;align-items:center;gap:12px}
.streak-box .emoji{font-size:24px}
.streak-box strong{font-size:12px;display:block}
.streak-box span{font-size:10px;color:var(--muted)}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{border:1px solid var(--line);background:white;color:var(--muted);border-radius:999px;padding:8px 12px;font-size:11px;font-weight:750}
.chip.active{background:var(--forest);border-color:var(--forest);color:white}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mission-card{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .18s,border-color .18s}
.mission-card:hover{transform:translateY(-2px);border-color:#acd889}
.mission-cover{height:95px;background:linear-gradient(135deg,#d8f1dd,#eaf4cd);padding:15px;display:flex;align-items:flex-start;justify-content:space-between}
.mission-cover .big-emoji{font-size:35px}
.mission-cover .status-pill{background:rgba(255,255,255,.8)}
.mission-card-body{padding:15px}
.mission-card h3{font-size:14px;line-height:1.25;margin:0 0 8px}
.mission-meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:10px}
.mission-meta span{display:flex;align-items:center;gap:4px}
.mission-meta svg{width:12px}
.mission-card-footer{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.category-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--forest-3);font-weight:900}

.detail-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);gap:18px}
.detail-hero{background:linear-gradient(135deg,#0f3d2e,#27775a);min-height:180px;border-radius:22px;color:white;padding:28px;position:relative;overflow:hidden}
.detail-hero .big-emoji{position:absolute;right:30px;bottom:5px;font-size:90px;filter:saturate(.8);opacity:.7}
.detail-hero h1{font-size:29px;max-width:500px;margin:12px 0 10px;line-height:1.05}
.detail-hero p{color:#cce0d8;font-size:12px;max-width:500px}
.requirements{display:grid;gap:10px;margin-top:16px}
.requirement{display:flex;gap:11px;align-items:flex-start;padding:12px;border-radius:13px;background:#f8faf8}
.check{width:22px;height:22px;border-radius:8px;background:var(--lime-2);color:var(--forest);display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.requirement strong{font-size:11px;display:block}
.requirement span{font-size:10px;color:var(--muted)}
.mission-summary{position:sticky;top:92px}
.summary-points{text-align:center;background:var(--mint);border-radius:16px;padding:18px;margin-bottom:14px}
.summary-points strong{font-size:32px;display:block;letter-spacing:-.05em}
.summary-points span{font-size:11px;color:var(--muted)}
.fact-row{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:11px}
.fact-row span{color:var(--muted)}

.camera-page{height:100%;display:grid;grid-template-rows:auto 1fr auto;background:#071b15;color:white}
.camera-top{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(4,18,14,.88)}
.camera-top strong{font-size:14px}
.camera-view{position:relative;background:linear-gradient(145deg,#15392d,#0b211a 56%,#263b2d);display:grid;place-items:center;overflow:hidden}
.camera-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:33.33% 33.33%;opacity:.45}
.camera-object{width:210px;height:260px;border:2px dashed rgba(185,239,116,.7);border-radius:28px;display:grid;place-items:center;text-align:center;color:#d6eadf;position:relative}
.camera-object svg{width:70px;height:70px;color:var(--lime)}
.camera-object strong{display:block;font-size:14px;margin-top:10px}
.camera-object span{font-size:10px;color:#9eb9ad}
.camera-note{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:rgba(6,24,18,.78);border:1px solid rgba(255,255,255,.15);padding:8px 12px;border-radius:999px;font-size:10px;white-space:nowrap}
.camera-controls{height:112px;background:#06150f;display:flex;align-items:center;justify-content:center;gap:38px}
.capture-btn{width:66px;height:66px;border-radius:50%;border:5px solid white;background:var(--lime);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.camera-side-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:white;display:grid;place-items:center}
.no-gallery{font-size:9px;color:#90a69d;position:absolute;bottom:10px;left:0;right:0;text-align:center}
.preview-photo{min-height:330px;border-radius:20px;background:linear-gradient(145deg,#193f31,#274f3b 55%,#172c23);display:grid;place-items:center;position:relative;color:white;overflow:hidden}
.preview-photo .camera-object{border:0}
.photo-stamp{position:absolute;left:18px;bottom:18px;background:rgba(5,23,17,.8);border:1px solid rgba(255,255,255,.15);padding:9px 11px;border-radius:11px;font-size:9px;line-height:1.55}
.preview-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:14px}

.state-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative}
.state-card{text-align:center;padding:25px 18px;border:1px solid var(--line);background:white;border-radius:18px}
.state-icon{width:50px;height:50px;border-radius:16px;background:var(--mint);color:var(--forest);display:grid;place-items:center;margin:0 auto 13px}
.state-icon svg{width:23px}
.state-card strong{font-size:13px;display:block}
.state-card p{font-size:10px;color:var(--muted);line-height:1.5}
.offline-banner{margin-top:18px;background:#ebe9ff;color:#493f91;border:1px solid #d3cdfd;border-radius:16px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.offline-banner strong{font-size:12px}
.offline-banner span{font-size:10px;display:block;margin-top:3px}
.sync-pulse{display:flex;gap:5px}
.sync-pulse i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.2s infinite}
.sync-pulse i:nth-child(2){animation-delay:.2s}
.sync-pulse i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{opacity:.25}
50%{opacity:1}
}

.receipt{text-align:center;max-width:620px;margin:20px auto;background:white;border:1px solid var(--line);border-radius:26px;padding:30px}
.success-mark{width:68px;height:68px;border-radius:22px;background:var(--lime-2);color:var(--forest);display:grid;place-items:center;margin:0 auto 16px}
.success-mark svg{width:32px}
.receipt h1{font-size:25px;margin:0 0 8px}
.receipt>p{font-size:12px;color:var(--muted);margin:0 auto 20px;max-width:430px}
.receipt-ticket{background:var(--cream);border-radius:16px;padding:16px;text-align:left}
.ticket-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:11px;border-bottom:1px dashed #d5ded8}
.ticket-row:last-child{border:0}
.ticket-row span{color:var(--muted)}
.notice{margin-top:14px;padding:12px 14px;border-radius:13px;background:#fff3d7;color:#785913;font-size:10px;line-height:1.5;text-align:left}
.status-timeline{display:flex;justify-content:space-between;position:relative;margin:26px 6px 30px}
.status-timeline:before{content:"";height:3px;background:#dce7e1;position:absolute;top:17px;left:10%;right:10%}
.timeline-step{width:25%;position:relative;text-align:center;z-index:1}
.timeline-dot{width:36px;height:36px;border-radius:50%;background:#e8efeb;color:#798880;display:grid;place-items:center;margin:0 auto 8px;border:4px solid white}
.timeline-step.done .timeline-dot{background:var(--forest);color:white}
.timeline-step.current .timeline-dot{background:var(--amber);color:#694800}
.timeline-step strong{font-size:10px;display:block}
.timeline-step span{font-size:9px;color:var(--muted)}

.chart-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.bar-chart{height:180px;display:flex;align-items:flex-end;gap:14px;padding-top:20px;border-bottom:1px solid var(--line)}
.bar-col{flex:1;display:grid;justify-items:center;gap:7px;height:100%;align-content:end}
.bar-col i{display:block;width:65%;background:linear-gradient(var(--lime),var(--forest-3));border-radius:7px 7px 0 0;min-height:8px}
.bar-col span{font-size:9px;color:var(--muted)}
.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--forest-3) 0 38%,var(--lime) 38% 66%,var(--amber) 66% 84%,var(--violet) 84%);display:grid;place-items:center;margin:8px auto}
.donut:after{content:"62%";width:96px;height:96px;border-radius:50%;background:white;display:grid;place-items:center;font-size:22px;font-weight:900}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:9px;color:var(--muted)}
.legend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--forest-3);margin-right:6px}
.legend span:nth-child(2):before{background:var(--lime)}
.legend span:nth-child(3):before{background:var(--amber)}
.legend span:nth-child(4):before{background:var(--violet)}

.ledger{display:grid;gap:9px}
.ledger-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);border-radius:14px}
.ledger-row .mission-icon{width:42px;height:42px}
.ledger-row strong{font-size:11px;display:block}
.ledger-row span{font-size:9px;color:var(--muted)}
.ledger-points{font-size:12px!important;color:var(--forest)!important;font-weight:900}
.balance-card{background:var(--forest);color:white;min-height:150px;position:relative;overflow:hidden}
.balance-card h2{font-size:12px;color:#bdd3ca;font-weight:600}
.balance-card strong{font-size:36px;display:block;letter-spacing:-.05em}
.balance-card p{font-size:10px;color:#bdd3ca}
.balance-card:after{content:"✦";position:absolute;font-size:105px;color:rgba(185,239,116,.13);right:15px;top:5px}

.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:10px;border-bottom:1px solid var(--line)}
.table td{padding:11px 10px;border-bottom:1px solid #edf2ef;font-size:10px}
.table tr:last-child td{border:0}
.rank{font-weight:900;font-size:13px}
.person{display:flex;align-items:center;gap:9px}
.person .avatar{width:30px;height:30px;border-radius:9px;font-size:10px}
.tabbar{display:flex;gap:5px;background:#ecf1ee;padding:4px;border-radius:12px;width:max-content;margin-bottom:16px}
.tab{border:0;background:transparent;padding:8px 14px;border-radius:9px;font-size:10px;font-weight:800;color:var(--muted)}
.tab.active{background:white;color:var(--ink);box-shadow:0 2px 8px rgba(20,50,40,.08)}

.badge-grid,.reward-grid,.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.badge-card{text-align:center;background:white;border:1px solid var(--line);border-radius:18px;padding:18px}
.badge-medal{width:64px;height:64px;border-radius:22px;background:var(--mint);display:grid;place-items:center;margin:0 auto 11px;font-size:29px}
.badge-card.locked{filter:grayscale(1);opacity:.55}
.badge-card h3{font-size:12px;margin:0 0 5px}
.badge-card p{font-size:9px;color:var(--muted);line-height:1.4;margin:0}
.activity-card,.reward-card{background:white;border:1px solid var(--line);border-radius:18px;padding:17px}
.activity-date{width:50px;border-radius:13px;background:var(--forest);color:white;text-align:center;padding:8px 5px;float:left;margin-right:12px}
.activity-date strong{display:block;font-size:17px}
.activity-date span{font-size:8px;text-transform:uppercase}
.activity-card h3,.reward-card h3{font-size:12px;margin:3px 0 6px}
.activity-card p,.reward-card p{font-size:9px;color:var(--muted);line-height:1.5}
.activity-card .button,.reward-card .button{margin-top:10px}
.reward-art{height:78px;border-radius:14px;background:linear-gradient(135deg,#e0f3e6,#eff5cd);display:grid;place-items:center;font-size:34px;margin-bottom:12px}
.reward-footer{display:flex;justify-content:space-between;align-items:center}
.reward-footer strong{font-size:12px}
.reward-footer span{font-size:9px;color:var(--muted)}

.profile-hero{background:var(--forest);border-radius:24px;color:white;padding:25px;display:flex;align-items:center;gap:18px}
.profile-hero .avatar{width:76px;height:76px;border-radius:24px;font-size:22px}
.profile-hero h1{font-size:23px;margin:0 0 5px}
.profile-hero p{font-size:10px;color:#bfd5cc;margin:0}
.profile-stats{margin-left:auto;display:flex;gap:24px}
.profile-stat{text-align:center}
.profile-stat strong{display:block;font-size:22px}
.profile-stat span{font-size:9px;color:#bfd5cc}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-item{padding:13px;background:#f7f9f7;border-radius:13px}
.info-item span{font-size:9px;color:var(--muted);display:block}
.info-item strong{font-size:11px;margin-top:3px;display:block}

.queue-layout{display:grid;grid-template-columns:1fr 340px;gap:16px}
.queue-item{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line);cursor:pointer}
.queue-item:hover,.queue-item.selected{background:#f1f7f3}
.queue-item .avatar{width:38px;height:38px}
.queue-item strong{font-size:11px;display:block}
.queue-item span{font-size:9px;color:var(--muted)}
.queue-side{background:var(--forest);color:white;border-radius:20px;padding:20px}
.queue-side h2{font-size:16px;margin:0 0 4px}
.queue-side>p{font-size:10px;color:#bdd3ca}
.queue-count{font-size:44px;font-weight:900;letter-spacing:-.06em;margin:18px 0 0}
.queue-bars{display:grid;gap:10px;margin-top:20px}
.queue-bar{font-size:9px;color:#d1e1da}
.queue-bar span{display:flex;justify-content:space-between}
.queue-bar i{display:block;background:rgba(255,255,255,.15);height:7px;border-radius:999px;margin-top:5px;overflow:hidden}
.queue-bar i:after{content:"";display:block;width:70%;height:100%;background:var(--lime)}

.review-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.evidence-panel{background:#10271f;border-radius:20px;min-height:350px;display:grid;place-items:center;color:white;position:relative}
.evidence-panel .camera-object{border:0}
.evidence-meta{position:absolute;bottom:15px;left:15px;right:15px;background:rgba(5,20,15,.84);padding:11px;border-radius:12px;display:flex;justify-content:space-between;font-size:9px}
.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.comment-box{width:100%;min-height:64px;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:10px;resize:none;color:var(--ink)}

.admin-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.admin-tab{border:0;background:transparent;padding:10px 2px;font-size:10px;font-weight:800;color:var(--muted);border-bottom:2px solid transparent}
.admin-tab.active{color:var(--forest);border-color:var(--forest)}
.mini-actions{display:flex;gap:6px}
.mini-btn{width:28px;height:28px;border:1px solid var(--line);background:white;border-radius:8px;display:grid;place-items:center}
.mini-btn svg{width:12px}
.impact-kpi{font-size:9px;color:var(--muted);margin-top:4px}

.mobile-top,.mobile-nav{display:none}
.phone .app-sidebar{display:none}
.phone .app-main{width:100%;padding-bottom:0}
.phone .topbar{height:62px;flex-basis:62px;padding:0 17px}
.phone .topbar-title{font-size:14px}
.phone .top-actions .icon-btn:first-child{display:none}
.phone .page{padding:18px 16px 26px}
.phone .page-head{align-items:flex-start;margin-bottom:16px}
.phone .page-head h1,.phone .hero-copy h1{font-size:23px}
.phone .grid.metrics{grid-template-columns:1fr 1fr}
.phone .metric{min-height:97px;padding:13px}
.phone .metric strong{font-size:20px}
.phone .hero-card{padding:20px;min-height:210px;align-items:flex-start}
.phone .points-orbit{width:94px;height:94px;flex-basis:94px}
.phone .points-orbit strong{font-size:22px}
.phone .content-grid,.phone .detail-layout,.phone .chart-grid,.phone .review-layout,.phone .queue-layout{grid-template-columns:1fr}
.phone .content-grid{margin-top:13px}
.phone .mission-grid,.phone .badge-grid,.phone .reward-grid,.phone .activity-grid{grid-template-columns:1fr}
.phone .mission-cover{height:84px}
.phone .state-flow{grid-template-columns:1fr}
.phone .state-card{padding:17px}
.phone .profile-hero{display:grid;text-align:center}
.phone .profile-hero .avatar{margin:auto}
.phone .profile-stats{margin:4px auto 0}
.phone .review-layout{padding-bottom:20px}
.phone .evidence-panel{min-height:300px}
.phone .camera-page{position:absolute;inset:0}
.phone .preview-photo{min-height:420px}
.phone .mobile-nav{position:relative;display:grid;grid-template-columns:repeat(5,1fr);height:67px;flex:0 0 67px;width:100%;background:white;border-top:1px solid var(--line);z-index:6;padding:8px 5px}
.mobile-nav button{border:0;background:transparent;color:#74827d;display:grid;justify-items:center;align-content:center;gap:3px;font-size:8px}
.mobile-nav button svg{width:18px}
.mobile-nav button.active{color:var(--forest);font-weight:900}
.phone .queue-side{display:none}
.phone .hide-mobile{display:none}

body.capture .studio-bar,body.capture .screen-meta{display:none}
body.capture .studio-stage{padding:0;background:transparent;min-height:100vh;display:block}
body.capture .viewport.desktop{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;box-shadow:none}
body.capture .viewport.phone{margin:0 auto;border-radius:38px}
body.capture .exit-capture{display:block}
.exit-capture{display:none;position:fixed;right:14px;top:14px;z-index:50;border:0;border-radius:999px;background:rgba(5,25,18,.78);color:white;padding:9px 13px;font-size:10px;opacity:.25}
.exit-capture:hover{opacity:1}

@media(max-width:1000px){.studio-bar{height:auto;min-height:84px;padding:12px 18px;align-items:flex-start}
.studio-brand{display:none}
.studio-controls{width:100%;flex-wrap:wrap}
.select-wrap{min-width:150px;flex:1}
.studio-stage{padding-top:122px}
.viewport.desktop{width:calc(100vw - 24px)}
.app-sidebar{width:190px}
.grid.metrics{grid-template-columns:1fr 1fr}
.mission-grid{grid-template-columns:1fr 1fr}
.page{padding:22px}
.topbar{padding:0 22px}
}

@media(max-width:640px){.studio-bar{position:static}
.studio-stage{padding:18px 8px 30px;min-height:auto}
.studio-controls .icon-only{display:none}
.select-wrap{width:100%;min-width:0}
.screen-meta{width:390px;max-width:100%;flex-wrap:wrap}
.viewport.phone{max-width:100%;height:calc(100vh - 205px);min-height:620px;border-width:5px}
.viewport.desktop{width:100%;aspect-ratio:auto;height:720px}
.desktop .app-sidebar{display:none}
.desktop .app-main{padding-bottom:0}
.desktop .mobile-nav{display:grid;position:relative;grid-template-columns:repeat(5,1fr);height:67px;flex:0 0 67px;width:100%;background:white;border-top:1px solid var(--line);z-index:6;padding:8px 5px}
.desktop .mission-grid,.desktop .badge-grid,.desktop .reward-grid,.desktop .activity-grid,.desktop .content-grid,.desktop .detail-layout,.desktop .chart-grid,.desktop .review-layout,.desktop .queue-layout{grid-template-columns:1fr}
}


/* Login and capture presentation */
.login-screen{height:100%;display:grid;grid-template-columns:1.08fr .92fr;background:white}
.login-brand-panel{background:linear-gradient(145deg,#0b3326,#176148 70%,#28775b);color:white;padding:42px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.login-brand{padding:0}
.login-message{margin:auto 0;position:relative;z-index:2}
.login-kicker{font-size:10px;letter-spacing:.18em;color:var(--lime);font-weight:900}
.login-message h1{font-size:42px;line-height:1.03;letter-spacing:-.055em;margin:16px 0}
.login-message p{color:#c6dcd3;font-size:13px;line-height:1.6;max-width:490px}
.login-pattern{position:absolute;right:-15px;bottom:-25px;font-size:150px;line-height:.65;font-weight:950;color:rgba(255,255,255,.035);letter-spacing:-.08em}
.login-pattern span{color:rgba(185,239,116,.08);font-size:220px}
.login-form-panel{padding:42px 70px;display:flex;flex-direction:column;justify-content:center;position:relative}
.login-form{max-width:390px;width:100%;margin:auto}
.login-form h2{font-size:27px;letter-spacing:-.04em;margin:7px 0}
.login-form>p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 22px}
.login-form label{display:grid;gap:7px;font-size:10px;font-weight:800;margin:13px 0}
.login-form input{height:44px;border:1px solid var(--line);border-radius:12px;padding:0 13px;color:var(--ink);background:#fbfcfb;outline:none}
.login-form input:focus{border-color:var(--forest-3);box-shadow:0 0 0 3px rgba(35,115,89,.1)}
.login-options{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px}
.login-options label{display:flex;align-items:center;gap:7px;margin:0;font-weight:600;color:var(--muted)}
.login-options input{width:14px;height:14px}
.login-options button{border:0;background:transparent;color:var(--forest-3);font-size:10px;font-weight:800}
.login-form>.button{width:100%}
.demo-note{margin-top:15px;padding:10px 12px;background:var(--mint);border-radius:11px;font-size:9px;color:var(--forest-2)}
.login-footer{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:9px;color:#98a49f}

body.capture{overflow:hidden;background:#081c15}
body.capture .studio-stage{padding:0;width:100vw;height:100vh;min-height:0;display:grid;place-items:center;background:#081c15}
body.capture .exit-capture{display:block}

.phone .login-screen{grid-template-columns:1fr}
.phone .login-brand-panel{min-height:265px;padding:28px 24px}
.phone .login-message{margin-top:45px}
.phone .login-message h1{font-size:29px}
.phone .login-message p{font-size:10px}
.phone .login-pattern{font-size:100px}
.phone .login-form-panel{padding:28px 24px 65px;justify-content:flex-start}
.phone .login-form h2{font-size:23px}
.phone .login-footer{bottom:18px}


@media(max-width:640px){
  body.capture .viewport.phone{height:100vh;min-height:0;border-width:5px}

}

/* Responsive content containment for phone previews and narrow devices */
.page,.page>*,.card,.page-head>*,.card-title-row>*,.mission-copy,.person,.requirement>div,.queue-item>div,.ledger-row>div{min-width:0}
.page h1,.page h2,.page h3,.page p,.page strong,.page span,.page td,.page th{overflow-wrap:anywhere}
.button,.status-pill,.points-pill{max-width:100%;white-space:normal;text-align:center}
.mission-row,.ledger-row,.queue-item{grid-template-columns:46px minmax(0,1fr) auto}

.phone .page-head{flex-direction:column;align-items:stretch}
.phone .page-head>.status-pill,.phone .page-head>.button{align-self:flex-start}
.phone .card-title-row,.phone .offline-banner,.phone .evidence-meta,.phone .reward-footer,.phone .admin-list-head{flex-wrap:wrap}
.phone .status-examples{grid-template-columns:1fr!important}
.phone .receipt-actions{flex-wrap:wrap}
.phone .ticket-row{flex-wrap:wrap}
.phone .ticket-row strong{max-width:100%;text-align:right}
.phone .admin-tabs{flex-wrap:wrap;gap:4px 14px}
.phone .profile-stats{flex-wrap:wrap;justify-content:center}
.phone .camera-note{max-width:calc(100% - 28px);white-space:normal;text-align:center}
.phone .queue-item{grid-template-columns:40px minmax(0,1fr)}
.phone .queue-item>.status-pill{grid-column:2;justify-self:start}
.phone .evidence-meta{align-items:flex-start;gap:4px}
.phone .evidence-meta strong{width:100%}

.phone .leaderboard-table,.phone .leaderboard-table tbody,
.phone .admin-table,.phone .admin-table tbody{display:block;width:100%}
.phone .leaderboard-table thead,.phone .admin-table thead{display:none}
.phone .leaderboard-table tr{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;
  grid-template-areas:"rank person points" "rank program points" "rank missions points";
  align-items:center;gap:4px 10px;padding:12px 10px;border-bottom:1px solid #edf2ef
}
.phone .leaderboard-table td{display:block!important;min-width:0;padding:0;border:0}
.phone .leaderboard-table td:nth-child(1){grid-area:rank}
.phone .leaderboard-table td:nth-child(2){grid-area:person}
.phone .leaderboard-table td:nth-child(3){grid-area:program;color:var(--muted);font-size:9px}
.phone .leaderboard-table td:nth-child(4){grid-area:missions;color:var(--muted);font-size:9px}
.phone .leaderboard-table td:nth-child(4)::before{content:"Misi diluluskan: "}
.phone .leaderboard-table td:nth-child(5){grid-area:points;align-self:start;text-align:right;white-space:nowrap}
.phone .leaderboard-table .person{align-items:center}
.phone .leaderboard-table .person strong{line-height:1.25}

.phone .admin-table tr{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name actions" "category points" "status status";
  align-items:center;gap:7px 10px;padding:12px 14px;border-bottom:1px solid #edf2ef
}
.phone .admin-table td{display:block;min-width:0;padding:0;border:0}
.phone .admin-table td:nth-child(1){grid-area:name}
.phone .admin-table td:nth-child(2){grid-area:category;color:var(--muted)}
.phone .admin-table td:nth-child(2)::before{content:"Kategori · "}
.phone .admin-table td:nth-child(3){grid-area:points;white-space:nowrap;text-align:right}
.phone .admin-table td:nth-child(4){grid-area:status}
.phone .admin-table td:nth-child(5){grid-area:actions;justify-self:end}

@media(max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  .desktop .page-head{flex-direction:column;align-items:stretch}
  .desktop .page-head>.status-pill,.desktop .page-head>.button{align-self:flex-start}
  .desktop .card-title-row,.desktop .offline-banner,.desktop .evidence-meta,.desktop .reward-footer,.desktop .admin-list-head{flex-wrap:wrap}
  .desktop .status-examples{grid-template-columns:1fr!important}
  .desktop .receipt-actions,.desktop .ticket-row,.desktop .admin-tabs,.desktop .profile-stats{flex-wrap:wrap}
  .desktop .ticket-row strong{max-width:100%;text-align:right}
  .desktop .camera-note{max-width:calc(100% - 28px);white-space:normal;text-align:center}
  .desktop .queue-item{grid-template-columns:40px minmax(0,1fr)}
  .desktop .queue-item>.status-pill{grid-column:2;justify-self:start}
  .desktop .evidence-meta{align-items:flex-start;gap:4px}
  .desktop .evidence-meta strong{width:100%}

  .desktop .leaderboard-table,.desktop .leaderboard-table tbody,
  .desktop .admin-table,.desktop .admin-table tbody{display:block;width:100%}
  .desktop .leaderboard-table thead,.desktop .admin-table thead{display:none}
  .desktop .leaderboard-table tr{
    display:grid;grid-template-columns:32px minmax(0,1fr) auto;
    grid-template-areas:"rank person points" "rank program points" "rank missions points";
    align-items:center;gap:4px 10px;padding:12px 10px;border-bottom:1px solid #edf2ef
  }
  .desktop .leaderboard-table td{display:block;min-width:0;padding:0;border:0}
  .desktop .leaderboard-table td:nth-child(1){grid-area:rank}
  .desktop .leaderboard-table td:nth-child(2){grid-area:person}
  .desktop .leaderboard-table td:nth-child(3){grid-area:program;color:var(--muted);font-size:9px}
  .desktop .leaderboard-table td:nth-child(4){grid-area:missions;color:var(--muted);font-size:9px}
  .desktop .leaderboard-table td:nth-child(4)::before{content:"Misi diluluskan: "}
  .desktop .leaderboard-table td:nth-child(5){grid-area:points;align-self:start;text-align:right;white-space:nowrap}

  .desktop .admin-table tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name actions" "category points" "status status";
    align-items:center;gap:7px 10px;padding:12px 14px;border-bottom:1px solid #edf2ef
  }
  .desktop .admin-table td{display:block;min-width:0;padding:0;border:0}
  .desktop .admin-table td:nth-child(1){grid-area:name}
  .desktop .admin-table td:nth-child(2){grid-area:category;color:var(--muted)}
  .desktop .admin-table td:nth-child(2)::before{content:"Kategori · "}
  .desktop .admin-table td:nth-child(3){grid-area:points;white-space:nowrap;text-align:right}
  .desktop .admin-table td:nth-child(4){grid-area:status}
  .desktop .admin-table td:nth-child(5){grid-area:actions;justify-self:end}
}

@media(max-width:360px){
  .viewport.phone{border-width:4px;border-radius:28px}
  .phone .page,.desktop .page{padding:15px 12px 22px}
  .phone .topbar,.desktop .topbar{padding:0 12px}
  .phone .topbar-title,.desktop .topbar-title{font-size:13px}
  .phone .grid.metrics,.desktop .grid.metrics{grid-template-columns:1fr}
  .phone .mission-row,.desktop .mission-row{grid-template-columns:42px minmax(0,1fr)}
  .phone .mission-row .points-pill,.desktop .mission-row .points-pill{grid-column:2;justify-self:start}
  .phone .ledger-row,.desktop .ledger-row{grid-template-columns:40px minmax(0,1fr)}
  .phone .ledger-points,.desktop .ledger-points{grid-column:2;justify-self:start}
  .phone .info-grid,.desktop .info-grid{grid-template-columns:1fr}
}

/* Theme and language controls */
.preference-control{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:76px}
.preference-control svg{width:17px;height:17px}
.language-btn{height:38px;min-width:39px;padding:0 9px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:10px;font-weight:900;letter-spacing:.06em}
.login-preferences{position:absolute;right:18px;top:18px;z-index:5;display:flex;gap:8px}
.topbar-copy{min-width:0}
.top-actions{flex-shrink:0}
.phone .top-actions{gap:6px}
.phone .top-actions .icon-btn,.phone .language-btn{width:34px;height:34px;min-width:34px;border-radius:11px;padding:0}
.phone .top-actions .search-btn{display:none}

/* Dark mode */
html{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --forest:#0c3427;--forest-2:#124535;--forest-3:#52b68e;--lime:#b9ef74;--lime-2:#2b5038;
  --mint:#17382b;--cream:#07150f;--paper:#10231b;--ink:#eef8f3;--muted:#9db2a9;
  --line:#294239;--shadow:0 24px 80px rgba(0,0,0,.42)
}
html[data-theme="dark"] body{background:#07150f}
html[data-theme="dark"] .viewport,
html[data-theme="dark"] .app,
html[data-theme="dark"] .app-main{background:var(--cream)}
html[data-theme="dark"] .topbar{background:rgba(16,35,27,.94)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .mission-row,
html[data-theme="dark"] .mission-card,
html[data-theme="dark"] .state-card,
html[data-theme="dark"] .receipt,
html[data-theme="dark"] .badge-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .reward-card,
html[data-theme="dark"] .button.outline,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .mini-btn,
html[data-theme="dark"] .language-btn{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .requirement,
html[data-theme="dark"] .info-item,
html[data-theme="dark"] .streak-box,
html[data-theme="dark"] .receipt-ticket{background:#142a21}
html[data-theme="dark"] .tabbar,
html[data-theme="dark"] .progress-bar{background:#1b3028}
html[data-theme="dark"] .tab.active{background:#29483a;color:var(--ink)}
html[data-theme="dark"] .mission-cover,
html[data-theme="dark"] .reward-art{background:linear-gradient(135deg,#173f30,#263d25)}
html[data-theme="dark"] .mission-cover .status-pill{background:rgba(7,21,15,.78)}
html[data-theme="dark"] .notice{background:#3b3016;color:#f2d58e}
html[data-theme="dark"] .offline-banner{background:#282344;color:#cec8ff;border-color:#47406f}
html[data-theme="dark"] .status-pill.pending{background:#453818;color:#f4d88e}
html[data-theme="dark"] .status-pill.approved{background:#193f2c;color:#9be0b7}
html[data-theme="dark"] .status-pill.rejected{background:#452525;color:#ffb0b0}
html[data-theme="dark"] .status-pill.offline{background:#302a55;color:#c9c2ff}
html[data-theme="dark"] .status-pill.neutral{background:#243930;color:#b8cbc2}
html[data-theme="dark"] .chip{background:var(--paper);color:var(--muted)}
html[data-theme="dark"] .chip.active{background:var(--lime);border-color:var(--lime);color:#0f3d2e}
html[data-theme="dark"] .mobile-nav{background:#0d2018}
html[data-theme="dark"] .mobile-nav button{color:#91a69d}
html[data-theme="dark"] .mobile-nav button.active{color:var(--lime)}
html[data-theme="dark"] .donut:after{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .login-screen,
html[data-theme="dark"] .login-form-panel{background:var(--paper)}
html[data-theme="dark"] .login-form input{background:#0a1913;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .demo-note{background:#17382b;color:#bce9d4}
html[data-theme="dark"] .login-footer{color:#82998f}
html[data-theme="dark"] .leaderboard-table tr[style]{background:#173126!important}
html[data-theme="dark"] .queue-item:hover,
html[data-theme="dark"] .queue-item.selected{background:#173126}
html[data-theme="dark"] .timeline-dot{background:#20352c;color:#9fb2aa;border-color:var(--paper)}
html[data-theme="dark"] .timeline-step.done .timeline-dot{background:var(--forest-3);color:#06130e}
html[data-theme="dark"] .timeline-step.current .timeline-dot{background:var(--amber);color:#493306}
html[data-theme="dark"] .status-timeline:before{background:#2a4238}
html[data-theme="dark"] .comment-box{background:#0a1913;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .button.soft{background:#1a3b2d;color:#bce8d4}
html[lang="en"] .leaderboard-table td:nth-child(4)::before{content:"Approved missions: "}
html[lang="en"] .admin-table td:nth-child(2)::before{content:"Category · "}

@media(max-width:360px){
  .phone .top-actions .notification-btn,.desktop .top-actions .notification-btn{display:none}
  .phone .login-preferences,.desktop .login-preferences{right:12px;top:12px}
}

/* True small-screen layout: storyboard controls and app follow the browser width */
.select-wrap select{width:100%;min-width:0;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:640px){
  .studio-bar{display:block;width:100%;padding:12px;height:auto;min-height:0}
  .studio-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:10px}
  .studio-controls .select-wrap{width:100%;min-width:0;max-width:none;overflow:hidden}
  .studio-controls .select-wrap:first-of-type,
  .studio-controls .select-wrap:nth-of-type(2),
  .studio-controls #captureToggle{grid-column:1/-1}
  .studio-controls #themeToggle,.studio-controls #languageToggle{width:100%;min-width:0}
  .studio-stage{width:100%;grid-template-columns:minmax(0,1fr);padding:14px 8px 24px;overflow:hidden}
  .screen-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);width:100%;min-width:0;gap:7px}
  .screen-meta span{min-width:0;overflow-wrap:anywhere}
  .screen-meta #shortcutHint{display:none}
  .viewport.phone,.viewport.desktop{width:min(390px,100%);max-width:100%;min-width:0;margin-inline:auto;border-radius:28px}

  .desktop .topbar{height:62px;flex-basis:62px;padding:0 14px}
  .desktop .topbar-title{font-size:14px}
  .desktop .top-actions{gap:6px}
  .desktop .top-actions .search-btn,.desktop .top-actions .notification-btn{display:none}
  .desktop .top-actions .icon-btn,.desktop .language-btn{width:34px;height:34px;min-width:34px;border-radius:11px;padding:0}
  .desktop .page{padding:18px 16px 26px}
  .desktop .page-head h1,.desktop .hero-copy h1{font-size:23px}
  .desktop .grid.metrics{grid-template-columns:1fr 1fr}
  .desktop .metric{min-height:97px;padding:13px}
  .desktop .metric strong{font-size:20px}
  .desktop .hero-card{padding:20px;min-height:210px;align-items:flex-start}
  .desktop .points-orbit{width:94px;height:94px;flex-basis:94px}
  .desktop .points-orbit strong{font-size:22px}
  .desktop .mission-cover{height:84px}
  .desktop .state-flow{grid-template-columns:1fr}
  .desktop .state-card{padding:17px}
  .desktop .profile-hero{display:grid;text-align:center}
  .desktop .profile-hero .avatar{margin:auto}
  .desktop .profile-stats{margin:4px auto 0}
  .desktop .review-layout{padding-bottom:20px}
  .desktop .evidence-panel{min-height:300px}
  .desktop .preview-photo{min-height:420px}
  .desktop .queue-side{display:none}
  .desktop .hide-mobile{display:none}
  .desktop .login-screen{grid-template-columns:1fr}
  .desktop .login-brand-panel{min-height:265px;padding:28px 24px}
  .desktop .login-message{margin-top:45px}
  .desktop .login-message h1{font-size:29px}
  .desktop .login-message p{font-size:10px}
  .desktop .login-pattern{font-size:100px}
  .desktop .login-form-panel{padding:28px 24px 65px;justify-content:flex-start}
  .desktop .login-form h2{font-size:23px}
  .desktop .login-footer{bottom:18px}
}

@media(max-width:380px){
  .phone .hero-card,.desktop .hero-card{flex-direction:column;gap:16px}
  .phone .points-orbit,.desktop .points-orbit{align-self:flex-end}
  .phone .topbar,.desktop .topbar{padding-inline:12px}
  .phone .topbar-copy,.desktop .topbar-copy{max-width:138px}
  .phone .top-actions .notification-btn,.desktop .top-actions .notification-btn{display:none}
}