:root{--color-brown: #8B5E3C;--color-brown-10: rgba(139, 94, 60, .06);--color-brown-20: rgba(139, 94, 60, .12);--color-brown-80: rgba(139, 94, 60, .8);--color-cream-50: #FAF8F5;--color-cream-100: #FFFFFF;--color-cream-200: #F3EEE4;--color-cream-300: #EBE5DC;--color-cream-400: #DDD5C9;--color-cream-700: #80776E;--color-cream-800: #544E48;--color-cream-900: #332D24;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #EF4444;--font-outfit: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .25s cubic-bezier(.16, 1, .3, 1)}html,body{margin:0!important;padding:0!important;width:100%;height:100%;overflow:hidden;background:var(--color-cream-50);font-size:16px}.auth-page{position:relative;min-height:100vh;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--color-cream-50)}.auth-canvas-wrap{position:absolute;inset:0;z-index:0}.auth-canvas-wrap canvas{width:100%;height:100%;display:block}.auth-canvas-blur{position:absolute;inset:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:linear-gradient(165deg,#fff6,#f3eee480,#ebe5dc99);pointer-events:none}.auth-topbar{position:relative;z-index:20;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.auth-brand{font-family:var(--font-outfit);font-size:1.15rem;font-weight:500;color:var(--color-cream-900);text-decoration:none;letter-spacing:.3px;transition:color var(--transition-fast);display:inline-flex;align-items:center;gap:.5rem}.auth-brand:hover{color:var(--color-brown)}.auth-topbar-link{font-family:var(--font-outfit);font-size:.85rem;color:var(--color-cream-800);text-decoration:none;padding:.4rem .9rem;border:1px solid var(--color-cream-300);border-radius:var(--radius-full);transition:all var(--transition-fast)}.auth-topbar-link:hover{color:var(--color-cream-900);border-color:var(--color-cream-400);background:var(--color-cream-200)}.auth-main{position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem 1.25rem 1rem;overflow:hidden;max-height:calc(100vh - 65px)}.auth-card{width:100%;max-width:360px;padding:1.4rem 1.75rem 1.15rem;background:#ffffff59;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius-xl);box-shadow:0 24px 60px #5d4e4414;box-sizing:border-box}.auth-card--wide{max-width:540px;padding:1.15rem 1.75rem 1rem}.auth-card-header{text-align:center;margin-bottom:.85rem}.auth-card-header h1{font-family:var(--font-outfit);font-size:1.45rem;font-weight:500;color:var(--color-cream-900);letter-spacing:-.3px;margin-bottom:.15rem}.auth-card-header p{font-size:.8rem;font-weight:300;color:var(--color-cream-700);margin:0}.auth-form{display:flex;flex-direction:column;gap:.75rem}.auth-field{display:flex;flex-direction:column;gap:.25rem;width:100%}.auth-field label{font-family:var(--font-outfit),sans-serif;font-size:.78rem;font-weight:600;color:var(--color-cream-900);display:flex;align-items:center;gap:.3rem;margin:0}.auth-field label i{color:var(--color-brown);font-size:.85rem}.auth-field input[type=text],.auth-field input[type=email],.auth-field input[type=password],.auth-field input[type=tel]{display:block;width:100%;box-sizing:border-box;padding:.48rem .75rem;font-size:.82rem;font-family:var(--font-body),sans-serif;font-weight:400;color:var(--color-cream-900);background:#fff;border:1px solid var(--color-cream-300);border-radius:var(--radius-md);outline:none;transition:all var(--transition-fast)}.auth-field input:focus{background:#fff;border-color:var(--color-brown);box-shadow:0 0 0 3px #8b5e3c1f}.auth-field input::-moz-placeholder{color:var(--color-cream-700);opacity:.55;font-size:.82rem}.auth-field input::placeholder{color:var(--color-cream-700);opacity:.55;font-size:.82rem}.auth-field input:-webkit-autofill,.auth-field input:-webkit-autofill:hover,.auth-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--color-cream-900);-webkit-box-shadow:0 0 0px 1000px #ffffff inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.auth-field.is-error input{border-color:var(--color-danger);background:#ef444405}.auth-field-error{display:block;margin-top:.15rem;font-size:.72rem;color:var(--color-danger)}.password-toggle-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;color:var(--color-cream-700);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;z-index:5;transition:color var(--transition-fast)}.password-toggle-btn:hover{color:var(--color-brown)}.auth-field-row{display:flex;flex-wrap:wrap;gap:.75rem}.auth-field-row .auth-field{flex:1 1 calc(50% - .375rem);min-width:140px}.auth-checkbox{display:flex;align-items:flex-start;gap:.4rem}.auth-checkbox input{margin-top:.15rem;accent-color:var(--color-brown);cursor:pointer}.auth-checkbox label{font-size:.75rem;font-weight:300;color:var(--color-cream-800);line-height:1.35;cursor:pointer}.auth-checkbox label a{color:var(--color-brown);text-decoration:underline;text-underline-offset:2px}.auth-forgot{text-align:right;margin-top:-.45rem}.auth-forgot a{font-size:.75rem;color:var(--color-cream-700);text-decoration:none}.auth-forgot a:hover{color:var(--color-brown)}.auth-submit{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.6rem 1rem;font-family:var(--font-outfit);font-size:.875rem;font-weight:500;color:var(--color-cream-100);background:var(--color-brown);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.auth-submit:hover{background:#6f4a2f;color:#fff;transform:translateY(-1px)}.auth-submit .bi{transition:transform var(--transition-fast)}.auth-submit:hover .bi-arrow-right{transform:translate(4px)}.auth-footer-text{text-align:center;margin-top:.5rem;font-size:.78rem;color:var(--color-cream-700)}.auth-footer-text a{color:var(--color-brown);font-weight:500;text-decoration:none}.auth-footer-text a:hover{color:var(--color-cream-900);text-decoration:underline}.auth-alert{margin-bottom:1rem;padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.85rem;background:#10b98114;border:1px solid rgba(16,185,129,.25);color:#065f46}.auth-alert--error{background:#ef44440f;border-color:#ef444440;color:#991b1b}.auth-demo{margin-top:1.25rem;padding:.85rem 1rem;border-radius:var(--radius-md);background:#5d4e440a;border:1px solid var(--color-cream-300)}.auth-demo h6{font-family:var(--font-outfit);font-size:.7rem;font-weight:500;letter-spacing:.05em;color:var(--color-cream-900);margin-bottom:.5rem}.auth-demo-item{font-size:.72rem;color:var(--color-cream-700);margin-bottom:.35rem}.auth-demo-item strong{color:var(--color-cream-900);font-weight:400}.auth-demo-item code{font-size:.68rem;color:var(--color-brown)}@media(max-width:480px){.auth-card{padding:1.5rem 1rem 1.25rem}}.auth-divider{display:flex;align-items:center;margin:.5rem 0;gap:.5rem}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--color-cream-300)}.auth-divider span{font-family:var(--font-body);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-cream-700)}.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.5rem 1rem;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-cream-300);color:var(--color-cream-900);font-family:var(--font-body);font-size:.82rem;font-weight:600;text-decoration:none;box-shadow:0 1px 3px #0000000a;transition:all var(--transition-base);box-sizing:border-box}.auth-google-btn:hover{background:var(--color-cream-50);border-color:var(--color-cream-400);box-shadow:0 4px 12px #8b5e3c14;color:var(--color-cream-900);text-decoration:none;transform:translateY(-1px)}.auth-google-btn svg{transition:transform var(--transition-base)}.auth-google-btn:hover svg{transform:scale(1.08)}@media(max-height:580px){.auth-page{height:auto;min-height:100vh;overflow-y:auto}.auth-main{overflow-y:auto;max-height:none}}
