/* CUEPIKO mobile design — aligned with the approved blue mockups. */
#cuepiko-app{--cp-bg:#061424;--cp-panel:#102237;--cp-line:#27415b;--cp-muted:#b0c0d5;max-width:510px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:radial-gradient(ellipse at 100% 15%,#0b2b4933,transparent 60%),#061424;border:1px solid #20374f;border-radius:28px;box-shadow:0 24px 70px #0004}
#cuepiko-app header{border:0;padding:24px 22px 18px;background:transparent}#cuepiko-app .cp-wordmark{display:flex;align-items:center;gap:9px}#cuepiko-app .cp-brand-mark{width:39px;height:39px}#cuepiko-app .cp-logo{font-size:28px;letter-spacing:-1.2px;line-height:1.1}#cuepiko-app .cp-logo span{color:#10b0f3}#cuepiko-app .cp-icon{display:inline-block;width:23px;height:23px;flex-shrink:0;vertical-align:middle}#cuepiko-app .cp-header-actions{display:flex;align-items:center;gap:10px}#cuepiko-app .cp-settings{border:0;background:transparent;color:#ecf4ff;width:44px;height:44px;padding:9px}#cuepiko-app .cp-settings .cp-icon{width:26px;height:26px}#cuepiko-app main{padding:10px 22px 20px;min-height:480px}#cuepiko-app h1{font-size:25px;line-height:1.25;letter-spacing:-.6px;font-weight:750;margin:5px 0 7px}#cuepiko-app .cp-subtitle{font-size:15px;color:#c3d1e3;margin:0 0 19px}#cuepiko-app h2{font-size:20px;letter-spacing:-.3px;margin:22px 0 12px}#cuepiko-app h3{font-weight:650;letter-spacing:-.2px}#cuepiko-app .cp-card{border-radius:13px;background:linear-gradient(120deg,#10243d,#142437);border-color:#2b425a;padding:16px;margin-bottom:9px;box-shadow:inset 0 1px #ffffff03}#cuepiko-app .cp-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:13px 8px;background:linear-gradient(120deg,#071b30,#082e4a);border-color:#008bc7;padding:12px 12px 14px}#cuepiko-app .cp-hero h3{font-size:23px;line-height:1.15;margin-bottom:10px}#cuepiko-app .cp-hero p{font-size:14px;line-height:1.6;margin:0;color:#dce8f7}#cuepiko-app .cp-table-art{width:100%;height:auto;filter:drop-shadow(0 7px 8px #0004)}#cuepiko-app .cp-button{border-radius:9px;min-height:44px;padding:10px 14px;gap:8px;background:linear-gradient(#1a3954,#122c45);border-color:#3b5670;font-weight:550;font-size:14px}#cuepiko-app .cp-primary{background:linear-gradient(110deg,#03aafa,#0074ff);border-color:#30b7ff;box-shadow:inset 0 1px #ffffff15;color:#fff}#cuepiko-app .cp-hero>.cp-button{min-height:49px;font-size:18px;font-weight:650}#cuepiko-app .cp-modes{display:flex;gap:3px;padding:3px;border:1px solid #364960;background:linear-gradient(100deg,#1a2a3d,#132333);border-radius:13px;margin:11px 0 22px}#cuepiko-app .cp-modes button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:8px 4px;border:1px solid transparent;background:transparent;color:#c6d4e7;border-radius:10px;font-size:13px}#cuepiko-app .cp-modes button[aria-pressed=true]{background:linear-gradient(120deg,#03b0f9,#007dff);border-color:#48bdff;color:white;box-shadow:0 1px 7px #0086ff44}#cuepiko-app .cp-modes .cp-icon{width:21px;height:21px}#cuepiko-app .cp-exercise{padding:13px 14px;gap:17px;min-height:72px}#cuepiko-app .cp-exercise-icon{width:40px;min-width:40px;display:grid;place-items:center;color:#09b5fa}#cuepiko-app .cp-exercise-icon>.cp-icon{width:36px;height:36px;stroke-width:1.5}#cuepiko-app .cp-exercise-copy{min-width:0;flex:1}#cuepiko-app .cp-exercise b{font-size:16px;font-weight:650;letter-spacing:-.2px}#cuepiko-app .cp-exercise small{font-size:12px;margin-top:1px;line-height:1.5;color:#b9c8dc}#cuepiko-app .cp-chevron{width:18px;height:18px;color:#b5c6df}#cuepiko-app .cp-ball-icon span{display:block;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff 5%,#edf1f6 45%,#9faec0);box-shadow:0 5px 8px #0005;position:relative}#cuepiko-app .cp-ball-icon span:after{content:'';width:6px;height:6px;border-radius:50%;background:#009bf2;position:absolute;top:12px;left:17px}#cuepiko-app .cp-calibration{display:grid;grid-template-columns:35px 1fr;gap:10px;border-color:#009ce0;background:linear-gradient(120deg,#0b243b,#0a1d31);align-items:center;margin-top:13px}#cuepiko-app .cp-calibration h3{font-size:15px;margin:0 0 4px}#cuepiko-app .cp-calibration small{font-size:12px;line-height:1.45;display:block}#cuepiko-app .cp-calibration .cp-button{grid-column:1/-1;min-height:40px}#cuepiko-app .cp-cal-icon{color:#16b5fa}#cuepiko-app .cp-cal-icon .cp-icon{width:33px;height:33px}#cuepiko-app .cp-venue-strip{display:flex;align-items:center;gap:9px;padding:11px 0 0;color:#75cfff;flex-wrap:wrap}#cuepiko-app .cp-venue-strip>div{flex:1;min-width:135px}#cuepiko-app .cp-venue-strip b{display:block;font-size:12px;color:#bcd4e9;font-weight:500}#cuepiko-app .cp-venue-strip small{display:block;font-size:11px}#cuepiko-app .cp-venue-strip button{display:flex;align-items:center;gap:3px;background:none;color:#70d0ff;border:0;padding:10px 0;font-size:12px}#cuepiko-app .cp-venue-strip button .cp-icon{width:14px;height:14px}#cuepiko-app nav{position:sticky;bottom:0;z-index:5;gap:0;padding:9px 4px 6px;border:1px solid #21374f;border-radius:19px 19px 0 0;background:linear-gradient(#0c1f33,#081727);box-shadow:0 -8px 20px #05111d55}#cuepiko-app nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;background:none;min-height:53px;font-size:12px;color:#a8bcd5;border-radius:0}#cuepiko-app nav button .cp-icon{width:25px;height:25px}#cuepiko-app nav button[aria-current=page]{background:none;color:#08baff}#cuepiko-app nav button[aria-current=page]:after{content:'';position:absolute;bottom:-6px;height:3px;width:58px;border-radius:3px;background:#10b8ff}#cuepiko-app .cp-disclaimer{font-size:10px;text-align:center;padding:11px 14px;background:#061424;color:#8ea7bd;line-height:1.6}#cuepiko-app .cp-message{padding:10px 20px;font-size:13px}#cuepiko-app .cp-profile-banner{position:relative;padding:0 0 17px;isolation:isolate}#cuepiko-app .cp-profile-banner:before{content:'';position:absolute;z-index:-1;right:-22px;top:-9px;width:75%;height:130px;background:radial-gradient(ellipse at 72% 55%,#0294f333,transparent 42%),linear-gradient(165deg,transparent 42%,#086ba33d 43%,#103c5f 46%,transparent 48%);opacity:.9}#cuepiko-app .cp-profile-person{display:flex;gap:13px;align-items:center;margin:20px 0 0;flex-wrap:wrap}#cuepiko-app .cp-avatar{width:70px;height:70px;padding:3px;background:#23b8ff;border:1px solid #7ed7ff;box-shadow:0 3px 15px #008ac52a;flex-shrink:0}#cuepiko-app .cp-avatar svg{width:100%;height:100%;border-radius:50%}#cuepiko-app .cp-person-name{flex:1;min-width:110px}#cuepiko-app .cp-person-name h3{font-size:22px;margin:0 0 6px}#cuepiko-app .cp-person-name small{display:block;margin-top:4px;font-size:11px}#cuepiko-app .cp-pill{border:1px solid #078bc0;background:#06395a;color:#7bdaff;font-size:10px;padding:2px 7px;line-height:1.7}#cuepiko-app .cp-pill .cp-icon{width:13px;height:13px;margin-right:4px}#cuepiko-app .cp-edit{padding:7px 9px;min-height:35px;font-size:11px}#cuepiko-app .cp-edit .cp-icon{width:15px;height:15px}#cuepiko-app .cp-section-title{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 13px}#cuepiko-app .cp-section-title .cp-icon{color:#20baff;width:22px;height:22px}#cuepiko-app .cp-stats{margin:15px -3px 0;gap:0}#cuepiko-app .cp-stats>div+div{border-left:1px solid #25425c}#cuepiko-app .cp-stats .cp-icon{color:#11b8ff;width:25px;height:25px;margin:0 0 6px}#cuepiko-app .cp-stats>div:nth-child(2)>.cp-icon{color:#ffaf7b;fill:#ffaf7b22}#cuepiko-app .cp-stats b{font-size:18px;color:#f1f6ff;font-weight:650;line-height:1.5}#cuepiko-app .cp-stats small{font-size:10px;color:#a4bbd5}#cuepiko-app .cp-meter{height:11px;border-radius:8px;background:#103857;margin:0 0 7px;box-shadow:inset 0 1px 3px #0003}#cuepiko-app .cp-meter span{background:linear-gradient(90deg,#53d4ff,#029bf5);border-radius:8px}#cuepiko-app .cp-level{font-size:13px;color:#9edaff}#cuepiko-app .cp-card em{color:#08c4ff;font-style:normal}#cuepiko-app .cp-skill-empty{display:flex;align-items:center;gap:11px;background:#0c2944;border:1px solid #1d4568;border-radius:10px;padding:13px;margin-bottom:12px}#cuepiko-app .cp-skill-empty>.cp-icon{width:41px;height:41px;color:#17baff}#cuepiko-app .cp-skill-empty b,#cuepiko-app .cp-ranking b{font-size:13px;font-weight:500}#cuepiko-app .cp-skill-empty small,#cuepiko-app .cp-ranking small{display:block;font-size:11px;margin-top:3px}#cuepiko-app .cp-ranking{display:flex;gap:11px;align-items:center}#cuepiko-app .cp-ranking>.cp-icon{padding:5px;width:33px;height:33px;background:#1f3d5a;border-radius:50%;color:#a8c8e8}#cuepiko-app .cp-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-top:16px}#cuepiko-app .cp-badges>div{opacity:.5}#cuepiko-app .cp-badges>div.is-unlocked{opacity:1}#cuepiko-app .cp-medallion{display:grid;place-items:center;width:66px;height:66px;background:radial-gradient(circle at 35% 20%,#1e91c5,#063a62 65%);border:3px solid #28baff;border-radius:17px;margin:0 auto 8px;box-shadow:inset 0 0 0 3px #0c3454,0 5px 12px #0003}#cuepiko-app .cp-medallion .cp-icon{color:#4bc7ff;width:35px;height:35px}#cuepiko-app .cp-badges b{display:block;font-size:11px;font-weight:500;line-height:1.4}#cuepiko-app .cp-badges small{display:block;font-size:10px;margin-top:3px}#cuepiko-app .cp-privacy{padding-bottom:12px}#cuepiko-app .cp-privacy-row{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:0;padding:10px 0;border-bottom:1px solid #223c55;font-size:12px;min-height:52px}#cuepiko-app .cp-privacy-row>span{display:flex;align-items:center;gap:9px}#cuepiko-app .cp-privacy-row>span>.cp-icon{color:#9dbad6;width:19px;height:19px}#cuepiko-app .cp-privacy-row small{display:block;font-size:10px;margin-top:2px}#cuepiko-app .cp-privacy-options{display:flex;border:1px solid #34516c;border-radius:8px;overflow:hidden}#cuepiko-app .cp-privacy-options button{font-size:11px;padding:7px 8px;background:transparent;color:#c4d4e8;border:0;min-height:34px}#cuepiko-app .cp-privacy-options button[aria-pressed=true]{background:#0089ed;color:white}#cuepiko-app .cp-privacy-options .cp-icon{width:13px;height:13px}#cuepiko-app input.cp-switch{appearance:none;width:39px;height:23px;border-radius:20px;background:#415d7d;position:relative;flex-shrink:0;margin:0;border:0}#cuepiko-app input.cp-switch:after{content:'';position:absolute;width:19px;height:19px;top:2px;left:2px;background:#f3f6ff;border-radius:50%;transition:left .2s}#cuepiko-app input.cp-switch:checked{background:#008cf3}#cuepiko-app input.cp-switch:checked:after{left:18px}#cuepiko-app .cp-privacy-foot{display:block;font-size:10px;margin-top:10px}#cuepiko-app .cp-profile-editor{font-size:12px;margin-bottom:4px}#cuepiko-app .cp-profile-editor summary{padding:9px 0}#cuepiko-app .cp-profile-editor label{font-size:14px}
@media(max-width:460px){#cuepiko-app{border:0;border-radius:0;margin:0}#cuepiko-app header{padding:22px 18px 16px}#cuepiko-app main{padding:8px 17px 17px}#cuepiko-app h1{font-size:24px}#cuepiko-app .cp-hero h3{font-size:21px}#cuepiko-app .cp-hero p{font-size:13px}#cuepiko-app .cp-logo{font-size:26px}#cuepiko-app .cp-exercise{min-height:72px}#cuepiko-app .cp-exercise small{font-size:11px}#cuepiko-app .cp-edit{padding:6px 8px}#cuepiko-app .cp-stats b{font-size:17px}}@media(max-width:350px){#cuepiko-app h1{font-size:21px}#cuepiko-app .cp-hero h3{font-size:19px}#cuepiko-app .cp-exercise{gap:10px;padding:12px}#cuepiko-app .cp-exercise b{font-size:15px}#cuepiko-app .cp-edit{margin-left:83px}#cuepiko-app .cp-privacy-row{flex-wrap:wrap}#cuepiko-app .cp-stats b{font-size:15px}}