.classroom-app{font:16px/1.5 system-ui,-apple-system,"Noto Sans TC",sans-serif;color:#173e48;background:#f3f7f8;border-radius:18px;padding:20px;box-sizing:border-box;width:100%;min-width:0}.classroom-app *{box-sizing:border-box}.classroom-app button,.classroom-app select,.classroom-app input{font:inherit}.classroom-app button{border:1px solid #b9ced2;border-radius:10px;padding:8px 12px;background:white;color:#173e48;cursor:pointer;min-height:40px}.classroom-app button:disabled{cursor:default;opacity:.55}.classroom-app button:focus-visible,.classroom-app select:focus-visible,.classroom-app input:focus-visible{outline:3px solid #e9ae41;outline-offset:2px}.classroom-app .cl-primary{background:#106b75;color:#fff;border-color:#106b75;font-weight:700}.cl-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.cl-heading h1{font-size:30px;line-height:1.3;margin:8px 0}.cl-heading p{margin:0;color:#5c747b}.cl-eyebrow{font-size:14px;color:#34747c;letter-spacing:.08em}.cl-emblem{font-weight:800;font-size:32px;color:#106b75;border:2px solid #e7bb59;border-radius:22px;padding:15px}.cl-setup{display:flex;flex-wrap:wrap;gap:14px;align-items:end;background:#fff;border:1px solid #d9e4e7;border-radius:14px;padding:22px}.cl-setup label{display:grid;gap:7px;flex:1;min-width:140px}.cl-setup select,.cl-setup input{width:100%;border:1px solid #adc5cb;border-radius:9px;padding:10px;background:#fff;color:#173e48}.cl-guide{margin:28px 0 8px;padding:20px;border-left:4px solid #e6ba5a;background:#fff}.cl-guide p{margin:8px 0;color:#5c747b}.cl-toolbar,.cl-subbar,.cl-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.cl-toolbar>div:first-child{display:grid;gap:2px}.cl-toolbar b{font-size:20px}.cl-toolbar span{font-size:14px;color:#5c747b}.cl-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cl-subbar{margin:12px 0}.cl-pill{font-size:14px;color:#14636b;background:#dfeeed;border-radius:7px;padding:5px 9px}.cl-roster{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(90px,1fr);gap:10px;overflow-x:auto;padding:3px 3px 12px;overscroll-behavior:contain}.cl-roster.rows-2{grid-template-rows:repeat(2,auto);grid-auto-flow:row;grid-template-columns:repeat(9,minmax(90px,1fr))}.cl-student{background:#fff;border:1px solid #cddde0;border-radius:14px;overflow:hidden;min-width:0}.classroom-app .cl-avatar-button{position:relative;width:100%;border:0;border-radius:0;padding:7px 3px 4px;display:grid;justify-items:center;background:#fff}.cl-avatar-button b{font-size:14px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.cl-avatar{display:grid;place-items:center;width:68px;height:68px}.cl-avatar img{width:68px;height:68px;object-fit:contain}.cl-seat{position:absolute;top:5px;left:7px;font-size:13px;color:#45616b}.cl-score{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;background:#edf5f4}.classroom-app .cl-score button{min-height:28px;width:25px;padding:0;font-size:19px}.cl-score strong{font-size:22px}.cl-score small,.cl-score>span{font-size:12px;font-weight:400;color:#4e6d75}.cl-max{border-color:#d7ad4f}.cl-max .cl-score{background:#fff0c9}.cl-bottom{border-top:1px solid #ccdce0;padding-top:14px;margin-top:8px}.cl-status{font-size:14px;min-height:26px;margin-top:10px;color:#42656f;overflow-wrap:anywhere}.classroom-app .cl-status button{border:0;background:transparent;text-decoration:underline;font-size:14px;min-height:32px;padding:2px 8px}.cl-alert{background:#fff0cf;padding:12px;border-radius:10px;margin:8px 0}.cl-alert button{margin:5px}.cl-review{background:#fff;border-radius:12px;padding:18px;margin:12px 0}.cl-review h2{font-size:22px;margin:0 0 10px}.cl-review-list{max-height:290px;overflow:auto}.cl-review-list>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #e4edee}.cl-floating{margin:0;background:#f3f7f8}.cl-floating .classroom-app{padding:12px;border-radius:0}.cl-demo-page{margin:0;background:#123f49;min-height:100vh;padding:38px 24px}.cl-demo-shell{max-width:1120px;margin:auto}.cl-demo-brand{color:#fff;margin:0 0 18px;font:600 16px system-ui}.cl-demo-footer{color:#d1e5e8;font:14px/1.6 system-ui;margin-top:16px}.cl-demo-footer a{color:#fff}@media(max-width:600px){.classroom-app{padding:12px}.cl-heading h1{font-size:24px}.cl-emblem{display:none}.cl-toolbar b{font-size:18px}.cl-tools{gap:5px}.classroom-app button{padding:8px}.cl-demo-page{padding:16px 8px}.cl-roster.rows-2{grid-template-columns:repeat(9,90px)}.cl-bottom>span{font-size:14px}}
.cl-floating{height:100vh;overflow:hidden}.cl-floating .cl-floating-tool{height:100vh;width:100vw;min-height:0;padding:4px;display:grid;grid-template-rows:28px minmax(0,1fr);gap:0;overflow:hidden}.cl-float-controls{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden}.classroom-app .cl-float-controls button{border:0;min-height:24px;height:24px;width:26px;padding:0;font-size:18px;border-radius:5px;background:transparent}.cl-float-controls button[aria-pressed=true]{background:#d5eae8;color:#075e67}.cl-float-indicator{font-size:12px;color:#39766f;margin-left:auto}.cl-float-indicator.cl-warning{color:#a94f12;font-weight:800}.cl-fit-roster{display:grid;grid-template-columns:repeat(var(--cl-cols,9),minmax(0,1fr));grid-template-rows:repeat(var(--cl-rows,2),minmax(0,1fr));gap:3px;min-width:0;min-height:0;overflow:hidden}.classroom-app .cl-fit-avatar{position:relative;min-width:0;min-height:0;padding:0;border:1px solid #cbdfe1;border-radius:8px;overflow:hidden;background:white;display:grid;place-items:center}.cl-fit-art{display:grid;place-items:center;width:var(--cl-avatar-size,60px);height:var(--cl-avatar-size,60px);max-width:100%;max-height:100%}.cl-fit-art img,.cl-fit-art>span{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain}.cl-fit-seat,.cl-fit-points{position:absolute;top:1px;font-size:clamp(9px,calc(var(--cl-avatar-size,60px)*.19),16px);line-height:1.2;background:#ffffffdf;border-radius:4px;padding:1px 3px}.cl-fit-seat{left:1px;color:#385f68}.cl-fit-points{right:1px;background:#096775;color:white;font-weight:800}.cl-fit-name{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#ffffffe8;font-size:clamp(8px,calc(var(--cl-avatar-size,60px)*.15),14px);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.classroom-app .cl-fit-max{border-color:#c7942c}.cl-fit-max .cl-fit-points{background:#996912}.cl-floating .cl-icon-only{display:grid;place-items:center;padding:0}.classroom-app .cl-restore-icon{display:grid;place-items:center;align-content:center;gap:0;width:100%;height:100%;min-height:0;border:0;border-radius:0;background:#106b75;color:#ffda7a;font-size:32px;padding:0}.cl-restore-icon small{font-size:12px;color:white}
.cl-floating .cl-floating-tool{grid-template-rows:44px minmax(0,1fr)}.classroom-app .cl-float-controls button{height:40px;min-height:0;width:32px;font-size:23px;touch-action:manipulation}.classroom-app .cl-fit-avatar{display:flex;gap:0;border-radius:7px}.classroom-app .cl-touch-add{display:flex;align-items:center;justify-content:space-evenly;gap:2px;flex:1;min-width:0;min-height:0;height:100%;border:0;border-radius:0;padding:0 3px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.cl-touch-add .cl-fit-seat,.cl-touch-add .cl-fit-points{position:static;line-height:1.1;font-size:clamp(18px,calc(var(--cl-avatar-size,40px)*.6),28px);font-weight:800;flex:none;padding:1px 2px;font-variant-numeric:tabular-nums}.cl-touch-add .cl-fit-seat{background:transparent;color:#244f59}.cl-touch-add .cl-fit-art{width:clamp(16px,calc(var(--cl-avatar-size,40px) - 4px),32px);height:clamp(16px,calc(var(--cl-avatar-size,40px) - 4px),32px);flex-shrink:1;min-width:0}.classroom-app .cl-touch-minus{width:36px;flex:none;min-height:0;height:100%;border:0;border-left:1px solid #e0d7c7;border-radius:0;background:#fff0d6;color:#7a4b13;font-size:28px;font-weight:700;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}.cl-floating-tool .cl-fit-name{display:none}
.cl-touch-add .cl-fit-seat,.cl-touch-add .cl-fit-points{font-size:clamp(14px,calc((var(--cl-cell-width,160px) - 68px)/2),28px)}.cl-touch-add .cl-fit-art{width:clamp(14px,calc(var(--cl-cell-width,160px) - 96px),32px);height:min(32px,calc(var(--cl-avatar-size,40px) - 4px))}.classroom-app .cl-touch-minus{width:clamp(28px,calc(var(--cl-cell-width,160px)*.23),36px)}
.cl-touch-add .cl-fit-seat,.cl-touch-add .cl-fit-points{font-size:clamp(14px,calc((var(--cl-cell-width,160px) - 80px)/3),22px);font-weight:700;padding:3px 4px}.cl-touch-add .cl-fit-points{border-radius:7px}.cl-touch-add .cl-fit-art{--cl-disc:min(68px,calc(var(--cl-avatar-size,60px) - 6px),calc(var(--cl-cell-width,160px) - 108px));width:var(--cl-disc);height:var(--cl-disc);aspect-ratio:1;flex:none;background:#d4e9e3;border-radius:50%;padding:3px;overflow:hidden}.cl-touch-add .cl-fit-art>img,.cl-touch-add .cl-fit-art>span{border-radius:50%;mix-blend-mode:multiply}.classroom-app .cl-touch-minus{font-size:23px;font-weight:600;background:#fbf1e1;border-left-color:#eadfce}
.cl-touch-add .cl-fit-art{--cl-disc:max(18px,min(68px,calc(var(--cl-avatar-size,60px) - 6px),calc(var(--cl-cell-width,160px) - 90px)))}.cl-fit-avatar{container-type:inline-size}@container(max-width:134px){.classroom-app .cl-touch-add{position:relative;display:grid;place-items:center;padding:0}.cl-touch-add .cl-fit-art{--cl-disc:max(18px,min(68px,calc(var(--cl-avatar-size,60px) - 6px),calc(var(--cl-cell-width,160px) - 40px)));padding:2px}.cl-touch-add .cl-fit-seat{position:absolute;top:1px;left:1px;z-index:1;background:#ffffffe6;font-size:14px;line-height:1.1;padding:1px 2px}.cl-touch-add .cl-fit-points{position:absolute;bottom:1px;right:1px;top:auto;z-index:1;font-size:16px;line-height:1.1;padding:1px 3px}}
.cl-floating .classroom-app.cl-floating-tool.cl-icon-only{display:flex;align-items:stretch;justify-content:stretch;grid-template-rows:none;padding:0;gap:0;height:100dvh;min-height:0}.cl-floating .cl-icon-only .cl-restore-icon{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:0;width:100%;height:100%;padding:0 8px;font-size:26px;line-height:1;background:#106b75;border:0}.cl-floating .cl-icon-only .cl-restore-icon small{display:block;font-size:16px;font-weight:700;line-height:1.2;color:#fff;white-space:nowrap}