:root{--ph-bg:#f6f7f9;--ph-card:#fff;--ph-text:#1b1f27;--ph-muted:#6a7384;--ph-line:#dde1e8;--ph-primary:#1f6feb;--ph-primary-text:#fff;--ph-danger:#d13b3b;--ph-accent:#d98a00;--ph-on:#e7f0ff;--ph-warn-bg:#fff4d6}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ph-bg:#11151c;--ph-card:#1b212c;--ph-text:#eef1f6;--ph-muted:#9aa4b5;--ph-line:#2c3444;--ph-primary:#4c8dff;--ph-on:#1e3354;--ph-accent:#f5b83d;--ph-warn-bg:#3a3014}}:root[data-theme=dark]{--ph-bg:#11151c;--ph-card:#1b212c;--ph-text:#eef1f6;--ph-muted:#9aa4b5;--ph-line:#2c3444;--ph-primary:#4c8dff;--ph-on:#1e3354;--ph-accent:#f5b83d;--ph-warn-bg:#3a3014}body{background:var(--ph-bg);color:var(--ph-text)}.ph-page{flex-direction:column;gap:12px;max-width:560px;margin:0 auto;padding:12px 16px 40px;display:flex}.ph-center{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:60vh;display:flex}.ph-page h1{margin:24px 0 0;font-size:26px}.ph-page h2{margin:8px 0 0;font-size:20px}.ph-panel h3{color:var(--ph-muted);margin:18px 0 8px;font-size:14px;font-weight:600}.ph-header{border-bottom:1px solid var(--ph-line);align-items:center;gap:12px;padding-bottom:8px;display:flex}.ph-title{color:inherit;font-weight:700;text-decoration:none}.ph-user{color:var(--ph-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.ph-btn{border:1px solid var(--ph-line);background:var(--ph-card);min-height:44px;color:var(--ph-text);font:inherit;cursor:pointer;border-radius:10px;justify-content:center;align-items:center;padding:0 18px;font-weight:600;text-decoration:none;display:inline-flex}.ph-btn.primary{background:var(--ph-primary);border-color:var(--ph-primary);color:var(--ph-primary-text)}.ph-btn.danger{background:var(--ph-danger);border-color:var(--ph-danger);color:#fff}.ph-btn.big{flex:1;min-height:56px;font-size:18px}.ph-btn:disabled{opacity:.45;cursor:default}.ph-full{width:100%;margin-top:12px}.ph-link{color:var(--ph-primary);font:inherit;cursor:pointer;text-align:left;background:0 0;border:none;padding:8px 0;font-size:14px}.ph-row{gap:10px;display:flex}.ph-stack{flex-direction:column;gap:8px;display:flex}.ph-page input,.ph-select{border:1px solid var(--ph-line);background:var(--ph-card);min-height:44px;color:var(--ph-text);font:inherit;border-radius:10px;padding:0 12px;font-size:16px}.ph-select{width:100%}.ph-or{text-align:center;color:var(--ph-muted);font-size:13px}.ph-note{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:10px;margin:0;padding:10px 12px;font-size:14px}.ph-muted{color:var(--ph-muted)}.ph-error{color:var(--ph-danger);margin:0}.ph-warn{background:var(--ph-warn-bg);border-radius:10px;margin:0;padding:10px 12px;font-weight:600}.ph-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.ph-session{border:1px solid var(--ph-line);background:var(--ph-card);width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:12px;display:flex}.ph-session:disabled{cursor:default}.ph-session-time{font-variant-numeric:tabular-nums;color:var(--ph-muted);white-space:nowrap;font-size:14px}.ph-session-name{flex-direction:column;flex:1;font-weight:600;display:flex}.ph-session-name small{color:var(--ph-muted);font-weight:400}.ph-badge{background:var(--ph-line);white-space:nowrap;border-radius:999px;padding:3px 8px;font-size:12px}.ph-badge.live{color:#fff;background:#1f9d55}.ph-badge.cancelled{background:var(--ph-danger);color:#fff}.ph-cancelled .ph-session{opacity:.55}.ph-session-name small.ph-autonote{color:var(--ph-accent);font-size:12px}.ph-inline-form{flex-wrap:wrap;gap:8px;display:flex}.ph-inline-form input{flex:1;min-width:0}.ph-code{letter-spacing:.15em;text-align:center;font-variant-numeric:tabular-nums;color:var(--ph-accent);padding:16px 0;font-size:72px;font-weight:800}.ph-remote-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.ph-remote-head div{flex-direction:column;display:flex}.ph-remote-head small{color:var(--ph-muted)}.ph-tabs{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:12px;padding:4px;display:flex}.ph-tabs button{min-height:44px;color:var(--ph-muted);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;font-weight:600}.ph-tabs button.on{background:var(--ph-primary);color:var(--ph-primary-text)}.ph-bpm{justify-content:space-between;align-items:center;gap:6px;display:flex}.ph-bpm button{border:1px solid var(--ph-line);background:var(--ph-card);width:52px;height:52px;color:var(--ph-text);font:inherit;cursor:pointer;border-radius:50%;font-weight:700}.ph-bpm output{text-align:center;font-variant-numeric:tabular-nums;flex:1;font-size:52px;font-weight:800;line-height:1}.ph-bpm output small{color:var(--ph-muted);font-size:12px;font-weight:500;display:block}.ph-slider{width:100%;accent-color:var(--ph-primary);margin:14px 0}.ph-chips{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ph-chips>button,.ph-custom-meter{border:1px solid var(--ph-line);background:var(--ph-card);min-height:44px;color:var(--ph-text);font:inherit;cursor:pointer;border-radius:10px;padding:0 14px;font-weight:600}.ph-chips>button.on,.ph-custom-meter.on,.ph-a4.on{background:var(--ph-on);border-color:var(--ph-primary)}.ph-custom-meter{cursor:default;align-items:center;gap:6px;display:inline-flex}.ph-custom-meter button{border:1px solid var(--ph-line);width:32px;height:32px;color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:8px}.ph-custom-meter select{color:inherit;font:inherit;background:0 0;border:none;font-weight:700}.ph-a4{width:96px}.ph-accents{flex-wrap:wrap;gap:8px;display:flex}.ph-accents button{width:48px;height:48px;font:inherit;cursor:pointer;border:2px solid var(--ph-line);background:var(--ph-card);color:var(--ph-text);border-radius:50%;font-weight:700}.ph-accents .acc-2{background:var(--ph-accent);border-color:var(--ph-accent);color:#1a1204}.ph-accents .acc-0{opacity:.4;border-style:dashed}.ph-notes{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px;display:grid}.ph-notes.chromatic{grid-template-columns:repeat(4,1fr)}.ph-notes button{border:1px solid var(--ph-line);background:var(--ph-card);min-height:56px;color:var(--ph-text);font:inherit;cursor:pointer;border-radius:12px;font-weight:600}.ph-notes button.on{background:var(--ph-accent);border-color:var(--ph-accent);color:#1a1204}.ph-octave{color:var(--ph-muted);align-items:center;gap:10px;margin-top:10px;display:flex}.ph-octave button{border:1px solid var(--ph-line);background:var(--ph-card);width:40px;height:40px;color:var(--ph-text);font:inherit;cursor:pointer;border-radius:10px}.ph-octave strong{color:var(--ph-text);text-align:center;min-width:20px;font-size:20px}.ph-session-name small.ph-sub{color:var(--ph-accent);font-weight:600}.ph-tabs button{padding:0 2px;font-size:14px}.rc-box{flex-direction:column;gap:10px;display:flex}.rc-warn{font-size:14px}.rc-live{background:var(--ph-danger);border-color:var(--ph-danger);color:#fff;animation:1.4s ease-in-out infinite rc-pulse}.rc-time{font-variant-numeric:tabular-nums;margin-left:10px}@keyframes rc-pulse{50%{opacity:.75}}.rc-audio{width:100%}.rc-player{border:1px solid var(--ph-line);background:var(--ph-card);border-radius:12px;margin-top:14px;padding:12px}.rc-title{font-weight:700}.rc-times{color:var(--ph-muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:10px;font-size:13px;display:flex}.rc-ab{color:var(--ph-accent);font-weight:700}.nt-prev{white-space:pre-wrap}.nt-status{margin-left:6px;font-weight:400}.nt-text{border:1px solid var(--ph-line);background:var(--ph-card);width:100%;color:var(--ph-text);font:inherit;resize:vertical;border-radius:10px;padding:10px 12px;font-size:16px}.ph-rhythm{background:#fff;border-radius:10px;margin-top:8px;padding:6px}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{-webkit-text-size-adjust:100%;font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif}