:root{--sand-beige: #F8F1E4;--dark-brown: #614d3b;--olive-brown: #8C7157;--off-white: #EFEFEF;--terracotta: #AD7444;--gold-khaki: #C2A673;--button-accent-hover: #A88C60;--coral-clay: #D88C6F;--majorelle-blue: #305177;--bg-beige-light: #F0E8DA;--bg-accent-very-subtle: #F4EFE4;--bg-accent-subtle: #E8DDCB;--bg-accent-medium: #DAC9B0;--form-input-bg: #FBF5ED;--disabled-button-bg: #DAC9B0;--border-accent-light-rgba: rgba(194, 166, 115, .3);--border-medium-light: #D4C9BE;--form-input-border-rgba: rgba(194, 166, 115, .5);--border-dark-contrast: var(--dark-brown);--focus-accent-rgba: rgba(194, 166, 115, .3);--placeholder-text-rgba: rgba(140, 113, 87, .6);--white: #fff;--white-rgb: 255, 255, 255;--shadow-color-rgb: 140, 113, 87;--shadow-accent-rgb: 194, 166, 115;--shadow-blue-rgb: 48, 81, 119;--bg-page: var(--sand-beige);--bg-container: var(--bg-beige-light);--bg-container-subtle: var(--bg-accent-very-subtle);--bg-input: var(--form-input-bg);--bg-button: rgba(var(--white-rgb), .95);--bg-button-hover: var(--button-accent-hover);--bg-button-disabled: var(--disabled-button-bg);--text-primary: var(--dark-brown);--text-secondary: var(--olive-brown);--text-placeholder: var(--placeholder-text-rgba);--text-button: var(--dark-brown);--text-button-hover: var(--white);--text-link: var(--button-accent-hover);--border-primary: var(--border-medium-light);--border-accent: var(--border-accent-light-rgba);--border-input: var(--form-input-border-rgba);--border-button: var(--border-dark-contrast);--border-button-hover: var(--border-accent-light-rgba);--pattern-primary: var(--terracotta);--accent-primary: var(--gold-khaki);--accent-focus: var(--focus-accent-rgba);--shadow-base: 0 2px 8px rgba(var(--shadow-color-rgb), .1);--shadow-hover: 0 4px 16px rgba(var(--shadow-color-rgb), .15);--error-bg: rgba(230, 57, 70, .1);--error-border: var(--coral-clay);--error-text: #b32d3a;--error-color: #b32d3a;--modal-background: var(--bg-container);--input-background: var(--bg-input);--page-background: var(--bg-page);--surface-subtle: var(--bg-container-subtle);--border-subtle: var(--border-primary);--text-muted: rgba(140, 113, 87, .7);--card-width: 120px;--card-height: 180px}html.dark-mode{--bg-page: var(--dark-brown);--bg-container: #4a3c2f;--bg-container-subtle: #3d3126;--bg-input: #504135;--bg-button: var(--olive-brown);--bg-button-hover: var(--gold-khaki);--bg-button-disabled: #705a46;--text-primary: var(--sand-beige);--text-secondary: #d4c9be;--text-placeholder: rgba(248, 241, 228, .5);--text-button: var(--sand-beige);--text-button-hover: var(--white);--text-link: var(--coral-clay);--border-primary: var(--olive-brown);--border-accent: rgba(194, 166, 115, .5);--border-input: var(--border-accent);--border-button: var(--sand-beige);--border-button-hover: var(--sand-beige);--pattern-primary: var(--terracotta);--accent-primary: var(--gold-khaki);--accent-focus: rgba(194, 166, 115, .4);--shadow-color-rgb: 0, 0, 0;--shadow-base: 0 2px 8px rgba(var(--shadow-color-rgb), .25);--shadow-hover: 0 4px 16px rgba(var(--shadow-color-rgb), .35);--error-bg: rgba(216, 140, 111, .2);--error-border: var(--coral-clay);--error-text: #f0a088;--error-color: #f0a088;--modal-background: var(--bg-container);--input-background: var(--bg-input);--page-background: var(--bg-page);--surface-subtle: var(--bg-container-subtle);--border-subtle: var(--border-primary);--text-muted: rgba(248, 241, 228, .6)}@media screen and (max-width: 768px){:root{--card-width: 90px;--card-height: 135px}}@media screen and (max-width: 480px){:root{--card-width: 70px;--card-height: 105px}}@media screen and (max-width: 360px){:root{--card-width: 60px;--card-height: 90px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Georgia,serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-page);background-image:url(/images/tunisian-pattern.png);background-repeat:repeat;background-size:auto;color:var(--text-primary);overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 40%,#f8f1e400 45%,#f8f1e4d9)}html.dark-mode body:before{background:radial-gradient(circle at 50% 40%,#614d3b00 45%,#614d3bd9)}html.dark-mode body{background-image:url(/images/tunisian-pattern-dark-theme.png)}button{cursor:pointer;background-color:var(--bg-button);color:var(--text-button);border:2px solid var(--border-button);padding:.8rem 1.5rem;border-radius:.5rem;font-weight:600;transition:all .2s ease-in-out;box-shadow:var(--shadow-base)}button:hover{background-color:var(--bg-button-hover);color:var(--text-button-hover);border-color:var(--border-button-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}button:disabled{background-color:var(--bg-button-disabled);opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}a{color:var(--text-link);text-decoration:none}a:hover{text-decoration:underline}.auth-loading{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--page-background)}.loading-spinner{text-align:center}.spinner{width:40px;height:40px;border:4px solid var(--surface-subtle);border-top:4px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#614d3bcc;display:flex;justify-content:center;align-items:center;z-index:1000}.auth-modal{background:var(--modal-background);border-radius:12px;padding:2rem;max-width:400px;width:90%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 10px 40px #614d3b4d;border:1px solid var(--border-accent)}.close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);transition:color .2s}.close-button:hover{color:var(--text-primary)}.welcome-screen{text-align:center}.welcome-header h1{color:var(--text-primary);margin-bottom:.5rem}.welcome-header p{color:var(--text-secondary);margin-bottom:2rem}.welcome-options{display:flex;flex-direction:column;gap:1rem}.primary-button,.secondary-button{padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.primary-button{background:var(--accent-primary);color:var(--text-primary);border:2px solid var(--accent-primary)}.primary-button:hover{background:var(--button-accent-hover);border-color:var(--button-accent-hover);color:var(--white)}.secondary-button{background:transparent;color:var(--accent-primary);border:2px solid var(--accent-primary)}.secondary-button:hover{background:var(--accent-primary);color:var(--white)}.guest-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-subtle)}.guest-section h3{margin-bottom:1rem;color:var(--text-secondary)}.guest-form{display:flex;gap:.5rem;margin-bottom:1rem}.guest-input{flex:1;padding:.5rem;border:2px solid var(--border-subtle);border-radius:4px;background:var(--input-background);color:var(--text-primary);transition:border-color .2s}.guest-input:focus{outline:none;border-color:var(--accent-primary)}.guest-button{padding:.5rem 1rem;background:var(--accent-primary);color:var(--text-primary);border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s}.guest-button:hover:not(:disabled){background:var(--button-accent-hover);color:var(--white)}.guest-button:disabled{opacity:.6;cursor:not-allowed}.guest-note{font-size:.875rem;color:var(--text-secondary);font-style:italic}.auth-form{width:100%}.form-header{text-align:center;margin-bottom:2rem}.form-header h2{color:var(--text-primary);margin-bottom:.5rem}.form-header p{color:var(--text-secondary)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-weight:500}.form-group input{width:100%;padding:.75rem;border:2px solid var(--border-subtle);border-radius:8px;font-size:1rem;background:var(--input-background);color:var(--text-primary);transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--accent-primary)}.form-group input.error{border-color:var(--error-color)}.password-input{position:relative}.password-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1rem}.field-error{display:block;color:var(--error-color);font-size:.875rem;margin-top:.25rem}.error-banner{background:#d88c6f26;color:var(--error-color);padding:.75rem;border-radius:8px;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;border:1px solid rgba(216,140,111,.3)}.submit-button{width:100%;padding:.75rem;background:var(--accent-primary);color:var(--text-primary);border:2px solid var(--accent-primary);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.submit-button:hover:not(:disabled){background:var(--button-accent-hover);border-color:var(--button-accent-hover);color:var(--white)}.submit-button:disabled{opacity:.6;cursor:not-allowed}.form-links{text-align:center;margin:1rem 0}.form-footer{text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border-subtle)}.link-button{background:none;border:none;color:var(--accent-primary);cursor:pointer;text-decoration:underline;transition:color .2s}.link-button:hover{color:var(--button-accent-hover)}.user-menu{position:relative}.user-menu-trigger{display:flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;padding:.5rem;border-radius:8px;transition:background-color .2s}.user-menu-trigger:hover{background:var(--surface-subtle)}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-primary);color:var(--text-primary);display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid var(--border-accent)}.user-avatar.large{width:48px;height:48px;font-size:1.25rem}.user-name{font-weight:500;color:var(--text-primary)}.guest-badge{background:var(--accent-primary);color:var(--text-primary);padding:.125rem .5rem;border-radius:12px;font-size:.75rem;font-weight:500}.user-menu-dropdown{position:absolute;top:100%;right:0;background:var(--modal-background);border:1px solid var(--border-accent);border-radius:8px;box-shadow:0 4px 12px #614d3b26;min-width:280px;z-index:100}.menu-header{padding:1rem;border-bottom:1px solid var(--border-subtle)}.user-info{display:flex;align-items:center;gap:1rem}.user-details{display:flex;flex-direction:column}.username{font-weight:500;color:var(--text-primary)}.email{font-size:.875rem;color:var(--text-secondary)}.status{font-size:.75rem;color:var(--text-muted)}.menu-items{padding:.5rem 0}.menu-item{width:100%;padding:.75rem 1rem;background:none;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.75rem;transition:background-color .2s}.menu-item:hover{background:var(--surface-subtle)}.menu-item.upgrade{color:var(--accent-primary)}.menu-item.logout{color:var(--error-color);background:#b32d3a1a;border:1px solid rgba(179,45,58,.2);border-radius:6px;margin:.5rem;width:calc(100% - 1rem);font-weight:500;position:relative;overflow:hidden;transition:all .3s ease;white-space:nowrap;min-width:120px}.menu-item.logout:hover{background:var(--error-color);color:#fff;border-color:var(--error-color);transform:translateY(-1px);box-shadow:0 2px 8px #b32d3a4d}.menu-item.logout .menu-icon{font-size:1.1rem;transition:transform .3s ease}.menu-item.logout:hover .menu-icon{transform:scale(1.1)}.menu-item.logout:disabled{opacity:.7;cursor:not-allowed;transform:none;background:#b32d3a1a;border-color:#b32d3a33}.menu-item.logout:disabled:hover{transform:none;box-shadow:none;background:#b32d3a1a;color:var(--error-color);border-color:#b32d3a33}.menu-item.logout:disabled .menu-icon{transform:none;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.menu-divider{height:1px;background:var(--border-subtle);margin:.5rem 0}.menu-footer{padding:1rem;border-top:1px solid var(--border-subtle);background:var(--surface-subtle)}.upgrade-prompt{font-size:.875rem;color:var(--text-secondary);margin:0;text-align:center}.header-left h1{margin:0;color:var(--text-primary);font-size:clamp(1.2rem,4vw,1.8rem)}.header-right{display:flex;align-items:center;gap:1rem}.auth-button{background-color:var(--accent-primary);color:var(--text-primary);border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.auth-button:hover{background-color:var(--button-accent-hover);color:var(--white)}.forgot-password-form,.reset-password-form{width:100%}.success-message{background:#6fcf9726;border:1px solid rgba(111,207,151,.3);border-radius:12px;padding:2rem;text-align:center;margin:1.5rem 0}.success-icon{font-size:3rem;margin-bottom:1rem}.success-content h3{color:var(--success-color, #6fcf97);margin-bottom:1rem}.success-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}.help-text{font-size:.875rem;color:var(--text-muted);font-style:italic}.form-actions{display:flex;gap:1rem;margin-top:1.5rem}.form-actions button{flex:1}.password-strength{margin-top:.5rem}.strength-bar{width:100%;height:4px;background:var(--border-subtle);border-radius:2px;overflow:hidden;margin-bottom:.25rem}.strength-fill{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:2px}.strength-label{font-size:.75rem;font-weight:500;transition:color .3s ease}.loading-spinner{width:1rem;height:1rem;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin .8s linear infinite}.error-container{text-align:center;padding:2rem}.error-container h2{color:var(--error-color);margin-bottom:1rem}.error-container p{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5}.loading-container{text-align:center;padding:2rem}.loading-container .loading-spinner{width:2rem;height:2rem;border:3px solid var(--accent-primary);border-top:3px solid transparent;margin:0 auto 1rem}:root{--success-color: #6fcf97;--success-bg: rgba(111, 207, 151, .1);--success-border: rgba(111, 207, 151, .3)}@media (max-width: 480px){.auth-modal{padding:1.5rem;margin:1rem}.guest-form{flex-direction:column}.user-menu-dropdown{right:-1rem;min-width:200px}.header-right{flex-wrap:wrap;gap:.5rem}.form-actions{flex-direction:column}.success-message{padding:1.5rem}.success-icon{font-size:2rem}}