/* Layout and illustration styling copied from D:\crm-dashboard\app\templates\login.html; adapted for laser marking. */
:root { --ink:#243449; --muted:#7a8a9f; --line:#dce5ef; --primary:#287ee0; --canvas:#f3f6fb; }
        * { box-sizing:border-box; }
        html,body { min-width:320px; min-height:100%; margin:0; }
        body { display:flow-root; min-height:100vh; min-height:100svh; color:var(--ink); background:var(--canvas); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
        button,input { font:inherit; }
        button { -webkit-tap-highlight-color:transparent; }
        .icon { display:block; width:20px; height:20px; flex:none; }
        .login-shell { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); width:calc(100% - 80px); max-width:1240px; min-height:calc(100vh - 80px); min-height:calc(100svh - 80px); margin:40px auto; overflow:hidden; border:1px solid #e0e8f2; border-radius:24px; background:#fff; box-shadow:0 16px 60px -35px rgba(42,72,111,.22); }
        .login-visual { position:relative; display:flex; flex-direction:column; min-width:0; padding:44px 44px 30px; overflow:hidden; background:#edf4fe; border-right:1px solid #e5edf8; }
        .visual-brand { display:flex; align-items:center; gap:14px; }
        .brand-wordmark { position:relative; color:#295c96; font-family:Arial,"Helvetica Neue",sans-serif; font-size:26px; font-weight:800; line-height:1; letter-spacing:-1.1px; white-space:nowrap; }
        .brand-wordmark>span { position:relative; top:-9px; margin-left:3px; font-size:9px; font-weight:400; letter-spacing:0; }
        .brand-caption { padding-left:14px; border-left:1px solid #c4d6eb; color:#6c84a1; font-size:12px; white-space:nowrap; }
        .visual-content { position:relative; margin:auto 0; padding:44px 0 20px; }
        .visual-eyebrow { margin:0 0 16px; color:#527ca9; font-size:11px; font-weight:650; letter-spacing:2.8px; }
        .visual-content h2 { margin:0; color:#29496d; font-size:36px; font-weight:650; line-height:1.5; letter-spacing:1px; }
        .visual-caption { margin:10px 0 0; color:#7b91ab; font-size:13px; letter-spacing:.5px; }
        .workspace-art { display:block; width:calc(100% + 48px); height:auto; margin:22px -24px 0; }
        .visual-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; color:#7b91ab; font-size:11px; letter-spacing:1px; }
        .visual-bottom-label { display:flex; align-items:center; gap:8px; }
        .visual-bottom-label::before { content:""; width:20px; height:1px; background:#adc6e4; }
        .scene-play { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid #d4e1f1; border-radius:50%; background:#f7faff; color:#7095bc; cursor:pointer; transition:background .16s,transform .16s; }
        .scene-play .icon { width:17px; height:17px; }
        .scene-play:hover { background:#fff; transform:rotate(-10deg); }
        .scene-play:focus-visible { outline:3px solid #7eb4e8; outline-offset:3px; }
        .scene-bubble { position:absolute; z-index:1; width:var(--size); height:var(--size); border:1px solid rgba(94,167,235,.6); background:rgba(255,255,255,.5); border-radius:50%; pointer-events:none; animation:scene-rise 1.1s ease-out forwards; }
        .login-side { display:flex; flex-direction:column; min-width:0; padding:26px 48px 24px; }
        .login-side-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; }
        .side-meta { display:flex; align-items:center; gap:7px; color:#8a99ac; font-size:11px; }
        .side-meta::before { content:""; width:5px; height:5px; border-radius:50%; background:#aac3df; }
        .mobile-brand { display:none; }
        .login-main { width:100%; max-width:360px; margin:auto; padding:36px 0 44px; }
        .login-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
        .login-main h1 { margin:0; font-size:29px; font-weight:650; letter-spacing:.5px; line-height:1.5; }
        .login-subtitle { margin:7px 0 0; color:#8a98a9; font-size:13px; line-height:1.7; }
        .login-mascot { position:relative; flex:none; width:84px; height:90px; margin:-16px -4px -2px 0; padding:0; border:0; border-radius:16px; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
        .login-mascot:focus-visible { outline:2px solid #80b9f2; outline-offset:2px; }
        .login-mascot svg { width:100%; height:100%; overflow:visible; }
        .mascot-body { transform-origin:50% 95%; }
        .mascot-pupils { transform:translate(var(--gaze-x,0px),var(--gaze-y,0px)); transition:transform .09s linear; }
        .mascot-hand { transition:transform .24s cubic-bezier(.2,.8,.3,1); }
        .mascot-hand-left { transform:translate(-15px,32px) rotate(-8deg); transform-origin:36px 76px; }
        .mascot-hand-right { transform:translate(15px,32px) rotate(8deg); transform-origin:64px 76px; }
        .login-mascot.is-covering .mascot-hand { transform:translate(0,0) rotate(0); }
        .login-mascot.is-covering.is-revealed .mascot-hand-right { transform:translate(13px,15px) rotate(12deg); }
        .login-mascot.is-covering .mascot-pupils { transform:none; }
        .login-mascot:is(:hover,.is-playing,.is-working) .mascot-bubble { animation:bottle-bubble 1.4s ease-in-out infinite; }
        .login-mascot .mascot-bubble:nth-child(2) { animation-delay:.25s; }
        .login-mascot .mascot-bubble:nth-child(3) { animation-delay:.5s; }
        .login-mascot.is-playing .mascot-body { animation:bottle-wave .65s ease-in-out; }
        .login-mascot.is-playing .mascot-smile { d:path("M42 86 Q50 96 58 86"); }
        .login-mascot.is-working .mascot-body { animation:bottle-work 1s ease-in-out infinite; }
        .login-mascot { width:78px; height:86px; margin:-8px -4px -2px 0; }
        .login-message { display:flex; align-items:flex-start; gap:9px; margin:0 0 22px; padding:11px 13px; border:1px solid #efced4; border-radius:9px; background:#fff5f6; color:#af4051; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
        .login-message .icon { width:17px; height:17px; margin-top:3px; }
        .flash-info,.flash-success,.flash-message { border-color:#d7e7fa; background:#f2f8ff; color:#466a94; }
        .form-group { margin-bottom:23px; }
        .form-group label { display:block; margin-bottom:10px; color:#4b6079; font-size:13px; font-weight:600; }
        .input-wrap { position:relative; }
        .field-icon { position:absolute; z-index:1; top:50%; left:15px; width:18px; height:18px; transform:translateY(-50%); color:#99abc0; pointer-events:none; }
        .form-group input { width:100%; height:50px; padding:0 15px 0 44px; border:1px solid var(--line); border-radius:9px; outline:0; background:#fcfdff; color:var(--ink); font-size:14px; transition:border-color .16s,box-shadow .16s,background .16s; }
        .form-group input::placeholder { color:#a0adbd; }
        .form-group input:focus { border-color:#78adeb; background:#fff; box-shadow:0 0 0 3px rgba(40,126,224,.08); }
        #password { padding-right:48px; }
        .password-toggle { position:absolute; top:3px; right:3px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:7px; background:transparent; color:#91a3b9; cursor:pointer; }
        .password-toggle:hover { background:#edf4fd; color:#3478c8; }
        .password-toggle.is-winking .icon { animation:eye-wink .22s ease; }
        .input-wrap:focus-within>.field-icon { color:#4097ec; animation:field-pop .26s ease-out; }
        .password-toggle:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
        .caps-hint { margin:8px 0 0; color:#9d702f; font-size:12px; }
        [hidden] { display:none!important; }
        .login-btn { position:relative; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:50px; margin-top:30px; border:1px solid var(--primary); border-radius:9px; background:var(--primary); color:#fff; cursor:pointer; font-size:14px; font-weight:600; letter-spacing:2px; transition:background .16s,border-color .16s; }
        .login-btn:hover { border-color:#1e6fca; background:#1e6fca; }
        .login-arrow { position:absolute; right:17px; width:18px; height:18px; opacity:.8; transition:transform .18s; }
        .login-btn:hover .login-arrow { transform:translateX(3px); }
        .login-btn:active .login-arrow { transform:translateX(6px); }
        .login-btn:focus-visible { outline:3px solid rgba(35,135,245,.28); outline-offset:3px; }
        .login-btn:disabled { opacity:.72; cursor:wait; }
        .login-spinner { width:17px; height:17px; animation:login-spin .8s linear infinite; }
        .login-note { margin:22px 0 0; color:#8d9caf; font-size:12px; line-height:1.8; text-align:center; }
        .woodfish-widget { position:relative; flex-shrink:0; display:flex; align-items:center; gap:6px; min-height:68px; margin:0; }
        .woodfish-button { width:68px; height:68px; padding:0; border:0; border-radius:12px; background:transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
        .woodfish-button svg { width:100%; height:100%; overflow:visible; }
        .woodfish-button:focus-visible { outline:2px solid #85b7eb; outline-offset:2px; }
        .woodfish-button:hover .woodfish-body { filter:brightness(1.03); }
        .woodfish-button.is-knocking .woodfish-body { animation:woodfish-tap .18s ease-out; transform-origin:50% 85%; }
        .woodfish-button.is-knocking .woodfish-mallet { animation:mallet-tap .18s ease-out; transform-origin:79px 15px; }
        .woodfish-total { min-width:48px; color:#8b98aa; font-size:11px; line-height:1.7; }
        .woodfish-total strong { display:block; color:#61778f; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
        .woodfish-merit { position:absolute; left:4px; top:-8px; color:#9e7952; font-size:12px; font-weight:600; white-space:nowrap; pointer-events:none; animation:merit-rise .85s ease-out forwards; }
        .woodfish-button { width:58px; height:58px; }
        .woodfish-total { min-width:32px; font-size:10px; }
        .woodfish-total strong { font-size:13px; }
        .login-footer { padding-top:12px; color:#9ca9b9; font-size:10px; line-height:1.8; text-align:center; letter-spacing:.3px; }
        @keyframes eye-wink { 50% { transform:scaleY(.12); } }
        @keyframes field-pop { 50% { transform:translateY(-50%) scale(1.14); } }
        @keyframes bottle-bubble { 50% { transform:translateY(-5px); opacity:.5; } }
        @keyframes bottle-wave { 18% { transform:rotate(-8deg) translateY(-3px); } 42% { transform:rotate(7deg) translateY(-7px); } 68% { transform:rotate(-4deg); } }
        @keyframes bottle-work { 50% { transform:translateY(-3px); } }
        @keyframes scene-rise { to { transform:translate(var(--drift),-90px); opacity:0; } }
        @keyframes woodfish-tap { 35% { transform:scale(1.05,.93); } }
        @keyframes mallet-tap { 35% { transform:rotate(-18deg); } }
        @keyframes merit-rise { to { transform:translate(var(--merit-x),-42px); opacity:0; } }
        @keyframes login-spin { to { transform:rotate(360deg); } }
        @media(min-width:1500px) { .login-shell { min-height:760px; margin-top:max(40px,calc((100svh - 760px)/2)); margin-bottom:40px; } }
        @media(max-width:1100px) { .login-shell { width:calc(100% - 48px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:24px auto; min-height:calc(100svh - 48px); } .login-visual { padding:36px 30px 26px; } .login-side { padding-left:32px; padding-right:32px; } .visual-content h2 { font-size:30px; } .brand-caption { display:none; } }
        @media(max-width:820px) { .login-shell { display:block; max-width:460px; } .login-visual,.side-meta { display:none; } .login-side { min-height:calc(100svh - 50px); padding:24px 36px; } .mobile-brand { display:block; } .mobile-brand small { display:block; margin-top:8px; color:#8b9bb0; font-size:10px; letter-spacing:1px; } .login-main { padding-top:40px; padding-bottom:50px; } }
        @media(max-width:480px) { .login-shell { width:100%; margin:0; border:0; border-radius:0; box-shadow:none; min-height:100svh; } .login-side { min-height:100svh; padding:24px 28px; } .brand-wordmark { font-size:24px; } .login-main h1 { font-size:28px; } .form-group input { font-size:16px; } .login-footer { font-size:10px; } }
        @media(max-width:350px) { .login-side { padding-left:22px; padding-right:22px; } .login-main h1 { font-size:26px; } .brand-wordmark { font-size:22px; } }
        @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Laser marking adaptation: retain the CRM login composition and its SVG artwork. */
.login-mascot { display: block; object-fit: contain; cursor: default; }
.login-public { margin: 20px 0 0; text-align: center; font-size: 12px; }
.login-public a { color: #527ca9; text-decoration: none; }
.login-public a:hover { color: var(--primary); text-decoration: underline; }
.login-public a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }