/* Existing generated panel/scorecard/button PNGs provide all visual skins. */
.records-mode .app{min-height:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.records-mode main{overflow:hidden}.tr-screen{width:100%;max-width:1180px;height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;padding:12px 0;font-size:14px}
.tr-heading{display:flex;align-items:center;gap:14px;flex-shrink:0}.tr-heading>div{flex:1;min-width:0}.tr-heading h2{font-family:'Courier New',monospace;font-size:clamp(20px,2.6vw,32px);margin:3px 0;overflow-wrap:anywhere;line-height:1.15}.tr-heading p{font-size:12px;line-height:1.4;margin:4px 0 0;overflow-wrap:anywhere}.tr-heading .back{flex-shrink:0}.tr-heading .eyebrow{font-size:10px}
.tr-screen button{font-weight:bold}.tr-screen .back{min-height:44px;font-size:11px;white-space:normal}.tr-screen .primary{min-height:44px;font-size:12px;letter-spacing:.5px}.tr-screen label{display:block;font-size:11px;font-weight:bold;margin:0 0 6px}.tr-screen input{height:46px;font-size:16px;min-width:0}.tr-screen input::placeholder{font-size:13px}
.tr-panel,.tr-pupil-card,.tr-skill-card{background:none;border:18px solid transparent;border-image:url('assets/panel.png') 50 fill / 18px / 0 stretch;border-radius:0;box-shadow:none;padding:10px;min-width:0;color:#263e32}
.tr-screen h3{margin:0 0 12px;font-size:18px}.tr-panel p{line-height:1.55}.tr-scroll{overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding:8px;padding:4px;touch-action:pan-y}
.tr-login{align-self:center;margin:auto 0;width:min(480px,100%);display:flex;gap:24px;align-items:center}.tr-login form{min-width:0;flex:1}.tr-login label:not(:first-child){margin-top:16px}.tr-passport{width:82px;height:105px;object-fit:contain;image-rendering:pixelated}
.tr-feedback{min-height:36px;font-size:12px;line-height:1.5;margin:10px 0;overflow-wrap:anywhere}.tr-feedback.error{color:#963c30}.tr-feedback.success{color:#286239}
.tr-class-layout{display:grid;grid-template-columns:310px 1fr;gap:20px;flex:1;min-height:0}.tr-register{align-self:start}.tr-register h3{margin-bottom:20px}.tr-class-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}.tr-class-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:110px;text-align:left;overflow-wrap:anywhere}.tr-class-card img{height:36px;width:32px;object-fit:contain}.tr-class-card span{flex:1;font-size:15px}.tr-class-card small{width:100%;font-size:10px}.tr-empty{grid-column:1/-1;text-align:center;align-self:start}.tr-empty img{width:60px;height:65px;object-fit:contain}.tr-empty p{font-size:13px}.tr-empty h3{margin:14px 0 8px}
.tr-pupil-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;flex:1;align-content:start}.tr-pupil-card{border-image-source:url('assets/scorecard.png');border-width:12px;border-image-width:12px;padding:8px;min-height:88px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow-wrap:anywhere}.tr-pupil-card strong{font-size:14px;line-height:1.35}.tr-pupil-card span{font-size:11px;line-height:1.4;font-weight:normal}.tr-pupil-card small{font-size:9px;line-height:1.4}.tr-pupil-card:hover,.tr-class-card:hover{transform:translateY(-2px)}
.tr-pagination{display:flex;align-items:center;justify-content:center;gap:18px;flex-shrink:0}.tr-pagination span{text-align:center;font-size:12px}.tr-pagination small{display:block;font-size:10px;margin-top:4px}.tr-storage-note{font-size:10px;line-height:1.5;margin:0;flex-shrink:0;padding:0 3px;color:#263e32}
.tr-dashboard-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-shrink:0}.tr-dashboard-tools>span{margin-right:auto;font-size:10px;font-weight:bold}.tr-dashboard-tools button{display:flex;gap:6px;align-items:center}.tr-dashboard-tools img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.tr-skill-list{display:grid;grid-template-columns:1fr;gap:8px;align-content:start;flex:1}.tr-skill-card{border-image-source:url('assets/scorecard.png');border-width:12px;border-image-width:12px;padding:8px 12px;display:flex;align-items:center;gap:14px;min-height:76px}.tr-skill-card>img{width:40px;height:40px;object-fit:contain;flex-shrink:0}.tr-skill-card>div:nth-child(2){flex:1;min-width:0}.tr-skill-card h3{font-size:13px;margin:0 0 4px;letter-spacing:.7px}.tr-skill-card p{font-size:12px;margin:0;line-height:1.35}.tr-skill-card small{font-size:10px;line-height:1.4}.tr-skill-score{flex-shrink:0;text-align:right}.tr-skill-score>strong{font:700 26px 'Courier New',monospace;display:block}.tr-skill-score>strong small{font-size:15px}.tr-skill-score>span{display:block;font-size:10px;margin-top:4px}
.records-mode dialog .close{font-size:11px}.records-mode dialog .modal-title{font-size:23px;line-height:1.2}.records-mode dialog input{font-size:16px;height:46px}.records-mode dialog .modal-buttons button{min-height:44px;white-space:normal}.records-mode dialog .tr-feedback{font-size:12px}
@media(max-width:1050px){.tr-pupil-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tr-class-layout{grid-template-columns:260px 1fr}.tr-class-list{grid-template-columns:1fr}.tr-screen{gap:12px}}
@media(max-width:700px){.records-mode .app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.tr-screen{gap:10px;padding:4px 0}.tr-heading{gap:8px;flex-wrap:wrap}.tr-heading>div{order:3;flex-basis:100%}.tr-heading #tr-logout{margin-left:auto}.tr-heading h2{font-size:23px;margin:2px 0}.tr-heading p{font-size:11px;margin:3px 0 0}.tr-heading .eyebrow{font-size:9px}.tr-heading .back{padding:0 5px;border-width:9px;border-image-width:9px;min-height:44px}.tr-login{gap:12px;padding:8px;border-width:14px;border-image-width:14px}.tr-passport{width:46px;height:65px}.tr-class-layout{display:flex;flex-direction:column;gap:10px}.tr-register{width:100%;padding:6px;border-width:12px;border-image-width:12px}.tr-register h3{font-size:17px;margin-bottom:10px}.tr-class-list{flex:1;grid-template-columns:1fr}.tr-class-card{min-height:88px;border-width:12px;border-image-width:12px;padding:6px}.tr-class-card small{font-size:10px}.tr-pupil-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tr-pupil-card{min-height:100px;padding:6px}.tr-pupil-card strong{font-size:13px}.tr-pupil-card span{font-size:10px}.tr-pagination{gap:10px}.tr-pagination .back{min-height:44px}.tr-storage-note{font-size:9px;line-height:1.4}.tr-dashboard-tools{gap:8px;flex-wrap:wrap}.tr-dashboard-tools>span{width:100%}.tr-dashboard-tools button{flex:1;justify-content:center;font-size:10px!important;padding:0 3px;border-width:8px;border-image-width:8px}.tr-dashboard-tools img{width:22px;height:22px}.tr-skill-card{gap:8px;padding:8px;border-width:10px;border-image-width:10px;min-height:85px}.tr-skill-card>img{width:30px;height:30px}.tr-skill-card h3{font-size:11px;letter-spacing:0}.tr-skill-card p{font-size:10px}.tr-skill-card small{font-size:9px}.tr-skill-score>strong{font-size:23px}.tr-skill-score>strong small{font-size:12px}.tr-skill-score>span{font-size:8px;max-width:82px}.tr-skill-list{gap:6px}}
@media(max-height:600px) and (min-width:600px){.records-mode header{height:44px}.records-mode footer{height:24px}.tr-screen{padding:2px 0;gap:7px}.tr-heading>div{order:0;flex-basis:auto}.tr-heading{flex-wrap:nowrap}.tr-heading h2{font-size:21px}.tr-heading .eyebrow{font-size:8px}.tr-heading p{font-size:10px}.tr-login{padding:4px 10px;border-width:12px;border-image-width:12px;width:min(600px,100%);gap:14px}.tr-login form{display:grid;grid-template-columns:90px 1fr;gap:7px;align-items:center}.tr-login label:not(:first-child){margin:0}.tr-login .tr-feedback{grid-column:1/-1;margin:0;min-height:18px;font-size:11px}.tr-login .primary{grid-column:1/-1}.tr-login label{margin:0}.tr-class-layout{display:grid;grid-template-columns:280px 1fr;gap:10px}.tr-register h3{margin-bottom:8px;font-size:16px}.tr-register{border-width:12px;border-image-width:12px;padding:6px}.tr-register .tr-feedback{font-size:11px;min-height:32px;margin:7px 0}.tr-class-list{grid-template-columns:1fr}.tr-pupil-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tr-pupil-card{min-height:87px;padding:5px}.tr-dashboard-tools>span{width:auto}.tr-dashboard-tools button{flex:initial}.tr-skill-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-skill-card{padding:6px;gap:8px;min-height:80px}.tr-skill-card h3{font-size:11px}.tr-skill-card p{font-size:10px}.tr-skill-card>img{width:28px;height:28px}.tr-skill-score>span{font-size:8px}.tr-skill-score>strong{font-size:23px}.tr-storage-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){.tr-screen button{transition:none}.tr-pupil-card:hover,.tr-class-card:hover{transform:none}}
.tr-storage-note{background:none;border:8px solid transparent;border-image:url('assets/panel.png') 50 fill / 8px / 0 stretch;padding:0 4px}
@media(max-width:700px) and (max-height:700px){
 .tr-heading h2{font-size:20px}.tr-heading .eyebrow{font-size:8px}.tr-screen{gap:8px}
 .tr-register{display:grid;grid-template-columns:minmax(0,1fr) 116px;column-gap:7px;row-gap:5px}
 .tr-register h3{grid-column:1/-1;margin:0 0 3px;font-size:16px}.tr-register label{grid-column:1/-1;margin:0}
 .tr-register input{grid-column:1;height:46px}.tr-register .primary{grid-column:2;grid-row:3;font-size:10px;height:46px;border-width:8px;border-image-width:8px;padding:0 3px;letter-spacing:0}
 .tr-register .tr-feedback{grid-column:1/-1;grid-row:4;margin:0;min-height:30px;font-size:11px}
 .tr-class-layout{gap:8px}.tr-class-card{min-height:90px}.tr-storage-note{font-size:9px}
 .tr-login .tr-passport{display:none}.tr-login{padding:8px 12px}.tr-login label:not(:first-child){margin-top:10px}
}
.records-mode dialog .modal-buttons{align-items:stretch;margin-top:12px}
.records-mode dialog .modal-buttons button{border-width:8px;border-image-width:8px;padding:0 5px;min-height:44px;height:auto;margin:0;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1.25}
.records-mode #tr-delete-feedback:empty{display:none}
@media(max-height:600px) and (min-width:600px){
 .records-mode dialog{width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 16px);border-width:14px;border-image-width:14px;padding:4px 10px}
 .records-mode dialog .modal-title{font-size:20px;margin:6px 0;line-height:1.15}
 .records-mode dialog .modal-copy{font-size:11px;line-height:1.4;margin:6px 0}
 .records-mode dialog .modal-form label{margin:6px 0 4px}
 .records-mode dialog .tr-feedback{min-height:18px;margin:6px 0;font-size:11px;line-height:1.4}
 .records-mode dialog .modal-buttons{margin-top:8px}
 .records-mode dialog .modal-top{min-height:40px}
}