/* CUEPIKO 0.2.1 — based on the supplied camera, training and profile mockups. */
/* 0.3.0: dedicated training and private activity history. */
#cuepiko-app .cp-training-note{margin-top:17px}
#cuepiko-app .cp-training-note h3{display:flex;align-items:center;gap:8px;font-size:15px}
#cuepiko-app .cp-training-note h3 svg{color:#24c6ff}
#cuepiko-app .cp-training-note p{font-size:13px;margin-top:9px}
#cuepiko-app .cp-history-filters{display:flex;padding:4px;border:1px solid #23445f;border-radius:12px;background:#041322;margin:19px 0 12px;gap:4px}
#cuepiko-app .cp-history-filters button{flex:1;min-height:41px;border:0;border-radius:8px;background:transparent;color:#b4cbe2}
#cuepiko-app .cp-history-filters button[aria-pressed=true]{background:linear-gradient(120deg,#07b6f9,#0078ff);color:white;font-weight:650}
#cuepiko-app .cp-history-summary{display:flex;justify-content:space-between;font-size:11px;color:#98b3cb;margin:12px 0 21px}
#cuepiko-app .cp-history-summary span{display:flex;align-items:center;gap:5px}
#cuepiko-app .cp-history-summary svg{width:13px;height:13px}
#cuepiko-app h2.cp-history-day{font-size:12px;text-transform:uppercase;letter-spacing:1.1px;color:#8caac6;margin:23px 0 10px}
#cuepiko-app .cp-history-card{display:flex;gap:12px;width:100%;text-align:left;color:#f3f8ff;cursor:pointer}
#cuepiko-app .cp-history-card:hover{border-color:#18a9ef}
#cuepiko-app .cp-history-icon{display:grid;place-items:center;flex:0 0 37px;height:40px;background:#073651;border:1px solid #15618b;border-radius:11px;color:#29c7ff}
#cuepiko-app .cp-history-icon svg{width:23px;height:23px}
#cuepiko-app .cp-history-body{flex:1;min-width:0}
#cuepiko-app .cp-history-body strong{font-size:16px;line-height:1.4}
#cuepiko-app .cp-history-body small{display:block;font-size:11px;margin-top:6px;line-height:1.5}
#cuepiko-app .cp-history-status{display:block;font-size:11px;color:#5fd7ff;margin-top:13px}
#cuepiko-app .cp-history-detail-link{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:11px;color:#a4c5e2;margin-top:10px}
#cuepiko-app .cp-history-detail-link svg{width:15px;height:15px}
#cuepiko-app .cp-history-empty{text-align:center;padding:30px 17px}
#cuepiko-app .cp-history-empty>svg{width:43px;height:43px;color:#3ebff4;margin-bottom:14px}
#cuepiko-app .cp-history-empty p{font-size:13px;color:#a9c2df;margin:12px 0 18px}
#cuepiko-app .cp-history-foot{font-size:11px;color:#87a6c2;line-height:1.7;margin:14px 0}
#cuepiko-app .cp-history-back{display:flex;margin-bottom:22px;font-size:12px}
#cuepiko-app .cp-detail-score{text-align:center;padding:25px 15px;margin-top:20px}
#cuepiko-app .cp-detail-score>svg{display:block;width:38px;height:38px;margin:0 auto 14px;color:#25c2ff}
#cuepiko-app .cp-detail-score>strong{font-size:52px;line-height:1.1;color:#f1faff;letter-spacing:-2px}
#cuepiko-app .cp-detail-score>strong small{font-size:23px}
#cuepiko-app .cp-detail-score p{font-size:12px;color:#a9c2df;margin-top:13px}
#cuepiko-app .cp-history-meta{margin:0}
#cuepiko-app .cp-history-meta>div{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:13px 0;border-bottom:1px solid #1b3d59;font-size:12px}
#cuepiko-app .cp-history-meta>div:last-child{border-bottom:0}
#cuepiko-app .cp-history-meta dt{color:#93b3cd;flex:1}
#cuepiko-app .cp-history-meta dd{margin:0;max-width:55%;text-align:right;overflow-wrap:anywhere}
body{background:radial-gradient(ellipse at 55% 20%,#07386c 0,#041b36 38%,#020c17 90%);background-attachment:fixed}
#cuepiko-app{--cp-bg:#031427;--cp-panel:#071d35;--cp-line:#21486a;--cp-blue:#008cff;background:linear-gradient(140deg,#051629,#02101f 70%);font-family:Inter,"Segoe UI",Arial,sans-serif;border-color:#29455c;max-width:510px}
#cuepiko-app header{background:linear-gradient(120deg,#06182b,#031121);border-bottom:1px solid #17374e;padding:20px 20px 16px}
#cuepiko-app .cp-wordmark{gap:10px;align-items:center}
#cuepiko-app .cp-brand-mark{display:block;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 1px 5px #008fff22)}
#cuepiko-app .cp-logo{font-size:27px;line-height:1;font-weight:800;letter-spacing:-1.2px;color:#f4f8ff}
#cuepiko-app .cp-logo span{background:linear-gradient(180deg,#30caff,#0085f4);background-clip:text;-webkit-background-clip:text;color:transparent}
#cuepiko-app .cp-settings{color:#dbe9ff;background:transparent;border:0}
#cuepiko-app main{padding:18px 18px 20px}
#cuepiko-app h1{font-size:27px;letter-spacing:-.6px;font-weight:750}
#cuepiko-app h2{font-size:21px;font-weight:700}
#cuepiko-app h3{font-weight:650}
#cuepiko-app .cp-muted,#cuepiko-app small{color:#a9c2df}
#cuepiko-app .cp-card{background:linear-gradient(120deg,#082743aa,#04172ddd);border:1px solid #1b4a70;border-radius:13px;box-shadow:inset 0 1px 0 #7ebcff08;padding:16px;margin-bottom:11px}
#cuepiko-app .cp-button{background:linear-gradient(135deg,#18364c,#102338);border:1px solid #56718a;border-radius:10px;box-shadow:inset 0 1px 0 #b2dcff0b;min-height:44px;font-weight:600}
#cuepiko-app .cp-primary{background:linear-gradient(115deg,#08b5f5 0,#008dff 65%,#0062f5 100%);border:1px solid #16b4ff;color:#fff;box-shadow:inset 0 1px 0 #b5eaff3b,0 3px 12px #007bff12}
#cuepiko-app .cp-button:hover{filter:brightness(1.12)}
#cuepiko-app .cp-button:active{transform:translateY(1px)}
#cuepiko-app input:not([type=checkbox]),#cuepiko-app select{background:linear-gradient(120deg,#092139,#051727);border-color:#315470;border-radius:10px}
#cuepiko-app .cp-pill{border-color:#008ed1;color:#73d9ff;background:#00375480;font-weight:550;letter-spacing:.15px}
#cuepiko-app .cp-access-hero{display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:center;background:radial-gradient(ellipse at 95% 40%,#0065a333,transparent 65%),#031a2e;border-color:#008dc9;padding:14px 12px;margin-top:18px}
#cuepiko-app .cp-access-hero h3{font-size:18px;line-height:1.3;margin:10px 0 8px;letter-spacing:-.3px}
#cuepiko-app .cp-access-hero p{font-size:12px;color:#b8cbe5;margin:0}
#cuepiko-app .cp-access-hero .cp-table-art{width:100%;height:auto;filter:drop-shadow(0 5px 5px #0009)}
#cuepiko-app .cp-hero{grid-template-columns:1fr 1.2fr;background:linear-gradient(110deg,#03162b,#052a46);border-color:#008fca}
#cuepiko-app .cp-hero .cp-table-art{width:100%;height:auto;filter:drop-shadow(0 4px 5px #0006)}
#cuepiko-app .cp-exercise{background:linear-gradient(125deg,#11283c,#142435);border-color:#354959;min-height:79px;gap:15px;margin-bottom:7px}
#cuepiko-app .cp-exercise .cp-symbol{display:grid;place-items:center;flex:0 0 38px;color:#15b6f3}
#cuepiko-app .cp-exercise .cp-symbol svg{width:36px;height:36px}
#cuepiko-app .cp-exercise>span:nth-child(2){flex:1}
#cuepiko-app .cp-exercise>svg{width:18px;color:#b5c9df}
#cuepiko-app .cp-exercise b{font-size:16px}
#cuepiko-app .cp-exercise small{font-size:12px;line-height:1.45;margin-top:3px}
#cuepiko-app nav{border:1px solid #183348;background:linear-gradient(130deg,#091b2d,#030d18);border-radius:22px 22px 0 0;padding:9px 6px 9px;box-shadow:0 -5px 18px #010a1644}
#cuepiko-app nav button{color:#a8bdd8;font-size:11px;gap:5px}
#cuepiko-app nav button .cp-icon{width:25px;height:25px}
#cuepiko-app nav button[aria-current=page]{color:#00b8ff;font-weight:700}
#cuepiko-app nav button[aria-current=page] .cp-icon{stroke-width:2.3;filter:drop-shadow(0 0 4px #00aaff33)}
#cuepiko-app nav button[aria-current=page]:after{background:#03b6ff;height:3px;width:55px;bottom:-8px}
#cuepiko-app .cp-disclaimer{background:#020e1b;color:#829eb8;font-size:9px;padding:8px}
#cuepiko-app .cp-profile-banner{padding-bottom:14px;margin:0 0 5px;min-height:155px}
#cuepiko-app .cp-profile-banner:before{top:-18px;right:-18px;width:calc(100% + 36px);height:190px;background:linear-gradient(90deg,#031427 4%,#03142766 55%,#03142700),url('/assets/profile-scene.svg') right -48px / auto 190px no-repeat;opacity:1;mask-image:linear-gradient(#000 70%,transparent)}
#cuepiko-app .cp-profile-person{gap:12px;flex-wrap:nowrap;margin-top:19px;align-items:center}
#cuepiko-app .cp-avatar{width:76px;height:76px;background:#3dc9ff;border:1px solid #79ddff;padding:3px;box-shadow:0 0 0 1px #0a5378,0 4px 15px #0004}
#cuepiko-app .cp-person-name{min-width:0}
#cuepiko-app .cp-person-name h3{font-size:23px;line-height:1.2;overflow-wrap:anywhere;margin:0 0 6px}
#cuepiko-app .cp-person-name small{font-size:10px}
#cuepiko-app .cp-edit{font-size:11px;padding:8px;min-height:36px;background:#05264a99;border-color:#4681b3;white-space:nowrap}
#cuepiko-app .cp-section-title{font-size:16px;gap:9px;margin-bottom:12px}
#cuepiko-app .cp-section-title .cp-icon{color:#1fc9ff;width:22px;height:22px;stroke-width:2}
#cuepiko-app .cp-stats{margin-top:15px}
#cuepiko-app .cp-stats b{font-size:20px;line-height:1.4;letter-spacing:-.4px}
#cuepiko-app .cp-stats small{font-size:11px}
#cuepiko-app .cp-stats .cp-icon{width:25px;height:25px;margin-bottom:3px;fill:#00adf033;stroke:#25beff}
#cuepiko-app .cp-stats>div:nth-child(2) .cp-icon{fill:#ffa76c;stroke:#ffbf88}
#cuepiko-app .cp-meter{height:12px;border:1px solid #35608a;background:#0b2e52;border-radius:9px}
#cuepiko-app .cp-meter span{background:linear-gradient(90deg,#31d4fd,#09a0f3)}
#cuepiko-app .cp-skill-empty{background:linear-gradient(115deg,#07365399,#09254199);border-color:#17466c;padding:12px}
#cuepiko-app .cp-skill-empty>.cp-icon{width:43px;height:43px;flex-shrink:0}
#cuepiko-app .cp-ranking b{font-size:13px}
#cuepiko-app .cp-ranking small{font-size:11px;line-height:1.5}
#cuepiko-app .cp-badges{margin-top:14px;gap:7px}
#cuepiko-app .cp-medallion{width:66px;height:72px;border:0;border-radius:0;clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%);background:linear-gradient(145deg,#78e6ff,#008bdb 45%,#42ceff);padding:5px;position:relative;isolation:isolate;box-shadow:none}
#cuepiko-app .cp-medallion:before{content:'';position:absolute;inset:5px;z-index:-1;clip-path:inherit;background:radial-gradient(circle at 40% 25%,#075883,#032848 75%)}
#cuepiko-app .cp-medallion .cp-icon{width:34px;height:34px;fill:#15b4f080;stroke:#2ec9ff;stroke-width:2}
#cuepiko-app .cp-badges>div:nth-child(2) .cp-medallion{clip-path:none;border-radius:50%;height:66px;margin-top:3px;margin-bottom:11px;background:repeating-conic-gradient(#58d5ff 0deg 12deg,#078dca 12deg 24deg);border:3px solid #3cbced}
#cuepiko-app .cp-badges>div:nth-child(2) .cp-medallion:before{border-radius:50%;inset:3px}
#cuepiko-app .cp-hundred{font-size:23px;color:#e7f5ff;letter-spacing:-1px}
#cuepiko-app .cp-badges>div:not(.is-unlocked){opacity:.55}
#cuepiko-app .cp-badges b{font-size:10px}
#cuepiko-app .cp-badges small{font-size:9px}
#cuepiko-app .cp-privacy-row{border-color:#174268;min-height:51px;font-size:12px}
#cuepiko-app .cp-privacy-options{border-color:#23618c;border-radius:9px}
#cuepiko-app .cp-privacy-options button[aria-pressed=true]{background:linear-gradient(120deg,#06afff,#0078fa);color:#fff}
#cuepiko-app .cp-privacy-options button{padding:8px;font-size:11px}
#cuepiko-app input.cp-switch{background:#314b70;border:1px solid #6c83a5;width:37px;height:23px;box-shadow:inset 0 2px 4px #0003}
#cuepiko-app input.cp-switch:checked{background:#008aff}
#cuepiko-app .cp-profile-editor{font-size:11px}
#cuepiko-app .cp-page-heading{display:flex;align-items:center;gap:9px;font-size:23px}
#cuepiko-app .cp-page-heading .cp-icon{color:#8bddff;width:26px;height:26px}
#cuepiko-app canvas{border:1px solid #475969;border-radius:14px;background:#041426;height:380px;margin:15px 0}
#cuepiko-app .cp-camera-top{background:linear-gradient(#020f24e8,#020f2499,transparent);padding-top:max(15px,env(safe-area-inset-top))}
#cuepiko-app .cp-camera-brand{font-weight:800;letter-spacing:-.8px;font-size:23px}
#cuepiko-app .cp-camera-brand:before{content:'';display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:7px;background:url('/assets/logo-mark.svg') center / contain no-repeat}
#cuepiko-app .cp-camera-brand small{font-size:10px;letter-spacing:0;margin-top:3px}
#cuepiko-app .cp-camera-sheet{background:linear-gradient(125deg,#061e32f5,#031324fa);border:1px solid #365d78;box-shadow:0 -5px 20px #00112055;border-radius:17px 17px 0 0}
#cuepiko-app .cp-marker-choices button{border:1px solid #3d6680;border-radius:10px;background:linear-gradient(130deg,#0b2e47,#061a2c);color:#f3f8ff}
#cuepiko-app .cp-marker-choices button[aria-pressed=true]{border-color:#99e4ff;box-shadow:inset 0 0 0 1px #54cdff44}
#cuepiko-app .cp-dot-white{background:radial-gradient(circle at 30% 25%,#fff,#eef1eb 50%,#7d8e99);box-shadow:1px 3px 5px #0009}
#cuepiko-app .cp-dot-yellow{background:radial-gradient(circle at 30% 25%,#fff296,#ffc400 50%,#956200);box-shadow:1px 3px 5px #0009}
#cuepiko-app .cp-guide-unavailable{background:#092c4766;border-radius:9px;padding:9px 11px}
#cuepiko-app .cp-welcome{padding-top:13px}
#cuepiko-app .cp-welcome .cp-table-art{transform:perspective(650px) rotateX(17deg) rotateZ(-7deg);width:87%;height:auto;max-height:205px}
@media(max-width:460px){#cuepiko-app header{padding:15px 16px 12px}#cuepiko-app main{padding:17px 15px}#cuepiko-app .cp-brand-mark{width:36px;height:36px}#cuepiko-app .cp-logo{font-size:25px}#cuepiko-app h1{font-size:25px}#cuepiko-app .cp-profile-banner:before{right:-15px;width:calc(100% + 30px)}#cuepiko-app .cp-card{padding:14px}#cuepiko-app .cp-access-hero{padding:12px 10px}#cuepiko-app .cp-stats b{font-size:18px}}
@media(max-width:350px){#cuepiko-app .cp-person-name h3{font-size:18px}#cuepiko-app .cp-avatar{width:57px;height:57px}#cuepiko-app .cp-profile-person{gap:8px}#cuepiko-app .cp-edit{margin-left:0;padding:7px;font-size:10px}#cuepiko-app .cp-person-name .cp-pill{font-size:8px}#cuepiko-app .cp-access-hero h3{font-size:15px}#cuepiko-app .cp-access-hero p{font-size:11px}#cuepiko-app .cp-privacy-row{flex-wrap:wrap}#cuepiko-app .cp-camera-brand{font-size:20px}#cuepiko-app .cp-camera-brand:before{width:26px;height:26px}}