@import"https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap";@import"https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Crimson Text,Lora,Georgia,serif;font-size:1.05rem;line-height:1.6;color:#3a3530;background:#f5f0e8;min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:EB Garamond,serif;font-weight:600;line-height:1.4;color:#5a4a3a;margin-bottom:.5em}h1{font-size:2.5rem}h2{font-size:1.8rem}h3{font-size:1.25rem}p{margin-bottom:1em}a{color:#8b775b;text-decoration:none;transition:color .3s ease}a:hover{color:#6b5a45}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:Crimson Text,serif;font-size:1.05rem}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f5f0e8}::-webkit-scrollbar-thumb{background:#8b775b;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#6b5a45}::selection{background:#8b775b4d;color:#3a3530}*:focus{outline:none}*:focus-visible{outline:2px solid #8b775b;outline-offset:2px}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E");z-index:-1}.container{max-width:1200px;margin:0 auto;padding:0 20px}.text-center{text-align:center}.text-muted{color:#8b775b}.text-secondary{color:#5a4a3a}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease-out}.app{min-height:100vh;display:flex;flex-direction:column}.app>*{flex-shrink:0}.app>:not(header):not(footer){flex-grow:1}.toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.75rem;pointer-events:none}.toast{display:flex;align-items:center;gap:.75rem;min-width:300px;max-width:500px;padding:1rem 1.25rem;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026,0 0 0 1px #0000000d;pointer-events:auto;animation:toast-enter .3s ease-out;transition:all .3s ease}.toast--exiting{animation:toast-exit .3s ease-out forwards}@keyframes toast-enter{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes toast-exit{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(400px) scale(.9);opacity:0}}.toast-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;font-size:1rem}.toast-message{flex:1;font-size:.875rem;line-height:1.5;color:#1f2937}.toast-close{flex-shrink:0;background:none;border:none;font-size:1.5rem;line-height:1;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.toast-close:hover{background:#0000000d;color:#374151}.toast--success{border-left:4px solid #10b981}.toast--success .toast-icon{background:#d1fae5;color:#059669}.toast--error{border-left:4px solid #ef4444}.toast--error .toast-icon{background:#fee2e2;color:#dc2626}.toast--warning{border-left:4px solid #f59e0b}.toast--warning .toast-icon{background:#fef3c7;color:#d97706}.toast--info{border-left:4px solid #3b82f6}.toast--info .toast-icon{background:#dbeafe;color:#2563eb}@media(max-width:640px){.toast-container{top:auto;bottom:1rem;left:1rem;right:1rem}.toast{min-width:auto;width:100%}@keyframes toast-enter{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-exit{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(100px) scale(.9);opacity:0}}}.btn{font-family:Crimson Text,serif;font-weight:600;border-radius:6px;transition:all .3s ease;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center}.btn--small{padding:8px 16px;font-size:.95rem}.btn--medium{padding:12px 24px;font-size:1.05rem}.btn--large{padding:16px 32px;font-size:1.25rem}.btn--primary{background:linear-gradient(to bottom,#8b775b,#6b5a45);color:#faf8f3;box-shadow:0 2px 8px #0003,inset 0 1px #fff3}.btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000040}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0003}.btn--secondary{background:transparent;color:#8b775b;border:2px solid rgba(139,119,91,.3)}.btn--secondary:hover:not(:disabled){border-color:#8b775b;background:#8b775b0d}.btn--ghost{background:transparent;color:#5a4a3a;padding:8px 12px}.btn--ghost:hover:not(:disabled){background:#8b775b1a}.btn--full-width{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.user-switcher{position:relative;z-index:1000}.user-switcher-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #fff;border-radius:8px;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #667eea4d}.user-switcher-toggle:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.dev-badge{background:#ffffff4d;padding:.125rem .375rem;border-radius:4px;font-size:.75rem;font-weight:700;letter-spacing:.5px}.current-user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-arrow{font-size:.625rem;transition:transform .2s ease}.dropdown-arrow.open{transform:rotate(180deg)}.user-switcher-overlay{position:fixed;inset:0;z-index:999}.user-switcher-dropdown{position:absolute;top:calc(100% + .5rem);right:0;min-width:300px;background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026;overflow:hidden;z-index:1001}.dropdown-header{padding:1rem;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.dropdown-header strong{display:block;font-size:1rem;margin-bottom:.25rem}.dropdown-hint{margin:0;font-size:.75rem;opacity:.9}.user-list{max-height:300px;overflow-y:auto}.user-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.875rem 1rem;border:none;background:#fff;cursor:pointer;transition:background-color .15s ease;border-bottom:1px solid #f3f4f6;text-align:left}.user-item:hover{background-color:#f9fafb}.user-item.active{background-color:#eff6ff;border-left:3px solid #3b82f6}.user-info{display:flex;flex-direction:column;gap:.25rem;flex:1}.user-name{font-weight:600;color:#111827;font-size:.875rem}.user-email{font-size:.75rem;color:#6b7280}.role-label{padding:.25rem .5rem;border-radius:6px;color:#fff;font-size:.75rem;font-weight:600;margin-left:.5rem}.active-indicator{color:#10b981;font-size:1.25rem;font-weight:700;margin-left:.5rem}.dropdown-footer{padding:.75rem 1rem;background-color:#f9fafb;border-top:1px solid #e5e7eb;text-align:center}.dropdown-footer small{color:#6b7280;font-size:.75rem}@media(max-width:640px){.user-switcher-dropdown{min-width:280px}.current-user-name{max-width:100px}}.app-header{background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border-bottom:2px solid rgba(139,119,91,.25);box-shadow:0 2px 8px #0000000d;position:sticky;top:0;z-index:100}.header-container{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.header-logo{text-decoration:none;display:flex;align-items:center;gap:12px}.header-logo-image{height:60px;width:auto;transition:transform .3s ease}.header-logo:hover .header-logo-image{transform:scale(1.05)}.header-title{font-size:1.8rem;margin:0;color:#5a4a3a;font-weight:700;transition:color .3s ease}.header-logo:hover .header-title{color:#8b775b}.header-nav{display:flex;align-items:center;gap:20px}.header-link{color:#5a4a3a;text-decoration:none;font-size:1.05rem;font-weight:500;transition:color .3s ease;position:relative}.header-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#8b775b;transition:width .3s ease}.header-link:hover{color:#8b775b}.header-link:hover:after{width:100%}@media(max-width:768px){.header-container{flex-wrap:wrap;gap:12px}.header-nav{gap:12px}.header-link{font-size:.95rem}.header-title{font-size:1.5rem}}.app-footer{background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border-top:2px solid rgba(139,119,91,.25);margin-top:auto;padding:24px 20px}.footer-container{text-align:center}.footer-copyright{margin:0;color:#8b775b;font-size:.95rem;font-weight:500}.landing-page{min-height:100vh;width:100%;background:linear-gradient(to bottom,#e8d5b7,#f4e8d8,#e8d5b7);position:relative;overflow:hidden}.landing-page:before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse at 20% 30%,rgba(139,119,91,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(139,119,91,.06) 0%,transparent 50%),radial-gradient(ellipse at 60% 20%,rgba(139,119,91,.05) 0%,transparent 50%),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(139,119,91,.015) 2px,rgba(139,119,91,.015) 3px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(139,119,91,.015) 2px,rgba(139,119,91,.015) 3px);opacity:.7;pointer-events:none}.landing-page:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 100px #8b775b26,inset 0 0 200px #8b775b14;border:20px solid transparent;border-image:linear-gradient(to bottom,#8b775b4d,#8b775b1a) 1;pointer-events:none}.landing-container{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:80px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}.hero-section{display:flex;flex-direction:column;align-items:center;gap:30px;margin-bottom:60px;animation:fadeInUp 1s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.landing-logo{width:180px;height:auto;filter:drop-shadow(0 4px 12px rgba(139,119,91,.3));animation:fadeInUp 1s ease-out}.landing-name-tag{max-width:600px;width:90%;height:auto;filter:drop-shadow(0 4px 12px rgba(139,119,91,.3));animation:fadeInUp 1.2s ease-out}.decorative-divider{display:flex;align-items:center;gap:20px;width:100%;max-width:500px;margin:20px 0;animation:fadeInUp 1.4s ease-out}.divider-line{flex:1;height:2px;background:linear-gradient(to right,transparent,rgba(139,119,91,.4) 20%,rgba(139,119,91,.4) 80%,transparent)}.divider-ornament{font-size:24px;color:#8b775b;opacity:.6}.coming-soon-banner{position:relative;margin:40px 0;animation:fadeInUp 1.6s ease-out,float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.banner-ribbon{position:relative;background:linear-gradient(135deg,#8b775b,#6b5d4f,#8b775b);padding:30px 80px;box-shadow:0 6px 20px #8b775b66,inset 0 2px 4px #fff3,inset 0 -2px 4px #0003;border-radius:8px;transform:perspective(500px) rotateX(-2deg)}.banner-ribbon:before,.banner-ribbon:after{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}.banner-ribbon:before{left:-20px;border-width:0 20px 90px 0;border-color:transparent #6b5d4f transparent transparent;filter:brightness(.7)}.banner-ribbon:after{right:-20px;border-width:90px 20px 0 0;border-color:#6b5d4f transparent transparent transparent;filter:brightness(.7)}.coming-soon-text{font-family:Dancing Script,Brush Script MT,cursive;font-size:4rem;font-weight:700;color:#faf8f3;margin:0;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.3),0 0 10px rgba(255,255,255,.2);letter-spacing:3px;line-height:1}.landing-footer{margin-top:60px;text-align:center;animation:fadeInUp 1.8s ease-out}.footer-note{font-family:EB Garamond,serif;font-size:1.2rem;font-style:italic;color:#5a4a3a;text-shadow:0 1px 2px rgba(255,255,255,.8);margin:0;opacity:.8}@media(max-width:768px){.landing-container{padding:60px 20px}.landing-logo{width:140px}.landing-name-tag{max-width:90%}.coming-soon-text{font-size:3rem}.banner-ribbon{padding:20px 40px}.banner-ribbon:before{left:-15px;border-width:0 15px 70px 0}.banner-ribbon:after{right:-15px;border-width:70px 15px 0 0}.footer-note{font-size:1rem}}@media(max-width:480px){.landing-logo{width:120px}.coming-soon-text{font-size:2.5rem;letter-spacing:2px}.banner-ribbon{padding:15px 30px}.banner-ribbon:before,.banner-ribbon:after{display:none}}.card{background:linear-gradient(to bottom,#f5f0e8,#ebe3d5);border-radius:8px;padding:25px;box-shadow:0 4px 15px #0000001a;border:1px solid rgba(139,119,91,.25);position:relative;transition:all .3s ease}.card--hoverable{cursor:pointer}.card--hoverable:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026;border-color:#8b775b59}.icon{display:block;object-fit:contain;-webkit-user-select:none;user-select:none}.icon--small{width:32px;height:32px}.icon--medium{width:64px;height:64px}.icon--large{width:96px;height:96px}.home-page{min-height:100vh}.home-header{background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);padding:60px 20px;text-align:center;border-bottom:3px solid #d4c4a8;box-shadow:inset 0 0 80px #c2a4791f,0 4px 15px #8b775b33;position:relative}.home-header:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.header-images{display:flex;align-items:center;justify-content:center;gap:30px;margin-bottom:20px;position:relative;z-index:1}.home-logo{height:180px;width:auto;filter:drop-shadow(0 4px 8px rgba(139,119,91,.3))}.home-name-tag{height:160px;width:auto;filter:drop-shadow(0 4px 8px rgba(139,119,91,.3))}.home-title{font-size:3rem;margin-bottom:10px;color:#5a4a3a;font-weight:700;position:relative;z-index:1;text-shadow:0 2px 4px rgba(139,119,91,.15)}.home-tagline{font-size:1.25rem;color:#6b5a45;font-style:italic;margin:0;position:relative;z-index:1;text-shadow:0 1px 2px rgba(255,255,255,.8)}.home-content{padding:40px 20px;max-width:1000px}.welcome-section{margin-bottom:60px}.welcome-section h2{font-size:2rem;margin-bottom:20px;text-align:center;color:#5a4a3a;text-shadow:0 1px 2px rgba(139,119,91,.1)}.welcome-section p{font-size:1.1rem;line-height:1.8;text-align:center;max-width:600px;margin:0 auto 30px;text-shadow:0 1px 1px rgba(255,255,255,.5)}.welcome-section>.card{background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b33}.path-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:30px}.path-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px;transition:all .3s ease;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 40px #c2a47914,0 2px 8px #8b775b26;position:relative}.path-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(139,119,91,.015) 26px,rgba(139,119,91,.015) 27px);pointer-events:none;border-radius:8px}.path-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 40px #c2a47914,0 4px 16px #8b775b40;border-color:#8b775b}.path-card .icon{margin-bottom:16px;position:relative;z-index:1}.path-card h3{margin:0 0 12px;font-size:1.4rem;color:#5a4a3a;position:relative;z-index:1;text-shadow:0 1px 1px rgba(255,255,255,.5)}.path-card p{flex-grow:1;margin-bottom:20px;font-size:.95rem;line-height:1.6;position:relative;z-index:1;text-shadow:0 1px 1px rgba(255,255,255,.5)}.path-card button{position:relative;z-index:1}.path-card--featured{background:linear-gradient(to bottom,#f4e8d8,#f0e5d5,#f4e8d8);border:3px solid #8b775b;box-shadow:inset 0 0 50px #c2a47926,0 4px 12px #8b775b4d}.path-card--featured:after{content:"Recommended";position:absolute;top:-14px;left:50%;transform:translate(-50%);background:linear-gradient(to bottom,#8b775b,#6b5a45);color:#faf8f3;padding:6px 18px;border-radius:16px;font-size:.8rem;font-weight:700;box-shadow:0 3px 10px #0000004d,inset 0 1px 2px #fff3;z-index:2;letter-spacing:.5px}.path-card--featured:hover{border-color:#6b5a45;transform:translateY(-6px);box-shadow:inset 0 0 50px #c2a47926,0 8px 24px #8b775b59}.button-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.demo-section{margin-top:60px}.demo-section h2{margin-bottom:40px;font-size:2rem}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:30px}.demo-buttons{display:flex;flex-direction:column;gap:12px;align-items:flex-start}@media(max-width:768px){.header-images{flex-direction:column;gap:15px}.home-logo{height:140px}.home-name-tag{height:120px}.home-title{font-size:2rem}.home-tagline{font-size:1rem}.path-cards{grid-template-columns:1fr}.button-group{flex-direction:column;align-items:stretch}.demo-grid{grid-template-columns:1fr}}.input-wrapper{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.input-wrapper--full-width{width:100%}.input-label{font-size:.95rem;font-weight:600;color:#5a4a3a;margin-bottom:4px}.input-field{background:#fff9;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:12px;font-family:Crimson Text,serif;font-size:1.05rem;color:#3a3530;transition:all .3s ease;width:100%}.input-field:focus{border-color:#8b775b;background:#ffffffe6;box-shadow:0 0 0 3px #8b775b1a;outline:none}.input-field::placeholder{color:#8b775b;opacity:.6}.input-field--error{border-color:#c74440}.input-field--full-width{width:100%}.textarea-field{min-height:120px;resize:vertical;line-height:1.6}.input-error{font-size:.85rem;color:#c74440;margin-top:4px}.input-field:disabled{opacity:.6;cursor:not-allowed;background:#8b775b0d}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.auth-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.auth-container{width:100%;max-width:450px;position:relative;z-index:1}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{font-size:2.5rem;margin-bottom:10px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.auth-header p{font-size:1.1rem;text-shadow:0 1px 2px rgba(255,255,255,.8)}.auth-card{margin-bottom:20px;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative}.auth-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}.auth-card form{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}.auth-footer{margin-top:24px;padding-top:24px;border-top:2px solid rgba(139,119,91,.2);text-align:center;position:relative;z-index:1}.auth-link{color:#8b775b;font-weight:600;text-decoration:none;transition:color .3s ease}.auth-link:hover{color:#6b5a45;text-decoration:underline}.auth-back{text-align:center}.auth-back a{font-size:.95rem;color:#8b775b;text-decoration:none;transition:color .3s ease}.auth-back a:hover{color:#6b5a45}.error-message{background:linear-gradient(to bottom,#fdecea,#fcede8);border:2px solid #c74440;color:#c74440;padding:12px 16px;border-radius:6px;font-size:.95rem;text-align:center;box-shadow:inset 0 0 20px #c744401a,0 2px 6px #c7444033;position:relative;z-index:1}.success-message{background:linear-gradient(to bottom,#e8f5e9,#e0f2e0);border:2px solid #4caf50;color:#2e7d32;padding:12px 16px;border-radius:6px;font-size:.95rem;text-align:center;box-shadow:inset 0 0 20px #4caf501a,0 2px 6px #4caf5033;position:relative;z-index:1}@media(max-width:568px){.auth-header h1{font-size:2rem}.auth-container{max-width:100%}}.dashboard-page{min-height:100vh;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.dashboard-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.dashboard-container{max-width:1200px;position:relative;z-index:1}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;flex-wrap:wrap;gap:20px}.dashboard-header h1{font-size:2.5rem;margin-bottom:8px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.dashboard-grid .card{display:flex;flex-direction:column;gap:12px;min-height:200px;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative;transition:all .3s ease}.dashboard-grid .card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}.dashboard-grid .card:hover{transform:translateY(-4px);box-shadow:inset 0 0 60px #c2a47926,0 8px 24px #8b775b59}.dashboard-grid .card h3{margin:0;font-size:1.5rem;color:#5a4a3a;position:relative;z-index:1}.dashboard-grid .card p{flex-grow:1;margin:0;position:relative;z-index:1}.dashboard-stat{font-size:3rem;font-weight:700;color:#8b775b;font-family:EB Garamond,serif;position:relative;z-index:1;text-shadow:0 2px 4px rgba(139,119,91,.2)}.upgrade-card{background:linear-gradient(135deg,#fdfbf7,#f7f3eb)!important;border:3px solid #8b775b!important;box-shadow:inset 0 0 40px #c2a47926,0 6px 20px #8b775b66!important}.upgrade-card:before{background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.03) 28px,rgba(139,119,91,.03) 29px)!important}.sample-data-card{margin-top:40px;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 40px #c2a4791a,0 2px 8px #8b775b33}.sample-data-card h3{margin:0 0 8px;font-size:1.4rem;color:#5a4a3a}.sample-data-actions{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}.text-success{color:#2d7a3e;font-weight:600;margin:0}@media(max-width:768px){.dashboard-header{flex-direction:column;align-items:stretch}.dashboard-header h1{font-size:2rem}.dashboard-grid{grid-template-columns:1fr}}.profile-page{min-height:100vh;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.profile-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.profile-container{max-width:800px;margin:0 auto;position:relative;z-index:1}.profile-container>h1{margin-bottom:30px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.profile-card{margin-bottom:24px;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative}.profile-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}.profile-header{display:flex;align-items:center;gap:24px;position:relative;z-index:1}.profile-picture-wrapper{position:relative}.profile-picture{width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid #d4c4a8;cursor:pointer;position:relative;transition:all .3s ease;box-shadow:inset 0 0 30px #c2a47926,0 4px 12px #8b775b4d}.profile-picture:hover{border-color:#8b775b;box-shadow:inset 0 0 30px #c2a47933,0 6px 16px #8b775b66}.profile-picture img{width:100%;height:100%;object-fit:cover}.profile-picture-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8b775b,#6b5a45);color:#faf8f3;font-size:3rem;font-weight:600;font-family:EB Garamond,serif}.profile-picture-overlay{position:absolute;bottom:0;left:0;right:0;background:#3a3530d9;color:#faf8f3;padding:8px;text-align:center;font-size:.85rem;font-weight:600;opacity:0;transition:opacity .3s ease}.profile-picture:hover .profile-picture-overlay{opacity:1}.profile-info h2{margin:0 0 8px;font-size:1.8rem}.profile-info p{margin:0 0 12px}.subscription-badge{display:inline-block;padding:8px 16px;border-radius:20px;color:#faf8f3;font-size:.85rem;font-weight:600;background:linear-gradient(to bottom,#8b775b,#6b5a45);border:2px solid rgba(139,119,91,.4);box-shadow:inset 0 1px 3px #0003,0 2px 6px #6b5a454d}.profile-display{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}.profile-field{display:flex;flex-direction:column;gap:6px}.profile-field label{font-size:.9rem;font-weight:600;color:#8b775b;text-transform:uppercase;letter-spacing:.5px}.profile-field p{font-size:1.1rem;margin:0}.profile-edit-form{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}.profile-edit-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}.subscription-info{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}.subscription-status{padding:16px;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border-radius:8px;border:2px solid rgba(139,119,91,.3);box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33}.subscription-status-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.subscription-status-label{font-weight:600;font-size:1.1rem;color:#5a4a3a}.upgrade-section{display:flex;flex-direction:column;gap:16px;padding:20px;background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border-radius:8px;border:2px solid rgba(139,119,91,.2)}.upgrade-section h4{margin:0 0 8px;font-size:1.4rem;color:#5a4a3a}.storage-info{background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border-left:4px solid #8b775b;padding:16px 20px;border-radius:6px;margin:8px 0}.storage-explanation{margin:0;font-size:.95rem;line-height:1.6;color:#3a3530}.storage-explanation strong{color:#5a4a3a;font-size:1rem}.pricing-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}.pricing-option{padding:20px;background:#fff;border-radius:8px;border:2px solid rgba(139,119,91,.2);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;transition:all .3s ease}.pricing-option:hover{border-color:#8b775b66;transform:translateY(-2px)}.pricing-option--featured{border-color:#8b775b;background:linear-gradient(135deg,#fdfbf7,#f7f3eb);position:relative}.pricing-option--featured:before{content:"Best Value";position:absolute;top:-10px;background:linear-gradient(to bottom,#8b775b,#6b5a45);color:#faf8f3;padding:2px 12px;border-radius:10px;font-size:.75rem;font-weight:600}.pricing-option strong{font-size:1.4rem;color:#5a4a3a}.upgrade-note{font-size:.85rem;text-align:center;margin-top:8px}.subscription-active,.founder-badge{padding:16px;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border-radius:8px;text-align:center;border:2px solid rgba(139,119,91,.3);box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33}.danger-zone{border:2px solid rgba(199,68,64,.3)}.danger-zone h3{color:#c74440}@media(max-width:768px){.profile-header{flex-direction:column;text-align:center}.profile-picture{width:100px;height:100px}.pricing-options{grid-template-columns:1fr}.profile-edit-actions{flex-direction:column}}.tag-input-wrapper{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.tag-input-label{font-size:.95rem;font-weight:600;color:#5a4a3a}.tag-input-controls{display:flex;gap:8px;align-items:stretch}.tag-type-select{background:#fff9;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:10px 12px;font-family:Crimson Text,serif;font-size:1.05rem;color:#3a3530;cursor:pointer;transition:all .3s ease;min-width:100px}.tag-type-select:focus{border-color:#8b775b;background:#ffffffe6;outline:none}.tag-input-field{flex:1;background:#fff9;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:10px 12px;font-family:Crimson Text,serif;font-size:1.05rem;color:#3a3530;transition:all .3s ease}.tag-input-field:focus{border-color:#8b775b;background:#ffffffe6;box-shadow:0 0 0 3px #8b775b1a;outline:none}.tag-add-button{background:linear-gradient(to bottom,#8b775b,#6b5a45);color:#faf8f3;border:none;border-radius:6px;padding:10px 20px;font-family:Crimson Text,serif;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .3s ease}.tag-add-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:.9rem;border:1px solid;transition:all .3s ease}.tag-type{font-weight:600;font-size:.85rem;opacity:.7}.tag-value{font-weight:500}.tag-remove{background:none;border:none;color:inherit;font-size:1.4rem;line-height:1;cursor:pointer;padding:0;margin-left:4px;opacity:.6;transition:opacity .3s ease}.tag-remove:hover{opacity:1}@media(max-width:568px){.tag-input-controls{flex-wrap:wrap}.tag-type-select{min-width:auto;flex:1}.tag-input-field,.tag-add-button{width:100%}}.audio-recorder{width:100%;margin:16px 0}.recorder-display{background:#f5f3f0;border:2px solid rgba(139,119,91,.2);border-radius:12px;padding:32px 24px}.recorder-controls{display:flex;flex-direction:column;align-items:center;gap:24px}.recording-indicator{display:flex;align-items:center;gap:12px;font-size:2rem;font-weight:600;color:#5a4a3a}.recording-dot{width:16px;height:16px;border-radius:50%;background:#d1d5db}.recording-dot.pulsing{background:#dc2626;animation:pulse 1.5s ease-in-out infinite}.recording-dot.paused{background:#f59e0b}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}.recording-time{font-family:Courier New,monospace;font-size:2.5rem;min-width:120px;text-align:center}.record-button{min-width:200px;font-size:1.1rem;padding:16px 32px}.recording-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.recording-actions button{min-width:120px;font-size:1rem}.recorder-hint{text-align:center;color:#6b7280;font-size:1rem;max-width:400px;margin:0;line-height:1.5}.playback-section{display:flex;flex-direction:column;gap:20px}.playback-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:2px solid rgba(139,119,91,.2)}.playback-title{font-size:1.2rem;font-weight:600;color:#5a4a3a}.playback-duration{font-size:1rem;font-weight:500;color:#8b775b;font-family:Courier New,monospace}.audio-playback{width:100%;height:48px;border-radius:8px}.playback-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:8px}.playback-actions button{min-width:140px}@media(max-width:640px){.recorder-display{padding:24px 16px}.recording-time{font-size:2rem}.record-button{width:100%;max-width:280px}.recording-actions{width:100%}.recording-actions button{flex:1;min-width:100px}.playback-actions{width:100%}.playback-actions button{flex:1;min-width:100px}}.create-story-page{min-height:100vh;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.create-story-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.create-story-container{max-width:800px;margin:0 auto;position:relative;z-index:1}.create-story-header{text-align:center;margin-bottom:30px}.create-story-header h1{font-size:2.5rem;margin-bottom:10px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.create-story-header p{font-size:1.1rem;margin-bottom:16px;text-shadow:0 1px 2px rgba(255,255,255,.8)}.story-count-badge{display:inline-block;padding:8px 16px;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border-radius:20px;font-size:.95rem;font-weight:600;color:#5a4a3a;border:2px solid rgba(139,119,91,.4);box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33}.create-story-form{display:flex;flex-direction:column;gap:24px}.story-type-selector{display:flex;gap:12px;margin-top:8px}.type-button{flex:1;padding:12px 20px;border:2px solid #d4c4a8;background:linear-gradient(to bottom,#faf7f2,#f9f5ee);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 0 20px #c2a4790d,0 2px 4px #8b775b1a}.type-button:hover{border-color:#8b775b;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);transform:translateY(-2px);box-shadow:inset 0 0 20px #c2a47914,0 4px 8px #8b775b33}.type-button.active{border-color:#6b5a45;background:linear-gradient(to bottom,#8b775b,#6b5a45);color:#faf8f3;box-shadow:inset 0 1px 3px #0003,0 3px 10px #6b5a4566}.media-upload-section{display:flex;flex-direction:column;gap:16px}.form-label{font-weight:600;font-size:.95rem;color:#5a4a3a}.file-upload-area{position:relative;margin-top:8px}.file-input{display:none}.file-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;border:2px dashed #d1d1d1;border-radius:12px;background:#fafafa;cursor:pointer;transition:all .3s ease}.file-upload-label:hover{border-color:#8b775b;background:#f5f3f0}.upload-text{font-size:1.1rem;font-weight:600;color:#5a4a3a;margin-bottom:4px}.upload-hint{font-size:.875rem;color:#999}.media-preview{position:relative;margin-top:8px}.image-preview{width:100%;max-height:500px;object-fit:contain;border-radius:12px;border:2px solid #e5e5e5}.audio-preview{display:flex;flex-direction:column;gap:12px;padding:24px;background:#f5f3f0;border-radius:12px;border:2px solid #e5e5e5}.audio-player{width:100%;height:40px}.audio-duration{margin:0;font-size:.875rem;color:#666;text-align:center}.remove-media-btn{margin-top:12px;padding:8px 16px;background:#dc2626;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s ease}.remove-media-btn:hover{background:#b91c1c}.audio-mode-selector{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.mode-toggle{display:flex;gap:8px;background:#fff;padding:4px;border-radius:8px;border:2px solid #e5e5e5}.mode-toggle-btn{flex:1;padding:10px 16px;border:none;background:transparent;border-radius:6px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;color:#6b7280}.mode-toggle-btn:hover{background:#f5f3f0;color:#5a4a3a}.mode-toggle-btn.active{background:linear-gradient(135deg,#8b775b,#6d5d4b);color:#fff;font-weight:600}.upgrade-prompt{padding:20px;background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border-radius:8px;border:2px solid rgba(139,119,91,.3);text-align:center}.upgrade-prompt p{margin-bottom:16px;color:#5a4a3a;font-weight:500}.recipe-form-section{display:flex;flex-direction:column;gap:24px}.recipe-meta-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.recipe-list-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:12px}.recipe-list-item .input-wrapper,.recipe-list-item .textarea-wrapper{flex:1}.remove-list-item-btn{padding:8px 12px;background:#dc2626;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s ease;margin-top:8px}.remove-list-item-btn:hover{background:#b91c1c}@media(max-width:768px){.create-story-header h1{font-size:2rem}.form-actions{flex-direction:column}}.confirm-dialog-overlay{position:fixed;inset:0;background:#3a3530b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirm-dialog{background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:3px solid #d4c4a8;border-radius:12px;box-shadow:inset 0 0 60px #c2a4791a,0 8px 32px #8b775b66;padding:32px;max-width:500px;width:90%;animation:slideUp .3s ease-out;position:relative}.confirm-dialog:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:12px}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.confirm-dialog-title{margin:0 0 16px;font-size:1.5rem;font-weight:700;color:#5a4a3a;position:relative;z-index:1}.confirm-dialog-message{margin:0 0 24px;font-size:1rem;line-height:1.6;color:#3a3530;position:relative;z-index:1}.confirm-dialog-actions{display:flex;gap:12px;justify-content:flex-end;position:relative;z-index:1}.button-danger{background:linear-gradient(to bottom,#c74440,#b23d3a)!important;border-color:#c74440!important}.button-danger:hover{background:linear-gradient(to bottom,#d95450,#c74440)!important;transform:translateY(-1px);box-shadow:0 6px 20px #c7444066!important}@media(max-width:768px){.confirm-dialog{padding:24px}.confirm-dialog-actions{flex-direction:column-reverse}.confirm-dialog-actions button{width:100%}}.stories-page{min-height:100vh;padding:40px 20px}.stories-container{max-width:1200px}.stories-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;flex-wrap:wrap;gap:20px}.stories-header h1{font-size:2.5rem;margin-bottom:8px}.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.story-card{display:flex;flex-direction:column;gap:16px;padding:24px;border-left:3px solid rgba(139,119,91,.3);transition:all .3s ease;cursor:pointer;position:relative}.story-card:has(.story-type-badge--text){background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);border:1px solid #d4c4a8;border-left:3px solid #8b775b;box-shadow:0 2px 8px #8b775b33}.story-card:has(.story-type-badge--text):hover{border-left-color:#8b775b;transform:translateY(-4px);box-shadow:0 2px 8px #8b775b4d,0 8px 24px #8b775b33}.story-card:has(.story-type-badge--photo){background:linear-gradient(135deg,#2a2520,#3d3530,#2a2520);border:2px solid #1a1510;box-shadow:inset 0 0 40px #0003,0 2px 8px #0006}.story-card:has(.story-type-badge--photo):hover{transform:translateY(-4px);box-shadow:inset 0 0 40px #0003,0 4px 16px #00000080}.story-card:has(.story-type-badge--photo) h3,.story-card:has(.story-type-badge--photo) .story-date,.story-card:has(.story-type-badge--photo) .story-preview,.story-card:has(.story-type-badge--photo) .story-created{color:#f4e8d8}.story-card:has(.story-type-badge--photo) .story-card-footer{border-top-color:#f4e8d833}.story-card:has(.story-type-badge--audio){background:linear-gradient(135deg,#4a3828,#6b4f3a,#4a3828);border:2px solid #2d1f15;box-shadow:inset 0 1px 5px #0000004d,0 2px 8px #0006}.story-card:has(.story-type-badge--audio):hover{transform:translateY(-4px);box-shadow:inset 0 1px 5px #0000004d,0 4px 16px #00000080}.story-card:has(.story-type-badge--audio) h3,.story-card:has(.story-type-badge--audio) .story-date,.story-card:has(.story-type-badge--audio) .story-created,.story-card:has(.story-type-badge--audio) .audio-indicator{color:#f4e8d8}.story-card:has(.story-type-badge--audio) .story-card-footer{border-top-color:#f4e8d833}.story-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.story-title-row{display:flex;align-items:center;gap:8px;flex:1}.story-type-badge{font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:4px;flex-shrink:0;letter-spacing:.5px}.story-type-badge--text{background:#3b82f61a;color:#2563eb;border:1px solid rgba(59,130,246,.3)}.story-type-badge--photo{background:#8b5cf61a;color:#7c3aed;border:1px solid rgba(139,92,246,.3)}.story-type-badge--audio{background:#ec48991a;color:#db2777;border:1px solid rgba(236,72,153,.3)}.story-card h3{margin:0;font-size:1.4rem;color:#5a4a3a;flex:1}.story-date{font-size:.9rem;color:#8b775b;font-weight:500;white-space:nowrap}.story-preview{margin:0;line-height:1.6;color:#3a3530;flex-grow:1}.story-preview-media{display:flex;flex-direction:column;gap:12px}.preview-thumbnail{width:100%;height:180px;object-fit:cover;background:#fff;padding:8px;box-shadow:0 0 0 8px #f4e8d8,0 0 0 9px #8b775b4d,1px 1px 4px #0006,4px 4px 12px #0000004d;transform:rotate(-.3deg)}.story-preview-audio{padding:16px;background:linear-gradient(to bottom,#2d1f15,#3d2f25,#2d1f15);border-radius:6px;border:1px solid #1a1510;box-shadow:inset 0 2px 4px #00000080,0 1px 4px #0000004d}.audio-indicator{font-weight:500;color:#5a4a3a;text-align:center}.tag{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.85rem;border:1px solid}.story-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(139,119,91,.15)}.story-created{font-size:.85rem;color:#8b775b}.story-duplicate,.story-delete{background:none;border:none;font-size:.9rem;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .3s ease}.story-duplicate{color:#8b775b}.story-duplicate:hover{background:#8b775b1a}.story-delete{color:#c74440}.story-delete:hover{background:#c744401a}@media(max-width:768px){.stories-header{flex-direction:column;align-items:stretch}.stories-header h1{font-size:2rem}.stories-grid{grid-template-columns:1fr}}.comments-section{margin-top:40px;padding-top:30px;border-top:2px solid rgba(139,119,91,.3);position:relative;z-index:1}.comments-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.comments-header h3{font-size:1.6rem;margin:0;color:#5a4a3a}.comment-count{font-size:1rem;font-weight:700;color:#8b775b;background:#8b775b1a;padding:4px 12px;border-radius:12px;border:1px solid rgba(139,119,91,.25)}.comments-list{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.no-comments{text-align:center;color:#8b775b;font-style:italic;padding:30px 20px;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:1px dashed #d4c4a8;border-radius:8px;margin:0;box-shadow:inset 0 0 20px #c2a4791a}.comment-item{background:linear-gradient(135deg,#faf7f2,#f9f5ee,#faf7f2);border:1px solid #d4c4a8;border-left:3px solid #8b775b;border-radius:6px;padding:20px;transition:all .3s ease;box-shadow:0 1px 4px #8b775b26,inset 0 0 30px #c2a47914;position:relative}.comment-item:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(139,119,91,.02) 24px,rgba(139,119,91,.02) 25px);pointer-events:none;border-radius:6px}.comment-item:hover{border-left-color:#6b5a45;box-shadow:0 2px 8px #8b775b40,inset 0 0 30px #c2a47914;transform:translate(2px)}.comment-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:12px;flex-wrap:wrap;position:relative;z-index:1}.comment-author{font-weight:600;color:#5a4a3a;font-size:1rem}.comment-time{font-size:.85rem;color:#8b775b;font-style:italic}.comment-content{margin:0 0 8px;line-height:1.7;color:#3a3530;font-size:1.05rem;white-space:pre-wrap;position:relative;z-index:1;text-shadow:0 1px 1px rgba(255,255,255,.6)}.comment-edited{font-size:.8rem;color:#8b775b;font-style:italic}.comment-actions{display:flex;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(139,119,91,.1)}.comment-action-btn{background:none;border:none;color:#8b775b;font-size:.9rem;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .3s ease;font-family:Crimson Text,serif}.comment-action-btn:hover{background:#8b775b1a}.comment-action-delete{color:#c74440}.comment-action-delete:hover{background:#c744401a}.comment-edit-form{display:flex;flex-direction:column;gap:12px}.comment-edit-actions{display:flex;gap:12px}.comment-form{background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);border:2px solid #d4c4a8;border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 0 40px #c2a47926,0 2px 8px #8b775b33;position:relative}.comment-form:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.025) 28px,rgba(139,119,91,.025) 29px);pointer-events:none;border-radius:8px}.comment-form textarea{resize:vertical;min-height:80px;position:relative;z-index:1;background:#fffc;border:1px solid #d4c4a8}.comment-form textarea:focus{background:#fffffff2;border-color:#8b775b}.comment-form button{position:relative;z-index:1}@media(max-width:768px){.comments-section{margin-top:30px}.comments-header h3{font-size:1.3rem}.comment-item{padding:16px}.comment-content{font-size:1rem}.comment-form{padding:16px}}.reactions-container{margin-top:24px;padding:20px;background:linear-gradient(135deg,#faf7f2,#f9f5ee,#faf7f2);border:1px solid #d4c4a8;border-radius:8px;box-shadow:inset 0 0 30px #c2a4791a,0 2px 6px #8b775b26;position:relative;z-index:1}.reactions-container:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 26px,rgba(139,119,91,.02) 26px,rgba(139,119,91,.02) 27px);pointer-events:none;border-radius:8px}.reactions-header{margin-bottom:12px;position:relative;z-index:1}.reactions-label{font-size:1.1rem;font-weight:600;color:#5a4a3a;text-shadow:0 1px 1px rgba(255,255,255,.5)}.reactions-buttons{display:flex;gap:12px;position:relative;z-index:1}.reaction-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(to bottom,#f4e8d8,#ebe0ce);border:2px solid #d4c4a8;border-radius:24px;cursor:pointer;transition:all .3s ease;font-family:Crimson Text,serif;font-size:1rem;box-shadow:0 2px 4px #8b775b33,inset 0 1px 2px #ffffff80;position:relative;overflow:hidden}.reaction-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#8b775b33;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.reaction-btn.animating:before{width:200px;height:200px}.reaction-btn:hover:not(:disabled){background:linear-gradient(to bottom,#ebe0ce,#e0d4c0);border-color:#8b775b;transform:translateY(-2px);box-shadow:0 4px 8px #8b775b4d,inset 0 1px 2px #ffffff80}.reaction-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 3px #8b775b4d,inset 0 1px 2px #8b775b33}.reaction-btn:disabled{opacity:.6;cursor:not-allowed}.reaction-icon{font-size:1.4rem;line-height:1;position:relative;z-index:1;transition:transform .3s ease}.reaction-btn.animating .reaction-icon{animation:heartbeat .6s ease}@keyframes heartbeat{0%,to{transform:scale(1)}10%{transform:scale(1.3)}20%{transform:scale(1)}30%{transform:scale(1.2)}40%{transform:scale(1)}}.reaction-count{font-size:1.1rem;font-weight:700;color:#5a4a3a;min-width:24px;text-align:left;position:relative;z-index:1;text-shadow:0 1px 1px rgba(255,255,255,.5)}@media(max-width:768px){.reactions-container{padding:16px}.reaction-btn{padding:10px 16px;font-size:.95rem}.reaction-icon{font-size:1.2rem}.reaction-count{font-size:1rem}}.recipe-story-card{background:linear-gradient(to bottom,#fdfcf8,#f9f5ee,#fdfcf8);border:3px solid #c2a479;border-radius:8px;padding:40px;box-shadow:inset 0 0 80px #c2a4791f,0 6px 20px #8b775b4d;position:relative;font-family:Crimson Text,serif}.recipe-story-card:before,.recipe-story-card:after{content:"";position:absolute;width:40px;height:40px;border-style:solid;border-color:#8b775b}.recipe-story-card:before{top:12px;left:12px;border-width:2px 0 0 2px}.recipe-story-card:after{top:12px;right:12px;border-width:2px 2px 0 0}.recipe-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px double #c2a479}.recipe-title{font-size:2.5rem;font-weight:700;color:#3a3530;margin:0 0 16px;font-family:EB Garamond,serif;text-shadow:0 2px 4px rgba(139,119,91,.15);letter-spacing:.5px}.recipe-meta{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:16px}.recipe-meta-item{display:flex;flex-direction:column;align-items:center;gap:4px}.meta-label{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:#8b775b;font-weight:600}.meta-value{font-size:1.1rem;color:#3a3530;font-weight:600}.recipe-image-container{margin:30px 0;text-align:center}.recipe-image{max-width:100%;height:auto;max-height:400px;border:8px solid #f0e5d5;border-radius:4px;box-shadow:inset 0 0 20px #c2a4791a,0 4px 12px #8b775b4d;outline:2px solid #c2a479;outline-offset:-12px}.recipe-content{margin:30px 0}.recipe-section{margin-bottom:32px}.recipe-section-title{font-size:1.8rem;font-weight:700;color:#5a4a3a;margin:0 0 16px;font-family:EB Garamond,serif;text-align:center;padding-bottom:12px;border-bottom:2px solid #d4c4a8;position:relative}.recipe-section-title:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:60px;height:2px;background:#8b775b}.recipe-ingredients-list{list-style:none;padding:0;margin:20px 0}.recipe-ingredient{margin-bottom:8px;background:linear-gradient(to right,rgba(194,164,121,.08) 0%,transparent 100%);border-left:4px solid #c2a479;font-size:1.15rem;color:#3a3530;line-height:1.6;position:relative;padding:12px 16px 12px 36px}.recipe-ingredient:before{content:"•";position:absolute;left:16px;color:#8b775b;font-size:1.4rem;font-weight:700}.recipe-instructions-list{list-style:none;counter-reset:instruction-counter;padding:0;margin:20px 0}.recipe-instruction{counter-increment:instruction-counter;padding:16px 20px 16px 60px;margin-bottom:16px;background:linear-gradient(135deg,#c2a4790d,#c2a47905);border-radius:6px;border:2px solid rgba(194,164,121,.2);font-size:1.15rem;color:#3a3530;line-height:1.7;position:relative}.recipe-instruction:before{content:counter(instruction-counter);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:linear-gradient(135deg,#8b775b,#6b5a45);color:#faf8f3;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:0 2px 6px #8b775b66}.recipe-notes{background:linear-gradient(to bottom,#f9f5ee,#f0e5d5);border:2px dashed #c2a479;border-radius:8px;padding:20px 24px;margin-top:32px}.recipe-notes .recipe-section-title{border-bottom:none;margin-bottom:12px;font-size:1.4rem;text-align:left}.recipe-notes .recipe-section-title:after{display:none}.recipe-notes-text{font-size:1.1rem;line-height:1.7;color:#3a3530;margin:0;font-style:italic}.recipe-footer{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:20px;border-top:3px double #c2a479;flex-wrap:wrap;gap:16px}.recipe-author,.recipe-date{display:flex;align-items:center;gap:8px}.author-label,.date-label{font-size:.95rem;color:#8b775b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.author-name,.date-value{font-size:1.2rem;color:#3a3530;font-weight:600;font-family:EB Garamond,serif}@media(max-width:768px){.recipe-story-card{padding:24px}.recipe-title{font-size:2rem}.recipe-meta{flex-direction:column;gap:12px}.recipe-section-title{font-size:1.5rem}.recipe-ingredient,.recipe-instruction,.recipe-notes-text{font-size:1rem}.recipe-instruction{padding-left:52px}.recipe-footer{flex-direction:column;align-items:flex-start}}.story-detail-page{min-height:100vh;padding:40px 20px}.story-detail-container{max-width:900px;margin:0 auto}.story-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:16px}.story-actions{display:flex;gap:8px}.delete-btn{color:#c74440}.delete-btn:hover{background:#c744401a}.story-detail-card{padding:40px;border-left:4px solid #8b775b}.story-detail-card.story-type-text{background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);border:1px solid #d4c4a8;border-left:4px solid #8b775b;box-shadow:inset 0 0 60px #c2a47926,0 2px 8px #8b775b4d,0 8px 24px #8b775b26;position:relative}.story-detail-card.story-type-text:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.03) 30px,rgba(139,119,91,.03) 31px);pointer-events:none}.story-detail-card.story-type-photo{background:linear-gradient(135deg,#2a2520,#3d3530,#2a2520);border:none;padding:50px;box-shadow:inset 0 0 80px #0000004d,0 4px 16px #00000080;position:relative}.story-detail-card.story-type-photo:before{content:"";position:absolute;inset:15px;border:2px solid rgba(139,119,91,.2);pointer-events:none}.story-detail-card.story-type-photo .story-title,.story-detail-card.story-type-photo .story-date-full,.story-detail-card.story-type-photo .story-created-at,.story-detail-card.story-type-photo .story-author{color:#f4e8d8}.story-detail-card.story-type-photo .story-meta{border-bottom-color:#f4e8d833}.story-detail-card.story-type-photo .story-footer{border-top-color:#f4e8d833}.story-detail-content{display:flex;flex-direction:column;gap:24px}.story-meta{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:2px solid rgba(139,119,91,.2);flex-wrap:wrap;gap:12px}.story-date-full{font-size:1.1rem;font-weight:600;color:#8b775b}.story-created-at{font-size:.95rem;color:#8b775b;font-style:italic}.story-title{font-size:2.5rem;line-height:1.3;color:#5a4a3a;margin:0;font-weight:700}.story-tags-section{display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-block;padding:6px 14px;border-radius:14px;font-size:.95rem;font-weight:500;border:1px solid}.story-content-display{padding:20px 0}.story-text{line-height:1.8;font-size:1.15rem;color:#3a3530;position:relative;z-index:1;text-shadow:0 1px 1px rgba(255,255,255,.5)}.story-text p{margin:0 0 1.5em;white-space:pre-wrap;word-wrap:break-word}.story-text p:last-child{margin-bottom:0}.story-photo{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}.story-photo-image{width:100%;max-height:600px;object-fit:contain;background:#fff;padding:16px;box-shadow:0 0 0 12px #f4e8d8,0 0 0 13px #8b775b4d,2px 2px 8px #0006,8px 8px 24px #0000004d;transform:rotate(-.5deg)}.story-photo-caption{font-size:1.1rem;color:#f4e8d8;font-style:italic;text-align:center;margin:0;padding:12px 24px;position:relative;z-index:2}.story-detail-card.story-type-audio{background:linear-gradient(135deg,#4a3828,#6b4f3a,#4a3828);border:3px solid #2d1f15;box-shadow:inset 0 2px 10px #00000080,inset 0 -2px 10px #ffffff1a,0 4px 20px #0009;position:relative}.story-detail-card.story-type-audio:before{content:"";position:absolute;inset:20px;border:1px solid rgba(139,119,91,.3);border-radius:4px;pointer-events:none}.story-detail-card.story-type-audio .story-title,.story-detail-card.story-type-audio .story-date-full,.story-detail-card.story-type-audio .story-created-at,.story-detail-card.story-type-audio .story-author{color:#f4e8d8}.story-detail-card.story-type-audio .story-meta{border-bottom-color:#f4e8d833}.story-detail-card.story-type-audio .story-footer{border-top-color:#f4e8d833}.story-audio{padding:32px;background:linear-gradient(to bottom,#2d1f15,#3d2f25,#2d1f15);border-radius:8px;border:2px solid #1a1510;box-shadow:inset 0 3px 8px #0009,0 2px 8px #0006;position:relative;z-index:1}.story-audio:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:60%;height:4px;background:repeating-linear-gradient(90deg,rgba(139,119,91,.3),rgba(139,119,91,.3) 8px,transparent 8px,transparent 16px);border-radius:2px}.audio-player-container{display:flex;flex-direction:column;gap:20px;align-items:center}.story-audio-player{width:100%;max-width:500px;height:48px;border-radius:4px;background:#0000004d;border:1px solid rgba(139,119,91,.3)}.audio-duration-display{margin:0;font-size:1rem;color:#f4e8d8;font-weight:500;font-family:Courier New,monospace;letter-spacing:1px}.story-footer{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:2px solid rgba(139,119,91,.2);flex-wrap:wrap;gap:12px}.story-author{font-size:1rem;color:#5a4a3a}.story-visibility{font-size:.95rem;padding:6px 12px;background:#8b775b1a;border-radius:12px;color:#5a4a3a;font-weight:500}.story-interactions-card{margin-top:24px;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative}.story-interactions-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}@media(max-width:768px){.story-detail-card{padding:24px}.story-title{font-size:2rem}.story-text{font-size:1.05rem}.story-detail-header{flex-direction:column;align-items:stretch}.story-actions{justify-content:flex-end}}.edit-story-page{min-height:100vh;padding:40px 20px}.edit-story-container{max-width:800px;margin:0 auto}.edit-story-header{text-align:center;margin-bottom:30px}.edit-story-header h1{font-size:2.5rem;margin-bottom:10px;color:#5a4a3a}.edit-story-header p{font-size:1.1rem;margin-bottom:16px}.edit-story-form{display:flex;flex-direction:column;gap:24px}.date-input{background:#fff9;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:12px;font-family:Crimson Text,serif;font-size:1.05rem;color:#3a3530;transition:all .3s ease}.date-input:focus{border-color:#8b775b;background:#ffffffe6;box-shadow:0 0 0 3px #8b775b1a;outline:none}.visibility-select{background:#fff9;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:12px;font-family:Crimson Text,serif;font-size:1.05rem;color:#3a3530;transition:all .3s ease;cursor:pointer}.visibility-select:focus{border-color:#8b775b;background:#ffffffe6;box-shadow:0 0 0 3px #8b775b1a;outline:none}.form-actions{display:flex;gap:12px;padding-top:12px}.error-message{padding:12px 16px;background:#c744401a;border:1px solid rgba(199,68,64,.3);border-radius:6px;color:#c74440;font-size:.95rem;font-weight:500}@media(max-width:768px){.edit-story-header h1{font-size:2rem}.form-actions{flex-direction:column}}.family-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 8px #00000026;flex-shrink:0;position:relative;transition:all .3s ease}.family-avatar:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(139,119,91,.3);pointer-events:none}.family-avatar:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.family-avatar-initial{color:#fff;font-family:EB Garamond,serif;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2)}.family-avatar--small{width:32px;height:32px}.family-avatar--small .family-avatar-initial{font-size:.9rem}.family-avatar--medium{width:48px;height:48px}.family-avatar--medium .family-avatar-initial{font-size:1.3rem}.family-avatar--large{width:64px;height:64px}.family-avatar--large .family-avatar-initial{font-size:1.8rem}.families-page{min-height:100vh;padding:40px 20px}.families-container{max-width:1200px}.families-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;flex-wrap:wrap;gap:20px}.families-header h1{font-size:2.5rem;margin-bottom:8px}.header-actions{display:flex;gap:12px;flex-wrap:wrap}.empty-state p{font-size:1.1rem;margin-bottom:30px;max-width:500px;margin-left:auto;margin-right:auto}.empty-state-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.families-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.family-card{display:flex;flex-direction:column;gap:16px;padding:24px;border-left:3px solid rgba(139,119,91,.3);transition:all .3s ease;cursor:pointer}.family-card:hover{border-left-color:#8b775b;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.family-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.family-card-title-row{display:flex;align-items:center;gap:12px;flex:1}.family-card h3{margin:0;font-size:1.4rem;color:#5a4a3a}.role-badge{padding:4px 12px;border-radius:12px;font-size:.85rem;font-weight:600;border:1px solid}.role-badge--admin{background:#8b775b26;border-color:#8b775b4d;color:#5a4a3a}.role-badge--contributor{background:#5a4a3a1a;border-color:#5a4a3a40;color:#5a4a3a}.role-badge--viewer{background:#3a353014;border-color:#3a353033;color:#3a3530}.family-info{display:flex;flex-direction:column;gap:8px}.info-item{display:flex;justify-content:space-between;align-items:center}.info-label{font-size:.9rem;color:#8b775b;font-weight:500}.info-value{font-size:.95rem;color:#3a3530;font-weight:600}.family-code{font-family:Courier New,monospace;letter-spacing:1px;background:#8b775b1a;padding:2px 8px;border-radius:4px}.family-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(139,119,91,.15);flex-wrap:wrap;gap:8px}.family-created{font-size:.85rem;color:#8b775b}.admin-indicator{font-size:.85rem;color:#8b775b;font-style:italic}.upgrade-prompt{margin-top:30px;padding:30px;text-align:center;background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border:2px solid rgba(139,119,91,.3)}.upgrade-prompt h3{font-size:1.5rem;margin-bottom:12px;color:#5a4a3a}.upgrade-prompt p{margin-bottom:20px;max-width:500px;margin-left:auto;margin-right:auto}@media(max-width:768px){.families-header{flex-direction:column;align-items:stretch}.families-header h1{font-size:2rem}.header-actions{flex-direction:column}.families-grid{grid-template-columns:1fr}.empty-state-actions{flex-direction:column;align-items:stretch}}.create-family-page{min-height:100vh;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.create-family-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.create-family-container{max-width:700px;margin:0 auto;position:relative;z-index:1}.create-family-header{text-align:center;margin-bottom:30px}.create-family-header h1{font-size:2.5rem;margin-bottom:10px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.create-family-header p{font-size:1.1rem;text-shadow:0 1px 2px rgba(255,255,255,.8)}.create-family-page .card{background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative}.create-family-page .card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}.create-family-form{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}.field-hint{font-size:.9rem;color:#8b775b;margin:0;font-style:italic}.info-box ul{margin:0;padding-left:24px}.info-box li{margin-bottom:8px;color:#3a3530;line-height:1.5}.info-box li:last-child{margin-bottom:0}.upgrade-required{text-align:center;padding:40px;background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border:3px solid #8b775b;box-shadow:inset 0 0 40px #c2a47926,0 6px 20px #8b775b66;position:relative;z-index:1}.upgrade-required h2{font-size:2rem;margin-bottom:16px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.upgrade-required p{font-size:1.1rem;margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto}@media(max-width:768px){.create-family-header h1{font-size:2rem}.form-actions{flex-direction:column}}.join-family-page{min-height:100vh;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.join-family-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.join-family-container{max-width:700px;margin:0 auto;position:relative;z-index:1}.join-family-header{text-align:center;margin-bottom:30px}.join-family-header h1{font-size:2.5rem;margin-bottom:10px;color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}.join-family-header p{font-size:1.1rem;text-shadow:0 1px 2px rgba(255,255,255,.8)}.join-family-page .card{background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative}.join-family-page .card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}.join-family-form{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}.form-field{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}.code-input{font-family:Courier New,monospace;font-size:1.5rem;font-weight:700;letter-spacing:4px;text-align:center;text-transform:uppercase;background:#fff9;border:2px solid rgba(139,119,91,.3);box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b26}.code-input:focus{border-color:#8b775b;background:#ffffffe6;box-shadow:inset 0 0 20px #c2a47926,0 0 0 3px #8b775b1a}.field-hint{font-size:.9rem;color:#8b775b;margin:0;font-style:italic;text-align:center}.info-box{background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border:2px solid rgba(139,119,91,.3);border-radius:8px;padding:20px;box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33;position:relative;z-index:1}.info-box h3{margin:0 0 12px;font-size:1.1rem;color:#5a4a3a;font-weight:700}.info-box p{margin:0;color:#3a3530;line-height:1.6}.form-actions{display:flex;gap:12px;padding-top:12px;position:relative;z-index:1}.error-message{padding:12px 16px;background:linear-gradient(to bottom,#fdecea,#fcede8);border:2px solid #c74440;border-radius:6px;color:#c74440;font-size:.95rem;font-weight:500;box-shadow:inset 0 0 20px #c744401a,0 2px 6px #c7444033;position:relative;z-index:1}.success-message{padding:12px 16px;background:linear-gradient(to bottom,#e8f5e9,#e0f2e0);border:2px solid #4caf50;border-radius:6px;color:#2e7d32;font-size:.95rem;font-weight:500;box-shadow:inset 0 0 20px #4caf501a,0 2px 6px #4caf5033;position:relative;z-index:1}.alt-action{margin-top:30px;text-align:center;position:relative;z-index:1}.alt-action p{margin-bottom:12px;font-size:1rem;text-shadow:0 1px 2px rgba(255,255,255,.8)}.join-family-page .upgrade-required{text-align:left;padding:24px;background:linear-gradient(135deg,#fdfbf7,#f7f3eb);border:3px solid #8b775b;box-shadow:inset 0 0 40px #c2a47926,0 6px 20px #8b775b66;position:relative;z-index:1}.join-family-page .upgrade-required h3{color:#5a4a3a;text-shadow:0 2px 4px rgba(139,119,91,.15)}@media(max-width:768px){.join-family-header h1{font-size:2rem}.form-actions{flex-direction:column}.code-input{font-size:1.3rem;letter-spacing:3px}}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#f5f0e8;border-radius:12px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;border:2px solid rgba(139,119,91,.3)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 30px;border-bottom:2px solid rgba(139,119,91,.2)}.modal-header h2{margin:0;font-size:1.8rem;color:#5a4a3a}.modal-close{background:none;border:none;font-size:2rem;color:#8b775b;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .3s ease}.modal-close:hover{background:#8b775b1a;color:#5a4a3a}.settings-form{padding:30px;display:flex;flex-direction:column;gap:30px}.form-section{display:flex;flex-direction:column;gap:20px}.form-section h3{margin:0 0 10px;font-size:1.3rem;color:#5a4a3a;padding-bottom:10px;border-bottom:1px solid rgba(139,119,91,.2)}.form-field{display:flex;flex-direction:column;gap:8px}.form-field label{font-size:.95rem;font-weight:600;color:#5a4a3a}.field-hint{font-size:.85rem;color:#8b775b;margin:0;font-style:italic}.form-field-checkbox{display:flex;gap:12px;padding:16px;background:#ffffff80;border:1px solid rgba(139,119,91,.2);border-radius:8px;cursor:pointer;transition:all .3s ease}.form-field-checkbox:hover{background:#ffffffb3;border-color:#8b775b4d}.form-field-checkbox input[type=checkbox]{margin-top:2px;width:20px;height:20px;cursor:pointer;accent-color:#8b775b;flex-shrink:0}.form-field-checkbox label{display:flex;flex-direction:column;gap:4px;cursor:pointer;flex:1}.form-field-checkbox strong{font-size:1rem;color:#5a4a3a}.checkbox-description{font-size:.9rem;color:#8b775b;font-weight:400}.modal-actions{display:flex;gap:12px;padding-top:20px;border-top:2px solid rgba(139,119,91,.2)}@media(max-width:768px){.modal-overlay{padding:10px}.modal-header{padding:20px}.modal-header h2{font-size:1.5rem}.settings-form{padding:20px}.modal-actions{flex-direction:column}}.manage-members-modal{max-width:700px;max-height:80vh;overflow-y:auto}.members-management-list{display:flex;flex-direction:column;gap:16px;margin:24px 0}.member-management-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#ffffff80;border:1px solid rgba(139,119,91,.2);border-radius:8px;gap:16px;transition:all .2s ease}.member-management-item:hover{background:#8b775b0d;border-color:#8b775b4d}.member-info-section{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.member-name-row{display:flex;align-items:center;gap:8px}.member-name{font-size:1rem;font-weight:600;color:#5a4a3a}.creator-badge{display:inline-block;padding:2px 8px;background:linear-gradient(135deg,#8b775b,#6d5d4b);color:#fff;font-size:.75rem;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.member-joined-date{font-size:.875rem;color:#8b775b}.member-actions-section{display:flex;align-items:center;gap:12px}.role-select{background:#fff;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:8px 12px;font-family:Crimson Text,serif;font-size:.95rem;color:#3a3530;cursor:pointer;transition:all .2s ease;min-width:130px}.role-select:hover{border-color:#8b775b}.role-select:focus{border-color:#8b775b;outline:none;box-shadow:0 0 0 3px #8b775b1a}.role-select:disabled{opacity:.5;cursor:not-allowed}.remove-confirm{background:#dc2626!important;color:#fff!important}.remove-confirm:hover{background:#b91c1c!important}.modal-footer{display:flex;flex-direction:column;gap:16px;padding-top:16px;border-top:1px solid rgba(139,119,91,.2)}.footer-note{font-size:.875rem;line-height:1.5;margin:0}@media(max-width:640px){.manage-members-modal{max-width:100%;padding:20px}.member-management-item{flex-direction:column;align-items:stretch}.member-actions-section{width:100%}.role-select{flex:1}}.family-analytics{width:100%;margin-bottom:2rem}.family-analytics h2{margin-bottom:1.5rem;color:var(--text-primary);font-size:1.5rem;font-weight:600}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.analytics-card{padding:1.5rem}.analytics-card h3{margin:0 0 1rem;font-size:1rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.analytics-overview .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-value{font-size:2.5rem;font-weight:700;color:var(--primary-color);line-height:1;margin-bottom:.5rem}.stat-label{font-size:.875rem;color:var(--text-secondary);font-weight:500}.top-contributor{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px}.contributor-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#fff;flex-shrink:0}.contributor-info{display:flex;flex-direction:column;gap:.25rem}.contributor-name{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.contributor-stats{font-size:.875rem;color:var(--text-secondary)}.member-breakdown{display:flex;flex-direction:column;gap:1rem}.breakdown-item{display:flex;flex-direction:column;gap:.5rem}.breakdown-bar{height:24px;background:var(--bg-secondary);border-radius:12px;overflow:hidden}.breakdown-fill{height:100%;border-radius:12px;transition:width .3s ease;min-width:2%}.breakdown-fill--admin{background:linear-gradient(90deg,#10b981,#059669)}.breakdown-fill--contributor{background:linear-gradient(90deg,#3b82f6,#2563eb)}.breakdown-fill--viewer{background:linear-gradient(90deg,#f59e0b,#d97706)}.breakdown-label{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.breakdown-role{font-weight:500;color:var(--text-primary)}.breakdown-count{font-weight:600;color:var(--text-secondary)}.activity-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;height:180px;padding:1rem .5rem 0}.activity-bar-container{display:flex;flex-direction:column;align-items:center;flex:1;gap:.5rem;height:100%}.activity-bar-wrapper{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.activity-bar{width:100%;max-width:40px;background:linear-gradient(180deg,var(--primary-color),var(--secondary-color));border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease;cursor:pointer}.activity-bar:hover{opacity:.8;transform:translateY(-2px)}.activity-date{font-size:.75rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase}.activity-count{font-size:.875rem;font-weight:600;color:var(--text-primary)}@media(max-width:768px){.analytics-grid{grid-template-columns:1fr}.analytics-overview .stats-grid{grid-template-columns:repeat(2,1fr)}.activity-chart{height:150px}.activity-bar{max-width:32px}}@media(max-width:480px){.stat-value{font-size:2rem}.contributor-avatar{width:50px;height:50px;font-size:1.25rem}}.family-detail-page{min-height:100vh;padding:40px 20px;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);position:relative}.family-detail-page:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,119,91,.02) 30px,rgba(139,119,91,.02) 31px);pointer-events:none}.family-detail-container{max-width:1000px;margin:0 auto;position:relative;z-index:1}.family-detail-header{margin-bottom:30px}.family-header-card{margin-bottom:30px;padding:0;overflow:hidden;background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40}.family-banner{height:250px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;display:flex;align-items:flex-end}.family-banner--gradient{background:linear-gradient(135deg,#8b775b,#6b5d4f,#5a4a3a)}.family-banner-overlay{width:100%;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 50%,transparent 100%);padding:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}.family-banner-overlay h1{font-size:2.5rem;margin:0;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);flex:1}.family-header-info{padding:20px 30px}.family-header-info p{margin:0}.family-title-section{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;flex-wrap:wrap}.family-title-section h1{font-size:2.5rem;margin:0;color:#5a4a3a;flex:1}.role-badge{padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:600;border:2px solid;box-shadow:0 2px 6px #8b775b33}.role-badge--admin{background:linear-gradient(to bottom,#8b775b,#6b5a45);border-color:#8b775b66;color:#faf8f3;box-shadow:inset 0 1px 3px #0003,0 3px 10px #6b5a4566}.role-badge--contributor{background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border-color:#8b775b66;color:#5a4a3a;box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33}.role-badge--viewer{background:linear-gradient(to bottom,#faf7f2,#f9f5ee);border-color:#8b775b4d;color:#3a3530;box-shadow:inset 0 0 20px #c2a4790d,0 2px 4px #8b775b26}.family-content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:30px}.family-detail-page .card{background:linear-gradient(to bottom,#faf7f2,#f9f5ee,#faf7f2);border:2px solid #d4c4a8;box-shadow:inset 0 0 60px #c2a4791a,0 4px 16px #8b775b40;position:relative}.family-detail-page .card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.02) 28px,rgba(139,119,91,.02) 29px);pointer-events:none;border-radius:8px}.family-code-card h2,.members-card h2,.stories-card h2,.settings-card h2{font-size:1.3rem;margin:0 0 16px;color:#5a4a3a;position:relative;z-index:1}.code-display{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;position:relative;z-index:1}.code-text{font-family:Courier New,monospace;font-size:2rem;font-weight:700;letter-spacing:4px;color:#5a4a3a;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);padding:12px 20px;border-radius:8px;border:3px solid #8b775b;box-shadow:inset 0 0 20px #c2a47926,0 4px 12px #8b775b66}.code-hint{font-size:.9rem;margin:0}.card-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.member-count{font-size:1.1rem;font-weight:700;color:#faf8f3;background:linear-gradient(to bottom,#8b775b,#6b5a45);padding:6px 14px;border-radius:16px;box-shadow:inset 0 1px 3px #0003,0 2px 6px #6b5a454d;position:relative;z-index:1}.members-list{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}.member-item{padding:12px;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);border-radius:6px;border:2px solid rgba(139,119,91,.3);box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33}.member-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:12px}.member-id{font-size:.95rem;font-weight:600;color:#3a3530}.member-role{font-size:.85rem;padding:2px 8px;border-radius:10px}.member-joined{font-size:.85rem;color:#8b775b}.stories-card{display:flex;flex-direction:column;gap:12px}.stories-card p{flex-grow:1}.family-stories-list{display:flex;flex-direction:column;gap:12px}.family-story-item{padding:14px;background:#8b775b0d;border-radius:6px;border:1px solid rgba(139,119,91,.15);cursor:pointer;transition:all .3s ease}.family-story-item:hover{background:#8b775b1a;border-color:#8b775b4d;transform:translate(4px)}.story-item-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}.story-item-header h4{margin:0;font-size:1.1rem;color:#5a4a3a;flex:1}.story-date{font-size:.85rem;color:#8b775b;font-weight:500;white-space:nowrap}.story-preview{margin:0 0 8px;font-size:.95rem;color:#3a3530;line-height:1.5}.story-author{font-size:.85rem;color:#8b775b;font-style:italic}.settings-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(139,119,91,.1)}.setting-item:last-child{border-bottom:none}.setting-label{font-size:.95rem;color:#8b775b;font-weight:500}.setting-value{font-size:.95rem;color:#3a3530;font-weight:600}.danger-zone{background:linear-gradient(to bottom,#fdecea,#fcede8);border:3px solid #c74440;padding:24px;box-shadow:inset 0 0 40px #c744401a,0 4px 12px #c744404d;position:relative;z-index:1}.danger-zone h3{margin:0 0 12px;font-size:1.2rem;color:#c74440;text-shadow:0 2px 4px rgba(199,68,64,.15)}.danger-zone p{margin-bottom:16px}.confirm-actions{display:flex;gap:12px;position:relative;z-index:1}.family-stories-list,.stories-card,.settings-list{position:relative;z-index:1}@media(max-width:768px){.family-title-section h1{font-size:2rem}.family-content-grid{grid-template-columns:1fr}.code-display{flex-direction:column;align-items:stretch}.code-text{font-size:1.5rem;letter-spacing:3px;text-align:center}.confirm-actions{flex-direction:column}}.family-stories-page{min-height:100vh;padding:40px 20px}.family-stories-container{max-width:900px;margin:0 auto}.family-stories-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;flex-wrap:wrap;gap:20px}.family-stories-header>div{display:flex;flex-direction:column;gap:12px}.family-stories-header h1{font-size:2.5rem;margin:0}.stories-controls{background:#fff9;border:1px solid rgba(139,119,91,.2);border-radius:8px;padding:20px;margin-bottom:30px;display:flex;flex-direction:column;gap:16px}.search-box,.search-input{width:100%}.filter-controls{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:6px;min-width:180px}.filter-group label{font-size:.9rem;font-weight:600;color:#5a4a3a}.filter-select{background:#fffc;border:2px solid rgba(139,119,91,.3);border-radius:6px;padding:10px 12px;font-family:Crimson Text,serif;font-size:1rem;color:#3a3530;cursor:pointer;transition:all .3s ease}.filter-select:focus{border-color:#8b775b;outline:none;box-shadow:0 0 0 3px #8b775b1a}.empty-state{text-align:center;padding:60px 40px}.empty-state h2{font-size:2rem;margin-bottom:16px;color:#5a4a3a}.stories-by-type-container{display:flex;flex-direction:column;gap:48px}.story-type-section{position:relative}.section-header{margin-bottom:24px}.section-title{font-size:1.8rem;margin:0;color:#5a4a3a;display:flex;align-items:center;gap:12px;font-weight:700;text-shadow:0 2px 4px rgba(139,119,91,.15)}.section-icon{font-size:2rem}.section-count{font-size:1.2rem;font-weight:600;color:#8b775b;background:linear-gradient(to bottom,#f0e5d5,#ebe0ce);padding:4px 12px;border-radius:16px;border:2px solid rgba(139,119,91,.3);box-shadow:inset 0 0 20px #c2a4791a,0 2px 6px #8b775b33}.empty-state p{font-size:1.1rem;margin-bottom:30px}.stories-timeline{display:flex;flex-direction:column;gap:20px;position:relative}.timeline-story-card{display:flex;gap:20px;padding:24px;cursor:pointer;transition:all .3s ease;border-left:none;background:linear-gradient(to bottom,#f4e8d8,#f7f0e3,#f4e8d8);border:1px solid #d4c4a8;box-shadow:inset 0 0 40px #c2a4791f,0 2px 8px #8b775b33;position:relative}.timeline-story-card:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(139,119,91,.025) 28px,rgba(139,119,91,.025) 29px);pointer-events:none}.timeline-story-card:hover{transform:translate(6px);box-shadow:inset 0 0 40px #c2a4791f,0 4px 16px #8b775b4d,0 8px 24px #8b775b26}.story-timeline-marker{position:relative;display:flex;flex-direction:column;align-items:center;flex-shrink:0;z-index:1}.timeline-dot{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#8b775b,#6b5a45);border:3px solid #f4e8d8;box-shadow:0 0 0 2px #8b775b,0 2px 6px #0000004d;z-index:2}.timeline-line{width:3px;flex-grow:1;background:linear-gradient(to bottom,#8b775b66,#8b775b33,#8b775b66);margin-top:4px;box-shadow:0 0 4px #8b775b4d}.timeline-story-card:last-child .timeline-line{display:none}.story-content-section{flex:1;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}.story-meta-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.story-date-badge{font-size:.95rem;font-weight:600;color:#8b775b;background:#8b775b1a;padding:4px 12px;border-radius:12px;border:1px solid rgba(139,119,91,.25)}.story-author{font-size:.9rem;color:#8b775b;font-style:italic}.story-title{margin:0;font-size:1.6rem;color:#5a4a3a;line-height:1.3}.story-preview{margin:0;line-height:1.7;color:#3a3530;font-size:1.05rem;text-shadow:0 1px 1px rgba(255,255,255,.5)}.story-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.85rem;border:1px solid;font-weight:500}.tag--person{background:#8b775b1a;border-color:#8b775b4d;color:#5a4a3a}.tag--era{background:#5a4a3a1a;border-color:#5a4a3a4d;color:#5a4a3a}.tag--theme{background:#3a35301a;border-color:#3a35304d;color:#3a3530}.tag-more{padding:4px 10px;font-size:.85rem;color:#8b775b;font-weight:600}.story-footer-info{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid rgba(139,119,91,.15)}.story-posted{font-size:.85rem;color:#8b775b}@media(max-width:768px){.family-stories-header{flex-direction:column;align-items:stretch}.family-stories-header h1{font-size:2rem}.timeline-story-card{gap:12px}.story-title{font-size:1.3rem}.sort-controls{flex-direction:column;align-items:stretch}.sort-select{width:100%}}