:root{--primary-blue:#1559a6;--primary-blue-dark:#0e4381;--secondary-blue:#168c95;--accent-blue:#edf6f8;--white:#fff;--dark-blue:#1c1c1e;--gray-mid:#8e8e93;--gray-light:#f2f2f7;--success:#34c759;--danger:#ff3b30;--card-radius:12px;--shadow:0 10px 28px #11375c14;--shadow-sm:0 3px 12px #11375c0f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}button,input,select,textarea{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #168c9547}body{color:var(--dark-blue);background:linear-gradient(160deg,#e8f3ff 0%,#f4f9ff 50%,#eef3fa 100%);height:100vh;font-family:IBM Plex Sans Thai,sans-serif;transition:background .3s;overflow:hidden}body.role-personnel{background:linear-gradient(160deg,#e7f0fa 0%,#f4f8fc 50%,#e8eef5 100%)}body.role-student{background:linear-gradient(160deg,#e2f5f1 0%,#f4fbfa 50%,#e8f3f6 100%)}#app{background:#f7faff;flex-direction:column;max-width:500px;height:100vh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 60px #0050b41f}.hidden{display:none!important}#app-container{flex-direction:column;width:100%;height:100%;display:flex}#app-container.role-personnel{--primary-blue:#1559a6;--primary-blue-dark:#0e4381;--secondary-blue:#168c95;--accent-blue:#edf6f8}#app-container.role-student{--primary-blue:#0f766e;--primary-blue-dark:#115e59;--secondary-blue:#287fa8;--accent-blue:#edf8f7;--shadow:0 10px 28px #0f766e14;--shadow-sm:0 3px 12px #0f766e0f}#app-container.role-student .app-header{border-bottom-color:#c8e8e3}#app-container.role-student .app-header h1{color:#0f766e}#app-container.role-student .app-header h1 span{color:#287fa8}#app-container.role-student .header-role{color:#0f766e;background:#d8f1ec}#app-container.role-student .bottom-nav{border-top-color:#c8e8e3}#app-container.role-student .nav-item.active{color:#0f766e}#app-container.role-student .nav-item.active .nav-icon{background:#e0f4f1}#app-container.role-student .hero-card{background:linear-gradient(135deg,#0f766e 0%,#287fa8 100%)}#app-container.role-personnel .app-header{border-bottom-color:#cfdce9}#app-container.role-personnel .app-header h1{color:#173f73}#app-container.role-personnel .app-header h1 span{color:#168c95}#app-container.role-personnel .header-role{color:#173f73;background:#dce9f7}#app-container.role-personnel .bottom-nav{border-top-color:#cfdce9}#app-container.role-personnel .nav-item.active{color:#1559a6}#app-container.role-personnel .nav-item.active .nav-icon{background:#e8f1fa}#app-container.role-personnel .hero-card{background:linear-gradient(135deg,#173f73 0%,#1559a6 100%)}#auth-container{flex-direction:column;align-items:center;height:100%;padding:24px;display:flex;overflow-y:auto}.auth-logo{object-fit:contain;width:126px;height:96px;margin:0 auto 6px;display:block}.portal-title{color:var(--primary-blue);text-align:center;letter-spacing:0;margin-bottom:6px;font-size:24px;font-weight:700}.portal-subtitle{color:var(--gray-mid);text-align:center;margin-bottom:28px;font-size:13px}.portal-cards{flex-direction:column;gap:16px;width:100%;display:flex}.portal-card{cursor:pointer;text-align:center;background:#fff;border:1px solid #d8e9ff;border-radius:14px;padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s}.portal-card:hover,.portal-card:active{border-color:var(--primary-blue);transform:translateY(-1px);box-shadow:0 10px 28px #007aff29}.portal-card-icon{background:var(--accent-blue);width:64px;height:64px;color:var(--primary-blue);border-radius:12px;justify-content:center;align-items:center;margin:0 auto 12px;display:flex}.ui-icon{vertical-align:-.2em;stroke-width:2px;flex:none;width:1.15em;height:1.15em;display:inline-block}.portal-card-icon .ui-icon{width:30px;height:30px}.hero-icon .ui-icon{stroke-width:1.8px;width:40px;height:40px}.quick-icon .ui-icon{stroke-width:1.9px;width:25px;height:25px}.result-icon .ui-icon,.feature-icon .ui-icon{width:42px;height:42px}.title-large>.ui-icon,.card-title>.ui-icon,.form-label>.ui-icon{width:20px;height:20px}.btn-primary .ui-icon,.role-option .ui-icon{width:18px;height:18px}.demo-credentials .ui-icon{width:14px;height:14px;color:var(--primary-blue)}#portal-student .portal-card-icon{background:#eef6f7}#portal-personnel .portal-card-icon{background:#eaf2fa}.portal-card-title{color:var(--primary-blue);margin-bottom:4px;font-size:17px;font-weight:700}.portal-card-desc{color:var(--gray-mid);font-size:12px}.auth-back-btn{color:var(--primary-blue);cursor:pointer;background:0 0;border:none;border-radius:8px;align-self:flex-start;margin-bottom:16px;padding:6px 10px;font-size:13px;font-weight:600}.auth-back-btn:hover{background:var(--accent-blue)}.role-badge{border-radius:20px;margin-bottom:20px;padding:5px 14px;font-size:12px;font-weight:700;display:inline-block}.role-badge.student{color:#92400e;background:#fef3c7}.role-badge.personnel{color:#1e40af;background:#dbeafe}.auth-tabs{background:#fff;border:1px solid #e3edfb;border-radius:12px;width:100%;margin-bottom:24px;display:flex;overflow:hidden}.auth-tab{text-align:center;color:var(--gray-mid);cursor:pointer;flex:1;padding:13px;font-size:14px;font-weight:600;transition:all .2s}.auth-tab.active{background:var(--primary-blue);color:#fff}.auth-card{background:var(--white);width:100%;box-shadow:var(--shadow);border-radius:14px;padding:24px 20px}.form-group{margin-bottom:18px}.form-label{color:var(--primary-blue);margin-bottom:8px;font-size:13px;font-weight:600;display:block}.role-options{gap:10px;display:flex}.role-option{cursor:pointer;color:var(--primary-blue);background:#fbfdff;border:1.5px solid #d0e4ff;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.role-option:hover{border-color:var(--primary-blue)}.role-option:has(input:checked){background:var(--accent-blue);border-color:var(--primary-blue);box-shadow:0 0 0 3px #007aff1f}.role-option:has(input[value=student]:checked){color:#0f766e;background:#edf8f7;border-color:#72c8bb}.role-option:has(input[value=personnel]:checked){color:#1559a6;background:#edf4fb;border-color:#8cb7e0}.role-option .ui-icon{vertical-align:-.25em}.role-option input{display:none}.form-input{width:100%;color:var(--dark-blue);background:#fbfdff;border:1px solid #d0e4ff;border-radius:10px;outline:none;padding:12px 16px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.form-input:focus{border-color:var(--primary-blue);background:#fff;box-shadow:0 0 0 3px #007aff26}.auth-btn{background:var(--primary-blue);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;margin-top:20px;padding:14px;font-size:15px;font-weight:700;transition:background .2s,transform .1s}.auth-btn:hover{background:var(--primary-blue-dark)}.auth-btn:active{transform:scale(.98)}.demo-credentials{color:#0369a1;background:#f0f9ff;border:1px dashed #93c5fd;border-radius:10px;width:100%;margin-top:20px;padding:14px;font-size:12px;line-height:1.8}.demo-role{align-items:center;gap:4px;display:inline-flex}.demo-role-icon{color:currentColor;display:inline-flex}.demo-role-icon .ui-icon{width:13px;height:13px}.app-header{background:#fff;border-bottom:1px solid #eef2f8;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.logo-section{align-items:center;gap:10px;display:flex}.logo-mark{object-fit:contain;object-position:left center;width:48px;height:42px}.app-header h1{color:var(--primary-blue);letter-spacing:-.3px;font-size:17px;font-weight:800;line-height:1.1}.app-header h1 span{color:var(--secondary-blue)}.logo-sub{color:var(--gray-mid);margin-top:2px;font-size:10px;font-weight:500}.header-actions{align-items:center;gap:8px;display:flex}.header-notification{width:36px;height:36px;color:var(--primary-blue);cursor:pointer;background:#f2f7ff;border:0;border-radius:50%;place-items:center;display:grid;position:relative}.header-notification:hover,.header-notification:active{background:var(--accent-blue)}.header-notification svg{width:20px;height:20px}.header-notification i{background:var(--danger);border:2px solid #fff;border-radius:50%;width:8px;height:8px;display:none;position:absolute;top:5px;right:5px}.header-notification i.visible{display:block}.header-role{white-space:nowrap;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700}.header-role.is-staff{color:#1e40af;background:#dbeafe}.header-role.is-student{color:#92400e;background:#fef3c7}#main-content{-webkit-overflow-scrolling:touch;flex:1;padding:16px 20px 110px;overflow-y:auto}#main-content::-webkit-scrollbar{width:0}.title-large{letter-spacing:-.4px;color:var(--dark-blue);margin-bottom:16px;font-size:22px;font-weight:800}.page-hint{color:var(--gray-mid);margin-bottom:16px;font-size:13px;line-height:1.6}.card{border-radius:var(--card-radius);box-shadow:var(--shadow-sm);background:#fff;border:1px solid #e5ecf2;margin-bottom:16px;padding:20px;transition:border-color .2s,box-shadow .2s}.card:hover{border-color:#c9dce5;box-shadow:0 8px 22px #11375c14}.card-title{color:var(--dark-blue);align-items:center;gap:8px;margin-bottom:12px;font-size:15px;font-weight:700;display:flex}.hero-card{color:#fff;background:linear-gradient(135deg,#1559a6 0%,#167f89 100%);border-radius:14px;margin-bottom:16px;padding:26px 22px;position:relative;overflow:hidden;box-shadow:0 12px 30px #007aff40}.hero-card:after{content:"";z-index:0;background:#ffffff14;border-radius:50%;width:150px;height:150px;position:absolute;top:-40px;right:-40px}.hero-card>*{z-index:1;position:relative}.hero-icon{color:currentColor;justify-content:center;margin-bottom:10px;display:flex}.hero-card h2{letter-spacing:-.3px;margin-bottom:6px;font-size:20px;font-weight:800}.hero-card p{opacity:.92;font-size:13px;line-height:1.6}.hero-card .hero-btn{color:var(--primary-blue);background:#fff;margin-top:18px;box-shadow:0 6px 16px #0000002e}.hero-card .hero-btn:hover{background:#f0f7ff}.hero-student{background:linear-gradient(135deg,#0f766e 0%,#287fa8 100%);box-shadow:0 12px 30px #0f766e33}.quick-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.quick-card{cursor:pointer;text-align:left;color:var(--dark-blue);box-shadow:var(--shadow-sm);background:#fff;border:1px solid #f0f4fa;border-radius:12px;align-items:center;gap:12px;padding:16px;font-family:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex}.quick-card:hover,.quick-card:active{border-color:#a9cbd5;transform:translateY(-1px);box-shadow:0 8px 20px #11375c1a}.quick-card b{margin-bottom:3px;font-size:14px;font-weight:700;display:block}.quick-card p{color:var(--gray-mid);font-size:11px;line-height:1.4}.quick-icon{width:42px;height:42px;color:var(--primary-blue);background:#edf6f8;border:1px solid #dcecef;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.quick-arrow{color:var(--gray-mid);margin-left:auto;font-size:22px;font-weight:700}.quick-grid .quick-card{flex-direction:column;align-items:flex-start}.quick-grid .quick-icon{width:48px;height:48px}.stat-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.stat-box{background:var(--accent-blue);text-align:center;border-radius:14px;padding:14px}.stat-num{color:var(--primary-blue);font-size:28px;font-weight:800;line-height:1.2}.stat-num-sm{color:var(--primary-blue);word-break:break-word;font-size:15px;font-weight:800;line-height:1.4}.stat-label{color:var(--gray-mid);margin-top:4px;font-size:11px}.guide-list{color:#3a3a3c;margin-left:20px;font-size:14px;line-height:2}.guide-list li{margin-bottom:4px}#camera-container{background:#0a0a0a;border-radius:18px;width:100%;max-height:45vh;position:relative;overflow:hidden}#video-feed{object-fit:cover;width:100%;height:100%;max-height:45vh;display:block}.btn-primary{background:var(--primary-blue);color:#fff;cursor:pointer;border:none;border-radius:9px;width:100%;padding:15px;font-family:inherit;font-size:15px;font-weight:700;transition:background .2s,transform .1s,box-shadow .2s;box-shadow:0 4px 10px #1559a633}.btn-primary:hover{background:var(--primary-blue-dark);box-shadow:0 6px 14px #1559a640}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.7;cursor:wait}.upload-btn{color:var(--primary-blue)!important;border:1.5px solid var(--primary-blue)!important;box-shadow:none!important;background:#fff!important}.ai-loading-card{box-shadow:var(--shadow);background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:24px 32px;display:inline-flex}.ai-loading-card p{color:var(--primary-blue);font-size:14px;font-weight:600}.spinner{border:4px solid var(--accent-blue);border-top-color:var(--primary-blue);border-radius:50%;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.result-img{object-fit:cover;border-radius:12px;width:100%;max-height:280px}.result-type{color:var(--primary-blue);margin-top:8px;font-size:20px;font-weight:800}.detail-photo-placeholder{background:var(--gray-light);color:var(--primary-blue);border-radius:12px;margin-bottom:20px;padding:40px}.detail-photo-placeholder p{color:var(--gray-mid);margin-top:8px;font-size:12px}.detail-card p{line-height:1.9}.detail-grid{grid-template-columns:1fr 1fr;gap:8px 14px;display:grid}.detail-grid span{color:#3a3a3c;font-size:13px;line-height:1.7}.date-selectors{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;display:grid}.history-search-wrap{margin-bottom:12px;position:relative}.history-search-wrap svg{width:18px;height:18px;color:var(--gray-mid);z-index:1;position:absolute;top:50%;left:13px;transform:translateY(-50%)}.history-search{padding-left:40px}.date-select{color:var(--primary-blue);background:#fff;border:1px solid #cbe4ff;border-radius:10px;outline:none;padding:10px;font-family:inherit;font-size:12px;font-weight:600}.list-item{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #f0f4fa;border-radius:16px;align-items:center;margin-bottom:12px;padding:16px;transition:transform .15s,border-color .2s;display:flex}.list-item:hover,.list-item:active{border-color:#cbe4ff;transform:translateY(-1px)}.list-item>span:first-child{font-size:22px}.patient-item{border-bottom:1px solid var(--gray-light);cursor:pointer;padding:15px;transition:background .2s}.patient-item:active{background:var(--accent-blue)}.student-list-item{border-bottom:1px solid var(--gray-light);justify-content:space-between;align-items:center;padding:15px;display:flex}.delete-btn{color:var(--danger);cursor:pointer;padding:5px 10px;font-weight:600}.bottom-nav{height:84px;padding-bottom:env(safe-area-inset-bottom);z-index:10;background:#fff;border-top:1px solid #eef2f8;justify-content:space-around;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -6px 20px #0050b40f}.nav-item{color:var(--gray-mid);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;font-family:inherit;transition:color .2s,transform .2s;display:flex;position:relative}.nav-item.active{color:var(--primary-blue)}.nav-icon{border-radius:12px;justify-content:center;align-items:center;width:40px;height:30px;transition:background .2s;display:flex}.nav-icon svg{width:24px;height:24px}.nav-item.active .nav-icon{background:var(--accent-blue)}.nav-item:hover{color:var(--primary-blue)}.nav-item:active{transform:translateY(1px)}.nav-label{font-size:11px;font-weight:700}.nav-icon-badge{position:relative}.nav-icon-badge i{background:var(--danger);border:2px solid #fff;border-radius:50%;width:8px;height:8px;display:none;position:absolute;top:1px;right:3px}.nav-icon-badge i.visible{display:block}.page-heading-row{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.text-btn{color:var(--primary-blue);cursor:pointer;white-space:nowrap;background:0 0;border:0;padding-top:5px;font-family:inherit;font-size:11px;font-weight:600}.empty-state{color:var(--gray-mid);font-size:13px;line-height:1.7}.tag-list{flex-wrap:wrap;gap:8px;display:flex}.health-tag{background:var(--accent-blue);color:var(--primary-blue);border-radius:12px;padding:8px 11px;font-size:12px;font-weight:700}.notification-item{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #f0f4fa;border-radius:16px;align-items:flex-start;gap:12px;margin-bottom:10px;padding:15px;display:flex}.notification-item.unread{border-left:4px solid var(--primary-blue);background:#f9fcff}.notification-icon{background:var(--accent-blue);width:38px;height:38px;color:var(--primary-blue);border-radius:12px;flex:0 0 38px;place-items:center;display:grid}.notification-item.unavailable{background:#fff7f7;border-left:4px solid #dc2626}.notification-item.unavailable .notification-icon{color:#dc2626;background:#fee4e2}.notification-icon .ui-icon{width:20px;height:20px}.result-icon,.feature-icon{color:var(--primary-blue);line-height:1}.account-success-icon{width:100px;height:100px;color:var(--primary-blue);background:#e3f2ff;border-radius:50%;justify-content:center;align-items:center;margin-bottom:20px;display:inline-flex}.account-success-icon .ui-icon{width:40px;height:40px}.notification-title{margin-bottom:3px;font-size:13px;font-weight:700}.notification-body{color:var(--gray-mid);font-size:12px;line-height:1.55}.notification-time{color:var(--gray-mid);margin-top:5px;font-size:10px;display:block}@media (width<=380px){#student-nav .nav-label{font-size:9px}#student-nav .nav-icon svg{width:20px;height:20px}}.capture-btn{background:linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));border:5px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:66px;height:66px;margin-top:-34px;transition:transform .15s;display:flex;box-shadow:0 8px 18px #007aff59}.capture-btn:active{transform:scale(.94)}.capture-btn .nav-icon{background:0 0;width:auto;height:auto}.capture-btn .nav-icon svg{color:#fff;width:28px;height:28px}.nav-item.center .nav-label{z-index:2;position:relative}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.success-overlay{z-index:9999;background:#0009;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.success-card{text-align:center;background:#fff;border-radius:16px;width:85%;max-width:320px;padding:40px 20px;position:relative;overflow:hidden;box-shadow:0 20px 50px #0000004d}.success-card img{z-index:2;width:80px;margin-bottom:20px;position:relative}.success-card p{color:var(--primary-blue);z-index:2;font-size:20px;font-weight:800;position:relative}.border-svg{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.border-path{fill:none;stroke:var(--primary-blue);stroke-width:6px;stroke-dasharray:1200;stroke-dashoffset:1200px;animation:.7s linear forwards borderRun}@keyframes borderRun{to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-content{animation:.4s ease-out fadeIn}.history-status-tabs{background:#e8eef5;border-radius:11px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:14px;padding:4px;display:grid}.history-status-tab{color:var(--gray-mid);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:11px 8px;font-size:12px;font-weight:700}.history-status-tab.active{color:var(--primary-blue);background:#fff;box-shadow:0 2px 7px #11375c1f}.history-color-legend{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;display:grid}.history-color-item{background:#fff;border:1px solid;border-radius:999px;align-items:center;gap:6px;min-width:0;padding:8px 7px;font-size:10px;line-height:1.2;display:flex}.history-color-item span{border-radius:50%;flex:none;width:12px;height:12px}.history-color-item strong{color:#4b5563;text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.history-color-item.pending{border-color:#fcd34d}.history-color-item.pending span{background:#f59e0b}.history-color-item.unavailable{border-color:#fca5a5}.history-color-item.unavailable span{background:#dc2626}.history-color-item.completed{border-color:#86efac}.history-color-item.completed span{background:#16a34a}.review-unanalyzable-button{color:#dc2626;width:100%;font:inherit;cursor:pointer;background:#fff1f2;border:1px solid #fca5a5;border-radius:9px;margin-top:10px;padding:12px;font-size:13px;font-weight:700}.review-unanalyzable-button:hover{background:#fee2e2}.review-unanalyzable-button:disabled{opacity:.65;cursor:wait}.history-item-unavailable,.history-item-pending,.history-item-completed{color:var(--dark-blue);background:#fff;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;border:1px solid #e3eaf0!important;border-left-width:5px!important;border-radius:14px!important;padding:16px 18px 16px 28px!important}.history-item-unavailable:hover,.history-item-pending:hover,.history-item-completed:hover{transform:translateY(-2px)}.history-item-unavailable{border-left-color:#dc2626!important;box-shadow:0 4px 14px #dc262614!important}.history-item-pending{border-left-color:#f59e0b!important;box-shadow:0 4px 14px #f59e0b14!important}.history-item-completed{border-left-color:#16a34a!important;box-shadow:0 4px 14px #16a34a14!important}.history-item-unavailable>.ui-icon,.history-item-pending>.ui-icon,.history-item-completed>.ui-icon{display:none}.history-record-title{color:#172b4d;align-items:center;gap:8px;font-size:14px;line-height:1.4;display:flex}.history-record-meta{color:#718096;margin-top:5px;font-size:12px;line-height:1.5}.history-status-chip{white-space:nowrap;border-radius:999px;align-items:center;padding:3px 8px;font-size:10px;font-weight:700;display:inline-flex}.history-status-chip.pending{color:#9a6700;background:#fff7d6}.history-status-chip.unavailable{color:#b42318;background:#fee4e2}.history-status-chip.completed{color:#137333;background:#dcfce7}.student-history-item{background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s;border:1px solid #d6eeea!important;border-left:4px solid #0f766e!important;border-radius:14px!important;box-shadow:0 4px 14px #0f766e14!important}.student-history-item:hover{transform:translateY(-2px);border-color:#8fd3c8!important;box-shadow:0 8px 20px #0f766e21!important}.student-history-item>.ui-icon{color:#0f766e}.student-history-item.unavailable{border-color:#fecaca #fecaca #fecaca #dc2626!important;box-shadow:0 4px 14px #dc262614!important}.student-history-item.unavailable:hover{border-color:#fca5a5!important;box-shadow:0 8px 20px #dc262621!important}.student-history-item.unavailable>.ui-icon{color:#dc2626}.student-profile-page{padding-top:24px}.student-profile-heading{justify-content:space-between;align-items:center;gap:14px;margin-bottom:8px;display:flex}.student-profile-heading>div:last-child{order:1}.student-profile-avatar-wrap{flex:none;order:2;position:relative}.student-profile-heading .account-success-icon{flex:none;width:62px;height:62px;margin:0}.student-profile-heading .account-success-icon .ui-icon{width:30px;height:30px}.student-profile-heading .account-success-icon img{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.student-profile-photo-button{background:var(--primary-blue);color:#fff;cursor:pointer;border:2px solid #fff;border-radius:50%;width:28px;height:28px;padding:5px;position:absolute;bottom:-5px;right:-5px;box-shadow:0 3px 8px #11375c33}.student-profile-photo-button .ui-icon{width:15px;height:15px}.student-header-avatar{color:#0f766e;width:38px;height:38px;font:inherit;cursor:pointer;background:#d8f1ec;border:2px solid #c8e8e3;border-radius:50%;justify-content:center;align-items:center;padding:0;font-weight:700;display:inline-flex;overflow:hidden}.student-header-avatar img{object-fit:cover;width:100%;height:100%}.student-profile-heading .title-large{margin-bottom:4px}.student-profile-heading .page-hint{margin-bottom:0}.student-profile-summary{border-left:3px solid var(--primary-blue);background:var(--accent-blue);border-radius:0 10px 10px 0;margin-bottom:16px;padding:14px 16px}.student-profile-name{color:var(--dark-blue);font-size:15px;font-weight:700}.student-profile-role{color:var(--gray-mid);margin-top:3px;font-size:12px}.student-profile-form{margin-bottom:12px}.student-profile-form-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;display:flex}.student-profile-form-heading h2{margin-bottom:4px;font-size:18px}.student-profile-form-heading p{color:var(--gray-mid);font-size:12px;line-height:1.5}.student-profile-badge{color:var(--primary-blue);background:var(--accent-blue);border-radius:999px;flex:none;padding:5px 9px;font-size:11px;font-weight:700}.student-profile-edit-badge{color:#0f766e;background:#d8f1ec;border-radius:999px;flex:none;padding:5px 9px;font-size:11px;font-weight:700}.student-profile-details{grid-template-columns:1fr 1fr;gap:12px;display:grid}.student-profile-details>div{background:#fafcfe;border:1px solid #e5ecf2;border-radius:10px;padding:12px}.student-profile-details span{color:var(--gray-mid);margin-bottom:4px;font-size:11px;display:block}.student-profile-details strong{color:var(--dark-blue);font-size:14px;line-height:1.45;display:block}.student-profile-edit-form{border-color:#c8e8e3}.student-profile-health-grid{grid-template-columns:1fr 1fr}.student-profile-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.student-profile-grid .form-group{min-width:0}.student-profile-actions{align-items:center;gap:12px;margin-top:4px;display:flex}.student-profile-actions #student-profile-status{flex:1;min-height:20px;font-size:12px;line-height:1.5}.student-profile-actions .btn-primary{width:auto;min-width:132px;padding:12px 18px}.student-profile-logout{width:100%;color:var(--danger);font:inherit;cursor:pointer;background:0 0;border:1px solid #ff3b3047;border-radius:9px;padding:11px;font-size:13px;font-weight:700;display:block}.student-profile-logout:hover{background:#ff3b300f}.student-profile-appbar{justify-content:space-between;align-items:center;margin:-8px 0 12px;display:flex}.student-profile-brand{color:#0f766e;align-items:center;gap:9px;font-size:18px;display:flex}.student-profile-brand-mark{border:2px solid #0f766e;border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-size:11px;font-weight:800;display:inline-flex}.student-profile-appbar .student-profile-photo-button{border:0;border-radius:10px;width:36px;height:36px;position:static}.student-profile-banner{color:#fff;background:linear-gradient(135deg,#117b79,#287fa8);border-radius:0 0 18px 18px;justify-content:space-between;align-items:center;min-height:112px;margin:0 -16px 16px;padding:18px 20px;display:flex}.student-profile-banner p{margin-bottom:14px;font-size:15px}.student-profile-banner strong{font-size:15px;font-weight:500}.student-profile-banner .account-success-icon{color:#0f766e;background:#e3f2ff;border:3px solid #fff;width:88px;height:88px;margin:0}.student-profile-banner .account-success-icon .ui-icon{width:45px;height:45px}.student-profile-id-card{background:#fff;border:1px solid #dce3ea;border-radius:14px;margin-bottom:14px;padding:18px;box-shadow:0 4px 12px #11375c1a}.student-profile-id-card h1{color:#287fa8;margin:0 0 8px;font-size:22px;font-weight:700}.student-profile-id-card p{color:#374151;margin:7px 0;font-size:14px;line-height:1.45}.student-profile-id-card b{color:#287fa8}.student-profile-menu-list{gap:8px;margin-bottom:14px;display:grid}.student-profile-menu-item{color:#4b5563;width:100%;min-height:72px;font:inherit;text-align:left;cursor:pointer;background:#fff;border:1px solid #dde3e8;border-radius:12px;align-items:center;gap:16px;padding:10px 14px;font-size:16px;display:flex;box-shadow:0 3px 10px #11375c14}.student-profile-menu-icon{color:#fff;border-radius:9px;flex:none;justify-content:center;align-items:center;width:48px;height:48px;display:inline-flex}.student-profile-menu-icon .ui-icon{width:27px;height:27px}.student-profile-menu-icon.blue{background:#1687ee}.student-profile-menu-icon.red{background:#f5222d}.student-profile-menu-icon.yellow{background:#f2c400}.student-profile-menu-icon.brown{background:#967619}.student-profile-menu-icon.green{background:#19c99b}.student-profile-health-card{background:#f8fffe;border:1px solid #c8e8e3;border-radius:14px;margin-bottom:14px;padding:16px}.student-profile-health-card h2{color:#0f766e;margin-bottom:12px;font-size:17px}.student-profile-health-fields{grid-template-columns:1fr 1fr;gap:10px;display:grid}.student-profile-health-fields label{color:#0f766e;font-size:12px;font-weight:600}.student-profile-health-fields input{width:100%;color:var(--dark-blue);font:inherit;background:#fff;border:1px solid #b8ddd7;border-radius:8px;margin-top:5px;padding:10px 12px;display:block}@media (width<=390px){.student-profile-heading{align-items:flex-start}.student-profile-heading .account-success-icon{width:52px;height:52px}.student-profile-heading .account-success-icon .ui-icon{width:25px;height:25px}.student-profile-grid{gap:7px}.student-profile-details{grid-template-columns:1fr;gap:8px}.student-profile-health-grid{grid-template-columns:1fr}.student-profile-actions{flex-direction:column-reverse;align-items:stretch;gap:8px}.student-profile-actions .btn-primary{width:100%}.student-profile-menu-item{min-height:64px;font-size:14px}}