.platform-mode{background:#f5f8fd;color:#172743}.platform-mode #app{min-height:100vh}.platform-mark{display:flex;gap:13px;align-items:center}.platform-mark strong{display:block;font-size:20px;letter-spacing:.2px}.platform-mark small{display:block;font-size:11px;letter-spacing:1.8px;color:#6e819e;margin-top:5px}.mark-symbol,.login-card-icon{display:grid;place-items:center;background:#e5efff;color:#3072e8;border-radius:12px;width:43px;height:43px;font-size:25px;font-weight:700}.overline{color:#6590ce;letter-spacing:2.5px;font-size:11px;font-weight:700}.login-screen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);min-height:100vh}.login-story{position:relative;overflow:hidden;padding:55px max(7vw,45px);background:linear-gradient(150deg,#e8f2ff 0%,#f8fbff 45%,#fff2e2 100%)}.login-story .platform-mark,.story-copy{position:relative;z-index:2}.story-copy{margin-top:clamp(75px,12vh,150px);max-width:650px}.story-copy h1{font-size:clamp(36px,3.2vw,58px);line-height:1.25;letter-spacing:-1.5px;margin:20px 0;color:#122240}.story-copy>p:not(.overline){font-size:18px;color:#425875}.story-line{width:56px;height:2px;background:#9fb9df;margin:34px 0}.story-copy>small{font-size:14px;color:#7387a2}.story-art{position:absolute;left:0;right:0;bottom:0;height:31%;min-height:200px;background:linear-gradient(#a7c6dd55,#688faf88);border-top:5px solid #8daac6}.art-window{position:absolute;inset:0 0 28% 0;display:flex;align-items:end;justify-content:space-around;opacity:.35}.art-window i{display:block;width:13%;background:#6b8cad;height:45%;border-radius:6px 6px 0 0}.art-window i:nth-child(2){height:75%}.art-window i:nth-child(3){height:58%}.art-desk{position:absolute;bottom:0;width:100%;height:26%;background:linear-gradient(10deg,#c29573,#e5c09a)}.art-laptop{position:absolute;bottom:17%;left:23%;width:38%;height:13%;background:#dce6ef;transform:skew(-19deg);border:3px solid #99acc0;border-radius:5px;box-shadow:12px 12px 18px #465b7650}.art-cup{position:absolute;bottom:21%;right:19%;width:9%;height:18%;border-radius:2px 2px 15px 15px;background:#324f71}.art-book{position:absolute;bottom:23%;left:6%;width:12%;height:4%;background:#e9eef6;border-left:5px solid #4578be;box-shadow:0 8px #f3eee8,0 14px #4c688d}.book-two{bottom:35%;left:9%;width:9%;transform:rotate(-3deg)}.login-side{position:relative;display:grid;place-items:center;padding:70px 45px;background:#f7faff}.login-note{position:absolute;right:9%;top:45px;font-family:serif;font-style:italic;color:#647b9f;font-size:17px;transform:rotate(-7deg)}.login-card{width:min(100%,470px);background:white;padding:48px;border:1px solid #e7eef8;border-radius:18px;box-shadow:0 15px 50px #365a9114}.login-card-icon{margin:auto;width:48px;height:48px}.login-card h2{text-align:center;font-size:26px;margin:22px 0 5px}.login-card>p:not(.login-error){text-align:center;color:#8c9ab0;font-size:14px;margin:0 0 36px}.login-card label{display:block;font-size:13px;color:#5d6e89;margin:17px 0}.login-card input{display:block;width:100%;padding:15px 16px;border:1px solid #d9e3f1;border-radius:9px;background:#fbfdff;color:#203655;margin-top:8px;outline:none}.login-card input:focus{border-color:#79a5f0;box-shadow:0 0 0 3px #dceaff}.portal-primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 20px;border-radius:9px;color:#fff!important;background:#2c6ce7;text-decoration:none;font-weight:600;font-size:14px}.portal-primary:hover{background:#225fd5;filter:none}.login-hint{font-size:11px;text-align:center;color:#a2aec0;margin-top:26px}.login-error{font-size:12px;color:#c94747!important;text-align:left!important;margin:8px 0!important}.login-foot{position:absolute;bottom:50px;letter-spacing:3px;color:#96a8c4;font-size:11px}.portal-screen{min-height:100vh}.portal-top{height:82px;background:#fff;border-bottom:1px solid #e8eef6;padding:0 max(5vw,30px);display:flex;justify-content:space-between;align-items:center}.portal-user{display:flex;align-items:center;gap:12px;font-size:13px}.portal-user button{color:#70829e;font-size:12px;margin-left:12px}.portal-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e2edff;color:#326fe0;font-weight:700}.portal-main{max-width:1420px;padding:38px 42px 80px;margin:auto}.portal-welcome{background:#eaf2ff;border:1px solid #dbe8fa;border-radius:17px;padding:32px 38px;display:flex;justify-content:space-between;align-items:end}.portal-welcome h1{font-size:29px;margin:7px 0}.portal-welcome p:last-child{color:#71829c;font-size:14px;margin-bottom:0}.portal-welcome>span{font-size:12px;color:#8699b2}.portal-section{margin-top:34px}.portal-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.portal-section-head h2{margin:0;font-size:19px}.portal-section-head span{font-size:12px;color:#9aa8bb}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.project-card{position:relative;min-height:255px;padding:24px;background:white;border:1px solid #e6edf7;border-radius:14px;box-shadow:0 4px 14px #29446f0a}.project-active{border-top:3px solid #4785ea}.project-icon{width:42px;height:42px;background:#edf4ff;color:#3e7be2;border-radius:10px;display:grid;place-items:center;font-size:23px}.project-status{position:absolute;right:20px;top:27px;color:#9aa8b9;background:#f1f4f8;border-radius:20px;padding:5px 9px;font-size:10px}.project-status.active{background:#e6f6ed;color:#299863}.project-card h3{font-size:19px;margin:24px 0 6px}.project-card p{font-size:12px;color:#8796aa;line-height:1.65}.project-card .project-subtitle{color:#4f6688;margin:0}.project-card .portal-primary{margin-top:21px;padding:10px 13px;font-size:12px;justify-content:space-between}.project-disabled{display:block;margin-top:20px;color:#a7b3c2;font-size:12px}.portal-lower{display:grid;grid-template-columns:1fr 1fr;gap:24px}.portal-links{background:white;border:1px solid #e6edf7;border-radius:13px;padding:8px 18px;min-height:100px}.portal-links a{display:flex;justify-content:space-between;padding:14px 4px;border-bottom:1px solid #edf1f6;font-size:13px;color:#4d678e;text-decoration:none}.portal-links a:last-child{border-bottom:0}.portal-links a:hover{color:#2c6ce7}.portal-empty{font-size:12px;color:#9ba8b8;padding:9px 4px}.teach-mode{background:#f5f8fc}
@media(max-width:1100px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-screen{grid-template-columns:1fr 1fr}.login-story{padding:45px}.story-copy h1{font-size:35px}}
@media(max-width:700px){.login-screen{display:block}.login-story{min-height:350px;padding:28px}.story-copy{margin-top:45px}.story-copy h1{font-size:29px}.story-art{height:95px;min-height:95px}.login-side{padding:40px 18px 85px}.login-note{display:none}.login-card{padding:30px}.login-foot{bottom:25px}.portal-top{padding:0 18px}.portal-main{padding:24px 16px 60px}.portal-welcome{padding:22px;display:block}.portal-welcome>span{display:block;margin-top:16px}.project-grid,.portal-lower{grid-template-columns:1fr}}

/* The login scene uses a photographic desk backdrop; keep its bright upper area for legible copy. */
.login-screen{grid-template-columns:minmax(0,58%) minmax(0,42%)}
.login-story{padding:64px clamp(48px,7.5vw,116px);background:#e9f3ff url('/login-hero.png') center center / cover no-repeat}
.login-story .platform-mark strong{font-size:23px;color:#10213d}
.login-story .platform-mark small{font-size:15px;letter-spacing:2px;color:#526582}
.login-story .mark-symbol{background:#347ae9;color:white;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0}
.story-copy{margin-top:clamp(80px,10vh,140px);max-width:660px}
.story-copy h1{font-size:clamp(50px,4.6vw,76px);line-height:1.08;letter-spacing:-3px;margin:0 0 19px;color:#10213e;white-space:nowrap}
.story-copy>p.story-lead{font-size:clamp(27px,2.6vw,40px);line-height:1.28;letter-spacing:1px;color:#2d3f5d;margin:0;font-weight:600}
.story-copy .story-line{width:53px;height:1px;background:#9eb3d3;margin:30px 0 26px}
.story-copy .story-motto{font-size:18px;line-height:1.7;color:#4e6180;margin:0 0 10px}
.story-copy>small{display:block;font-size:15px;line-height:1.5;color:#6b7d98}
.login-side{padding:75px clamp(30px,3vw,50px);background:#f5f9ff}
.login-card{width:min(100%,520px);padding:70px 49px 64px;border:0;border-radius:18px;box-shadow:0 12px 50px #35548b12}
.login-card h2{font-size:28px;margin:0 0 8px}
.login-card>p:not(.login-error){font-size:17px;margin-bottom:45px}
.login-card label{font-size:0;margin:18px 0}
.login-card input{margin:0;height:60px;font-size:16px;padding:17px 20px;border-radius:10px}
.login-card .portal-primary{height:60px;font-size:16px;margin-top:34px;background:#286cf0}
.login-hint{border-top:1px solid #e3eaf5;padding-top:23px;margin-top:44px;font-size:13px;color:#6b7e9c}
.login-note{right:13%;top:56px;font-size:23px;color:#3e5578}
.login-foot{font-size:14px;bottom:75px;letter-spacing:2px}
@media(max-width:1100px){.login-screen{grid-template-columns:minmax(0,55%) minmax(0,45%)}.login-story{padding:44px}.story-copy h1{font-size:clamp(39px,4.3vw,56px);letter-spacing:-2px}.story-copy>p.story-lead{font-size:27px}.login-card{padding:55px 30px}}
@media(max-width:700px){.login-screen{display:block}.login-story{min-height:540px;padding:28px;background-position:center bottom}.story-copy{margin-top:75px}.story-copy h1{font-size:39px}.story-copy>p.story-lead{font-size:25px}.story-copy .story-motto{font-size:16px}.login-side{padding:48px 18px 90px}.login-card{padding:43px 28px}.login-foot{bottom:30px}}
.side-portal-link{display:block;color:#6380a7;text-decoration:none;font-size:12px;padding:8px 17px}.side-portal-link:hover{color:#2868f6}
@media(max-width:620px){aside .side-portal-link{display:none}}