:root{
  --ink:#f6fbff;--muted:#9db4d7;--deep:#040d28;--navy:#071a4d;--blue:#0868ff;
  --cyan:#19d8ff;--line:rgba(190,222,255,.16);--glass:rgba(16,42,91,.48);
  --glass-strong:rgba(10,33,78,.72);--shadow:0 28px 80px rgba(0,9,39,.38);
  --radius:28px;--ease:cubic-bezier(.2,.8,.2,1)
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--deep);color-scheme:dark}
body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",Segoe UI,sans-serif;overflow-x:hidden}
button,input,select{font:inherit}button{color:inherit}button,a,label,select{ -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.drop-zone:focus-within{outline:3px solid rgba(40,211,255,.5);outline-offset:3px}
.ambient{position:fixed;inset:0;overflow:hidden;z-index:-2;background:radial-gradient(circle at 48% -30%,#124dad 0,transparent 45%),linear-gradient(145deg,#03091d,#061844 52%,#041334)}
.aurora{position:absolute;display:block;border-radius:50%;filter:blur(4px);opacity:.68;animation:drift 14s ease-in-out infinite alternate}
.aurora-a{width:60vw;height:60vw;left:-25vw;top:-25vw;background:radial-gradient(circle,rgba(13,126,255,.48),rgba(3,212,255,.12) 40%,transparent 68%)}
.aurora-b{width:52vw;height:52vw;right:-18vw;bottom:-26vw;background:radial-gradient(circle,rgba(0,88,255,.42),rgba(27,211,255,.12) 42%,transparent 70%);animation-delay:-4s}
.aurora-c{width:35vw;height:35vw;right:15vw;top:16vh;background:radial-gradient(circle,rgba(22,157,255,.15),transparent 68%);animation-delay:-8s}
.grid-light{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,black 28%,transparent)}
@keyframes drift{to{transform:translate3d(4vw,3vh,0) scale(1.08)}}
.view{display:none;min-height:100vh}.view.is-active{display:block}.view-import{padding:0 clamp(24px,5vw,76px)}
.brandbar{height:108px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:17px;color:#fff;text-decoration:none}.brand img{width:170px;height:56px;object-fit:contain}.product-name{font-size:18px;font-weight:700;padding-left:17px;border-left:1px solid rgba(255,255,255,.23);letter-spacing:.05em;white-space:nowrap}
.brand-meta{display:flex;align-items:center;gap:10px;color:#b9cae3;font-size:13px}.status-dot{width:8px;height:8px;background:#44e3b1;border-radius:50%;box-shadow:0 0 16px #44e3b1}
.import-layout{min-height:calc(100vh - 178px);max-width:1440px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.7fr);gap:clamp(50px,7vw,120px);align-items:center;padding:42px 0 78px}
.intro-column{padding-left:clamp(0px,3vw,44px)}
.eyebrow{display:flex;align-items:center;gap:12px;color:#4bdfff;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.eyebrow i{width:30px;height:1px;background:#39d7ff}
h1{font-size:clamp(54px,6.4vw,94px);line-height:1.05;letter-spacing:-.055em;margin:25px 0 30px;font-weight:750}h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,#2ae3ff,#1682ff 62%,#89d9ff);background-clip:text;-webkit-background-clip:text;text-shadow:0 0 45px rgba(20,153,255,.2)}
.lead{max-width:600px;font-size:18px;line-height:1.9;color:#afc2df;margin:0 0 42px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:620px}.feature-row>div{display:grid;grid-template-columns:36px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:14px 10px;border-left:1px solid rgba(95,207,255,.22)}.feature-icon{grid-row:1/3;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(23,149,255,.12);color:#62e2ff}.feature-row b{font-size:14px}.feature-row small{color:#7891b5;font-size:11px;margin-top:4px}
.glass-panel{position:relative;background:linear-gradient(135deg,rgba(31,68,127,.58),rgba(7,26,67,.42));border:1px solid rgba(199,230,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(72,144,255,.06),var(--shadow);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);border-radius:var(--radius);overflow:hidden}
.glass-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.09),transparent 23%,transparent 72%,rgba(43,168,255,.05))}
.upload-panel{padding:30px}.step-caption{display:flex;align-items:center;gap:16px;margin-bottom:24px}.step-caption>span{font-size:12px;font-weight:800;color:#5fdfff;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(14,130,255,.16);border:1px solid rgba(76,207,255,.25)}.step-caption div{display:flex;flex-direction:column;gap:5px}.step-caption b{font-size:18px}.step-caption small{font-size:12px;color:#87a1c5}
.drop-zone{height:320px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:22px;border:1px dashed rgba(101,206,255,.38);background:radial-gradient(circle at 50% 38%,rgba(16,130,255,.17),transparent 42%),rgba(3,18,55,.33);cursor:pointer;transition:.35s var(--ease);overflow:hidden}.drop-zone:after{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.06) 50%,transparent 58%);transform:translateX(-45%);transition:.7s}.drop-zone:hover,.drop-zone.is-dragover{border-color:#4edfff;background-color:rgba(10,49,105,.5);transform:translateY(-2px)}.drop-zone:hover:after{transform:translateX(45%)}
.upload-orb{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin-bottom:19px;background:linear-gradient(145deg,rgba(26,188,255,.35),rgba(10,67,238,.45));border:1px solid rgba(184,243,255,.38);box-shadow:inset 10px 10px 24px rgba(141,236,255,.15),inset -10px -15px 26px rgba(0,22,106,.34),0 15px 34px rgba(0,96,255,.25)}.upload-orb:before{content:"";position:absolute;width:35px;height:10px;left:12px;top:11px;border-radius:50%;background:rgba(255,255,255,.38);filter:blur(4px);transform:rotate(-28deg)}.upload-orb svg{width:32px;fill:none;stroke:#e9fbff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.drop-zone strong{font-size:18px;margin-bottom:7px}.drop-zone>span:not(.upload-orb){font-size:13px;color:#8fa8cb}.drop-zone>small{margin-top:17px;color:#647fa7;font-size:11px}.upload-actions{display:flex;justify-content:center;align-items:center;margin:20px 0 8px}.text-button{appearance:none;border:0;background:none;padding:8px 16px;color:#a9bfdd;font-size:12px;cursor:pointer;transition:.2s}.text-button:hover{color:#54dcff}.text-button span{color:#40d9ff;margin-right:4px}.divider{width:1px;height:15px;background:rgba(255,255,255,.15)}.privacy-note{display:flex;align-items:center;justify-content:center;gap:8px;color:#6f89ae;font-size:11px}.privacy-note svg{width:14px;fill:none;stroke:#49d2ea;stroke-width:1.5}
.page-footer{height:70px;max-width:1440px;margin:auto;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;color:#536e97;font-size:11px;letter-spacing:.03em}
.view-mapping,.view-classroom{padding:0 clamp(22px,4vw,66px)}.brandbar.compact{height:92px}.brandbar.compact .brand img{width:135px;height:42px}.icon-button{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(13,44,94,.52);width:43px;height:43px;border-radius:15px;display:grid;place-items:center;cursor:pointer;transition:.2s}.icon-button:hover{background:rgba(20,100,200,.35);transform:translateY(-1px)}.icon-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.brandbar.compact>.icon-button{position:absolute;left:0}.brandbar.compact .brand{margin-left:62px}.progress-steps{display:flex;align-items:center}.progress-steps span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#6f87a9;font-size:11px}.progress-steps span.done{background:#1189ff;color:white}.progress-steps span.active{color:#44dbff;border:1px solid #33caff;background:rgba(26,151,255,.15)}.progress-steps i{width:34px;height:1px;background:rgba(255,255,255,.15)}
.mapping-wrap{max-width:1320px;margin:auto;padding:56px 0 70px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px}.section-heading h2,.panel-title h2{font-size:34px;letter-spacing:-.03em;margin:12px 0 8px}.section-heading p,.panel-title p{color:#829bbf;margin:0;font-size:14px}.file-badge{display:flex;align-items:center;gap:13px;min-width:245px;padding:12px 16px;background:rgba(16,55,112,.45);border:1px solid rgba(255,255,255,.11);border-radius:16px}.file-badge>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:linear-gradient(145deg,#12b486,#087256)}.file-badge div{display:flex;flex-direction:column;gap:4px;min-width:0}.file-badge b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-badge small{color:#7690b4;font-size:10px}
.mapping-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:25px}.preview-card,.field-card{padding:24px}.card-header{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.card-header>div{display:flex;flex-direction:column;gap:5px}.card-header b{font-size:15px}.card-header small{font-size:10px;color:#7690b4}.count-badge{color:#54e2ff;font-size:11px;background:rgba(15,163,255,.12);border:1px solid rgba(66,213,255,.2);padding:7px 11px;border-radius:10px}.table-scroller{overflow:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08)}table{width:100%;border-collapse:collapse;text-align:left}.preview-card th{color:#7890b3;background:rgba(3,18,50,.38);font-size:11px;font-weight:600;padding:14px 16px;white-space:nowrap}.preview-card td{padding:16px;color:#bfd0e7;font-size:12px;border-top:1px solid rgba(255,255,255,.065);white-space:nowrap}.preview-card tbody tr:hover{background:rgba(37,145,255,.07)}.preview-card td:first-child{color:#5edfff;font-weight:700}.field-card{display:flex;flex-direction:column}.field-label{display:flex;flex-direction:column;gap:8px;color:#aabfdb;font-size:12px;margin-bottom:16px}.field-label small{color:#607b9f}.field-label input,.field-label select,.mode-select-wrap select{appearance:none;width:100%;border:1px solid rgba(255,255,255,.13);color:#eaf5ff;background-color:rgba(4,22,58,.54);border-radius:13px;padding:13px 14px;transition:.2s}.field-label select,.mode-select-wrap select{background-image:linear-gradient(45deg,transparent 50%,#6edfff 50%),linear-gradient(135deg,#6edfff 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}.field-label option,.mode-select-wrap option{background:#0a2354}.field-label input:focus,.field-label select:focus{border-color:#30cfff}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0 18px;cursor:pointer}.switch-row>span{display:flex;flex-direction:column;gap:5px}.switch-row b{font-size:12px}.switch-row small{font-size:9px;color:#6f89ac}.switch-row input{display:none}.switch-row i{position:relative;width:44px;height:25px;border-radius:20px;background:#20375f;transition:.25s}.switch-row i:after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;background:#a8b8cf;border-radius:50%;transition:.25s}.switch-row input:checked+i{background:linear-gradient(90deg,#087cff,#13c9ff)}.switch-row input:checked+i:after{transform:translateX(19px);background:white;box-shadow:0 2px 8px rgba(0,0,0,.3)}.primary-button,.draw-button{appearance:none;border:0;color:white;cursor:pointer;background:linear-gradient(100deg,#0969ff,#08b9ff);box-shadow:0 13px 28px rgba(0,109,255,.28),inset 0 1px 0 rgba(255,255,255,.36);transition:.25s var(--ease)}.primary-button{height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:13px}.primary-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}.primary-button:hover,.draw-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.form-error{min-height:16px;text-align:center;color:#ff8498;font-size:11px;margin:9px 0 0}
.view-classroom{padding-left:288px}.sidebar{position:fixed;z-index:20;left:22px;top:22px;bottom:22px;width:242px;border-radius:26px;padding:24px 17px;display:flex;flex-direction:column}.side-brand{display:flex;align-items:center;gap:11px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.09)}.side-brand img{width:40px;height:40px;object-fit:contain}.side-brand div{display:flex;flex-direction:column;gap:3px}.side-brand b{font-size:16px}.side-brand small{font-size:8px;letter-spacing:.1em;color:#6886b1}.side-nav{display:flex;flex-direction:column;gap:7px;margin-top:23px}.side-nav button{appearance:none;border:1px solid transparent;background:none;color:#7f99bd;border-radius:14px;padding:13px 13px;display:grid;grid-template-columns:26px auto 24px;align-items:center;text-align:left;cursor:pointer;transition:.22s}.side-nav button:hover{color:#c2d8f2;background:rgba(255,255,255,.04)}.side-nav button.active{color:white;background:linear-gradient(100deg,rgba(14,110,255,.38),rgba(13,156,255,.15));border-color:rgba(93,207,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.side-nav button span{color:#53d9ff;font-size:18px}.side-nav button b{font-size:12px}.side-nav button em{font-style:normal;font-size:9px;color:#72dfff;text-align:right}.side-tip{margin-top:auto;padding:15px;border:1px solid rgba(96,207,255,.12);border-radius:16px;background:rgba(9,52,107,.27)}.side-tip span{font-size:8px;font-weight:800;letter-spacing:.13em;color:#4adeff}.side-tip p{font-size:10px;line-height:1.65;color:#7792b7;margin:6px 0 0}.side-company{height:54px;margin-top:15px;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,.07)}.side-company img{width:130px;height:43px;object-fit:contain;opacity:.55}
.classroom-main{max-width:1600px;margin:auto;min-height:100vh;padding-bottom:28px}.classroom-topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}.classroom-topbar>div:first-child{display:flex;flex-direction:column;gap:5px}.crumb{font-size:14px;color:#728bad}.crumb b{color:#e9f4ff}.classroom-topbar small{color:#536e96;font-size:10px}.top-actions{display:flex;align-items:center;gap:10px}.clock{color:#8da6c9;font-size:12px;margin-right:8px;font-variant-numeric:tabular-nums}.avatar-button{appearance:none;border:1px solid rgba(90,214,255,.2);width:43px;height:43px;border-radius:15px;cursor:pointer;background:linear-gradient(145deg,#0d83ff,#094cc0);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);font-size:12px;font-weight:800}
.dashboard{display:grid;grid-template-columns:minmax(550px,1fr) 330px;gap:22px;padding-top:22px}.draw-card{min-height:calc(100vh - 142px);padding:29px 32px;display:flex;flex-direction:column}.draw-header{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}.live-badge{display:inline-flex;align-items:center;gap:7px;color:#57e4c4;font-size:9px;font-weight:750;letter-spacing:.06em}.live-badge i{width:7px;height:7px;border-radius:50%;background:#37e4a6;box-shadow:0 0 12px #37e4a6;animation:pulse 1.8s infinite}.draw-header h2{font-size:28px;margin:10px 0 7px}.draw-header p{margin:0;color:#7892b6;font-size:11px}.mode-select-wrap{display:flex;flex-direction:column;gap:7px;color:#6681a8;font-size:9px}.mode-select-wrap select{width:130px;padding:9px 30px 9px 12px;border-radius:11px;font-size:10px}
.draw-stage{position:relative;flex:1;min-height:420px;display:grid;place-items:center;isolation:isolate}.water-rings{position:absolute;inset:0;display:grid;place-items:center}.water-rings i{position:absolute;width:min(42vw,520px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(76,205,255,.08);box-shadow:inset 0 0 60px rgba(0,87,255,.04)}.water-rings i:nth-child(2){width:min(33vw,410px);border-color:rgba(70,203,255,.12)}.water-rings i:nth-child(3){width:min(25vw,305px);border-color:rgba(70,203,255,.16)}.name-orb{position:relative;width:min(22vw,270px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 36% 24%,rgba(114,237,255,.8),rgba(6,143,255,.62) 17%,rgba(5,61,185,.78) 56%,rgba(3,18,88,.9) 100%);border:1px solid rgba(186,246,255,.42);box-shadow:inset 18px 20px 45px rgba(171,241,255,.2),inset -24px -28px 48px rgba(0,20,105,.58),0 34px 80px rgba(0,94,255,.35),0 0 80px rgba(37,206,255,.1);transition:.3s var(--ease)}.name-orb:after{content:"";position:absolute;inset:11px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.orb-glint{position:absolute;top:13%;left:20%;width:35%;height:13%;border-radius:50%;background:rgba(214,252,255,.45);filter:blur(7px);transform:rotate(-20deg)}.name-orb small{font-size:10px;letter-spacing:.18em;color:#a8edff;min-height:14px}.name-orb strong{font-size:clamp(25px,3vw,41px);letter-spacing:.02em;margin:10px 0 8px;text-shadow:0 5px 20px rgba(0,19,95,.5);max-width:80%;word-break:break-all;z-index:1}.name-orb em{font-style:normal;color:rgba(223,245,255,.66);font-size:9px;z-index:1}.draw-stage.is-drawing .name-orb{animation:orbBeat .55s var(--ease) infinite alternate;filter:saturate(1.25)}.draw-stage.is-selected .name-orb{animation:selectedPop .7s var(--ease)}
@keyframes orbBeat{to{transform:scale(1.045);box-shadow:inset 18px 20px 45px rgba(171,241,255,.28),inset -24px -28px 48px rgba(0,20,105,.5),0 40px 100px rgba(0,130,255,.48),0 0 110px rgba(37,206,255,.22)}}@keyframes selectedPop{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes pulse{50%{opacity:.4;transform:scale(.75)}}
.float-chip{position:absolute;padding:8px 11px;border-radius:12px;background:rgba(21,74,142,.35);border:1px solid rgba(125,222,255,.14);color:#6fa9ce;font-size:9px;backdrop-filter:blur(12px);animation:float 5s ease-in-out infinite}.chip-a{left:14%;top:34%}.chip-b{right:12%;top:26%;animation-delay:-1.8s}.chip-c{right:18%;bottom:24%;animation-delay:-3.2s}@keyframes float{50%{transform:translateY(-9px)}}
.draw-controls{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px}.draw-button{height:58px;min-width:220px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:12px}.draw-button .play-symbol{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;padding-left:2px;background:rgba(255,255,255,.19);font-size:9px}.draw-button b{font-size:14px}.draw-button small{font-size:8px;color:rgba(255,255,255,.52);padding:3px 6px;border:1px solid rgba(255,255,255,.18);border-radius:6px}.draw-button:disabled{opacity:.6;cursor:wait;transform:none}.secondary-button{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(24,63,119,.46);color:#bad0e9;border-radius:15px;padding:12px 17px;cursor:pointer;transition:.2s;font-size:11px}.secondary-button:hover{border-color:rgba(71,208,255,.35);color:white;background:rgba(28,97,176,.45)}.secondary-button.danger{color:#ff9bac;border-color:rgba(255,100,125,.18)}.is-hidden{display:none!important}
.dashboard-side{display:flex;flex-direction:column;gap:18px}.dashboard-side .glass-panel{padding:21px}.pulse-icon{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;color:#46deff;background:rgba(15,145,255,.12)}.stat-ring{--progress:0;width:126px;height:126px;margin:1px auto 16px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2bceff calc(var(--progress)*1%),rgba(255,255,255,.08) 0);position:relative;box-shadow:0 0 35px rgba(0,163,255,.12)}.stat-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:linear-gradient(145deg,#0a285d,#071839);box-shadow:inset 0 1px 8px rgba(255,255,255,.06)}.stat-ring>div{z-index:1;text-align:center;display:flex;flex-direction:column}.stat-ring strong{font-size:27px}.stat-ring small{color:#6f8aad;font-size:9px}.stats-row{display:flex;justify-content:space-around;align-items:center;text-align:center}.stats-row>div{display:flex;flex-direction:column;gap:4px}.stats-row b{font-size:17px}.stats-row small{font-size:8px;color:#6580a6}.stats-row i{width:1px;height:25px;background:rgba(255,255,255,.1)}.mini-button{appearance:none;border:0;background:none;color:#45d9ff;font-size:9px;cursor:pointer;padding:5px}.mini-button:hover{color:white}.task-content{position:relative;display:flex;gap:13px;padding:15px;border-radius:16px;background:linear-gradient(125deg,rgba(17,114,225,.18),rgba(15,61,125,.18));border:1px solid rgba(87,203,255,.09)}.task-content>span{width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;color:#d8faff;background:linear-gradient(145deg,#0ebbdc,#136df0);box-shadow:0 8px 18px rgba(0,104,255,.25)}.task-content div{min-width:0}.task-content b{font-size:12px}.task-content p{color:#7f99bc;font-size:9px;line-height:1.6;margin:5px 0 0}.recent-history{display:flex;flex-direction:column;gap:8px}.history-item{display:grid;grid-template-columns:34px auto auto;align-items:center;gap:10px;padding:8px;border-radius:12px;background:rgba(3,20,55,.25)}.history-item .initial,.roster-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(22,168,255,.45),rgba(18,65,191,.5));border:1px solid rgba(93,215,255,.16);font-size:11px;font-weight:800}.history-item div{display:flex;flex-direction:column;gap:3px}.history-item b{font-size:10px}.history-item small{font-size:8px;color:#617da4}.history-time{font-size:8px;color:#6681a5}.empty-history{padding:17px 8px;color:#5d789f;font-size:9px;text-align:center;border:1px dashed rgba(255,255,255,.09);border-radius:13px}
.content-panel{margin-top:22px;padding:30px;min-height:calc(100vh - 142px)}.panel-title{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}.panel-title h2{font-size:28px}.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:22px}.roster-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:rgba(5,28,69,.35);border:1px solid rgba(255,255,255,.07)}.roster-item>div:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}.roster-item b{font-size:12px}.roster-item small{color:#6984a9;font-size:9px}.draw-count{margin-left:auto;color:#54dfff;font-size:9px}.history-table-wrap{overflow:auto;margin-top:20px;border:1px solid rgba(255,255,255,.08);border-radius:16px}.history-table th{background:rgba(4,20,53,.5);color:#7892b4;font-size:10px;padding:14px 16px}.history-table td{border-top:1px solid rgba(255,255,255,.07);padding:15px 16px;color:#b2c7e1;font-size:11px}.history-table .status-ok{color:#55dfbd}.history-table .empty-cell{text-align:center;color:#617b9f;padding:50px}
.toast{position:fixed;z-index:100;left:50%;bottom:28px;transform:translate(-50%,24px);opacity:0;background:rgba(7,23,57,.88);border:1px solid rgba(122,221,255,.24);box-shadow:0 15px 45px rgba(0,5,30,.4);backdrop-filter:blur(20px);padding:12px 17px;border-radius:14px;color:#d8efff;font-size:11px;transition:.28s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1100px){.import-layout{grid-template-columns:1fr 430px;gap:35px}.feature-row{grid-template-columns:1fr}.feature-row>div{max-width:270px}.dashboard{grid-template-columns:1fr}.draw-card{min-height:680px}.dashboard-side{display:grid;grid-template-columns:1fr 1fr}.history-card{grid-column:1/-1}.mapping-grid{grid-template-columns:1fr 340px}}
@media (max-width:820px){.view-import,.view-mapping{padding:0 18px}.brandbar{height:82px}.brand img{width:122px}.product-name{font-size:14px;padding-left:12px}.brand-meta{display:none}.import-layout{display:flex;flex-direction:column;padding:54px 0;min-height:auto}.intro-column{padding:0;width:100%}h1{font-size:54px}.lead{font-size:15px}.feature-row{display:none}.upload-panel{width:100%;max-width:520px}.page-footer{margin-top:20px}.mapping-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start;gap:20px}.file-badge{min-width:200px}.view-classroom{padding:0 15px 85px}.sidebar{position:fixed;left:14px;right:14px;top:auto;bottom:12px;width:auto;height:64px;padding:7px 9px;border-radius:20px;flex-direction:row;z-index:50}.side-brand,.side-tip,.side-company{display:none}.side-nav{margin:0;display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:4px}.side-nav button{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px;text-align:center}.side-nav button span{font-size:15px}.side-nav button b{font-size:8px}.side-nav button em{display:none}.classroom-topbar{height:76px}.clock{display:none}.dashboard{padding-top:15px}.draw-card{min-height:640px}.dashboard-side{grid-template-columns:1fr}.history-card{grid-column:auto}.name-orb{width:240px}.water-rings i{width:450px}.water-rings i:nth-child(2){width:360px}.water-rings i:nth-child(3){width:285px}.draw-header{gap:20px}.content-panel{margin-top:15px}}
@media (max-width:560px){.brandbar .product-name{display:none}.page-footer{flex-direction:column;justify-content:center;gap:8px}.upload-panel{padding:19px}.drop-zone{height:275px}.section-heading{flex-direction:column}.file-badge{width:100%}.progress-steps{display:none}.brandbar.compact .brand{margin-left:55px}.draw-card{padding:22px 16px;min-height:600px}.draw-header h2{font-size:23px}.draw-header p{max-width:190px}.mode-select-wrap select{width:108px}.draw-stage{min-height:380px}.name-orb{width:205px}.float-chip{display:none}.dashboard-side{display:flex}.classroom-topbar .crumb{font-size:11px}.classroom-topbar .icon-button{display:none}.panel-title{align-items:flex-start;gap:18px}.panel-title p{max-width:230px}.roster-grid{grid-template-columns:1fr}.history-table{min-width:620px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* v1.1 — iOS hierarchy + HarmonyOS immersive-light language */
:root{
  --ios-blue:#0a84ff;--ios-cyan:#64d2ff;--ios-mint:#63e6be;
  --surface:rgba(8,24,52,.72);--surface-soft:rgba(10,30,63,.52);
  --glass-clear:rgba(184,220,255,.075);--glass-stroke:rgba(214,239,255,.22);
  --px:50vw;--py:32vh;--spring:cubic-bezier(.2,.9,.28,1)
}
body{font-feature-settings:"kern" 1,"tnum" 1;text-rendering:optimizeLegibility;background:#020817}
.view.is-active{animation:viewEnter .52s var(--spring) both}
@keyframes viewEnter{from{opacity:0;transform:translateY(12px) scale(.995)}to{opacity:1;transform:none}}
.ambient{background:
  radial-gradient(70vw 80vh at 50% -22%,rgba(24,94,195,.5),transparent 67%),
  linear-gradient(150deg,#020714 0%,#06152f 46%,#041127 100%)}
.aurora{filter:blur(28px);opacity:.38;animation-duration:22s}
.aurora-a{background:radial-gradient(circle,rgba(8,132,255,.55),rgba(8,132,255,.08) 48%,transparent 72%)}
.aurora-b{background:radial-gradient(circle,rgba(46,174,255,.32),rgba(0,90,255,.08) 48%,transparent 70%)}
.aurora-c{opacity:.18;background:radial-gradient(circle,rgba(82,215,255,.38),transparent 65%)}
.immersive-light{position:absolute;display:block;pointer-events:none;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.immersive-light-a{width:54vw;height:54vw;left:var(--px);top:var(--py);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(102,219,255,.16) 0,rgba(15,124,255,.09) 26%,transparent 68%);filter:blur(18px);transition:left .16s linear,top .16s linear}
.immersive-light-b{width:30vw;height:16vw;left:calc(var(--px) - 7vw);top:calc(var(--py) - 9vw);transform:translate(-50%,-50%) rotate(-18deg);background:radial-gradient(ellipse,rgba(255,255,255,.14),transparent 66%);filter:blur(34px);opacity:.42;transition:left .22s linear,top .22s linear}
.grid-light{opacity:.28;background-size:88px 88px;mask-image:radial-gradient(circle at 50% 45%,black,transparent 74%)}

.brandbar{height:96px;border-bottom:1px solid rgba(220,239,255,.09)}
.brand img{width:154px;height:50px}.product-name{font-size:17px;font-weight:650;letter-spacing:0}
.brand-meta{height:34px;padding:0 13px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(160%)}
.import-layout{min-height:calc(100vh - 166px);padding:52px 0 70px;gap:clamp(62px,8vw,132px)}
.intro-column{padding-left:clamp(0px,2vw,30px)}
.eyebrow{color:var(--ios-cyan);font-size:11px;letter-spacing:.16em}.eyebrow i{background:linear-gradient(90deg,var(--ios-cyan),transparent)}
h1{font-size:clamp(58px,6.2vw,92px);font-weight:720;letter-spacing:-.06em;margin:24px 0 26px}
h1 em{background:linear-gradient(105deg,#5ac8fa 0%,#0a84ff 66%,#64d2ff 100%);background-clip:text;-webkit-background-clip:text;text-shadow:none}
.lead{color:rgba(214,229,248,.68);font-size:17px;line-height:1.75}
.feature-row>div{border-left:1px solid rgba(210,236,255,.13);padding-left:14px}.feature-icon{border-radius:12px;background:rgba(10,132,255,.12);border:1px solid rgba(100,210,255,.12)}

.glass-panel{--lx:50%;--ly:18%;background:linear-gradient(145deg,rgba(174,217,255,.105),rgba(40,86,148,.055) 52%,rgba(120,192,255,.075));border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(78,154,255,.08),0 22px 60px rgba(0,5,25,.32);backdrop-filter:blur(42px) saturate(165%) brightness(1.05);-webkit-backdrop-filter:blur(42px) saturate(165%) brightness(1.05);transition:transform .36s var(--spring),border-color .3s,box-shadow .3s}
.glass-panel:before{background:radial-gradient(420px circle at var(--lx) var(--ly),rgba(255,255,255,.16),rgba(120,205,255,.045) 32%,transparent 65%);opacity:.88}
.glass-panel:after{content:"";position:absolute;inset:1px;border-radius:calc(var(--radius) - 1px);pointer-events:none;border:1px solid transparent;background:linear-gradient(130deg,rgba(255,255,255,.26),transparent 22%,transparent 72%,rgba(73,180,255,.15)) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.72}
.upload-panel{padding:27px;border-radius:30px;background:linear-gradient(145deg,rgba(118,187,255,.14),rgba(25,66,126,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 28px 75px rgba(0,4,28,.38),0 0 80px rgba(8,132,255,.08)}
.step-caption>span{width:40px;height:40px;border-radius:13px;background:rgba(10,132,255,.15);border-color:rgba(100,210,255,.25)}
.drop-zone{height:314px;border-radius:22px;background:radial-gradient(circle at 50% 37%,rgba(57,174,255,.12),transparent 40%),rgba(0,10,31,.22);border-color:rgba(118,205,255,.34);transition:transform .38s var(--spring),border-color .25s,background .25s,box-shadow .25s}
.drop-zone:hover,.drop-zone.is-dragover{transform:scale(1.008);border-color:rgba(108,218,255,.75);background-color:rgba(7,35,75,.34);box-shadow:inset 0 0 0 1px rgba(118,219,255,.08),0 0 48px rgba(10,132,255,.13)}
.upload-orb{width:72px;height:72px;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.45),rgba(91,198,255,.23) 22%,rgba(10,132,255,.24) 58%,rgba(6,32,92,.4));border-color:rgba(214,245,255,.43);box-shadow:inset 8px 10px 20px rgba(255,255,255,.14),inset -12px -16px 28px rgba(0,35,100,.36),0 18px 36px rgba(0,87,220,.25)}
.upload-actions{position:relative;z-index:2}.text-button{min-height:44px;border-radius:12px;padding:0 16px;transition:background .2s,transform .18s var(--spring),color .2s}.text-button:hover{background:rgba(255,255,255,.055)}.text-button:active{transform:scale(.96)}
.page-footer{height:auto;min-height:72px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;color:rgba(154,181,216,.48)}
.collab-credit{text-align:center;color:rgba(186,210,238,.68);line-height:1.6}

.preview-card,.field-card,.draw-card,.stats-card,.task-card,.history-card,.content-panel{background:linear-gradient(145deg,rgba(7,23,50,.78),rgba(9,30,65,.64));backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);border-color:rgba(194,225,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 52px rgba(0,5,25,.25)}
.field-label input,.field-label select,.mode-select-wrap select{min-height:44px;border-radius:12px;background-color:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11)}
.field-label input::placeholder{color:rgba(159,184,218,.42)}
.primary-button{min-height:50px;border-radius:15px;background:#0a84ff;box-shadow:0 12px 28px rgba(10,132,255,.26),inset 0 1px 0 rgba(255,255,255,.28)}

.sidebar{border-radius:30px;background:linear-gradient(150deg,rgba(166,216,255,.12),rgba(41,92,157,.065));border-color:rgba(215,239,255,.19);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 65px rgba(0,5,28,.34);backdrop-filter:blur(44px) saturate(170%);-webkit-backdrop-filter:blur(44px) saturate(170%)}
.side-nav button{min-height:48px;border-radius:14px;transition:transform .26s var(--spring),background .25s,color .2s}.side-nav button:active{transform:scale(.96)}
.side-nav button.active{background:rgba(255,255,255,.105);border-color:rgba(221,243,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px rgba(0,12,42,.14)}
.side-nav button.active span{color:#8ee8ff}.side-tip{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}
.classroom-topbar{height:88px;border-bottom-color:rgba(225,240,255,.08)}
.crumb{font-size:17px;color:#fff}.crumb b{font-weight:650}.top-actions{position:relative;z-index:2;padding:5px;border-radius:18px;background:rgba(175,218,255,.07);border:1px solid rgba(220,241,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(30px) saturate(165%);-webkit-backdrop-filter:blur(30px) saturate(165%)}
.top-actions .icon-button{width:42px;height:42px;background:transparent;border-color:transparent;border-radius:13px}.top-actions .icon-button:hover{background:rgba(255,255,255,.1)}
.exit-class-button{appearance:none;height:42px;border:0;border-left:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.72);padding:0 12px;display:flex;align-items:center;gap:7px;cursor:pointer;border-radius:0 13px 13px 0;font-size:11px;transition:background .2s,color .2s,transform .18s var(--spring)}
.exit-class-button:hover{background:rgba(255,69,90,.12);color:#ff9aa8}.exit-class-button:active{transform:scale(.96)}.exit-class-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.draw-card{border-radius:30px}.draw-header h2{font-size:30px;font-weight:690;letter-spacing:-.035em}.mode-select-wrap select{min-height:38px}
.water-rings i{border-color:rgba(99,210,255,.09);box-shadow:inset 0 0 70px rgba(20,112,255,.035);transition:transform .6s var(--spring)}
.draw-stage:hover .water-rings i:first-child{transform:scale(1.02)}.draw-stage:hover .water-rings i:nth-child(2){transform:scale(.98)}
.name-orb{background:radial-gradient(circle at var(--orb-x,34%) var(--orb-y,24%),rgba(229,253,255,.92) 0,rgba(91,211,255,.7) 6%,rgba(10,132,255,.69) 28%,rgba(7,59,169,.84) 64%,rgba(3,17,73,.96) 100%);border-color:rgba(218,250,255,.5);box-shadow:inset 18px 20px 42px rgba(211,249,255,.22),inset -26px -34px 50px rgba(0,20,105,.58),0 34px 80px rgba(0,79,214,.32),0 0 0 8px rgba(100,210,255,.025),0 0 85px rgba(50,190,255,.1);transition:transform .48s var(--spring),box-shadow .35s,filter .35s}
.name-orb:before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 210deg,transparent,rgba(205,249,255,.45),transparent 27%,transparent 74%,rgba(45,184,255,.24),transparent);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);animation:rimTurn 12s linear infinite}
.name-orb:after{inset:9px;border-color:rgba(255,255,255,.14)}
.name-orb strong{font-weight:700;letter-spacing:-.02em}.orb-glint{background:rgba(235,254,255,.56);filter:blur(6px)}
.draw-stage.is-drawing .name-orb{animation:orbSearch .7s var(--spring) infinite alternate}.draw-stage.is-drawing .water-rings i{animation:waveOut 1.4s ease-out infinite}.draw-stage.is-drawing .water-rings i:nth-child(2){animation-delay:-.45s}.draw-stage.is-drawing .water-rings i:nth-child(3){animation-delay:-.9s}
.draw-stage.is-selected .name-orb{animation:selectedSpring .72s var(--spring)}
@keyframes rimTurn{to{transform:rotate(360deg)}}@keyframes orbSearch{to{transform:scale(1.035) translateY(-3px);filter:saturate(1.14) brightness(1.06)}}@keyframes waveOut{0%{transform:scale(.9);opacity:.2}70%{opacity:.75}100%{transform:scale(1.06);opacity:.05}}@keyframes selectedSpring{0%{transform:scale(.82)}58%{transform:scale(1.055)}82%{transform:scale(.982)}100%{transform:scale(1)}}
.float-chip{background:rgba(191,229,255,.07);border-color:rgba(214,242,255,.13);color:rgba(199,227,248,.52);backdrop-filter:blur(20px)}
.draw-button{height:56px;min-width:218px;border-radius:18px;background:#0a84ff;box-shadow:0 12px 30px rgba(10,132,255,.3),inset 0 1px 0 rgba(255,255,255,.34);position:relative;overflow:hidden}.draw-button:active{transform:scale(.965)}
.secondary-button{min-height:44px;background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.12);backdrop-filter:blur(18px)}
.stats-card,.task-card,.history-card{border-radius:24px}.stat-ring{background:conic-gradient(var(--ios-cyan) calc(var(--progress)*1%),rgba(255,255,255,.08) 0)}
.task-content{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.065)}

.interaction-ripple{position:absolute;pointer-events:none;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.38);transform:translate(-50%,-50%) scale(0);animation:ripple .62s ease-out forwards}
.primary-button,.draw-button,.secondary-button,.text-button,.side-nav button,.exit-class-button,.dialog-actions button{position:relative;overflow:hidden}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(14);opacity:0}}
.modal-backdrop{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:22px;background:rgba(0,6,18,.38);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.modal-backdrop.is-open{opacity:1;visibility:visible}.system-dialog{width:min(390px,100%);text-align:center;border-radius:30px;padding:28px 24px 20px;background:linear-gradient(145deg,rgba(196,226,255,.16),rgba(28,65,116,.13));border:1px solid rgba(225,243,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 30px 90px rgba(0,4,24,.55);backdrop-filter:blur(45px) saturate(170%);-webkit-backdrop-filter:blur(45px) saturate(170%);transform:translateY(14px) scale(.96);transition:transform .35s var(--spring)}
.modal-backdrop.is-open .system-dialog{transform:none}.dialog-symbol{width:52px;height:52px;margin:0 auto 16px;border-radius:17px;display:grid;place-items:center;background:rgba(255,69,90,.12);color:#ff8d9d;border:1px solid rgba(255,140,155,.18)}.dialog-symbol svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.system-dialog h2{font-size:20px;margin:0 0 9px}.system-dialog p{color:rgba(200,218,240,.62);font-size:12px;line-height:1.65;margin:0 auto 22px;max-width:300px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-actions button{appearance:none;border:0;height:46px;border-radius:14px;cursor:pointer;background:rgba(255,255,255,.08);color:#e8f4ff;font-weight:650;font-size:12px;transition:transform .18s var(--spring),background .2s}.dialog-actions button:active{transform:scale(.96)}#confirmExitBtn{background:#ff453a;color:white}

@media (hover:hover){.upload-panel:hover{border-color:rgba(222,244,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 32px 85px rgba(0,4,28,.42),0 0 90px rgba(8,132,255,.11)}}
@media (max-width:820px){.page-footer{grid-template-columns:1fr;text-align:center;padding:18px 0;gap:8px}.collab-credit{order:3}.sidebar{background:linear-gradient(145deg,rgba(166,216,255,.16),rgba(44,97,164,.09));border-color:rgba(220,243,255,.23);backdrop-filter:blur(38px) saturate(175%);-webkit-backdrop-filter:blur(38px) saturate(175%)}.top-actions{background:transparent;border:0;padding:0;backdrop-filter:none}.exit-class-button{width:42px;padding:0;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.05)}.exit-class-button span{display:none}}
@media (max-width:560px){h1{font-size:52px}.brandbar{height:78px}.import-layout{padding-top:46px}.upload-panel{border-radius:26px}.draw-card{border-radius:26px}.classroom-topbar .crumb{font-size:13px}.top-actions{gap:4px}.exit-class-button{height:40px;width:40px}.system-dialog{border-radius:26px}}
@media (prefers-reduced-transparency:reduce){.glass-panel,.sidebar,.top-actions,.system-dialog{background:#0a2248;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.modal-backdrop{background:rgba(0,6,18,.82)}}
@media (prefers-reduced-motion:reduce){.immersive-light,.name-orb:before{display:none}.view.is-active{animation:none}.draw-stage.is-drawing .water-rings i{animation:none}}

/* v1.2 — fluid breathing orb, stronger clock, three-stage name reveal */
.top-actions .clock{position:relative;min-width:124px;height:44px;margin:0;padding:5px 13px 5px 28px;border-radius:13px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;background:linear-gradient(145deg,rgba(197,230,255,.115),rgba(95,165,231,.055));border:1px solid rgba(222,243,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px rgba(0,8,30,.18);color:white;font-variant-numeric:tabular-nums;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%)}
.top-actions .clock:before{content:"";position:absolute;left:13px;top:50%;width:7px;height:7px;border-radius:50%;background:#63e6be;box-shadow:0 0 0 4px rgba(99,230,190,.08),0 0 14px rgba(99,230,190,.75);transform:translateY(-50%);animation:clockPulse 2.4s ease-in-out infinite}
.top-actions .clock small{font-size:8px;line-height:1;color:rgba(174,207,238,.56);letter-spacing:.08em}
.top-actions .clock b{font-size:14px;line-height:1.2;font-weight:680;letter-spacing:.035em;color:#f5fbff;text-shadow:0 1px 12px rgba(120,218,255,.25)}
@keyframes clockPulse{50%{opacity:.58;box-shadow:0 0 0 7px rgba(99,230,190,0),0 0 18px rgba(99,230,190,.45)}}

.draw-stage{--tide-duration:5.2s;overflow:visible}
.water-rings:before,.water-rings:after{content:"";position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;border:1px solid rgba(120,222,255,.11);opacity:0;will-change:transform,opacity}
.water-rings:before{width:min(29vw,360px);animation:tideEmanate var(--tide-duration) ease-in-out infinite}
.water-rings:after{width:min(36vw,450px);animation:tideEmanate var(--tide-duration) ease-in-out -2.6s infinite}
.water-rings i{will-change:transform,opacity;animation:tideRing var(--tide-duration) ease-in-out infinite!important}
.water-rings i:nth-child(2){animation-delay:-1.72s!important}.water-rings i:nth-child(3){animation-delay:-3.44s!important}
@keyframes tideRing{0%,100%{transform:scale(.965);opacity:.2;border-color:rgba(89,203,255,.07)}38%{transform:scale(1.025);opacity:.58;border-color:rgba(115,225,255,.2)}62%{transform:scale(1.055);opacity:.14;border-color:rgba(79,165,255,.07)}}
@keyframes tideEmanate{0%{transform:scale(.66);opacity:0}18%{opacity:.42}68%{opacity:.12}100%{transform:scale(1.36);opacity:0}}

.name-orb{isolation:isolate;overflow:hidden;will-change:transform,filter;animation:liquidBreath var(--tide-duration) cubic-bezier(.45,0,.25,1) infinite}
.name-orb>small,.name-orb>strong,.name-orb>em{position:relative;z-index:6}
.name-orb:before{z-index:5;animation:rimTurn 10s linear infinite,edgeBreathe var(--tide-duration) ease-in-out infinite}
.name-orb:after{z-index:5;box-shadow:inset 0 0 24px rgba(139,231,255,.08);animation:innerMembrane 3.8s ease-in-out infinite}
.orb-glint{z-index:4;animation:glintFloat 5.4s ease-in-out infinite;will-change:transform,opacity}
.orb-caustic{position:absolute;z-index:2;border-radius:50%;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity}
.caustic-a{inset:-22%;background:conic-gradient(from 15deg,transparent 0 13%,rgba(149,240,255,.16) 18%,transparent 26% 48%,rgba(62,183,255,.13) 55%,transparent 67%);filter:blur(13px);animation:causticDrift 8.5s linear infinite}
.caustic-b{width:74%;height:42%;left:5%;bottom:-3%;background:radial-gradient(ellipse,rgba(106,226,255,.25),rgba(24,143,255,.08) 38%,transparent 70%);filter:blur(16px);transform:rotate(-18deg);animation:causticSweep 6.2s ease-in-out infinite alternate}
.orb-pulse-core{position:absolute;z-index:1;width:62%;aspect-ratio:1;left:19%;top:19%;border-radius:50%;background:radial-gradient(circle,rgba(104,225,255,.18),rgba(19,132,255,.08) 38%,transparent 70%);filter:blur(5px);animation:coreBreathe 3.6s ease-in-out infinite}
.orb-wavefront{position:absolute;z-index:3;inset:8%;border-radius:50%;border:1px solid rgba(204,249,255,.18);box-shadow:0 0 16px rgba(91,214,255,.08),inset 0 0 18px rgba(91,214,255,.05);animation:membraneWave 4.2s ease-in-out infinite}
@keyframes liquidBreath{0%,100%{transform:scale(.988);filter:saturate(1) brightness(.98);box-shadow:inset 18px 20px 42px rgba(211,249,255,.18),inset -26px -34px 50px rgba(0,20,105,.6),0 26px 68px rgba(0,79,214,.27),0 0 0 8px rgba(100,210,255,.02),0 0 62px rgba(50,190,255,.07)}48%{transform:scale(1.018);filter:saturate(1.12) brightness(1.045);box-shadow:inset 20px 22px 48px rgba(220,252,255,.27),inset -24px -30px 48px rgba(0,20,105,.52),0 38px 92px rgba(0,95,235,.38),0 0 0 12px rgba(100,210,255,.035),0 0 105px rgba(50,190,255,.16)}72%{transform:scale(.997);filter:saturate(1.05) brightness(1.01)}}
@keyframes edgeBreathe{50%{opacity:1;filter:brightness(1.35)}}@keyframes innerMembrane{0%,100%{transform:scale(.99);opacity:.55}50%{transform:scale(1.018);opacity:.95}}@keyframes glintFloat{0%,100%{transform:translate(-3px,2px) rotate(-20deg) scale(.94);opacity:.48}50%{transform:translate(13px,-6px) rotate(-15deg) scale(1.08);opacity:.78}}@keyframes causticDrift{to{transform:rotate(360deg) scale(1.06)}}@keyframes causticSweep{to{transform:translate(26%, -20%) rotate(-5deg) scale(1.18);opacity:.72}}@keyframes coreBreathe{0%,100%{transform:scale(.82);opacity:.22}52%{transform:scale(1.22);opacity:.7}}@keyframes membraneWave{0%,100%{transform:scale(.96);opacity:.32}50%{transform:scale(1.035);opacity:.82;border-color:rgba(218,252,255,.29)}}

#selectedName{will-change:transform,filter,opacity;transform-origin:center;transition:letter-spacing .22s ease,color .22s ease}
#studentIdLabel,#selectionHint{will-change:transform,opacity,filter}
#selectedName.name-tick{animation:nameTick .13s cubic-bezier(.2,.8,.25,1) both}
.draw-stage.is-drawing #selectedName{color:rgba(235,250,255,.82);text-shadow:0 0 25px rgba(89,205,255,.34)}
.draw-stage.is-drawing #studentIdLabel{animation:metaScan .8s ease-in-out infinite alternate}
.draw-stage.is-drawing #selectionHint{animation:hintBreathe 1.1s ease-in-out infinite}
.draw-stage.is-drawing .name-orb{animation:searchBreath .76s cubic-bezier(.35,0,.25,1) infinite alternate!important}
.draw-stage.is-drawing .orb-pulse-core{animation-duration:.72s}.draw-stage.is-drawing .orb-wavefront{animation:searchWave .9s ease-out infinite}
.draw-stage.is-drawing .water-rings i{animation:searchTide 1.35s ease-out infinite!important}.draw-stage.is-drawing .water-rings i:nth-child(2){animation-delay:-.45s!important}.draw-stage.is-drawing .water-rings i:nth-child(3){animation-delay:-.9s!important}
.draw-stage.is-selected #selectedName{animation:nameReveal .86s cubic-bezier(.16,1,.3,1) both}
.draw-stage.is-selected #studentIdLabel{animation:metaReveal .54s ease-out .08s both}.draw-stage.is-selected #selectionHint{animation:metaReveal .62s ease-out .16s both}
@keyframes nameTick{0%{opacity:.15;transform:translateY(10px) scale(.96);filter:blur(5px)}55%{opacity:1}100%{opacity:.72;transform:translateY(-3px) scale(1);filter:blur(.35px)}}
@keyframes nameReveal{0%{opacity:0;transform:translateY(18px) scale(.82);filter:blur(12px);letter-spacing:.18em}48%{opacity:1;transform:translateY(-3px) scale(1.07);filter:blur(0);letter-spacing:.045em}72%{transform:translateY(1px) scale(.985)}100%{opacity:1;transform:none;filter:none;letter-spacing:-.02em}}
@keyframes metaScan{to{opacity:.42;filter:blur(.55px)}}@keyframes hintBreathe{50%{opacity:.38}}@keyframes metaReveal{from{opacity:0;transform:translateY(7px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes searchBreath{to{transform:scale(1.045) translateY(-2px);filter:saturate(1.24) brightness(1.08);box-shadow:inset 22px 24px 50px rgba(224,253,255,.3),inset -24px -30px 48px rgba(0,20,105,.46),0 42px 105px rgba(0,106,255,.43),0 0 0 13px rgba(100,210,255,.045),0 0 120px rgba(50,190,255,.2)}}
@keyframes searchWave{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.22);opacity:0}}
@keyframes searchTide{0%{transform:scale(.82);opacity:.1;border-color:rgba(124,229,255,.08)}35%{opacity:.62;border-color:rgba(141,234,255,.24)}100%{transform:scale(1.08);opacity:0;border-color:rgba(76,160,255,.04)}}

@media (max-width:820px){.top-actions .clock{display:flex;min-width:98px;height:40px;padding-left:25px}.top-actions .clock:before{left:11px}.top-actions .clock b{font-size:12px}.top-actions .clock small{font-size:7px}}
@media (max-width:560px){.top-actions .clock{display:flex!important;min-width:80px;padding:4px 9px 4px 23px}.top-actions .clock small{display:none}.top-actions .clock b{font-size:11px}.water-rings:before{width:260px}.water-rings:after{width:330px}}
@media (prefers-reduced-motion:reduce){.name-orb,.water-rings i,.water-rings:before,.water-rings:after,.orb-glint,.orb-caustic,.orb-pulse-core,.orb-wavefront,.top-actions .clock:before,#selectedName.name-tick{animation:none!important}.draw-stage.is-selected #selectedName,.draw-stage.is-selected #studentIdLabel,.draw-stage.is-selected #selectionHint{animation:none!important}}