/* ColorOS spacing adapted to portrait UI. Unmodified official OPPO Sans 4.0; license bundled. */
@font-face{font-family:CP-OPPOSans;src:url('assets/fonts/OPPO Sans 4.0.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--cp-ui-font:CP-OPPOSans,'PingFang SC','Microsoft YaHei',Arial,sans-serif}
body,button,textarea,input,select,dialog,dialog h2{font-family:var(--cp-ui-font)}
dialog h2{font-weight:550;line-height:1.35;letter-spacing:0}
.app .alternate-copy strong{font-family:var(--cp-ui-font);font-size:21px;line-height:1.4}
.app .alternate-copy small{font-size:14px;line-height:1.5}
.app .alternate-copy em{font-size:14px;line-height:1.6}
.app .page{padding:24px 20px}.app .proposal{padding:24px 20px}
.app .proposal p{font-size:15px;line-height:1.6;margin-top:16px}
.app .sim{font-size:10px;line-height:1.5;white-space:normal;padding:5px 8px}
.font-notice{font-size:12px;color:var(--muted);margin-top:24px;line-height:1.6}
.font-notice a{color:inherit;text-decoration:underline}
.app,.app button,.app textarea,.app select,.app input{font-family:var(--cp-ui-font);letter-spacing:.01em}
.app .splash p{font-family:var(--cp-ui-font);letter-spacing:0}
.app .title,.app h1,.app h2,.app h3,.app .photo-proposal h2,.app .idea-copy h2,.app .idea-pitch,.app .favorites-empty h2{font-family:var(--cp-ui-font)!important;font-weight:500;letter-spacing:0}
.app p,.app .sub{line-height:1.6}
.app .title{line-height:1.32}.app .photo-proposal h2{line-height:1.45}.app .idea-pitch{line-height:1.45}
.bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:2px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex-shrink:0;position:relative;z-index:3}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;padding:4px 2px;border-radius:13px;color:var(--muted);font-size:10px;line-height:1.25;white-space:nowrap}
.nav-item .cp-icon{width:20px;height:20px;stroke-width:1.6}.nav-item[aria-current=page]{background:var(--raised);color:var(--ink);font-weight:500}.nav-item:active{transform:scale(.97)}
.album-page .title,.messages-page .title{margin-bottom:8px}.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.album-item{position:relative;padding:0;min-height:170px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--panel);text-align:left}.album-item img{height:170px}.album-item span{position:absolute;left:9px;right:9px;bottom:9px;padding:6px 8px;border-radius:8px;background:#111b;color:#fff;font-size:11px}.album-item.selected{border-color:var(--focus);box-shadow:inset 0 0 0 2px var(--focus)}.album-status{margin-top:16px}.messages-page{padding-bottom:24px}.message-card{display:flex;align-items:center;gap:10px;padding:14px;margin-top:13px;background:var(--panel);border:1px solid var(--line);border-radius:13px}.message-card .mascot{width:48px;height:44px}.message-card strong{font-size:13px}.message-card p{font-size:12px;color:var(--muted);margin:3px 0}.message-card small{font-size:10px;color:var(--muted)}
.album-create-cta{width:100%;min-height:46px;margin-top:18px;padding:10px 16px;border-radius:8px;background:var(--action);color:var(--on-action);font-size:14px;text-align:center}.album-hint{margin-top:18px;font-size:12px}
.resume-card{display:flex;align-items:stretch;gap:16px;margin:20px 0;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
.resume-card>img{width:32%;min-width:85px;object-fit:cover}
.resume-copy{flex:1;min-width:0;padding:18px 16px 14px 0}
.resume-copy small{font-size:14px;color:var(--muted)}
.app .resume-copy h2{font-size:21px;line-height:1.4;margin:8px 0;overflow-wrap:anywhere}
.resume-copy p{font-size:12px;color:var(--muted);line-height:1.6}
.resume-action{font-size:14px;min-height:44px;padding:10px 0;text-align:left;margin-top:8px}
/* Fixed footer content stays above the safe area and does not cover scroll content. */
.app>.sim{order:5}.app>footer{order:4}
@media(max-width:380px){.nav-item{font-size:9px}.album-grid{gap:8px}.album-item,.album-item img{height:150px;min-height:150px}}