:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#202b29;background:#f5f7f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:80px;padding:0 6vw;display:flex;align-items:center;gap:24px;background:white;border-bottom:1px solid #e7ece9}.brand{font-weight:650;color:#2c6257;font-size:23px;display:flex;gap:15px;align-items:center}.brand span{font-size:17px;color:#202b29}header>span{flex:1}main{max-width:1180px;margin:60px auto;padding:0 32px}h1{font-size:32px;font-weight:600;letter-spacing:-1px;margin:12px 0}h2{font-size:19px;font-weight:600}.muted{color:#7a8681;line-height:1.7}.small{font-size:12px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;color:#2c6257}button{font:inherit;font-size:13px;border:1px solid #dfe6e2;border-radius:9px;background:white;color:#3b4d46;padding:11px 17px;cursor:pointer;white-space:nowrap}button:hover{background:#edf3f0}button:disabled{opacity:.5;cursor:wait}.primary{background:#2c6257;color:white;border-color:#2c6257}.primary:hover{background:#214e44}.heading,.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0}.stat{border-radius:14px;background:#fff;padding:24px;border:1px solid #e8eeea}.stat strong{display:block;font-size:32px;font-weight:500;margin-top:10px}.stat span{font-size:13px;color:#7a8681}#devices{display:grid;gap:16px}.device{background:#fff;border:1px solid #e5ebe7;border-radius:16px;padding:25px}.device-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.device h3{font-size:18px;font-weight:600;margin:0 0 6px}.badge{font-size:12px;border-radius:6px;padding:5px 9px;background:#edf5ef;color:#387455}.badge.offline{background:#f1f3f2;color:#8b928e}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:24px 0;padding:20px 0;border-top:1px solid #f0f3f1;border-bottom:1px solid #f0f3f1}.metrics span{display:block;color:#86908a;font-size:12px;margin-bottom:8px}.metrics strong{font-size:17px;font-weight:500}.actions{display:flex;gap:10px;justify-content:flex-end}.command{font-size:12px;color:#7a8681;margin-top:14px}.empty{text-align:center;padding:60px;color:#7a8681}#pair-box{background:#eaf2ee;padding:20px;border-radius:12px;margin:20px 0;line-height:1.8}#login{max-width:440px;background:white;padding:38px;border:1px solid #e5ebe7;border-radius:18px;margin:80px auto}#login h1{font-size:27px}label{display:block;font-size:13px;margin:20px 0;color:#52625a}input{display:block;width:100%;font:inherit;border:1px solid #dce4df;border-radius:8px;padding:12px;margin-top:8px;outline:none}input:focus{border-color:#2c6257}#login-form button{width:100%;margin:8px 0}#message{color:#a9583e;font-size:13px;min-height:20px}dialog{border:1px solid #e3eae5;border-radius:18px;padding:30px;width:420px;max-width:90vw}dialog::backdrop{background:#162e254d}[hidden]{display:none!important}@media(max-width:680px){main{margin:30px auto;padding:0 18px}header{height:65px;padding:0 18px}.heading{align-items:flex-start}h1{font-size:26px}.summary{gap:8px}.stat{padding:16px}.metrics{grid-template-columns:repeat(2,1fr)}.device{padding:20px}.actions{flex-wrap:wrap}#login{padding:25px;margin:40px auto}}

