.app-shell :is(.app-drawer,.photo-dialog){
  --panel-body:1rem;--panel-small:.875rem;--panel-section:1.125rem;--panel-title:1.375rem;
  --muted:#52645a;--danger:#97452e;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--panel-body);line-height:1.65;
}
.app-shell .app-actions button{font-size:1rem;line-height:1.4;min-height:48px;gap:7px}
.app-shell .app-actions svg{width:22px;height:22px;flex-shrink:0}
.app-shell :is(.drawer-header,.photo-header){padding:12px 20px;gap:16px}
.app-shell :is(.drawer-header h2,.photo-header h2){font-size:var(--panel-title);font-weight:650;line-height:1.35;letter-spacing:0}
.app-shell :is(.drawer-close,.photo-icon-button){width:44px;height:44px;min-width:44px;flex-shrink:0}
.app-shell :is(.drawer-scroll,.photo-scroll){padding:20px 20px max(24px,env(safe-area-inset-bottom));scroll-padding-block:16px}
.app-shell :is(.app-drawer,.photo-dialog) :is(p,li,label,summary,td,th){font-size:var(--panel-body);line-height:1.65;overflow-wrap:break-word}
.app-shell :is(.app-drawer,.photo-dialog) :is(button,select,input:not([type=checkbox]):not([type=range])){font-size:var(--panel-body);line-height:1.5;min-height:44px}
.app-shell :is(.app-drawer,.photo-dialog) :is(select,input:not([type=checkbox]):not([type=range])){padding:10px 12px;max-width:100%;min-width:0;border-radius:10px}
.app-shell :is(.app-drawer,.photo-dialog) input[type=range]{height:44px;min-height:44px;margin-block:6px;touch-action:pan-y}
.app-shell :is(.app-drawer,.photo-dialog) input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:var(--green)}
.app-shell :is(.app-drawer,.photo-dialog) :is(h3,h4,.section-top h2){font-size:var(--panel-section);line-height:1.4;font-weight:650}
.app-shell :is(.app-drawer,.photo-dialog) :is(.muted,.small-note,.photo-hint,.photo-field,.photo-notices,.photo-notice,.photo-error,.photo-validation,.photo-review-warning,.photo-candidate-warning,.adaptive-status,.audio-path,.source-details,.source-details p,.source-details li,.source-details a,.graph-bottom,.graph-legend,.metrics span,.metrics small,.score-breakdown span,.score-breakdown small){font-size:var(--panel-small);line-height:1.65}
.app-shell :is(.app-drawer,.photo-dialog) :is(.overline,.tiny-label,.photo-eyebrow){font-size:.75rem;line-height:1.5;letter-spacing:1.1px}
.app-shell .drawer-scroll .card{padding:20px;margin-bottom:20px;border-radius:16px}
.app-shell .drawer-scroll .settings-card{padding:0}
.app-shell .drawer-scroll :is(.text-button,.recording-import,.source-details a){min-height:44px;padding-block:10px;line-height:1.5}
.app-shell .drawer-scroll .source-details a{display:inline-flex;align-items:center;margin-right:12px}
.app-shell .drawer-scroll .bank-heading{display:block;padding:16px;margin:16px 0;background:var(--green-light);border-radius:12px}
.app-shell .bank-heading label{display:grid;grid-template-columns:1fr;gap:8px;white-space:normal;font-size:var(--panel-small);font-weight:600}
.app-shell .bank-heading select{width:100%;max-width:100%;background:var(--paper);font-size:var(--panel-body)}
.app-shell .drawer-scroll .bank-heading>div{font-size:var(--panel-small);line-height:1.6;margin-top:10px}
.app-shell .drawer-scroll .bank-heading b{font-size:var(--panel-small);line-height:1.6}
.app-shell .drawer-scroll .exercise-tabs{gap:10px;margin:20px 0}
.app-shell .drawer-scroll .exercise-tab{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding:14px 16px;font-size:var(--panel-body);line-height:1.55;color:var(--ink);border:1px solid var(--line);border-radius:12px}
.app-shell .drawer-scroll .exercise-tab>span{font-size:var(--panel-small);line-height:1.75;min-width:24px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.app-shell .drawer-scroll .exercise-tab.selected{border-color:var(--green);background:var(--green-light);color:var(--green);font-weight:600;box-shadow:inset 3px 0 var(--green)}
.app-shell .photo-library-entry{padding:16px;gap:12px;min-height:80px}
.app-shell .photo-library-entry strong{font-size:var(--panel-body);line-height:1.5}
.app-shell .photo-library-entry small{font-size:var(--panel-small);line-height:1.6;color:var(--muted)}
.app-shell .settings-card :is(.setting-row,.check-label){gap:12px;min-height:56px;padding-block:14px}
.app-shell .settings-card .setting-row{align-items:flex-start;flex-wrap:wrap}
.app-shell .settings-card .setting-row>span{flex:1 0 120px}
.app-shell .settings-card .setting-row select{flex:1 1 210px;width:auto}
.app-shell .settings-card :is(.setting-column,.cue-volume-setting){margin-block:20px}
.app-shell .settings-card .tempo-header{margin-top:20px;gap:12px;align-items:baseline}
.app-shell .settings-card .tempo-header b{font-size:2rem;line-height:1.2}
.app-shell .settings-card :is(.range-labels,.tempo-header span,.cue-volume-heading output){font-size:var(--panel-small);font-variant-numeric:tabular-nums}
.app-shell .settings-card .check-label{display:flex;align-items:flex-start}
.app-shell .settings-card .check-label input{margin-top:3px}
.app-shell .settings-card details>summary{padding-block:12px;min-height:48px;font-weight:600}
.app-shell .settings-card :is(.setting-row,.setting-column,.tempo-header label,.range-labels){color:var(--muted)}
.app-shell .live-card :is(.status-badge,.current-note-label,.pitch-target,.target-frequency,.tuner-labels,.tuner-scale,.onset-row,.mic-level,.pitch-target-label){font-size:var(--panel-small);line-height:1.6}
.app-shell .live-card :is(.status-badge,.pitch-target,.tuner-labels,.tuner-scale,.onset-row,.mic-level) :is(span,b){font-size:var(--panel-small)}
.app-shell .live-card :is(#target-pitch,#cents-reading,#live-onset){font-size:var(--panel-body)}
.app-shell .live-card #current-pitch{font-size:2.5rem}
.app-shell .live-card :is(#note-octave,#level-db,#target-frequency){font-size:var(--panel-small)}
.app-shell #feedback-drawer .graph-legend{flex-direction:row;flex-wrap:wrap;gap:8px 16px}
.app-shell #feedback-drawer .section-top{gap:12px;flex-wrap:wrap}
.app-shell #feedback-drawer .graph-bottom{align-items:flex-start;flex-wrap:wrap;gap:8px}
.app-shell #feedback-drawer .score-hero{padding:18px;gap:20px;flex-wrap:wrap}
.app-shell #feedback-drawer .total-score-line>strong{font-size:3.5rem;line-height:1.1;letter-spacing:-1px}
.app-shell #feedback-drawer .score-hero-copy>strong{font-size:1.375rem;line-height:1.4}
.app-shell #feedback-drawer .metrics strong{font-size:1.75rem}
.app-shell #feedback-drawer :is(.metrics,.score-breakdown){gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.app-shell #feedback-drawer .score-breakdown b{font-size:1.125rem}
.app-shell #feedback-drawer :is(.result-summary,.score-hero-copy p){font-size:var(--panel-body);line-height:1.65}
.app-shell #feedback-drawer table{width:100%;table-layout:fixed}
.app-shell #feedback-drawer :is(th,td){padding:10px 6px;font-size:var(--panel-small);overflow-wrap:anywhere}
.app-shell #feedback-drawer .graph-empty{max-width:calc(100% - 36px);left:18px;padding:12px;white-space:normal}
.app-shell #feedback-drawer .graph-empty b{font-size:var(--panel-body)}
.app-shell #feedback-drawer .graph-empty>span:last-child{font-size:var(--panel-small)}
.app-shell .photo-steps{font-size:var(--panel-small);gap:12px;margin-bottom:24px}
.app-shell .photo-steps li{font-size:var(--panel-small);gap:6px;align-items:flex-start}
.app-shell .photo-steps li::before{font-size:var(--panel-small);line-height:1.65}
.app-shell .photo-dialog .photo-header .photo-eyebrow{font-size:.75rem}
.app-shell .photo-dialog .photo-button{min-height:48px;padding:12px 16px;font-size:var(--panel-body)}
.app-shell .photo-dialog :is(.photo-check,.photo-measure>header){font-size:var(--panel-body);line-height:1.65}
.app-shell .photo-dialog :is(.photo-note-index,.photo-audition-bar,.photo-crop-controls output){font-size:var(--panel-small)}
.app-shell .photo-dialog :is(.photo-source-link,.photo-listen,.photo-add-note){font-size:var(--panel-small)!important}
.app-shell .photo-dialog .photo-footer{padding:12px 20px max(16px,env(safe-area-inset-bottom))}
.app-shell .photo-dialog .photo-footer-info{flex-wrap:wrap;gap:0 12px;align-items:flex-start}
.app-shell .photo-dialog .photo-footer .photo-hint{font-size:var(--panel-small);line-height:1.6;flex-basis:220px}
.app-shell .photo-dialog .photo-notices{font-size:var(--panel-small);min-height:44px}
.app-shell .photo-dialog .photo-review-warning summary{min-height:44px}
@media(max-width:480px){
  .app-shell :is(.drawer-scroll,.photo-scroll){padding-inline:16px}
  .app-shell :is(.drawer-header,.photo-header){padding-inline:16px}
  .app-shell .drawer-scroll .card{padding:16px}
  .app-shell .drawer-scroll .settings-card{padding:0}
  .app-shell .settings-card .setting-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .app-shell .settings-card .setting-row select{width:100%}
  .app-shell .photo-steps li{flex-direction:column;gap:2px}
  .app-shell .photo-dialog .photo-footer{padding-inline:16px}
  .app-shell .photo-dialog .photo-crop-controls{gap:12px}
  .app-shell .photo-dialog .photo-note-row{grid-template-columns:24px repeat(2,minmax(0,1fr));gap:10px}
  .app-shell .photo-dialog .photo-note-row .photo-check{font-size:var(--panel-small);grid-column:2}
  .app-shell .photo-dialog .photo-note-remove{justify-self:end}
}
@media(max-width:359px){.app-shell .app-actions{gap:6px;padding-inline:10px}.app-shell .app-actions button{padding:8px 4px;gap:4px;font-size:.9375rem}.app-shell .app-actions svg{width:18px;height:18px}}
.app-shell .app-drawer :is(.tiny-label,#live-state,#current-hz,.tuner-label span){font-size:.875rem;line-height:1.5}
.app-shell #library-drawer :is(.source-details,.photo-library-entry),.app-shell #help-open{display:none}

.app-shell #feedback-drawer .result-summary{background:var(--site-soft);color:var(--site-ink);border-color:var(--site-line)}
.app-shell #feedback-drawer table{min-width:0;width:100%;table-layout:fixed;border-collapse:collapse}
.app-shell #feedback-drawer :is(th,td){padding:9px 3px;white-space:normal;overflow-wrap:anywhere;color:var(--site-ink);border-color:var(--site-line);font-size:13px;line-height:1.5}
.app-shell #feedback-drawer th{background:var(--site-raised)}
.app-shell #feedback-drawer :is(th,td):nth-child(1){width:20%}
.app-shell #feedback-drawer :is(th,td):nth-child(2){width:19%}
.app-shell #feedback-drawer :is(th,td):nth-child(3){width:17%}
.app-shell #feedback-drawer :is(th,td):nth-child(4){width:12%}
.app-shell #feedback-drawer :is(th,td):nth-child(5){width:32%}
.app-shell #feedback-drawer .note-result-tag{display:inline-block;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;background:var(--site-soft);color:var(--site-ink);padding:4px 6px;font-size:12px;line-height:1.5}