:root{--purple:#6751ca;--ink:#35425f;--muted:#7a8199;--line:#e9e4f2;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink);background:#f7f5ff}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}[hidden]{display:none!important}:focus-visible{outline:3px solid #e8ae43;outline-offset:3px}.class-header{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;background:#fffdfb;border-bottom:1px solid var(--line);gap:16px}.class-brand{display:flex;align-items:center;gap:16px}.class-brand b{font-size:25px}.class-brand small{display:block;color:#a27893;letter-spacing:2px;margin-top:4px}.class-mark{font-size:38px;color:white;background:#ffb96f;width:50px;height:50px;text-align:center;border-radius:17px;box-shadow:4px 4px 0 #f7879d;transform:rotate(-7deg)}.header-buttons,.room-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.class-btn{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:10px 17px;border-radius:13px;border:1px solid var(--line);background:white;color:var(--ink);font-weight:600;font-size:14px;gap:6px}.class-btn:hover{background:#f1ebff}.class-btn.primary{color:white;background:var(--purple);border-color:var(--purple);box-shadow:0 3px 0 #4c399c}.class-btn.primary:hover{background:#5741b8}.class-btn.large{width:100%;min-height:55px;font-size:18px}.class-main{padding:30px 34px;max-width:2000px;margin:auto}.entry-panel{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;max-width:1120px;min-height:70vh;margin:auto;gap:85px}.eyebrow{font-size:13px;color:#8c6fbe;letter-spacing:2px;display:block;margin-bottom:10px}.entry-intro h1{font-size:54px;line-height:1.35;color:#513a98;letter-spacing:2px}.entry-intro p{font-size:18px;line-height:1.9;color:#858298;margin-top:22px}.entry-steps{display:flex;gap:10px;align-items:center;margin-top:32px;flex-wrap:wrap}.entry-steps span{padding:12px 15px;background:#fff0dc;border-radius:20px;color:#986847;font-size:14px}.entry-steps i{color:#bea7d9;font-style:normal}.entry-form{padding:34px;background:white;border:1px solid var(--line);border-radius:26px;box-shadow:0 15px 40px #6954940b}.entry-form h2{font-size:24px;margin-bottom:24px}.entry-form label{display:block;font-size:14px;font-weight:600;margin-bottom:18px}.entry-form input,.link-label input{display:block;width:100%;margin-top:8px;border:1px solid #dfd9eb;border-radius:12px;padding:13px;background:#fdfcff;color:var(--ink)}.storage-note{font-size:13px;color:var(--muted);line-height:1.8;margin-top:18px}#entryStatus{font-size:14px;color:#a65262;margin-top:15px}.entry-form h3{font-size:15px;margin:22px 0 10px}.history-row{display:block;border:1px solid var(--line);background:#faf7ff;border-radius:12px;padding:12px;width:100%;text-align:left;margin-top:8px}.history-row small{display:block;color:var(--muted);margin-top:5px}.room-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.room-top h1{font-size:28px}#hostStatus{font-size:14px;margin-top:10px;color:#77788c}.room-summary{display:flex;gap:32px;align-items:center;background:white;border:1px solid var(--line);border-radius:20px;padding:22px 30px;margin-bottom:28px}.stat{min-width:105px}.stat>strong{display:block;font-size:36px;font-weight:800;line-height:1.2}.stat>span{color:#8b889a;font-size:13px;margin-top:7px;display:block}.stat b{font-weight:400}.stat.accent strong{color:var(--purple)}.room-code{margin-left:auto;border-left:1px solid var(--line);padding-left:30px}.room-code>span,.room-code>small{display:block;font-size:12px;color:var(--muted)}.room-code strong{display:block;font-size:29px;letter-spacing:4px;color:#6951b6;margin:5px 0}.wall-heading{display:flex;align-items:center;gap:14px;margin-bottom:20px}.wall-tabs{display:flex;gap:7px;margin-right:auto}.wall-tabs button{padding:12px 19px;border:1px solid transparent;border-radius:999px;background:#eee9f8;color:#867991;font-size:15px}.wall-tabs button.active{background:var(--purple);color:white}.sort-label{font-size:13px;color:#79758d;display:flex;align-items:center;gap:8px}.sort-label select,.search-label input{background:white;border:1px solid #e4dfee;padding:11px 12px;border-radius:11px;font-size:13px;color:var(--ink)}.search-label input{max-width:190px}.work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.work-card{border:1px solid #e5ddef;background:white;border-radius:19px;padding:9px;box-shadow:0 5px 0 #e9e0f0;text-align:left;overflow:hidden;position:relative}.work-card:hover{border-color:#b79ddd;transform:translateY(-2px)}.work-card canvas{width:100%;aspect-ratio:16/9;display:block;border-radius:12px;background:#faf7f0;object-fit:contain}.work-info{padding:13px 8px 9px;display:flex;justify-content:space-between;gap:10px}.work-info strong{display:block;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.work-info small{display:block;font-size:12px;color:#9a90a3;margin-top:6px}.seat-badge{color:#816eab;background:#f3edff;border-radius:10px;padding:6px 9px;font-size:13px;align-self:flex-start;white-space:nowrap}.roster-card{background:#fffcf6;border:1px dashed #dcd0e8;border-radius:17px;padding:22px;min-height:140px}.roster-card strong{display:block;font-size:18px;margin-bottom:10px}.roster-card p{font-size:13px;color:#a09aab}.roster-card .online-dot{background:#70b997}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c4bbcf;margin-right:5px}.work-state{margin-top:13px;color:#a37b4e;font-size:13px}.wall-empty{text-align:center;padding:45px 20px 55px;border:2px dashed #e2d8ee;background:#ffffff55;border-radius:24px}.wall-empty>div{color:#cbb3e7;font-size:58px}.wall-empty h2{font-size:23px;font-weight:600;margin:12px}.wall-empty p{color:#9690a5;line-height:1.9;font-size:15px;margin-bottom:22px}.teacher-note{font-size:12px;color:#aaa0b8;text-align:center;margin-top:25px}.class-dialog{border:0;border-radius:24px;padding:30px;color:var(--ink);max-height:94dvh;overflow:auto;box-shadow:0 20px 80px #35224944;width:calc(100% - 32px);max-width:600px}.class-dialog::backdrop{background:#27203888;backdrop-filter:blur(4px)}.close-dialog{position:absolute;right:12px;top:12px;background:#f2edf9;border:0;width:42px;height:42px;border-radius:50%;color:#8d7e9e;font-size:27px}.qr-dialog{text-align:center;max-width:580px}.qr-dialog h2{font-size:25px;margin-bottom:20px}#qrImage{max-width:290px;width:80%;margin:15px auto;background:white;padding:10px}#qrImage svg{display:block;width:100%;height:auto}.qr-dialog p{font-size:14px;color:#8b8298;margin:14px 0}.link-label{display:block;text-align:left;font-size:12px;color:var(--muted);margin:20px 0 16px}.link-label input{font-size:12px}.work-dialog{max-width:1400px;width:94vw}.viewer-heading{display:flex;justify-content:space-between;align-items:center;padding-right:30px;margin-bottom:18px}.viewer-heading h2{font-size:28px}.viewer-heading p{font-size:13px;color:var(--muted)}#viewerCanvas{width:100%;max-height:70dvh;object-fit:contain;display:block;background:#f7f3ee;border-radius:15px}.viewer-bottom{display:flex;justify-content:center;gap:15px;align-items:center;margin-top:20px}#viewerPosition{color:var(--muted);font-size:13px}.class-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#35425fee;color:white;padding:14px 23px;border-radius:14px;z-index:10000;max-width:92vw;display:none}.class-toast.show{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1700px){.work-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.class-main{padding:34px 45px}.work-info strong{font-size:19px}}
@media(max-width:1150px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.room-top{align-items:flex-start;flex-direction:column}.entry-panel{gap:35px}.entry-intro h1{font-size:42px}.room-summary{gap:22px}.stat{min-width:80px}.room-actions{gap:7px}.class-main{padding:25px}.class-header{padding:18px 25px}.room-code{padding-left:20px}}
@media(max-width:780px){.entry-panel{grid-template-columns:1fr;gap:28px}.entry-intro h1{font-size:36px}.entry-intro br{display:none}.entry-intro p{font-size:16px;margin-top:12px}.entry-steps{margin-top:18px}.entry-form{padding:25px}.class-main{padding:20px 15px}.class-header{padding:15px}.class-brand b{font-size:20px}.class-brand small{font-size:11px;letter-spacing:1px}.class-mark{width:42px;height:42px;font-size:31px}.class-brand{gap:11px}.header-buttons .class-btn{padding:9px;font-size:12px}.room-top h1{font-size:24px}.room-summary{padding:18px;flex-wrap:wrap;gap:20px}.stat{min-width:70px;flex:1}.stat>strong{font-size:29px}.room-code{width:100%;border-left:0;border-top:1px solid var(--line);padding:14px 0 0;display:flex;align-items:center;gap:12px}.room-code small{margin-left:auto}.room-code strong{font-size:23px}.wall-heading{flex-wrap:wrap;gap:12px}.wall-tabs{width:100%;gap:7px}.wall-tabs button{padding:11px 15px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.work-info{padding:10px 4px}.work-info strong{font-size:14px;max-width:140px}.work-info small{font-size:11px}.seat-badge{padding:5px;font-size:11px}.viewer-heading{display:block}.viewer-heading h2{font-size:23px}.viewer-heading p{margin-top:9px}.viewer-bottom{flex-wrap:wrap;gap:8px}.class-dialog{padding:25px 18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}