:root{--bg-color: #f7f9fa;--bg-white: #ffffff;--primary-navy: #1a237e;--primary-blue: #2979ff;--accent-mint: #00e676;--text-main: #2c3e50;--text-muted: #7f8c8d;--border-radius-lg: 24px;--border-radius-md: 16px;--border-radius-sm: 12px;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .05);--shadow-md: 0 10px 15px rgba(0, 0, 0, .08);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .12);--transition: all .3s cubic-bezier(.25, .8, .25, 1);--transition-fast: all .15s cubic-bezier(.25, .8, .25, 1)}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;word-break:keep-all;overflow-wrap:break-word}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none!important}*:focus,*:active,*:focus-visible{outline:none!important}button,input,select,textarea{outline:none!important}button:focus,button:active,button:focus-visible{outline:none!important}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{max-width:480px;width:100%;margin:0 auto;min-height:100vh;background-color:var(--bg-color);box-shadow:var(--shadow-lg);position:relative;overflow-x:hidden;display:flex;flex-direction:column}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:var(--border-radius-sm);border:none;font-size:16px;font-weight:700;cursor:pointer;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,background-color .2s ease;outline:none;width:100%;user-select:none;-webkit-user-select:none;position:relative;overflow:hidden}.btn:active{transform:scale(.95)!important;transition:transform .06s cubic-bezier(.4,0,.2,1)}.btn:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s}.btn:active:after{opacity:1}.btn-primary{background-color:var(--primary-blue);color:#fff;box-shadow:0 8px 20px #2979ff4d}.btn-primary:hover{background-color:#1c61da;box-shadow:0 10px 25px #2979ff66;transform:translateY(-1px)}.btn-outline{background-color:transparent;color:var(--primary-navy);border:1px solid rgba(26,35,126,.3)}.btn-outline:hover{background-color:#1a237e0d;border-color:var(--primary-navy)}.input-group{position:relative;margin-bottom:20px}.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);transition:var(--transition)}.input-field{width:100%;padding:16px;border-radius:var(--border-radius-sm);border:1.5px solid #e0e0e0;background-color:#fcfcfc;font-size:18px;transition:var(--transition);color:var(--text-main)}.input-field.with-icon{padding-left:48px}.input-field:focus{border-color:var(--primary-blue);box-shadow:0 0 0 4px #2979ff1a;outline:none;background-color:var(--bg-white)}.input-field:focus+.input-icon,.input-group:focus-within .input-icon{color:var(--primary-blue)}.login-container{display:flex;flex-direction:column;flex:1;padding:40px 24px;justify-content:center;background:linear-gradient(135deg,#ffffff 0%,var(--bg-color) 100%)}.login-header{text-align:center;margin-bottom:48px;animation:fadeInDown .6s ease}.brand-logo{width:120px;height:120px;object-fit:contain;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;border-radius:24px;margin:0 auto 20px;display:block;box-shadow:var(--shadow-md)}.brand-logo-sm{width:44px;height:44px;object-fit:contain;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;border-radius:12px;box-shadow:0 2px 8px #0000001a}.logo-placeholder{width:120px;height:120px;background:linear-gradient(45deg,var(--primary-navy),var(--primary-blue));border-radius:24px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.logo-placeholder:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(rgba(255,255,255,.2),transparent);transform:rotate(45deg)}.login-header h1{font-size:36px;font-weight:800;margin:0 0 8px;color:var(--primary-navy);letter-spacing:-.5px}.login-header p{color:var(--text-muted);font-size:18px;margin:0}.login-form{animation:fadeInUp .6s ease}.login-btn{margin-top:12px;margin-bottom:16px}.home-container{display:flex;flex-direction:column;flex:1;padding:32px 24px}.home-header{margin-bottom:40px;animation:fadeInDown .6s ease}.home-header h1{font-size:32px;font-weight:800;color:var(--primary-navy);margin:0 0 4px}.home-header p{color:var(--text-muted);font-size:17px;margin:0}.dashboard-cards{display:flex;flex-direction:column;gap:20px;flex:1;justify-content:center;animation:fadeInUp .6s ease}.nav-card{background-color:var(--bg-white);border-radius:var(--border-radius-lg);padding:28px 22px;display:flex;align-items:center;cursor:pointer;box-shadow:var(--shadow-md);transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .2s ease;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.02);user-select:none;-webkit-user-select:none}.nav-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.nav-card:active{transform:scale(.97)!important;box-shadow:var(--shadow-sm);transition:transform .06s cubic-bezier(.4,0,.2,1)}.nav-card.solve{background:linear-gradient(135deg,var(--primary-blue) 0%,#1c61da 100%);color:#fff}.nav-card.solve .card-icon-wrapper{background:#fff3;color:var(--accent-mint)}.nav-card.note{background-color:var(--bg-white);color:var(--primary-navy)}.nav-card.note .card-icon-wrapper{background:#1a237e0d;color:var(--primary-navy)}.card-icon-wrapper{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-right:18px;flex-shrink:0;transition:var(--transition)}.nav-card:hover .card-icon-wrapper{transform:scale(1.05)}.card-content h2{font-size:24px;font-weight:800;margin:0 0 4px;letter-spacing:-.5px}.nav-card.solve .card-content p{color:#fffc}.card-content p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.4}.bookmark-btn{position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;z-index:2;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.bookmark-btn:hover{background-color:#ffc1071a}.bookmark-btn:active{transform:scale(.85)}.bookmark-btn.pop{animation:bookmarkPop .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes bookmarkPop{0%{transform:scale(1)}30%{transform:scale(1.4)}50%{transform:scale(.9)}70%{transform:scale(1.15)}to{transform:scale(1)}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;animation:modalBgFadeIn .25s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal-content{background:var(--bg-white);border-radius:var(--border-radius-lg);padding:32px 24px;max-width:400px;width:calc(100% - 48px);box-shadow:0 24px 48px #0003;animation:modalScaleIn .3s cubic-bezier(.175,.885,.32,1.275);text-align:center}.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bg-white);border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;padding:32px 24px;padding-bottom:calc(32px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px #00000026;z-index:10001;animation:bottomSheetSlideUp .35s cubic-bezier(.22,1,.36,1)}.bottom-sheet:before{content:"";display:block;width:40px;height:4px;background:#ddd;border-radius:2px;margin:0 auto 20px}@keyframes modalBgFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes bottomSheetSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}select{transition:border-color .2s ease,box-shadow .2s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%237f8c8d'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px!important}select:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px #2979ff1a;outline:none}.page-wrapper{flex:1;display:flex;flex-direction:column;will-change:transform,opacity}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#00000026;border-radius:4px}