*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#222;background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px}.app{max-width:900px;margin:0 auto;padding:0 16px 40px}header{border-bottom:2px solid #003865;align-items:center;gap:12px;margin-bottom:20px;padding:16px 0 12px;display:flex}header h1{color:#003865;flex:1;font-size:1.3rem}header .logo{height:40px}header .logout{cursor:pointer;color:#555;background:0 0;border:1px solid #ccc;border-radius:4px;padding:6px 12px;font-size:13px}header .logout:hover{background:#eee}.student-selector{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;display:flex}.student-tab{cursor:pointer;background:#fff;border:2px solid #ccc;border-radius:20px;padding:7px 18px;font-size:14px;transition:all .15s}.student-tab:hover{color:#003865;border-color:#003865}.student-tab.active{color:#fff;background:#003865;border-color:#003865}.staff-search{margin-left:8px;position:relative}.staff-search input{border:2px solid #ccc;border-radius:20px;outline:none;width:200px;padding:7px 14px;font-size:14px}.staff-search input:focus{border-color:#003865}.search-results{z-index:10;background:#fff;border:1px solid #ccc;border-radius:6px;min-width:220px;max-height:240px;list-style:none;position:absolute;top:110%;left:0;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.search-results li{cursor:pointer;padding:9px 14px;font-size:14px}.search-results li:hover{background:#f0f4f8}.student-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.student-header h2{color:#003865;font-size:1.2rem}.transcript-btn{color:#fff;cursor:pointer;background:#003865;border:none;border-radius:6px;padding:8px 16px;font-size:14px}.transcript-btn:hover{background:#00254a}.doc-tabs{border-bottom:2px solid #003865;gap:0;margin-bottom:16px;display:flex}.doc-tab{cursor:pointer;color:#555;background:0 0;border:none;border-bottom:3px solid #0000;margin-bottom:-2px;padding:9px 20px;font-size:14px;transition:all .15s}.doc-tab:hover{color:#003865}.doc-tab.active{color:#003865;border-bottom-color:#003865;font-weight:600}.doc-list table{border-collapse:collapse;background:#fff;border-radius:8px;width:100%;overflow:hidden;box-shadow:0 1px 4px #00000014}.doc-list th{text-align:left;color:#666;background:#f8f9fa;border-bottom:1px solid #e5e5e5;padding:11px 14px;font-size:13px;font-weight:600}.doc-list td{border-bottom:1px solid #f0f0f0;padding:11px 14px;font-size:14px}.doc-list tr:last-child td{border-bottom:none}.doc-list tr:hover td{background:#fafbfc}.view-btn{color:#fff;cursor:pointer;background:#003865;border:none;border-radius:4px;padding:5px 14px;font-size:13px}.view-btn:hover{background:#00254a}.view-btn:disabled{cursor:default;background:#aaa}.loading{text-align:center;color:#888;padding:40px}.error{text-align:center;color:#c00;padding:40px}.no-docs{color:#888;padding:30px 14px;font-size:14px}.no-student{text-align:center;color:#888;padding:40px}.login-screen{text-align:center;background:#fff;border-radius:10px;max-width:400px;margin:80px auto;padding:40px;box-shadow:0 2px 16px #0000001a}.login-screen .logo{height:60px;margin-bottom:20px}.login-screen h2{color:#003865;margin-bottom:12px}.login-screen p{color:#666;font-size:14px}@media (width<=600px){.app{padding:0 12px 32px}header h1{font-size:1.1rem}.student-tab{padding:6px 14px;font-size:13px}.doc-tab{padding:8px 14px;font-size:13px}.doc-list td,.doc-list th{padding:9px 10px;font-size:13px}.staff-search input{width:160px}}