.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:1000;position:fixed;top:0;left:0;right:0}.navbar-container{max-width:var(--max-w);height:var(--nav-h);justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;padding:0 1.25rem;display:flex}.navbar-logo{flex-shrink:0;align-items:center;gap:.5rem;text-decoration:none;display:flex}.navbar-logo-mark{color:var(--blue);letter-spacing:-.02em;font-size:1.1rem;font-weight:800}.navbar-logo-text{color:var(--text-3);letter-spacing:.01em;font-size:.8rem;font-weight:500;display:none}@media (min-width:480px){.navbar-logo-text{display:block}}.navbar-links{align-items:center;gap:.25rem;display:flex}.nav-link{border-radius:var(--r);color:var(--text-2);white-space:nowrap;padding:.4rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .15s;position:relative}.nav-link:after{content:"";background:var(--blue);border-radius:1px;height:2px;transition:transform .2s;position:absolute;bottom:0;left:.75rem;right:.75rem;transform:scaleX(0)}.nav-link:hover,.nav-link.active{color:var(--blue)}.nav-link.active:after{transform:scaleX(1)}.user-profile-container{position:relative}.user-profile{cursor:pointer;background:0 0;border:none;align-items:center;gap:.5rem;padding:0;display:flex}.profile-avatar-wrap{border:2px solid var(--border);background:var(--blue-light);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;transition:border-color .15s;display:flex;overflow:hidden}.user-profile:hover .profile-avatar-wrap{border-color:var(--blue)}.profile-initial{width:34px;height:34px;color:var(--blue);justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.mobile-profile-name{display:none}.streak-badge{color:var(--orange);white-space:nowrap;font-size:.75rem;font-weight:600;line-height:1}.profile-dropdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);min-width:200px;box-shadow:var(--sh-lg);z-index:100;animation:.12s dropIn;position:absolute;top:calc(100% + .5rem);right:0;overflow:hidden}@keyframes dropIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.profile-dropdown-header{border-bottom:1px solid var(--border-2);align-items:center;gap:.625rem;padding:.625rem .875rem;display:flex}.profile-dropdown-avatar{background:var(--blue-light);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.profile-dropdown-pic{object-fit:cover;width:100%;height:100%}.profile-dropdown-initial{color:var(--blue);font-size:1rem;font-weight:700}.profile-dropdown-name{color:var(--text);font-size:.85rem;font-weight:600;line-height:1.3}.profile-dropdown-email{color:var(--text-3);white-space:nowrap;text-overflow:ellipsis;max-width:130px;font-size:.75rem;overflow:hidden}.profile-dropdown-link,.profile-dropdown-logout{width:100%;color:var(--text-2);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.8rem;font-weight:500;text-decoration:none;transition:background .12s,color .12s;display:flex}.profile-dropdown-link:hover{background:var(--bg);color:var(--blue)}.profile-dropdown-logout{color:var(--red)}.profile-dropdown-logout:hover{background:var(--red-bg)}.menu-icon{cursor:pointer;border-radius:var(--r-sm);color:var(--text-2);padding:.375rem;display:none}.menu-icon:hover{background:var(--bg)}.hamburger{width:20px;height:16px;position:relative}.bar{background:var(--text-2);border-radius:2px;width:100%;height:2px;transition:all .25s;position:absolute}.bar:first-child{top:0}.bar:nth-child(2){top:50%;transform:translateY(-50%)}.bar:nth-child(3){bottom:0}.hamburger.active .bar:first-child{transform:translateY(7px)rotate(45deg)}.hamburger.active .bar:nth-child(2){opacity:0}.hamburger.active .bar:nth-child(3){transform:translateY(-7px)rotate(-45deg)}@media (max-width:768px){.menu-icon{display:none}.navbar-links{align-items:center;gap:.25rem;display:flex}.nav-link{display:none}.user-profile-container{margin-left:auto}.mobile-profile-name{display:none}.profile-avatar-wrap{width:32px;height:32px}.profile-avatar-wrap img{width:32px!important;height:32px!important}.profile-initial{width:32px;height:32px;font-size:.85rem}.profile-dropdown{min-width:200px;position:absolute;top:calc(100% + .5rem);right:0}}
.footer{background:var(--bg);border-top:1px solid var(--border);padding:.625rem 0}.footer-container{max-width:var(--max-w);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin:0 auto;padding:0 1.25rem;display:flex}.footer-copyright,.footer-sep{color:var(--text-4);font-size:.75rem}.footer-link{color:var(--text-3);font-size:.75rem;text-decoration:none;transition:color .15s}.footer-link:hover{color:var(--blue)}@media (max-width:768px){.footer{padding-bottom:calc(.625rem + var(--bottom-nav-h) + var(--safe-bottom))}}
.bottom-nav{z-index:1000;background:var(--surface);border-top:1px solid var(--border);height:calc(var(--bottom-nav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);justify-content:space-around;align-items:center;display:none;position:fixed;bottom:0;left:0;right:0}@media (max-width:768px){.bottom-nav{display:flex}}.bottom-nav-tab,button.bottom-nav-tab{height:var(--bottom-nav-h);color:var(--text-3);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-family:inherit;text-decoration:none;transition:color .15s;display:flex}.bottom-nav-tab.active{color:var(--blue)}.bottom-nav-label{margin-top:1px;font-size:.65rem;font-weight:500;line-height:1}.bottom-nav-tab-wrap{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.bottom-nav-popover{bottom:calc(var(--bottom-nav-h) + 8px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);min-width:140px;box-shadow:var(--sh-lg);z-index:10;animation:.12s popUp;position:absolute;right:4px;overflow:hidden}@keyframes popUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.bottom-nav-popover-link{color:var(--text-2);padding:.625rem .875rem;font-size:.825rem;font-weight:500;text-decoration:none;transition:background .12s;display:block}.bottom-nav-popover-link:hover{background:var(--bg);color:var(--blue)}
:root{--blue:#1a73e8;--blue-dark:#1557b0;--blue-hover:#1669d3;--blue-light:#e8f0fe;--blue-mid:#d2e3fc;--text:#202124;--text-2:#3c4043;--text-3:#5f6368;--text-4:#80868b;--border:#dadce0;--border-2:#e8eaed;--bg:#f8f9fa;--surface:#fff;--green:#1e8e3e;--green-bg:#e6f4ea;--green-text:#137333;--red:#d93025;--red-bg:#fce8e6;--red-text:#c5221f;--orange:#e37400;--orange-bg:#fef3e2;--nav-h:56px;--r:8px;--r-sm:4px;--r-lg:12px;--max-w:1280px;--content-max-w:680px;--reading-font:16px;--reading-lh:1.8;--streak:var(--orange);--streak-bg:var(--orange-bg);--section-border:var(--border-2);--section-bg:var(--bg);--bottom-nav-h:56px;--safe-bottom:env(safe-area-inset-bottom,0px);--sh-sm:0 1px 2px #3c40431a,0 1px 3px #3c40430f;--sh:0 1px 3px #3c40431f,0 2px 8px #3c404314;--sh-lg:0 2px 6px #3c404326,0 4px 16px #3c40431a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6}code{font-family:SF Mono,Fira Code,Menlo,Monaco,Consolas,Courier New,monospace}.App{flex-direction:column;min-height:100vh;display:flex}.App-content{padding-top:var(--nav-h);flex:1}@media (max-width:768px){.App-content{padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom))}}.btn{border-radius:var(--r);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.5rem;font-size:.875rem;font-weight:600;line-height:1.4;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;display:inline-flex}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-hover);transform:translateY(-1px);box-shadow:0 2px 8px #1a73e859}.btn-outline{background:var(--surface);color:var(--blue);border:1.5px solid var(--blue)}.btn-outline:hover{background:var(--blue-light)}.spinner{border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;width:32px;height:32px;margin:0 auto;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.badge{letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:.2rem .6rem;font-size:.72rem;font-weight:600;display:inline-block}.badge-blue{background:var(--blue-light);color:var(--blue-dark)}.badge-green{background:var(--green-bg);color:var(--green-text)}.legal-page{max-width:720px;margin:0 auto;padding:2rem 1.25rem 4rem}.legal-header{border-bottom:1px solid var(--border);margin-bottom:2rem;padding-bottom:1.25rem}.legal-header h1{color:var(--text);letter-spacing:-.025em;margin-bottom:.375rem;font-size:1.6rem;font-weight:800}.legal-meta{color:var(--text-4);font-size:.8rem}.legal-body{flex-direction:column;gap:1.5rem;display:flex}.legal-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem}.legal-section h2{color:var(--text);margin-bottom:.75rem;font-size:.875rem;font-weight:700}.legal-section p{color:var(--text-2);margin-bottom:.625rem;font-size:.875rem;line-height:1.75}.legal-section p:last-child{margin-bottom:0}.legal-section ul,.legal-section ol{margin:.5rem 0;padding-left:1.25rem}.legal-section li{color:var(--text-2);margin-bottom:.25rem;font-size:.875rem;line-height:1.7}.legal-section a{color:var(--blue);text-decoration:none}.legal-section a:hover{text-decoration:underline}@media (max-width:600px){.legal-page{padding:1.25rem 1rem 3rem}.legal-header h1{font-size:1.35rem}.legal-section{padding:1rem}}