@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root { color-scheme:light; --lime:#a8ff5a; --brown:#6b5a3c; --ink:#1a1a1a; --muted:#77776f; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; min-height:100%; }
body { font-family:Inter,Arial,sans-serif; color:var(--ink); background:#fff; font-size:14px; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { cursor:pointer; }
.login-layout { display:grid; grid-template-columns:40.8% 59.2%; min-height:100dvh; }
.visual-panel { position:relative; isolation:isolate; min-height:calc(100dvh - 36px); margin:20px 16px 16px; padding:clamp(90px,16vh,150px) 36px 0; overflow:hidden; border-radius:30px; background:#f7f7f2; display:flex; flex-direction:column; align-items:center; }
.brand { position:relative; display:block; width:210px; max-width:65%; z-index:1; }
.brand-logo { display:block; width:100%; height:auto; }
.visual-copy { position:relative; z-index:1; width:100%; max-width:450px; margin:36px 0 0; text-align:center; }
.visual-copy h1 { margin:0 0 18px; font-size:28px; font-weight:400; letter-spacing:-.8px; line-height:1.38; }
.visual-copy p { margin:0; font-size:14px; line-height:1.8; font-weight:400; color:var(--brown); }
.support-button { position:relative; z-index:1; flex-shrink:0; height:49px; margin-top:32px; padding:0 28px; border:1px solid var(--brown); border-radius:30px; color:var(--brown); background:transparent; font-size:14px; font-weight:600; }
.support-button:hover { background:#eeffdf; }
.color-shape { position:absolute; z-index:-1; bottom:0; pointer-events:none; }
.shape-green { left:0; width:70%; height:32%; background:linear-gradient(145deg,#a8ff5a,#65cb30); clip-path:polygon(0 34%,100% 0,100% 100%,0 100%); }
.shape-brown { right:0; width:40%; height:37%; background:linear-gradient(160deg,#6b5a3c,#b3a17e); clip-path:polygon(0 0,100% 22%,100% 100%,0 100%); }
.system-preview { position:relative; z-index:1; flex-shrink:0; width:min(460px,100%); min-height:320px; margin-top:auto; transform:translateY(1px); padding:18px 16px; background:#fff; border:1px solid #deded8; border-bottom:0; border-radius:17px 17px 0 0; box-shadow:0 -12px 40px #1a1a1a18; }
.preview-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:10px; font-weight:600; color:#9b9b95; }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:7px; height:7px; border-radius:50%; background:#e2e6eb; }
.preview-date { margin-left:auto; font-size:9px; font-weight:400; }
.preview-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.column-title { display:flex; align-items:center; min-height:28px; padding:6px 8px; border-radius:7px; font-size:9px; font-weight:600; white-space:nowrap; color:#fff; }
.scheduled { background:#e8ab12; color:#1a1a1a; }
.progress { background:#8b5cf6; }
.completed { background:#22a666; }
.lesson-card { display:flex; align-items:center; gap:7px; height:46px; padding:8px; margin-top:8px; border:1px solid #e0e5ea; border-radius:8px; }
.placeholder-avatar { flex:0 0 16px; height:16px; border-radius:50%; background:#e8ab12; }
.preview-column:nth-child(2) .placeholder-avatar { background:#8b5cf6; }
.preview-column:nth-child(3) .placeholder-avatar { background:#22a666; }
.placeholder-lines { flex:1; min-width:0; }
.placeholder-lines span { display:block; height:6px; border-radius:10px; background:#e0e5ea; }
.placeholder-lines span+span { width:65%; margin-top:8px; background:#f0f3f6; }
.form-panel { display:flex; justify-content:center; align-items:center; padding:64px 36px; background:#fff; }
.form-content { width:450px; max-width:100%; }
.login-logo { width:230px; max-width:65%; margin:0 auto 50px; }
.login-logo img { display:block; width:100%; height:auto; }
.login-heading { margin:0 0 6px; font-size:20px; line-height:1.4; font-weight:500; letter-spacing:-.35px; }
.field { margin-bottom:16px; }
.field label { display:block; margin:0 0 9px; font-size:13px; font-weight:400; }
.input-wrap { display:flex; align-items:center; gap:13px; height:49px; padding:0 15px; background:#fff; border:1px solid #d8d8d3; border-radius:12px; }
.input-wrap:focus-within { border-color:var(--brown); box-shadow:0 0 0 3px #a8ff5a33; }
.input-wrap>svg,.show-password svg { width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; color:#a4a59f; }
.input-wrap input { width:100%; min-width:0; height:100%; padding:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:15px; }
input::placeholder { color:#a3a6aa; }
.show-password { display:grid; place-items:center; flex-shrink:0; padding:5px; border:0; background:transparent; }
.show-password svg { color:#555650; }
.submit-button { width:100%; height:49px; margin-top:7px; border:0; border-radius:30px; color:#1a1a1a; background:var(--lime); box-shadow:0 6px 12px #6b5a3c15; font-size:14px; font-weight:500; }
.submit-button:hover { background:#98ed4a; }
.submit-button:disabled { opacity:.6; cursor:wait; }
.form-message { margin:18px 0 0; border-left:3px solid var(--brown); padding:12px; background:#f7f7f2; color:var(--brown); font-size:13px; line-height:1.6; }
.developer-credit { text-align:center; margin-top:122px; font-size:11px; color:var(--brown); line-height:1.8; }
.developer-credit strong { font-weight:600; color:#1a1a1a; text-decoration:underline; }
.version-label { display:block; margin-top:2px; font-size:10px; color:#92928a; }
.support-dialog { max-width:min(420px,calc(100% - 32px)); border:1px solid #e3e3db; border-radius:16px; padding:28px; color:var(--ink); }
.support-dialog::backdrop { background:#1a1a1a55; }
.support-dialog h2 { font-size:20px; margin:0 0 16px; }
.support-dialog p { color:var(--brown); line-height:1.7; }
.support-dialog button { padding:10px 20px; border:0; border-radius:20px; background:var(--lime); color:var(--ink); }
button:focus-visible,a:focus-visible { outline:2px solid var(--brown); outline-offset:4px; }
@media(min-width:801px) { .system-preview { margin-top:max(70px,calc(100dvh - 760px)); } }
@media(min-width:801px) and (max-height:760px) { .visual-panel { padding-top:42px; } .brand { width:180px; } .visual-copy { margin-top:22px; } .visual-copy h1 { font-size:24px; } .support-button { margin-top:22px; } .system-preview { min-height:230px; margin-top:50px; } .form-panel { padding-top:40px; padding-bottom:40px; } .login-logo { margin-bottom:32px; } .developer-credit { margin-top:60px; } }
@media(max-width:1100px) and (min-width:801px) { .visual-panel { padding-left:22px; padding-right:22px; } .visual-copy h1 { font-size:24px; } .visual-copy p { font-size:13px; } .column-title { padding:6px 4px; font-size:8px; } .preview-date { display:none; } }
@media(max-width:800px) { .login-layout { display:block; } .visual-panel { display:none; } .form-panel { min-height:100dvh; padding:48px 24px; } .form-content { max-width:450px; } .login-logo { margin-bottom:42px; } .developer-credit { margin-top:72px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
@media(min-width:801px) {
 .login-layout { height:100dvh; min-height:650px; }
 .visual-panel { height:calc(100% - 36px); min-height:0; padding-top:clamp(80px,14vh,130px); }
 .brand { width:250px; }
 .visual-copy { max-width:480px; margin-top:28px; }
 .system-preview { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:calc(100% - 72px); max-width:460px; height:320px; min-height:0; margin:0; }
 .login-logo { width:280px; margin-bottom:28px; }
}
@media(min-width:801px) and (max-height:760px) {
 .visual-panel { padding-top:35px; }
 .brand { width:210px; }
 .visual-copy { margin-top:18px; }
 .system-preview { height:220px; }
 .login-logo { width:230px; }
}
/* Keep the demonstration agenda on a clean background. */
.color-shape { display:block; -webkit-mask-image:linear-gradient(to top,#000 0,#000 320px,transparent 320px); mask-image:linear-gradient(to top,#000 0,#000 320px,transparent 320px); }
@media(min-width:801px) and (max-height:760px) { .color-shape { -webkit-mask-image:linear-gradient(to top,#000 0,#000 220px,transparent 220px); mask-image:linear-gradient(to top,#000 0,#000 220px,transparent 220px); } }