:root{color-scheme:dark;--md-sys-color-primary: #a8c7fa;--md-sys-color-on-primary: #062e6f;--md-sys-color-primary-container: #224a94;--md-sys-color-on-primary-container: #d6e3ff;--md-sys-color-secondary: #c2c7cf;--md-sys-color-on-secondary: #2b313a;--md-sys-color-secondary-container: #424751;--md-sys-color-on-secondary-container: #dee3ec;--md-sys-color-error: #ffb4ab;--md-sys-color-on-error: #690005;--md-sys-color-error-container: #93000a;--md-sys-color-on-error-container: #ffdad6;--md-sys-color-background: #111318;--md-sys-color-on-background: #e1e2e8;--md-sys-color-surface: #111318;--md-sys-color-on-surface: #e1e2e8;--md-sys-color-surface-variant: #44474e;--md-sys-color-on-surface-variant: #c4c6d0;--md-sys-color-outline: #8e9099;--md-sys-color-outline-variant: #44474e;--color-primary: var(--md-sys-color-primary);--color-primary-hover: var(--md-sys-color-on-primary-container);--color-primary-muted: var(--md-sys-color-primary-container);--color-success: #81c995;--color-success-muted: rgba(129, 201, 149, .15);--color-warning: #fde293;--color-warning-muted: rgba(253, 226, 147, .15);--color-danger: var(--md-sys-color-error);--color-danger-muted: var(--md-sys-color-error-container);--color-purple: #dfbcf1;--color-purple-muted: #583f68;--color-bg: var(--md-sys-color-background);--color-surface: var(--md-sys-color-surface);--color-surface-elevated: #1e2025;--color-surface-hover: #292b30;--color-fill: var(--md-sys-color-surface-variant);--color-text-main: var(--md-sys-color-on-surface);--color-text-secondary: var(--md-sys-color-on-surface-variant);--color-text-muted: var(--md-sys-color-outline);--color-border: var(--md-sys-color-outline-variant);--color-border-subtle: rgba(142, 144, 153, .2);--color-border-extra-subtle: rgba(142, 144, 153, .14);--shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);--shadow-hover: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);--shadow-card: none;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 8px;--radius-pill: 9999px;--ease: cubic-bezier(.2, 0, 0, 1);--ease-spring: cubic-bezier(.175, .885, .32, 1.275);--duration: .2s;--font-stack: "Roboto", "Noto Sans TC", sans-serif;--color-header-bg: rgba(28, 28, 30, .72);--color-modal-overlay: rgba(0, 0, 0, .45);--color-tour-overlay: rgba(7, 10, 18, .68);--color-tour-highlight: rgba(168, 199, 250, .95);--color-tour-highlight-inset: rgba(255, 255, 255, .15);--color-tour-highlight-glow: rgba(168, 199, 250, .45);--color-selection: rgba(0, 122, 255, .25);--color-focus-ring: rgba(0, 122, 255, .28)}:root[data-theme=light]{color-scheme:light;--md-sys-color-primary: #2d5daa;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: #d7e3ff;--md-sys-color-on-primary-container: #12326a;--md-sys-color-secondary: #565f71;--md-sys-color-on-secondary: #ffffff;--md-sys-color-secondary-container: #dae2f9;--md-sys-color-on-secondary-container: #131c2b;--md-sys-color-error: #ba1a1a;--md-sys-color-on-error: #ffffff;--md-sys-color-error-container: #ffdad6;--md-sys-color-on-error-container: #410002;--md-sys-color-background: #f8f9ff;--md-sys-color-on-background: #181b21;--md-sys-color-surface: #f8f9ff;--md-sys-color-on-surface: #181b21;--md-sys-color-surface-variant: #e1e2ec;--md-sys-color-on-surface-variant: #444750;--md-sys-color-outline: #74777f;--md-sys-color-outline-variant: #c5c6d0;--color-success: #126738;--color-success-muted: rgba(18, 103, 56, .12);--color-warning: #946c00;--color-warning-muted: rgba(148, 108, 0, .14);--color-purple: #635b86;--color-purple-muted: #ece7f8;--color-surface-elevated: #ffffff;--color-surface-hover: #eef1fa;--color-border-subtle: rgba(116, 119, 127, .25);--color-border-extra-subtle: rgba(116, 119, 127, .16);--shadow-soft: 0 1px 2px 0 rgba(24, 27, 33, .09), 0 1px 4px 1px rgba(24, 27, 33, .08);--shadow-hover: 0 1px 3px 0 rgba(24, 27, 33, .12), 0 4px 12px 2px rgba(24, 27, 33, .12);--shadow-card: 0 1px 2px 0 rgba(24, 27, 33, .04);--color-header-bg: rgba(248, 249, 255, .88);--color-modal-overlay: rgba(17, 19, 24, .3);--color-tour-overlay: rgba(17, 19, 24, .52);--color-tour-highlight: rgba(45, 93, 170, .95);--color-tour-highlight-inset: rgba(255, 255, 255, .85);--color-tour-highlight-glow: rgba(45, 93, 170, .35);--color-selection: rgba(45, 93, 170, .22);--color-focus-ring: rgba(45, 93, 170, .2)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-stack);background:var(--color-bg);color:var(--color-text-main);min-height:100vh;line-height:1.5;overflow-x:hidden;font-feature-settings:"cv02","cv03","cv04","cv11"}.bg-orbs{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(150px);opacity:.08}.orb-1{width:800px;height:800px;background:var(--color-primary);top:-30%;right:-15%}.orb-2{width:600px;height:600px;background:var(--color-purple);bottom:-20%;left:-10%}.orb-3{display:none}.container{max-width:1200px;margin:0 auto;padding:0 24px 48px}.seo-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header{position:sticky;top:0;z-index:100;margin:0 -24px 40px;padding:10px 24px;background:var(--color-header-bg);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid var(--color-border-subtle)}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:12px;max-width:1200px;margin:0 auto}.logo{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}.header-title-group{min-width:0}.logo-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--color-primary);border-radius:var(--radius-sm);color:#fff;flex-shrink:0}.logo-icon svg{width:18px;height:18px}.logo-text h1{font-size:20px;line-height:1.2;font-weight:600;color:var(--color-text-main);letter-spacing:-.02em;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subtitle{color:var(--color-text-muted);font-size:12px;line-height:1.2;margin:1px 0 0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}.subtitle-row{display:flex;align-items:baseline;gap:6px;min-width:0}.data-time-box{display:flex;align-items:flex-end;gap:10px;position:relative;z-index:50;background:transparent;padding:0;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;min-width:0}.header-status-badge{display:none;align-items:center;min-height:18px;padding:1px 6px;border:1px solid var(--color-warning-muted);border-radius:var(--radius-pill);color:var(--color-warning);background:color-mix(in srgb,var(--color-warning-muted) 40%,transparent);font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;flex-shrink:0}body.read-only-mode .header-status-badge{display:inline-flex}body.read-only-mode .header-status-badge:empty{display:none}.header-actions{justify-content:flex-end;flex-wrap:nowrap}.time-info{display:flex;flex-direction:row;gap:0;min-height:36px;padding-right:12px;border-right:1px solid var(--color-border-subtle);align-items:center;justify-content:center}.time-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.time-value{font-size:12px;line-height:1.2;font-weight:500;color:var(--color-text-muted);opacity:.78;font-variant-numeric:tabular-nums}.import-dropdown{position:relative}#gradesFile{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.import-dropdown-btn{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:var(--md-sys-color-on-primary);font-size:13px;font-weight:500;cursor:pointer;transition:transform var(--duration) var(--ease),background-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease);box-shadow:none;touch-action:manipulation;white-space:nowrap;flex-shrink:0}.import-dropdown-btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-soft)}.import-dropdown-btn:active{transform:scale(.96);background:var(--color-primary-muted)}.dropdown-icon,.item-icon{display:flex;align-items:center;justify-content:center}.dropdown-icon{font-size:16px}.dropdown-arrow{display:flex;align-items:center;justify-content:center;font-size:10px;transition:transform var(--duration) var(--ease)}.import-dropdown.active .dropdown-arrow{transform:rotate(180deg)}.import-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:224px;background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);opacity:0;pointer-events:none;transform:translateY(-4px) scale(.98);visibility:hidden;transition:opacity .15s var(--ease),transform .15s var(--ease),visibility 0s linear .15s;z-index:1000;overflow:hidden}.import-dropdown.active .import-dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);visibility:visible;transition:opacity .15s var(--ease),transform .15s var(--ease),visibility 0s linear 0s}.dropdown-item{display:flex;align-items:center;gap:10px;padding:11px 14px;background:transparent;border:none;width:100%;text-align:left;cursor:pointer;transition:transform var(--duration) var(--ease),background var(--duration) var(--ease);color:var(--color-text-main);touch-action:manipulation}.dropdown-item:hover{background:var(--color-fill)}.dropdown-item:active{transform:scale(.98);background:var(--color-fill)}.dropdown-item+.dropdown-item{border-top:1px solid var(--color-border-subtle)}.item-icon{font-size:18px;color:var(--color-text-muted)}.item-text{display:flex;flex-direction:column;gap:1px}.item-title{font-size:13px;font-weight:500;color:var(--color-text-main)}.item-hint{font-size:11px;color:var(--color-text-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-modal-overlay);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s}.modal-overlay.active{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .2s var(--ease),visibility 0s linear 0s}.modal-content{background:var(--color-surface-elevated);border-radius:var(--radius-lg);border:none;width:90%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-hover);transform:scale(.97) translateY(8px);transition:opacity .25s var(--ease-spring),transform .25s var(--ease-spring)}.modal-overlay.active .modal-content{transform:scale(1) translateY(0)}.modal-content.sm{max-width:400px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:none}.modal-header h3{font-size:17px;font-weight:600;color:var(--color-text-main);display:flex;align-items:center;gap:8px;letter-spacing:-.02em}.modal-header h3 svg{color:var(--color-primary)}.tooltip-icon{font-size:18px;color:var(--color-text-dim, var(--color-text-muted));cursor:pointer;position:relative;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--duration) var(--ease)}.tooltip-icon:active{transform:scale(.96)}.tooltip-icon:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-6px);background:var(--color-surface-hover);color:var(--color-text-main);padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);box-shadow:var(--shadow-soft);z-index:1000}.tooltip-icon:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(4px);border-width:5px;border-style:solid;border-color:var(--color-surface-hover) transparent transparent transparent;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:1000}.tooltip-icon:hover:before,.tooltip-icon:focus:before,.tooltip-icon:focus-within:before,.tooltip-icon:active:before{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(-10px)}.tooltip-icon:hover:after,.tooltip-icon:focus:after,.tooltip-icon:focus-within:after,.tooltip-icon:active:after{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.modal-close{width:40px;height:40px;border:none;background:transparent;border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease),background-color var(--duration) var(--ease),color var(--duration) var(--ease);touch-action:manipulation}.modal-close:hover{background:var(--color-surface-hover);color:var(--color-text-main)}.modal-close:active{transform:scale(.92);background:var(--color-fill)}.modal-body{padding:24px;flex:1;overflow:auto}#sharePreview img{max-width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow-card)}#jsonTextInput{width:100%;height:260px;background:var(--color-bg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);padding:14px;color:var(--color-text-main);font-family:SF Mono,Consolas,Monaco,monospace;font-size:13px;line-height:1.5;resize:vertical;transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}#jsonTextInput:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-focus-ring)}#jsonTextInput::placeholder{color:var(--color-text-muted)}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px 24px;border-top:none;flex-wrap:wrap}.modal-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 24px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;cursor:pointer;transition:transform var(--duration) var(--ease),background-color var(--duration) var(--ease),color var(--duration) var(--ease);border:none;white-space:nowrap;touch-action:manipulation}.modal-btn.cancel{background:transparent;color:var(--color-primary)}.modal-btn.cancel:hover{background:var(--color-fill)}.modal-btn.cancel:active{transform:scale(.96);background:var(--color-fill)}.modal-btn.confirm{background:var(--color-primary);color:var(--md-sys-color-on-primary)}.modal-btn.confirm:hover{background:var(--color-primary-hover)}.modal-btn.confirm:active{transform:scale(.96);background:var(--color-primary-muted)}.modal-btn.reload{background:transparent;color:var(--color-primary);border:1px solid var(--color-border)}.modal-btn.reload:hover{background:var(--color-fill)}.modal-btn.reload:disabled{opacity:.38;cursor:not-allowed}.demo-fill-login-btn{margin-bottom:8px}.modal-btn.danger{background:transparent;color:var(--color-danger)}.modal-btn.danger:hover{background:var(--color-danger-muted)}.form-group{position:relative;margin-bottom:24px}.form-group label{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--color-text-secondary);font-size:16px;pointer-events:none;transition:top .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),left .2s cubic-bezier(.4,0,.2,1),font-size .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1);background:transparent;padding:0 4px;margin:0}.form-group input:focus~label,.form-group input:not(:placeholder-shown)~label,.form-group select:focus~label,.form-group select:not(:placeholder-shown)~label{top:0;transform:translateY(-50%) scale(.75);left:12px;background:var(--color-surface-elevated);color:var(--color-primary)}.form-group input::placeholder{color:transparent}.form-group input,.form-group select{width:100%;padding:16px;background:transparent;border:1px solid var(--md-sys-color-outline);border-radius:var(--radius-sm);color:var(--color-text-main);font-size:16px;line-height:24px;transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}.form-group input:focus,.form-group select:focus{outline:none;background:transparent;border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.form-group select{cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238e9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:48px}.form-group select option{background:var(--color-surface);color:var(--color-text-main)}.password-group{position:relative;width:100%}.password-group input{width:100%;padding-right:44px}.captcha-row{display:flex;align-items:center;gap:10px}.school-captcha-image{flex:1;min-height:48px;max-height:56px;border:1px solid var(--md-sys-color-outline);border-radius:var(--radius-sm);object-fit:contain;background:var(--color-surface);padding:4px}.toggle-password-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:var(--color-text-muted);padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform var(--duration) var(--ease),color var(--duration) var(--ease);touch-action:manipulation}.toggle-password-btn:hover{color:var(--color-primary)}.toggle-password-btn:active{transform:translateY(-50%) scale(.9)}.status-msg{margin-top:10px;font-size:13px;min-height:20px}.status-msg.error{color:var(--color-danger)}.student-card{display:flex;align-items:center;gap:28px;background:var(--color-surface-elevated);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:40px;border:none;box-shadow:var(--shadow-soft);flex-wrap:wrap}.student-avatar{position:relative;width:72px;height:72px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.avatar-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 0deg,var(--color-primary),var(--color-purple),var(--color-primary));animation:spin 8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.avatar-text{position:relative;z-index:1;width:64px;height:64px;background:var(--color-surface);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:var(--color-primary);letter-spacing:-.02em}.student-info{flex:1;min-width:180px}.student-name{font-size:24px;font-weight:600;margin-bottom:8px;color:var(--color-text-main);letter-spacing:-.02em;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset}.student-details{display:flex;gap:20px;flex-wrap:wrap}.detail-item{display:flex;align-items:center;gap:5px;color:var(--color-text-secondary);font-size:13px}.detail-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.student-stats{display:flex;gap:10px;flex-wrap:wrap}.stat-box{background:var(--color-surface-hover);border:none;border-radius:var(--radius-md);padding:14px 22px;text-align:center;min-width:100px;transition:background-color var(--duration) var(--ease)}.stat-box:hover{background:var(--color-surface-hover)}.stat-value{display:block;font-size:28px;font-weight:700;color:var(--color-text-main);line-height:1.2;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.stat-label{display:block;font-size:11px;color:var(--color-text-muted);margin-top:4px;font-weight:500}.section-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;margin-bottom:20px;color:var(--color-text-main);letter-spacing:-.02em}.title-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.title-icon svg{width:20px;height:20px}.scores-overview{margin-bottom:48px}.scores-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.score-card{background:var(--color-surface-elevated);border-radius:var(--radius-lg);padding:20px 22px;border:none;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.score-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.subject-name{font-size:15px;font-weight:600;color:var(--color-text-main);max-width:180px;letter-spacing:-.01em}.score-badge{font-size:20px;font-weight:700;padding:4px 14px;border-radius:var(--radius-pill);background:var(--color-primary-muted);color:var(--color-primary-hover);font-variant-numeric:tabular-nums}.score-badge.high{background:var(--color-success-muted);color:var(--color-success)}.score-badge.medium{background:var(--color-warning-muted);color:var(--color-warning)}.score-badge.low{background:var(--color-danger-muted);color:var(--color-danger)}.score-details{display:flex;flex-direction:column;gap:8px}.score-row{display:flex;justify-content:space-between;align-items:center}.score-label{font-size:13px;color:var(--color-text-muted)}.score-value{font-size:13px;font-weight:500;color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.rank-section{display:flex;flex-direction:column;gap:6px;padding:10px 12px;margin-top:4px;background:var(--color-fill);border-radius:var(--radius-sm);border:none}.rank-item{display:flex;align-items:center;gap:8px}.rank-icon-wrapper{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;flex-shrink:0}.rank-icon-wrapper.class-rank-color{background:var(--color-primary-muted);color:var(--color-primary)}.rank-icon-wrapper.year-rank-color{background:var(--color-warning-muted);color:var(--color-warning)}.rank-label{font-size:11px;font-weight:600;color:var(--color-text-muted);min-width:28px}.rank-value{font-size:14px;font-weight:700;color:var(--color-text-main);margin-left:auto;display:flex;align-items:baseline;gap:1px;font-variant-numeric:tabular-nums}.rank-number{font-size:16px;font-weight:700;color:var(--color-text-main);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset}.rank-total{font-size:12px;font-weight:500;color:var(--color-text-muted);-webkit-text-fill-color:var(--color-text-muted)}.rank-percentile{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);margin-left:6px;letter-spacing:.3px}.rank-percentile.pr-excellent{background:var(--color-purple-muted);color:var(--color-purple)}.rank-percentile.pr-good{background:var(--color-primary-muted);color:var(--color-primary)}.rank-percentile.pr-average{background:var(--color-success-muted);color:var(--color-success)}.rank-percentile.pr-below{background:var(--color-warning-muted);color:var(--color-warning)}.rank-percentile.pr-poor{background:var(--color-danger-muted);color:var(--color-danger)}.progress-bar{height:4px;background:var(--color-fill);border-radius:var(--radius-pill);overflow:hidden;margin-top:8px}.progress-fill{height:100%;border-radius:var(--radius-pill);background:var(--color-primary);transition:width .8s var(--ease)}.diff-indicator{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.diff-indicator.positive{color:var(--color-success)}.diff-indicator.negative{color:var(--color-danger)}.charts-section{margin-bottom:48px}.chart-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:14px}.chart-card{background:var(--color-surface-elevated);border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);overflow:hidden}.chart-header{padding:16px 22px;border-bottom:1px solid var(--color-border-subtle)}.chart-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--color-text-main);letter-spacing:-.01em}.chart-title .chart-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.chart-title .chart-icon svg{width:18px;height:18px}.chart-body{padding:22px;min-height:350px;display:flex;align-items:center;justify-content:center}.standards-section{margin-bottom:48px}.standards-table-wrapper{overflow-x:auto;background:transparent;border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle)}.standards-table{width:100%;border-collapse:collapse;font-size:13px}.standards-table th,.standards-table td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--color-border-subtle)}.standards-table th{background:transparent;font-weight:600;color:var(--color-text-secondary);white-space:nowrap;font-size:13px;letter-spacing:.02em}.standards-table tbody tr{transition:background var(--duration) var(--ease)}.standards-table tbody tr:hover{background:var(--color-fill)}.standards-table tbody tr:last-child td{border-bottom:none}.standards-table td:first-child{font-weight:600;color:var(--color-text-main);text-align:left}.top-mark{color:var(--color-purple)}.front-mark{color:var(--color-primary)}.avg-mark{color:var(--color-success)}.back-mark{color:var(--color-warning)}.bottom-mark{color:var(--color-danger)}.my-score{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}.my-score.excellent{color:var(--color-purple)}.my-score.good{color:var(--color-primary)}.my-score.average{color:var(--color-success)}.my-score.below{color:var(--color-warning)}.my-score.poor{color:var(--color-danger)}.level-badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600}.level-badge.excellent{background:var(--color-purple-muted);color:var(--color-purple)}.level-badge.good{background:var(--color-primary-muted);color:var(--color-primary)}.level-badge.average{background:var(--color-success-muted);color:var(--color-success)}.level-badge.below{background:var(--color-warning-muted);color:var(--color-warning)}.level-badge.poor{background:var(--color-danger-muted);color:var(--color-danger)}.distribution-section{margin-bottom:48px}.charts-section,.standards-section,.distribution-section{content-visibility:auto;contain-intrinsic-size:auto 600px}.distribution-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}.distribution-card{background:var(--color-surface-elevated);border-radius:var(--radius-lg);padding:20px;border:1px solid var(--color-border-subtle)}.distribution-card h4{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--color-text-main)}.distribution-bars{display:flex;flex-direction:column;gap:5px}.dist-row{display:flex;align-items:center;gap:10px}.dist-label{width:52px;font-size:11px;color:var(--color-text-muted);text-align:right;font-variant-numeric:tabular-nums;font-weight:500}.dist-bar-container{flex:1;height:22px;background:var(--color-fill);border-radius:6px;position:relative;margin-right:44px}.dist-bar{height:100%;border-radius:6px;transition:width .8s var(--ease)}.dist-bar-container span.dist-count{position:absolute;right:-42px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:var(--color-text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}.dist-bar.high-score{background:var(--color-purple);opacity:.8}.dist-bar.good-score{background:var(--color-primary);opacity:.8}.dist-bar.avg-score{background:var(--color-success);opacity:.8}.dist-bar.low-score{background:var(--color-warning);opacity:.8}.dist-bar.poor-score{background:var(--color-danger);opacity:.8}.my-score-marker{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--color-text-main);color:var(--color-bg);font-size:10px;padding:1px 6px;border-radius:4px;font-weight:700}.footer{text-align:center;padding:28px;color:var(--color-text-muted);font-size:12px;border-top:1px solid var(--color-border-subtle);margin-top:16px}.footer-intro{margin-bottom:24px;text-align:center;color:var(--color-text-secondary);max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}.footer-intro h2{font-size:16px;margin-bottom:8px;color:var(--color-text-main)}.footer-intro p{font-size:14px}.footer-info{margin-bottom:12px;font-size:13px;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;gap:6px}.footer-links{margin-top:8px;font-size:13px;display:flex;align-items:center;justify-content:center}.footer-link{color:var(--color-text-dim);text-decoration:none;transition:color .2s ease}.footer-divider{color:var(--color-border-subtle);margin:0 10px}.footer-github-link{color:var(--color-text-dim);text-decoration:none;transition:color .2s ease;display:inline-flex;align-items:center;gap:4px}@media(max-width:768px){.container{padding:0 16px 32px}.header{margin:0 -16px 28px;padding-left:16px;padding-right:16px}.data-time-box{justify-content:flex-end;gap:8px}.header-actions{width:auto;justify-content:flex-end}.logo-text h1{font-size:18px}.student-card{padding:20px;gap:16px}.student-avatar{width:56px;height:56px}.avatar-text{width:50px;height:50px;font-size:20px}.student-name{font-size:20px}.student-stats{width:100%;justify-content:space-between}.stat-box{flex:1;min-width:auto;padding:12px}.stat-value{font-size:20px}.chart-row,.scores-grid,.distribution-grid{grid-template-columns:1fr}.section-title{font-size:15px}}@media(max-width:480px){.header{margin-bottom:20px}.header-content{flex-wrap:wrap;gap:8px}.data-time-box{width:100%;justify-content:space-between;flex-wrap:wrap}.time-label{display:none}.time-info{padding-right:8px}.time-value{font-size:11px}.header-actions .import-dropdown-btn{min-width:36px;padding:0 10px}.header-actions .import-dropdown-btn>span:last-child{display:none}.header-actions #syncBtn>span:last-child{display:inline}.header-actions{flex-wrap:wrap}.student-details{flex-direction:column;gap:6px}.student-stats{gap:8px}.stat-box{padding:10px 8px}.stat-value{font-size:18px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.score-card,.chart-card,.distribution-card{animation:fadeInUp .4s var(--ease) both}.score-card:nth-child(1){animation-delay:.03s}.score-card:nth-child(2){animation-delay:.06s}.score-card:nth-child(3){animation-delay:.09s}.score-card:nth-child(4){animation-delay:.12s}.score-card:nth-child(5){animation-delay:.15s}.score-card:nth-child(6){animation-delay:.18s}.score-card:nth-child(7){animation-delay:.21s}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-surface-hover);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}::selection{background:var(--color-selection)}.data-time{display:flex;flex-direction:column;align-items:flex-end;background:var(--color-surface);padding:10px 18px;border-radius:var(--radius-md);border:1px solid var(--color-border-subtle)}.data-import{display:flex;align-items:center;gap:12px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.85}}#linkContainer{animation:fadeInUp .3s var(--ease)}body.read-only-mode .import-dropdown,body.read-only-mode #shareBtn,body.read-only-mode #syncBtn,body.read-only-mode #logoutBtn{display:none!important}body.read-only-mode .header{border-bottom:1px solid var(--color-warning-muted)}body.read-only-mode .data-time-box{width:100%;justify-content:space-between}.tour-root{position:static;pointer-events:none}.tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1400;background:var(--color-tour-overlay);pointer-events:none}.tour-highlight{position:fixed;z-index:1700;border:2px solid var(--color-tour-highlight);border-radius:12px;box-shadow:0 0 0 9999px var(--color-tour-overlay),0 0 0 1px var(--color-tour-highlight-inset) inset,0 0 24px var(--color-tour-highlight-glow);transition:all .2s var(--ease);pointer-events:none}.tour-popover{position:fixed;z-index:1900;width:min(320px,calc(100vw - 24px));background:var(--color-surface-elevated);color:var(--color-text-main);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);padding:14px;pointer-events:auto}.modal-overlay.tour-surface{z-index:1600}.tour-step{font-size:11px;color:var(--color-primary);font-weight:600;margin-bottom:6px}.tour-title{font-size:15px;font-weight:600;margin-bottom:6px}.tour-body{font-size:13px;color:var(--color-text-secondary);line-height:1.5}.tour-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.tour-btn{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:6px 14px;font-size:13px;background:transparent;color:var(--color-text-main);cursor:pointer}.tour-btn.primary{background:var(--color-primary);color:var(--md-sys-color-on-primary);border-color:var(--color-primary)}.tour-start-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1550;background:var(--color-tour-overlay);display:flex;align-items:center;justify-content:center;padding:16px}.tour-start-dialog{width:min(420px,100%);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);padding:20px}.tour-start-dialog h3{font-size:18px;margin-bottom:8px}.tour-start-dialog p{font-size:14px;color:var(--color-text-secondary);line-height:1.6}.tour-start-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.onboarding-reopen-tip{position:fixed;right:16px;bottom:16px;z-index:1500;max-width:calc(100vw - 24px);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);padding:10px 34px 10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.onboarding-reopen-close{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:50%;background:transparent;color:var(--color-text-muted);cursor:pointer;font-size:14px;line-height:1;padding:0}.onboarding-reopen-text{font-size:12px;color:var(--color-text-secondary);line-height:1.4;white-space:nowrap}.onboarding-reopen-disable,.onboarding-reopen-start{border:1px solid var(--color-primary);border-radius:var(--radius-pill);font-size:12px;padding:5px 10px;line-height:1.2;cursor:pointer}.onboarding-reopen-disable{background:transparent;color:var(--color-text-main);border-color:var(--color-border)}.onboarding-reopen-start{background:var(--color-primary);color:var(--md-sys-color-on-primary)}.inline-svg-icon.icon-warning-24{color:var(--color-warning);font-size:24px}.flex-center-gap-8{display:flex;align-items:center;gap:8px}.inline-flex-center{display:inline-flex;align-items:center;justify-content:center}.hidden{display:none}.hidden-full-center{display:none;width:100%;justify-content:center}.privacy-notice-text{text-align:center;margin-top:16px;margin-bottom:0;font-size:13px;color:var(--color-text-dim)}.link-primary{color:var(--color-primary);text-decoration:none}.footer-left-group-style{margin-right:auto;display:flex;gap:12px}.flex-gap-12{display:flex;gap:12px}.text-warning{color:var(--color-warning)}.disclaimer-text{line-height:1.6;color:var(--color-text-secondary);font-size:15px}.mt-12{margin-top:12px}.modal-footer.flex-end{display:flex;justify-content:flex-end}.turnstile-body{text-align:center;padding:24px 16px}.turnstile-text{color:var(--color-text-secondary);margin-bottom:20px;font-size:15px}.modal-footer.flex-center,.flex-center{display:flex;justify-content:center}.icon-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--duration) var(--ease);touch-action:manipulation}.icon-btn:hover{background:var(--color-fill);border-color:var(--color-border);color:var(--color-text-main)}.icon-btn:active{transform:scale(.96)}.share-btn-style{background:var(--color-surface-elevated);color:var(--color-text-main);border:1px solid var(--color-border-subtle)}.share-btn-style:hover{background:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border)}.theme-toggle-btn{width:36px;height:36px;padding:0;justify-content:center;background:var(--color-surface-elevated);color:var(--color-text-main);border:1px solid var(--color-border-subtle)}.theme-toggle-btn:hover{background:var(--color-surface-hover);border-color:var(--color-border)}.theme-toggle-btn .dropdown-icon{font-size:18px}.share-modal-container{text-align:center;padding:8px 0}.share-modal-text{color:var(--color-text-secondary);margin-bottom:20px;font-size:13px;line-height:1.6}.share-link-container{margin-bottom:16px}.mb-12{margin-bottom:12px}.share-input-readonly{text-align:center;font-size:13px;color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-muted)}.w-full-center{width:100%;justify-content:center}.mono{font-family:monospace}