#scanner{width:500px}#scan-video{display:block;width:100%;max-height:280px;border-radius:12px;background:#162e25}.scan-actions{display:flex;gap:10px;margin-top:16px;align-items:center}.file-button{display:inline-block;margin:0;position:relative;padding:11px 17px;border:1px solid #dfe6e2;border-radius:9px;cursor:pointer;font-size:13px;background:#fff}.file-button input{position:absolute;inset:0;opacity:0;margin:0;padding:0;cursor:pointer}#scan-confirmation{background:#edf4ef;border-radius:12px;padding:18px;margin:20px 0}#scan-confirmation h3{margin:0}#scanner>.actions{margin-top:18px}
.navigation{display:flex;gap:8px;margin:28px 0 24px;border-bottom:1px solid #e2e9e5;padding-bottom:12px;overflow-x:auto}.navigation button{border:0;background:transparent;padding:12px 18px}.navigation button.active,.segments button.active{background:#e6efea;color:#235448;font-weight:600}.segments{display:flex;gap:5px}.segments button{border:0}.filters{display:flex;gap:12px;margin:20px 0}.filters input{margin:0;flex:1;min-width:100px}.filters select{max-width:200px}select,textarea{font:inherit;font-size:14px;border:1px solid #dce4df;border-radius:8px;background:white;color:#34483d;padding:11px 12px;outline:none}textarea{display:block;width:100%;margin-top:8px;min-height:86px;resize:vertical}select:focus,textarea:focus{border-color:#2c6257}.management-list{display:grid;gap:10px}.management-row{display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid #e4ebe6;border-radius:12px;background:white}.row-body{flex:1;min-width:0}.row-body strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}.row-body span{display:block;margin-top:6px}.row-value{font-size:17px;font-weight:500;white-space:nowrap}.row-controls{display:flex;gap:7px}.row-controls button{font-size:12px;padding:9px 12px}.student-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.student-card{padding:24px;border:1px solid #e4ebe6;background:white;border-radius:14px}.student-card h3{font-size:18px;font-weight:600;margin:0}.balance{display:block;font-size:28px;font-weight:500;margin:20px 0}.student-card .actions{justify-content:flex-start;flex-wrap:wrap}.inline-check{display:flex;align-items:center;gap:9px;font-size:13px}.inline-check input{width:17px;height:17px;margin:0}.error{color:#a9583e;font-size:13px}#editor{width:680px;max-height:90vh;overflow:auto}#editor .actions{position:sticky;bottom:-30px;background:white;padding:18px 0;margin-top:10px}.editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.editor-fields label{margin:12px 0}.editor-fields select{display:block;width:100%;margin-top:8px}.editor-fields textarea{min-height:82px}.editor-fields>.inline-check{align-self:center}.section-title>.actions{flex-wrap:wrap}.file-button{white-space:nowrap}@media(max-width:850px){.student-grid{grid-template-columns:repeat(2,1fr)}.section-title{align-items:flex-start;flex-wrap:wrap}}@media(max-width:600px){header{gap:12px}.heading{flex-wrap:wrap}main{padding:0 14px;margin-top:24px}.navigation{gap:4px}.navigation button{padding:11px 12px}.student-grid{grid-template-columns:1fr}.management-row{padding:16px;gap:12px;flex-wrap:wrap}.row-body{min-width:55%}.row-controls{justify-content:flex-end;width:100%}.row-value{margin-left:auto}.filters{flex-wrap:wrap}.filters select{flex:1;max-width:none;min-width:130px}.filters input{flex-basis:100%}.editor-fields{grid-template-columns:1fr}#editor{padding:22px;max-width:94vw}#editor .actions{bottom:-22px}.section-title>.actions{justify-content:flex-start;gap:8px}.section-title>.actions button,.section-title>.actions .file-button{font-size:12px;padding:10px 12px}.student-card .actions button{flex:1}.file-button input{min-height:40px}button{min-height:40px}}
@media(max-width:600px){.navigation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.navigation button{font-size:13px;padding:10px 5px;min-height:44px}button{min-height:44px}}
.confirmations-section{margin-top:36px;padding-top:18px;border-top:1px solid #e0e8e2}.confirmation-students{display:grid;gap:10px;margin:18px 0}.confirmation-status{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:1px solid #e4ebe6;border-radius:12px;padding:14px 18px}.confirmation-status strong{font-size:14px;font-weight:500}.button-link{display:inline-block;text-decoration:none;border:1px solid #dfe6e2;border-radius:9px;background:#fff;color:#3b4d46;font-size:12px;line-height:20px;padding:9px 12px;white-space:nowrap}.button-link:hover{background:#edf3f0}#rule-sign-dialog{width:580px;max-height:90vh;overflow:auto}#rule-sign-dialog select{width:100%;display:block;margin-top:8px}#sign-document{padding:16px 0;margin-top:14px;border-top:1px solid #e4ebe6}#sign-preview{max-width:100%;max-height:320px;display:block;object-fit:contain;margin:18px auto;border-radius:9px;border:1px solid #e4ebe6}#rule-sign-dialog>.actions{margin-top:18px}#sign-message{font-size:13px;line-height:1.8;color:#56675d}#sign-photo-check{flex-shrink:0}.row-controls .button-link{font-size:12px}@media(max-width:600px){#rule-sign-dialog{padding:22px;max-width:94vw}.confirmation-status{align-items:flex-start;flex-direction:column}.row-controls .button-link{min-height:44px;display:flex;align-items:center}.row-controls{flex-wrap:wrap}#rules-page>.section-title{align-items:center}#rules-page>.section-title>.actions{width:100%}#rules-page>.section-title>.actions>*{flex:1}#sign-upload{width:100%}}

/* Mobile forms must not trigger browser focus zoom or widen the viewport. */
:root{-webkit-text-size-adjust:100%;text-size-adjust:100%}
main,#console,.heading>div,.device-top>div,.metrics>div,.stat{min-width:0}
.summary{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.device,.command,.muted,.badge{overflow-wrap:anywhere}
@media(max-width:680px){
  input,select,textarea{font-size:16px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .device-top{align-items:flex-start}
  .device-top .badge{flex-shrink:0}
  header{gap:10px}
  .brand{flex-shrink:0;gap:10px}
  header>.muted{font-size:12px}
  header>button{padding:10px 12px}
  .stat{padding:16px 12px}
  .stat strong{font-size:28px}
  .actions{flex-wrap:wrap}
}

/* Keep intrinsic grid and form widths inside the actual phone viewport. */
html,body{width:100%;min-width:0}
main{width:100%}
main>section,#devices,.management-list,.student-grid,.confirmation-students,.confirmation-status,.editor-fields,.filters,.student-card,.management-row,.row-controls{min-width:0;max-width:100%}
#devices,.management-list,.confirmation-students{grid-template-columns:minmax(0,1fr)}
.student-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.student-card h3,.student-card p,.row-body,.row-controls,.confirmation-status>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.editor-fields>*,.filters>*,.student-grid>*{min-width:0;max-width:100%}
input,select,textarea,video,img{max-width:100%}
@media(max-width:850px){.student-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  dialog,#scanner,#editor,#rule-sign-dialog{width:calc(100% - 24px);max-width:calc(100% - 24px);padding:20px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .scan-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .scan-actions>*{width:100%;min-width:0;text-align:center}
  .editor-fields{grid-template-columns:minmax(0,1fr)}
  .filters select{min-width:0}
  .actions>*,.row-controls>*,.section-title>button{max-width:100%;white-space:normal}
  #editor .actions{bottom:-20px}
}
@media(max-width:600px){.student-grid{grid-template-columns:minmax(0,1fr)}}

/* Keep the primary menu at the top on desktop and phone screens. */
header{height:auto;min-height:76px;position:sticky;top:0;z-index:20;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
header .navigation{flex:1;min-width:0;max-width:100%;margin:0;border:0;padding:0;display:flex;justify-content:center;gap:4px}
header .navigation button{font-size:14px;padding:12px 14px}
header #logout{margin-left:auto}
main{margin-top:32px}
#device-page>.section-title{margin:24px 0 18px}
@media(max-width:850px){
  header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  header .navigation{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:2px;overflow:visible}
  header .navigation button{min-width:0;font-size:12px;padding:10px 0;min-height:44px;white-space:nowrap}
  header #logout{grid-column:2;grid-row:1}
  main{margin-top:22px}
}
@media(max-width:680px){
  header{min-height:0;padding:8px 14px;gap:6px}
  header .brand{font-size:18px;gap:8px}
  header .brand span{font-size:14px}
  header #logout{font-size:12px;padding:6px 10px;min-height:32px}
  header .navigation button{min-height:40px;padding:8px 0}
  main{margin-top:16px}
  .summary{margin:16px 0;gap:8px}
  .stat{padding:12px 10px}
  .stat strong{font-size:24px;margin-top:6px}
  #device-page>.section-title{margin:16px 0 12px}
  #device-page>.section-title h2{margin:0}
}