*{margin:0;padding:0;box-sizing:border-box;}:root{--primary-bg:#972324;--secondary-bg:#2d2d2d;--card-bg:#3a3a3a;--accent-bg:#4a4a4a;--primary-text:#ffffff;--secondary-text:#ffffff;--muted-text:#ffffff;--accent-text:#64b5f6;--primary-color:#2196f3;--primary-hover:#1976d2;--success-color:#4caf50;--error-color:#f44336;--warning-color:#ff9800;--container-padding:20px;--section-spacing:24px;--element-spacing:16px;--border-radius:12px;--border-radius-small:8px;--font-family:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;--font-size-base:16px;--font-size-large:18px;--font-size-xl:18px;--font-size-xxl:32px;--font-size-xxxl:48px;--font-size-small:14px;--font-size-xs:12px;--shadow-light:0 2px 8px rgba(0,0,0,0.3);--shadow-medium:0 4px 16px rgba(0,0,0,0.4);--shadow-heavy:0 8px 32px rgba(0,0,0,0.5);--transition-fast:0.2s ease;--transition-medium:0.3s ease;--transition-slow:0.5s ease;}html{font-size:var(--font-size-base);scroll-behavior:smooth;}body{font-family:var(--font-family);background:linear-gradient(135deg,var(--primary-bg) 0%,#972324 100%);color:var(--primary-text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.main-container{min-height:100vh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:var(--container-padding);position:relative;}.app-header{text-align:center;padding:var(--section-spacing) 0;margin-bottom:var(--section-spacing);}.logo-container{margin-bottom:16px;display:flex;justify-content:center;align-items:center;}.school-logo{max-width:320px;max-height:80px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));animation:fadeInDown 0.8s ease-out;}.school-title{font-size:var(--font-size-xl);font-weight:500;color:var(--primary-text);margin-bottom:8px;letter-spacing:0.5px;animation:fadeInDown 0.8s ease-out 0.2s both;}.subtitle{font-size:var(--font-size-small);color:var(--secondary-text);font-weight:300;animation:fadeInUp 0.8s ease-out 0.2s both;}.content-area{flex:1;display:flex;flex-direction:column;gap:var(--section-spacing);}.search-section{background:var(--secondary-bg);border-radius:var(--border-radius);padding:var(--section-spacing);box-shadow:var(--shadow-light);animation:slideInUp 0.6s ease-out 0.4s both;}.search-form{display:flex;flex-direction:column;gap:var(--element-spacing);}.input-group{display:flex;flex-direction:column;gap:12px;}.id-input{width:100%;padding:16px;font-size:var(--font-size-base);background:var(--card-bg);border:2px solid transparent;border-radius:var(--border-radius-small);color:var(--primary-text);font-family:var(--font-family);transition:all var(--transition-medium);outline:none;}.id-input::placeholder{color:var(--muted-text);}.id-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(33,150,243,0.1);transform:translateY(-1px);}.id-input:valid{border-color:var(--success-color);}.search-btn{width:100%;padding:16px;font-size:var(--font-size-base);font-weight:500;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:white;border:none;border-radius:var(--border-radius-small);cursor:pointer;transition:all var(--transition-medium);position:relative;overflow:hidden;font-family:var(--font-family);}.search-btn{will-change:transform,box-shadow;}.search-btn:hover{transform:translate3d(0,-2px,0);box-shadow:var(--shadow-medium);}.search-btn:active{transform:translate3d(0,0,0);}.search-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;}.btn-loading{display:none;}.search-btn.loading .btn-text{display:none;}.search-btn.loading .btn-loading{display:inline;}.validation-message{font-size:var(--font-size-small);color:var(--error-color);min-height:20px;padding:0 4px;transition:all var(--transition-fast);}.validation-message:empty{display:none;}.result-section{min-height:200px;position:relative;}.result-container{background:var(--secondary-bg);border-radius:var(--border-radius);padding:var(--section-spacing);box-shadow:var(--shadow-light);animation:slideInUp 0.6s ease-out;will-change:transform,opacity;}.student-info{display:flex;flex-direction:column;gap:20px;text-align:center;}.name-section{display:flex;justify-content:center;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--accent-bg);}.student-name{font-size:var(--font-size-xl);font-weight:600;color:var(--primary-text);letter-spacing:0.5px;}.student-gender{font-size:var(--font-size-small);color:var(--secondary-text);padding:2px 4px;border-radius:12px;font-weight:400;}.class-section{display:flex;justify-content:center;align-items:flex-end;gap:8px;padding:16px 0;}.class-label{font-size:var(--font-size-base);color:#ffffff;font-weight:400;order:2;line-height:1;padding-bottom:2px;}.class-name{font-size:var(--font-size-xxxl);font-weight:800;color:var(--accent-text);background:linear-gradient(135deg,var(--accent-text),#42a5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;order:1;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,0.1);}.error-container{background:var(--secondary-bg);border-radius:var(--border-radius);padding:var(--section-spacing);box-shadow:var(--shadow-light);text-align:center;border-left:4px solid var(--error-color);animation:slideInUp 0.6s ease-out;will-change:transform,opacity;}.error-message{font-size:var(--font-size-base);color:var(--error-color);font-weight:500;}.loading-container{background:var(--secondary-bg);border-radius:var(--border-radius);padding:var(--section-spacing);box-shadow:var(--shadow-light);text-align:center;animation:slideInUp 0.6s ease-out;}.loading-spinner{width:40px;height:40px;border:3px solid var(--accent-bg);border-top:3px solid var(--primary-color);border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite;will-change:transform;}.loading-text{font-size:var(--font-size-base);color:var(--secondary-text);font-weight:400;}.app-footer{text-align:center;padding:var(--section-spacing) 0;margin-top:auto;}.copyright-text{font-size:var(--font-size-xs);color:var(--secondary-text);font-weight:400;margin-bottom:8px;letter-spacing:0.5px;}.footer-text{font-size:var(--font-size-xs);color:var(--muted-text);font-weight:300;margin-top:0;}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-30px,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,30px,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes slideInUp{from{opacity:0;transform:translate3d(0,50px,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes spin{0%{transform:rotate3d(0,0,1,0deg);}100%{transform:rotate3d(0,0,1,360deg);}}@keyframes pulse{0%,100%{opacity:1;transform:scale3d(1,1,1);}50%{opacity:0.5;transform:scale3d(1.02,1.02,1);}}@keyframes successPulse{0%{transform:scale3d(1,1,1);box-shadow:0 0 0 0 rgba(76,175,80,0.4);}50%{transform:scale3d(1.02,1.02,1);box-shadow:0 0 0 10px rgba(76,175,80,0);}100%{transform:scale3d(1,1,1);box-shadow:0 0 0 0 rgba(76,175,80,0);}}.result-container.success{animation:successPulse 0.6s ease-out;will-change:transform,box-shadow;}.fade-in{animation:fadeIn 0.5s ease-out;will-change:opacity,transform;}@keyframes fadeIn{from{opacity:0;transform:translate3d(0,20px,0);}to{opacity:1;transform:translate3d(0,0,0);}}.shake{animation:shake 0.5s ease-in-out;will-change:transform;}@keyframes shake{0%,100%{transform:translate3d(0,0,0);}10%,30%,50%,70%,90%{transform:translate3d(-5px,0,0);}20%,40%,60%,80%{transform:translate3d(5px,0,0);}}@media screen and (max-width:375px){:root{--container-padding:16px;--section-spacing:20px;--font-size-xl:22px;--font-size-xxl:28px;--font-size-xxxl:40px;--font-size-large:17px;}.id-input,.search-btn{padding:16px;min-height:48px;}.student-name{font-size:20px;}.search-btn{font-size:16px;font-weight:600;}.name-section{gap:8px;padding:16px 0;}.class-section{padding:16px 0;}}@media screen and (min-width:376px) and (max-width:480px){.input-group{flex-direction:row;gap:12px;align-items:stretch;}.id-input{flex:1;min-height:48px;}.search-btn{flex:0 0 90px;padding:16px 12px;min-height:48px;font-size:15px;}@media (orientation:landscape){.main-container{padding:16px;}.app-header{padding:16px 0;margin-bottom:16px;}.logo-container{margin-bottom:12px;}.school-logo{max-width:100px;max-height:60px;}.school-title{font-size:20px;}.subtitle{font-size:13px;}}}@media screen and (min-width:481px){:root{--container-padding:32px;--section-spacing:32px;--font-size-xl:28px;--font-size-xxl:36px;--font-size-xxxl:56px;--font-size-large:20px;}.main-container{max-width:600px;padding:var(--container-padding);}.input-group{flex-direction:row;gap:16px;}.id-input{flex:1;padding:18px;}.search-btn{flex:0 0 100px;padding:18px 16px;}.student-info{gap:24px;}.name-section{padding:20px 0;}.class-section{padding:20px 0;}}@media screen and (min-width:769px){.main-container{max-width:700px;}.search-section,.result-container,.error-container,.loading-container{padding:32px;}}.id-input,.search-btn,.notification-close,.confirm-btn{min-height:44px;min-width:44px;}.search-btn,.notification-close,.confirm-btn{-webkit-tap-highlight-color:rgba(33,150,243,0.2);tap-highlight-color:rgba(33,150,243,0.2);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.id-input{font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}.main-container{-webkit-overflow-scrolling:touch;overflow-scrolling:touch;}@media (orientation:portrait){.main-container{min-height:100vh;min-height:100dvh;}}@media (orientation:landscape){.main-container{min-height:100vh;min-height:100dvh;padding:12px;}.app-header{padding:12px 0;margin-bottom:16px;}.logo-container{margin-bottom:60px;}.school-logo{max-width:880px;max-height:80px;}.school-title{font-size:20px;margin-bottom:4px;}.subtitle{font-size:12px;}.search-section,.result-container,.error-container{padding:16px;}.student-info{gap:16px;}.name-section,.class-section{padding:12px 0;}}@supports (padding:max(0px)){.main-container{padding-left:max(var(--container-padding),env(safe-area-inset-left));padding-right:max(var(--container-padding),env(safe-area-inset-right));padding-top:max(var(--container-padding),env(safe-area-inset-top));padding-bottom:max(var(--container-padding),env(safe-area-inset-bottom));}}@media (max-height:500px){.app-header{padding:8px 0;margin-bottom:12px;}.logo-container{margin-bottom:6px;}.school-logo{max-width:60px;max-height:40px;}.school-title{font-size:18px;margin-bottom:2px;}.subtitle{font-size:11px;}.search-section{padding:16px;}.result-section{min-height:120px;}}@media screen and (max-width:320px){:root{--container-padding:12px;--section-spacing:16px;--font-size-xl:20px;--font-size-xxl:24px;--font-size-xxxl:36px;--font-size-large:16px;--font-size-base:15px;}.main-container{padding:12px;}.school-title{font-size:20px;}.id-input,.search-btn{padding:14px;font-size:15px;}.student-name{font-size:18px;}.class-name{font-size:16px;}}.mobile-device{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}.ios-device{height:calc(var(--vh,1vh) * 100);}.ios-device .main-container{min-height:calc(var(--vh,1vh) * 100);}.android-device .id-input{font-size:16px;}.keyboard-open .app-footer{display:none;}.keyboard-open .main-container{padding-bottom:10px;}.keyboard-open .result-section{min-height:100px;}.keyboard-open .app-header{padding:12px 0;margin-bottom:16px;}.keyboard-open .logo-container{margin-bottom:8px;}.keyboard-open .school-logo{max-width:70px;max-height:45px;}.keyboard-open .school-title{font-size:18px;margin-bottom:4px;}.keyboard-open .subtitle{font-size:11px;}.portrait .main-container{max-width:480px;}.landscape .main-container{max-width:100%;padding:12px 20px;}.landscape .app-header{padding:8px 0;margin-bottom:12px;}.landscape .logo-container{margin-bottom:6px;}.landscape .school-logo{max-width:80px;max-height:50px;}.landscape .school-title{font-size:20px;margin-bottom:2px;}.landscape .subtitle{font-size:12px;}.landscape .search-section,.landscape .result-container,.landscape .error-container{padding:16px;}.landscape .student-info{gap:16px;}.landscape .name-section,.landscape .class-section{padding:10px 0;}@media (prefers-contrast:high){:root{--primary-bg:#000000;--secondary-bg:#1a1a1a;--card-bg:#2d2d2d;--primary-text:#ffffff;--secondary-text:#cccccc;}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}.search-btn:focus-visible,.id-input:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;}@media print{body{background:white;color:black;}.main-container{box-shadow:none;max-width:none;}.search-section,.app-footer{display:none;}.result-container{background:white;box-shadow:none;border:1px solid #ccc;}}.notification-container{position:fixed;top:20px;right:20px;z-index:9999;max-width:400px;width:100%;pointer-events:none;}.notification{background:var(--card-bg);border-radius:var(--border-radius-small);box-shadow:var(--shadow-medium);margin-bottom:12px;opacity:0;transform:translateX(100%);transition:all var(--transition-medium);pointer-events:auto;position:relative;overflow:hidden;border-left:4px solid var(--primary-color);}.notification.show{opacity:1;transform:translateX(0);}.notification.hide{opacity:0;transform:translateX(100%);margin-bottom:0;max-height:0;padding:0;}.notification-success{border-left-color:var(--success-color);background:linear-gradient(135deg,var(--card-bg) 0%,rgba(76,175,80,0.1) 100%);}.notification-error{border-left-color:var(--error-color);background:linear-gradient(135deg,var(--card-bg) 0%,rgba(244,67,54,0.1) 100%);}.notification-warning{border-left-color:var(--warning-color);background:linear-gradient(135deg,var(--card-bg) 0%,rgba(255,152,0,0.1) 100%);}.notification-info{border-left-color:var(--accent-text);background:linear-gradient(135deg,var(--card-bg) 0%,rgba(100,181,246,0.1) 100%);}.notification-content{display:flex;align-items:center;padding:16px;gap:12px;}.notification-icon{font-size:18px;font-weight:bold;flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.1);}.notification-success .notification-icon{color:var(--success-color);background:rgba(76,175,80,0.2);}.notification-error .notification-icon{color:var(--error-color);background:rgba(244,67,54,0.2);}.notification-warning .notification-icon{color:var(--warning-color);background:rgba(255,152,0,0.2);}.notification-info .notification-icon{color:var(--accent-text);background:rgba(100,181,246,0.2);}.notification-message{flex:1;color:var(--primary-text);font-size:var(--font-size-small);line-height:1.4;}.notification-close{background:none;border:none;color:var(--secondary-text);font-size:20px;cursor:pointer;padding:4px;border-radius:4px;transition:all var(--transition-fast);flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}.notification-close:hover{background:rgba(255,255,255,0.1);color:var(--primary-text);}.notification-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--primary-color);animation:notificationProgress linear;transform-origin:left;}@keyframes notificationProgress{from{transform:scaleX(1);}to{transform:scaleX(0);}}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:all var(--transition-medium);backdrop-filter:blur(4px);}.loading-overlay.show{opacity:1;visibility:visible;}.loading-content{background:var(--card-bg);border-radius:var(--border-radius);padding:32px;text-align:center;box-shadow:var(--shadow-heavy);max-width:300px;width:90%;}.loading-overlay .loading-spinner{width:48px;height:48px;border:4px solid var(--accent-bg);border-top:4px solid var(--primary-color);border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite;}.loading-message{color:var(--primary-text);font-size:var(--font-size-base);margin:0;}.global-progress-bar{position:fixed;top:0;left:0;width:100%;height:4px;background:var(--accent-bg);z-index:9998;opacity:0;visibility:hidden;transition:all var(--transition-medium);}.global-progress-bar.show{opacity:1;visibility:visible;}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--accent-text));width:0%;transition:width var(--transition-medium);position:relative;}.progress-bar-fill::after{content:'';position:absolute;top:0;right:0;width:20px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3));animation:progressShimmer 1.5s infinite;}@keyframes progressShimmer{0%{transform:translateX(-20px);opacity:0;}50%{opacity:1;}100%{transform:translateX(20px);opacity:0;}}.progress-bar-text{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:var(--primary-text);font-size:var(--font-size-xs);background:var(--card-bg);padding:4px 8px;border-radius:4px;box-shadow:var(--shadow-light);}.confirm-dialog{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10001;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--transition-medium);}.confirm-dialog.show{opacity:1;visibility:visible;}.confirm-dialog.hide{opacity:0;visibility:hidden;}.confirm-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}.confirm-content{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow-heavy);max-width:400px;width:90%;position:relative;transform:scale(0.9);transition:transform var(--transition-medium);}.confirm-dialog.show .confirm-content{transform:scale(1);}.confirm-header{padding:20px 20px 0;border-bottom:1px solid var(--accent-bg);}.confirm-title{color:var(--primary-text);font-size:var(--font-size-large);font-weight:600;margin:0 0 16px;}.confirm-body{padding:20px;}.confirm-message{color:var(--secondary-text);font-size:var(--font-size-base);line-height:1.5;margin:0;}.confirm-footer{padding:0 20px 20px;display:flex;gap:12px;justify-content:flex-end;}.confirm-btn{padding:10px 20px;border:none;border-radius:var(--border-radius-small);font-size:var(--font-size-small);font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-width:80px;}.confirm-btn-cancel{background:var(--accent-bg);color:var(--secondary-text);}.confirm-btn-cancel:hover{background:var(--card-bg);color:var(--primary-text);}.confirm-btn-confirm{background:var(--primary-color);color:white;}.confirm-btn-confirm:hover{background:var(--primary-hover);}body.loading-active{overflow:hidden;}@media (max-width:480px){.notification-container{top:10px;right:10px;left:10px;max-width:none;}.notification{transform:translateY(-100%);}.notification.show{transform:translateY(0);}.notification.hide{transform:translateY(-100%);}.loading-content{padding:24px;}.confirm-content{margin:20px;width:calc(100% - 40px);}.confirm-footer{flex-direction:column-reverse;}.confirm-btn{width:100%;}}@media (prefers-contrast:high){.notification{border-width:2px;border-style:solid;}.notification-success{border-color:var(--success-color);}.notification-error{border-color:var(--error-color);}.notification-warning{border-color:var(--warning-color);}.notification-info{border-color:var(--accent-text);}}@media (prefers-reduced-motion:reduce){.notification,.loading-overlay,.confirm-dialog,.global-progress-bar{transition:none;}.notification-progress,.loading-spinner,.progress-bar-fill::after{animation:none;}}