:root{--ui-font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;--ui-primary:#0e4282;--ui-bg:#f6f8fc;--ui-gutter:16px;--ui-radius:20px;--ui-header:94px}
html,body{font-family:var(--ui-font)!important;background:var(--ui-bg);color:#0f172a;margin:0}
button,input,select,textarea,.font-mono,.num-tabular{font-family:var(--ui-font)!important}
.font-mono,.num-tabular{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}button,a,input{touch-action:manipulation}button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
#app-header{position:fixed;inset:0 0 auto;z-index:40;height:94px;background:rgba(246,248,252,.95);backdrop-filter:blur(18px)}
.ui-status{height:50px;padding:0 24px 8px;display:flex;align-items:end;justify-content:space-between;font-size:13px;box-sizing:border-box;font-variant-numeric:tabular-nums}
.ui-titlebar{height:44px;padding:0 16px;display:flex;align-items:center;gap:8px}
.ui-titlebar h1{font-size:17px;font-weight:600;margin:0;line-height:24px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;letter-spacing:0}
.ui-back{border:0;background:transparent;width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;margin-left:-8px}
.ui-capsule{width:88px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:space-evenly;background:#fff;border:1px solid #e2e8f0;border-radius:99px;font-size:18px}
.ui-capsule i{height:14px;border-left:1px solid #e2e8f0}.ui-capsule svg{width:20px;height:20px}
body>main{padding-top:106px!important}body:has(#app-nav)>main{padding-bottom:120px!important}
#app-nav{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:16px;right:16px;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-radius:28px;padding:6px;box-shadow:0 8px 28px #0e428222}
#app-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:20px;font-size:11px;color:#55657e;text-decoration:none}#app-nav a[aria-current]{background:var(--ui-primary);color:white}#app-nav .material-symbols-outlined{font-size:20px}
body[data-page="p01_2"] main button,body[data-page="p07"] main button,body[data-page="p14"] main button{min-height:44px}
.ui-periods{display:flex;gap:4px;padding:4px;border-radius:12px;background:#eaeff8;flex-wrap:wrap}
.ui-periods button,.ui-filters button{min-height:44px!important;border:0;border-radius:10px;padding:8px 10px;font-size:13px;line-height:20px;color:#55657e;background:transparent;flex:1;white-space:nowrap}
.ui-periods button[aria-pressed="true"],.ui-filters button[aria-pressed="true"]{background:var(--ui-primary)!important;color:white!important;font-weight:600}
.ui-filters button{flex:none;background:white}.ui-filters{overflow-x:auto;display:flex;gap:8px}
.ui-empty{padding:24px 16px;text-align:center;background:white;border-radius:20px;color:#64748b;font-size:14px;line-height:24px}
.ui-period-note{font-size:12px;color:#64748b;margin:8px 0;line-height:20px}
.ui-dialog{border:0;border-radius:20px;padding:20px;width:calc(100% - 32px);max-width:380px;max-height:calc(100dvh - 32px);overflow:auto;background:white;color:#0f172a;box-sizing:border-box}
.ui-dialog::backdrop{background:#0f172a66;backdrop-filter:blur(3px)}.ui-dialog h2{font-size:19px;margin:0 0 16px}.ui-dialog label{display:block;font-size:14px;margin:12px 0}.ui-dialog input{display:block;width:100%;margin-top:6px;padding:10px;min-height:44px;border:1px solid #cbd5e1;border-radius:10px;box-sizing:border-box}.ui-actions{display:flex;gap:12px;margin-top:20px}.ui-actions button{flex:1;min-height:50px;border-radius:12px;border:0;background:#eaeff8;color:#0e4282}.ui-actions button[type="submit"]{background:#0e4282;color:white}.ui-error{color:#b22218;font-size:13px}.ui-toast{position:fixed;bottom:110px;left:24px;right:24px;background:#0f172a;color:white;padding:12px 16px;border-radius:12px;z-index:100;font-size:14px;line-height:22px}
#rating-modal{overflow:auto;max-height:100dvh}#rating-modal>div{max-height:calc(100dvh - 32px);overflow:auto}body[data-page="p14"] main>div>div:first-child{flex-wrap:wrap;gap:8px}
body[data-page="p01_2"] .ui-summary-heading{flex-wrap:wrap;gap:12px}.ui-summary-heading>.ui-periods{width:100%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Common rhythm, scoped to reviewed samples. */
body[data-page="p01_2"] main section{margin-bottom:24px}
body[data-page="p14"] main .rounded-\[20px\].p-\[20px\]{padding:16px}
body[data-page="p14"] main .mb-\[18px\]{margin-bottom:24px}
body[data-page="p07"] main .space-y-\[18px\]>:not([hidden])~:not([hidden]){margin-top:12px}
body[data-page="p14"] main .flex.items-start.justify-between>.flex.items-center{min-width:0;flex:1}
body[data-page="p14"] main .flex.items-start.justify-between>.flex.items-center>.min-w-0{flex:1}
.ui-profile-link{max-width:160px;min-width:0}.ui-profile-link>.material-symbols-outlined{flex-shrink:0}.ui-nickname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-name-row{min-width:0}.ui-name-row>.ui-nickname{flex:1}.ui-name-row>span:not(.ui-nickname){flex-shrink:0;white-space:nowrap}.ui-identity,.ui-person-row{min-width:0;flex:1}.ui-person-row+span{flex-shrink:0;white-space:nowrap;margin-left:8px}
.ui-name-row>.ui-nickname{flex:0 1 auto}.ui-profile-link>:first-child{flex-shrink:0}