*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f5f1ed;--bg-warm: #ebe5de;--bg-dark: #3d3530;--bg-dark-soft: #4a423c;--surface: rgba(255, 255, 255, .55);--surface-solid: #ffffff;--text: #2c2420;--text-light: #f5f1ed;--text-secondary: #7a6e65;--text-muted: #a69d95;--border: rgba(0, 0, 0, .06);--accent: #b07847;--accent-hover: #9a6639;--accent-glow: rgba(176, 120, 71, .12);--safe: #5a8a6a;--safe-bg: rgba(90, 138, 106, .1);--safe-glow: rgba(90, 138, 106, .18);--caution: #b89545;--caution-bg: rgba(184, 149, 69, .1);--caution-glow: rgba(184, 149, 69, .18);--warning: #c47a3a;--warning-bg: rgba(196, 122, 58, .1);--warning-glow: rgba(196, 122, 58, .18);--critical: #b54a3e;--critical-bg: rgba(181, 74, 62, .1);--critical-glow: rgba(181, 74, 62, .18);--lect-color: #6a7fa8;--lect-bg: rgba(106, 127, 168, .12);--lab-color: #8a6a9f;--lab-bg: rgba(138, 106, 159, .1);--radius: 16px;--radius-sm: 10px;--radius-lg: 24px;--shadow: 0 2px 8px rgba(60, 50, 40, .04), 0 1px 2px rgba(60, 50, 40, .03);--shadow-md: 0 4px 20px rgba(60, 50, 40, .06), 0 2px 6px rgba(60, 50, 40, .03);--shadow-lg: 0 12px 40px rgba(60, 50, 40, .08), 0 4px 12px rgba(60, 50, 40, .04);--shadow-hover: 0 16px 48px rgba(60, 50, 40, .1), 0 6px 16px rgba(60, 50, 40, .05)}body{font-family:Nunito,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-10px) rotate(1deg)}66%{transform:translateY(5px) rotate(-1deg)}}@keyframes floatSlow{0%,to{transform:translate(0) scale(1)}50%{transform:translate(12px,-16px) scale(1.03)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.7}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes breathe{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.app{min-height:100vh;display:flex;flex-direction:column;position:relative}.bg-shapes{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.bg-shape{position:absolute;border-radius:50%;opacity:.25;filter:blur(70px)}.bg-shape-1{width:380px;height:380px;background:linear-gradient(135deg,#ddd2c4,#c8b8a4);top:-120px;right:-80px;animation:floatSlow 22s ease-in-out infinite}.bg-shape-2{width:280px;height:280px;background:linear-gradient(135deg,#c4cdd6,#a8b8c4);bottom:15%;left:-100px;animation:floatSlow 28s ease-in-out infinite reverse}.bg-shape-3{width:220px;height:220px;background:linear-gradient(135deg,#d6cec4,#c0b4a4);top:55%;right:8%;animation:floatSlow 20s ease-in-out infinite 4s}.app-header{text-align:center;padding:3rem 1.5rem 2rem;position:relative;z-index:1;animation:fadeInUp .8s ease-out}.app-header h1{font-family:Nunito,sans-serif;font-size:2rem;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.2}.subtitle{color:var(--text-secondary);font-size:.95rem;margin-top:.6rem;font-weight:500}.app-main{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:0 1.5rem 2rem;position:relative;z-index:1}.app-footer{text-align:center;padding:2rem 1.5rem;background:var(--bg-warm);color:var(--text-muted);font-size:.8rem;position:relative;z-index:1;letter-spacing:.01em;border-top:1px solid var(--border)}.login-container{display:flex;justify-content:center;align-items:center;min-height:65vh;animation:fadeIn .6s ease-out}.login-card{background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.45);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2.75rem 2.5rem;width:100%;max-width:400px;text-align:center;animation:fadeInUp .6s ease-out .2s both;transition:box-shadow .4s ease,transform .4s ease}.login-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.login-icon-wrapper{margin-bottom:1rem}.login-icon-svg{width:48px;height:48px;animation:breathe 4s ease-in-out infinite}.login-card h2{font-size:1.5rem;font-weight:700;margin-bottom:.3rem;color:var(--text)}.login-desc{color:var(--text-secondary);font-size:.88rem;margin-bottom:1.75rem;line-height:1.5}.login-form{text-align:left}.form-group{margin-bottom:1.15rem}.form-group label{display:block;font-size:.72rem;font-weight:700;margin-bottom:.45rem;color:var(--text);text-transform:uppercase;letter-spacing:.06em}.form-group input{width:100%;padding:.8rem 1rem;border:1.5px solid rgba(0,0,0,.08);border-radius:var(--radius-sm);font-size:.92rem;font-family:inherit;background:#ffffff80;transition:all .3s ease;color:var(--text)}.form-group input::placeholder{color:var(--text-muted)}.form-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#ffffffd9}.btn-login{width:100%;padding:.85rem;background:var(--bg-dark);color:var(--text-light);border:none;border-radius:var(--radius-sm);font-size:.92rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .3s ease;margin-top:.5rem;letter-spacing:.01em}.btn-login:hover{background:var(--bg-dark-soft);transform:translateY(-1px);box-shadow:0 4px 14px #3c322833}.btn-login:active{transform:translateY(0)}.btn-login:disabled{background:#a09890;cursor:not-allowed;transform:none;box-shadow:none}.loading-text{display:flex;align-items:center;justify-content:center;gap:.6rem}.spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.error-alert{background:var(--critical-bg);color:var(--critical);padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:.84rem;margin-bottom:1.15rem;text-align:left;border:1px solid rgba(181,74,62,.12);animation:scaleIn .3s ease-out;font-weight:600}.error-icon{margin-right:.4rem}.login-note{color:var(--text-muted);font-size:.73rem;margin-top:1.5rem;line-height:1.5}.dashboard{animation:fadeIn .5s ease-out}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;animation:fadeInUp .6s ease-out}.dashboard-header h2{font-size:1.6rem;font-weight:800;color:var(--text)}.thresholds-info{color:var(--text-secondary);font-size:.82rem;margin-top:.2rem;font-weight:500}.btn-logout{background:none;border:1.5px solid rgba(0,0,0,.1);border-radius:var(--radius-sm);padding:.5rem 1rem;font-size:.8rem;font-family:inherit;cursor:pointer;color:var(--text-secondary);transition:all .3s ease;font-weight:600}.btn-logout:hover{background:var(--bg-dark);color:var(--text-light);border-color:var(--bg-dark)}.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1.75rem}.summary-card{background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:1.6rem;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);animation:fadeInUp .6s ease-out both}.summary-card:nth-child(1){animation-delay:.1s}.summary-card:nth-child(2){animation-delay:.2s}.summary-card:nth-child(3){animation-delay:.3s}.summary-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.summary-card.primary{background:var(--bg-dark);color:var(--text-light);border:none}.summary-card.primary .card-label{color:#f5f1ed8c}.summary-card.primary .card-detail{color:#f5f1ed73}.card-badge{display:inline-block;background:var(--accent-glow);color:var(--accent);font-size:.62rem;font-weight:800;padding:.2rem .6rem;border-radius:20px;margin-bottom:.65rem;text-transform:uppercase;letter-spacing:.06em}.summary-card.primary .card-badge{background:#f5f1ed1a;color:#f5f1edb3}.card-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);font-weight:700}.card-value{font-size:2.4rem;font-weight:800;margin:.3rem 0;letter-spacing:-.02em}.card-detail{font-size:.82rem;color:var(--text-secondary);font-weight:500}.card-skip{margin-top:.65rem;font-size:.82rem;font-weight:700}.skip-positive{color:var(--safe)}.skip-negative{color:var(--critical)}.skip-na{color:var(--text-muted)}.skip-explainer{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);padding:.9rem 1.25rem;font-size:.82rem;color:var(--text-secondary);margin-bottom:1.75rem;animation:fadeInUp .6s ease-out .4s both;line-height:1.6;font-weight:500}.table-container{background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;animation:fadeInUp .6s ease-out .5s both}.attendance-table{width:100%;border-collapse:collapse;font-size:.84rem}.attendance-table th{text-align:left;padding:.9rem 1.2rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);font-weight:700;border-bottom:1.5px solid var(--border);background:#ebe5de66;white-space:nowrap}.attendance-table td{padding:.8rem 1.2rem;border-bottom:1px solid rgba(0,0,0,.035);vertical-align:middle}.subject-row{transition:all .3s ease;animation:fadeInUp .4s ease-out both}.subject-row:nth-child(1){animation-delay:.55s}.subject-row:nth-child(2){animation-delay:.6s}.subject-row:nth-child(3){animation-delay:.65s}.subject-row:nth-child(4){animation-delay:.7s}.subject-row:nth-child(5){animation-delay:.75s}.subject-row:nth-child(6){animation-delay:.8s}.subject-row:nth-child(7){animation-delay:.85s}.subject-row:nth-child(8){animation-delay:.9s}.subject-row:nth-child(9){animation-delay:.95s}.subject-row:nth-child(10){animation-delay:1s}.subject-row:nth-child(n+11){animation-delay:1s}.subject-row:hover{background:#ebe5de80}.subject-row:last-child td{border-bottom:none}.subject-row.severity-critical{background:#b54a3e08}.subject-row.severity-critical:hover{background:#b54a3e0f}.subject-name{min-width:200px}.course-name{display:block;font-weight:700;font-size:.84rem;color:var(--text)}.course-code{display:block;font-size:.7rem;color:var(--text-muted);margin-top:.12rem;font-weight:500}.type-badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.type-badge.lect{background:var(--lect-bg);color:var(--lect-color)}.type-badge.lab{background:var(--lab-bg);color:var(--lab-color)}.attendance-fraction{font-variant-numeric:tabular-nums;font-weight:600}.percentage{font-variant-numeric:tabular-nums}.severity-text-safe{color:var(--safe);font-weight:700}.severity-text-caution{color:var(--caution);font-weight:700}.severity-text-warning{color:var(--warning);font-weight:700}.severity-text-critical{color:var(--critical);font-weight:700}.skip-cell{font-weight:700;font-variant-numeric:tabular-nums}.status-badge{display:inline-block;padding:.22rem .7rem;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap;letter-spacing:.02em}.severity-bg-safe{background:var(--safe-bg);color:var(--safe)}.severity-bg-caution{background:var(--caution-bg);color:var(--caution)}.severity-bg-warning{background:var(--warning-bg);color:var(--warning)}.severity-bg-critical{background:var(--critical-bg);color:var(--critical)}.legend{display:flex;justify-content:center;gap:1.5rem;margin-top:1.25rem;flex-wrap:wrap;animation:fadeIn .6s ease-out .6s both}.legend-item{display:flex;align-items:center;gap:.4rem;font-size:.73rem;color:var(--text-secondary);font-weight:600}.dot{width:7px;height:7px;border-radius:50%;transition:transform .3s ease}.legend-item:hover .dot{transform:scale(1.4)}.dot.green{background:var(--safe);box-shadow:0 0 5px var(--safe-glow)}.dot.yellow{background:var(--caution);box-shadow:0 0 5px var(--caution-glow)}.dot.orange{background:var(--warning);box-shadow:0 0 5px var(--warning-glow)}.dot.red{background:var(--critical);box-shadow:0 0 5px var(--critical-glow)}@media (max-width: 768px){.app-header{padding:2.5rem 1.25rem 1.5rem}.app-header h1{font-size:1.6rem}.subtitle{font-size:.88rem}.app-main{padding:0 1rem 1.5rem}.login-card{padding:2.25rem 1.5rem;max-width:100%;border-radius:var(--radius)}.login-card h2{font-size:1.35rem}.dashboard-header{flex-direction:column;gap:.75rem}.dashboard-header h2{font-size:1.4rem}.btn-logout{align-self:flex-start}.summary-cards{grid-template-columns:1fr;gap:1rem}.card-value{font-size:2rem}.table-container{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;overflow:visible}.attendance-table{display:block}.attendance-table thead{display:none}.attendance-table tbody{display:flex;flex-direction:column;gap:.75rem}.subject-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius);padding:1.15rem;box-shadow:var(--shadow);transition:all .3s ease}.subject-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.subject-row.severity-critical{border-left:3px solid var(--critical)}.subject-row td{padding:0;border:none}.subject-row td:nth-child(1){grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-bottom:.45rem;border-bottom:1px solid var(--border)}.subject-name{min-width:unset}.subject-row td:nth-child(2){grid-column:1 / -1;display:none}.subject-row td:nth-child(3):before,.subject-row td:nth-child(4):before,.subject-row td:nth-child(5):before,.subject-row td:nth-child(6):before{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700;margin-bottom:.1rem}.subject-row td:nth-child(3):before{content:"Present"}.subject-row td:nth-child(4):before{content:"Percentage"}.subject-row td:nth-child(5):before{content:"Can Skip"}.subject-row td:nth-child(6):before{content:"Status"}.legend{gap:1rem}.bg-shape-1{width:220px;height:220px}.bg-shape-2{width:180px;height:180px}.bg-shape-3{width:140px;height:140px}}@media (max-width: 480px){.app-header{padding:2rem 1rem 1rem}.app-header h1{font-size:1.4rem}.subtitle{font-size:.8rem}.login-card{padding:1.75rem 1.15rem}.login-card h2{font-size:1.2rem}.login-desc{font-size:.8rem}.form-group input{padding:.72rem .85rem;font-size:.88rem}.btn-login{padding:.78rem}.dashboard-header h2{font-size:1.25rem}.summary-card{padding:1.15rem}.card-value{font-size:1.7rem}.skip-explainer{padding:.8rem .9rem;font-size:.78rem}.subject-row{padding:.9rem;gap:.4rem .7rem}.course-name{font-size:.78rem}.app-footer{padding:1.5rem 1rem}}