@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap');
/* Lovable-inspired sketchbook styling; existing app and authentication remain intact. */
:root{--sketch-ink:#181c1b;--sketch-paper:#f8f3e7;--sketch-green:#0e392b;--sketch-yellow:#ffe459;--sketch-red:#da3c2e;--sketch-mint:#8bdd9f}
body{font-family:'Patrick Hand','DM Sans',sans-serif;font-size:16px}
h1,h2,h3,.brand{font-family:Kalam,'DM Sans',sans-serif}
body[data-screen="auth"] .auth-layout{background:var(--sketch-paper);color:var(--sketch-ink)}
body[data-screen="auth"] .auth-story{background:var(--sketch-green);color:#f9f4e4}
.auth-story .brand{font-family:Kalam,cursive;color:#fff9e8;letter-spacing:-1px}
.auth-story .logo{background:var(--sketch-yellow);border:2px solid var(--sketch-ink);border-radius:1px;box-shadow:3px 3px 0 var(--sketch-ink)}
.auth-story h1{font-family:Kalam,cursive;font-weight:700;letter-spacing:-2px;line-height:1.2}
.auth-story h1 em{display:inline-block;background:var(--sketch-yellow);padding:0 8px;color:var(--sketch-ink);font:inherit;transform:rotate(-1deg)}
.auth-story-content>p,.auth-story-bottom{font-size:16px;line-height:1.6;color:#e4e8d9}
.auth-kicker{font-size:12px;color:#cfdfd3;font-weight:700}
.auth-paper{background:#fffefa;border:2px solid var(--sketch-ink);border-radius:3px 7px 3px 7px;box-shadow:4px 5px 0 var(--sketch-ink);transform:rotate(-2deg);color:var(--sketch-ink)}
.auth-paper>div{font:20px Kalam,cursive}.auth-orbit,.auth-book{display:none}
.auth-mini-card{background:var(--sketch-yellow);color:var(--sketch-ink);border:2px solid var(--sketch-ink);border-radius:2px;box-shadow:4px 4px 0 var(--sketch-ink);font-size:15px;transform:rotate(2deg)}
.auth-mini-card>span{background:transparent}.auth-spark{color:#fff5cc}
.auth-form-side{background:var(--sketch-paper)}
.auth-top-note,.auth-bottom-note{color:#4a5147;font-size:13px}
.auth-mode{border:0;border-radius:0;background:transparent;gap:15px;padding:0}
.auth-mode button{font:17px 'Patrick Hand',sans-serif;color:#333;padding:8px 18px}
.auth-mode button.active{border:2px solid var(--sketch-ink);border-radius:2px;background:var(--sketch-yellow);box-shadow:4px 4px 0 var(--sketch-ink);color:var(--sketch-ink)}
.auth-form-content h2{font:700 40px Kalam,cursive;letter-spacing:-1px;color:var(--sketch-ink)}
.auth-subtitle{font-size:16px;color:#444b45}
.auth-preview-notice{background:var(--sketch-mint);border:2px solid var(--sketch-ink);border-radius:5px 10px 4px 8px;box-shadow:4px 4px 0 var(--sketch-ink)}
.auth-preview-notice>span,.auth-preview-notice>p{color:var(--sketch-ink);font-size:15px}
.auth-form-content label.field{font-size:15px;font-weight:700;color:var(--sketch-ink)}
.auth-form-content input{background:#fffefa!important;border:2px solid var(--sketch-ink)!important;border-radius:3px!important;box-shadow:3px 4px 0 var(--sketch-ink);font:16px 'Patrick Hand',sans-serif!important;color:var(--sketch-ink)!important}
.auth-google,.auth-preview-button,.auth-submit{font:18px 'Patrick Hand',sans-serif;border:2px solid var(--sketch-ink);border-radius:3px;background:#fffefa;color:var(--sketch-ink);box-shadow:4px 4px 0 var(--sketch-ink)}
.auth-submit{background:var(--sketch-red);color:#fff}.auth-submit:hover{background:#b92920}
.auth-preview-button:hover,.auth-google:hover{background:#fff5c9}.auth-reset-help,.auth-desktop-google-note,.auth-preview-footnote{font-size:13px;color:#4e594f}
.auth-switch,.auth-switch button,.auth-forgot button,.auth-email-divider,.auth-divider{font-size:14px}.auth-switch button,.auth-forgot button{color:#9c2a21}
body[data-screen="workspace"]{background:#e9e4d8;color:var(--sketch-ink)}
body[data-screen="workspace"] #workspace>aside{background:var(--sketch-green);border-right:2px solid var(--sketch-ink)}
body[data-screen="workspace"] .brand{font-family:Kalam,cursive;color:#fff7df}
body[data-screen="workspace"] .brand .logo{background:var(--sketch-yellow);border:2px solid var(--sketch-ink);border-radius:2px;box-shadow:3px 3px 0 #050a07}
body[data-screen="workspace"] .nav-label{font-size:12px;color:#cde0d2}
body[data-screen="workspace"] nav a{font:16px 'Patrick Hand',sans-serif;color:#f3f6e9;border:2px solid transparent;border-radius:3px 9px 3px 7px}
body[data-screen="workspace"] nav a.active,body[data-screen="workspace"] nav a:hover{background:var(--sketch-yellow);color:var(--sketch-ink);border-color:var(--sketch-ink);box-shadow:3px 3px 0 #050a07}
body[data-screen="workspace"] .sidebar-note{background:#8bdd9f;color:var(--sketch-ink);border:2px solid var(--sketch-ink);border-radius:4px;box-shadow:4px 4px 0 #050a07}
body[data-screen="workspace"] .sidebar-note h3,body[data-screen="workspace"] .sidebar-note p{color:var(--sketch-ink)}
body[data-screen="workspace"] .profile{color:#fff8e9;border-color:#577565}body[data-screen="workspace"] .profile small{color:#d0dfd4}
body[data-screen="workspace"] .shell{background-color:var(--sketch-paper);background-image:repeating-linear-gradient(0deg,transparent 0,transparent 31px,#2e74550c 32px)}
body[data-screen="workspace"] .shell>header{background:#f8f3e7;border-bottom:2px solid var(--sketch-ink);color:#36443a;font-size:14px}
body[data-screen="workspace"] .card,body[data-screen="workspace"] .stat,body[data-screen="workspace"] .hero,body[data-screen="workspace"] .dashboard-action,body[data-screen="workspace"] .dashboard-panel,body[data-screen="workspace"] .dashboard-launch{background:#fffdf6;border:2px solid var(--sketch-ink);border-radius:5px 12px 5px 10px;box-shadow:4px 5px 0 var(--sketch-ink)}
body[data-screen="workspace"] .dashboard-panel{color:var(--sketch-ink)}
body[data-screen="workspace"] .dashboard-welcome h1{font-family:Kalam,cursive;font-size:clamp(32px,3vw,46px);color:var(--sketch-ink)}
body[data-screen="workspace"] .dashboard-welcome p,body[data-screen="workspace"] .dashboard-action small,body[data-screen="workspace"] .panel-empty,body[data-screen="workspace"] .panel-muted{color:#3e5043;font-size:15px}
body[data-screen="workspace"] .dashboard-kicker{color:#536559;font-size:12px}
body[data-screen="workspace"] .dashboard-action strong{color:var(--sketch-ink);font-size:17px}
body[data-screen="workspace"] .dashboard-spark{color:#d13f30;text-shadow:4px 4px 0 #ffe459}
body[data-screen="workspace"] .action-lesson{background:#ffe459;color:#181c1b}body[data-screen="workspace"] .action-quiz{background:#ffa58a;color:#181c1b}body[data-screen="workspace"] .action-language{background:#8bdd9f;color:#181c1b}
body[data-screen="workspace"] .dashboard-launch{background:#fff8d0}
body[data-screen="workspace"] .dashboard-launch strong{font-size:16px}body[data-screen="workspace"] .dashboard-launch p{font-size:14px;color:#46534a}
body[data-screen="workspace"] .dashboard-launch-links a,body[data-screen="workspace"] button.secondary{background:#fffefa;color:#1b2920;border:2px solid var(--sketch-ink);border-radius:3px 8px 3px 7px;box-shadow:3px 3px 0 var(--sketch-ink)}
body[data-screen="workspace"] button.primary,body[data-screen="workspace"] .button,body[data-screen="workspace"] .panel-primary{background:var(--sketch-red);color:#fff;border:2px solid var(--sketch-ink);border-radius:3px 7px 3px 6px;box-shadow:3px 3px 0 var(--sketch-ink)}
body[data-screen="workspace"] .panel-shortcut{border:2px solid var(--sketch-ink);border-radius:3px 8px 3px 7px;color:#1b2920}
body[data-screen="workspace"] .panel-heading,body[data-screen="workspace"] .panel-item strong,body[data-screen="workspace"] .panel-task strong{font-size:15px}
body[data-screen="workspace"] input:not([type=checkbox]):not([type=radio]),body[data-screen="workspace"] textarea,body[data-screen="workspace"] select{border:1.5px solid #24352b;border-radius:3px 7px 3px 6px}
body[data-screen="workspace"] :focus-visible{outline:3px solid #bb3829;outline-offset:4px}
html[data-theme="dark"] body[data-screen="workspace"] .shell{background-color:#14261d;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 31px,#c6ead00a 32px)}
html[data-theme="dark"] body[data-screen="workspace"] .shell>header{background:#182c21;color:#edf6ee;border-color:#728b78}
html[data-theme="dark"] body[data-screen="workspace"] .dashboard-panel,html[data-theme="dark"] body[data-screen="workspace"] .dashboard-action,html[data-theme="dark"] body[data-screen="workspace"] .card{background:#243a2b;color:#f7f7e9;border-color:#a2bba7;box-shadow:4px 5px 0 #060b08}
html[data-theme="dark"] body[data-screen="workspace"] .dashboard-welcome h1,html[data-theme="dark"] body[data-screen="workspace"] .dashboard-action strong{color:#fff9e7}
html[data-theme="dark"] body[data-screen="workspace"] .dashboard-welcome p,html[data-theme="dark"] body[data-screen="workspace"] .dashboard-action small,html[data-theme="dark"] body[data-screen="workspace"] .panel-empty,html[data-theme="dark"] body[data-screen="workspace"] .panel-muted,html[data-theme="dark"] body[data-screen="workspace"] .dashboard-kicker{color:#d3e5d8}
html[data-theme="dark"] body[data-screen="workspace"] .dashboard-launch{background:#354333;border-color:#a2bba7;color:#fff}
html[data-theme="dark"] body[data-screen="workspace"] .dashboard-launch p{color:#e3eddf}
html[data-theme="dark"] body[data-screen="workspace"] .panel-shortcut{color:#f6f9ed;border-color:#a2bba7}
html[data-theme="dark"] body[data-screen="workspace"] nav a.active,html[data-theme="dark"] body[data-screen="workspace"] nav a:hover{background:var(--sketch-yellow);color:#181c1b;border-color:#181c1b}
@media(max-width:760px){body[data-screen="workspace"] #workspace>aside{background:var(--sketch-green);border-top:2px solid #050a07}body[data-screen="workspace"] nav a{font-size:12px;padding:6px 1px}body[data-screen="workspace"] .dashboard-welcome h1{font-size:30px}.auth-story-content>p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.auth-mini-card,.auth-story h1 em{transform:none}}