@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap";:root{--cafe-espresso: #1a1210;--cafe-dark: #2C1810;--cafe-mocha: #4A3228;--cafe-brown: #6B4226;--cafe-latte: #D4A574;--cafe-cream: #F5E6D3;--cafe-foam: #FFFBF5;--cafe-gold: #C9A227;--cafe-gold-light: #E8D48A;--cafe-success: #4CAF50;--cafe-success-light: #81C784;--cafe-warning: #FFB74D;--cafe-warning-light: #FFE082;--cafe-danger: #EF5350;--cafe-danger-light: #EF9A9A;--cafe-info: #42A5F5;--cafe-info-light: #90CAF9;--cafe-gray-100: #f8f9fa;--cafe-gray-200: #e9ecef;--cafe-gray-300: #dee2e6;--cafe-gray-400: #ced4da;--cafe-gray-500: #adb5bd;--cafe-gray-600: #6c757d;--cafe-gray-700: #495057;--cafe-gray-800: #343a40;--cafe-gray-900: #212529;--font-display: "Playfair Display", Georgia, serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;overflow-x:hidden;position:relative}.cafe-demo{font-family:var(--font-body);background:var(--cafe-foam);color:var(--cafe-dark);min-height:100vh;line-height:1.6}.cafe-navbar{position:fixed;top:0;left:0;right:0;height:70px;background:transparent;z-index:1000;transition:background .3s ease,box-shadow .3s ease}.cafe-navbar.scrolled{background:var(--cafe-espresso);box-shadow:var(--shadow-lg)}.cafe-nav-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;justify-content:space-between}.cafe-nav-brand{display:flex;align-items:center;gap:.75rem;color:var(--cafe-cream);text-decoration:none;font-family:var(--font-display);font-size:1.5rem;font-weight:600}.cafe-nav-logo{font-size:1.75rem;color:var(--cafe-latte)}.cafe-nav-toggle{display:none;background:transparent;border:none;color:var(--cafe-cream);font-size:1.75rem;cursor:pointer;padding:.5rem}.cafe-nav-menu{display:flex;align-items:center;gap:2rem}.cafe-nav-links{display:flex;align-items:center;gap:.5rem}.cafe-nav-link{color:#ffffffd9;text-decoration:none;padding:.5rem 1rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;letter-spacing:.5px;transition:all .2s ease}.cafe-nav-link:hover{color:#fff;background:#ffffff1a}.cafe-nav-link.active{color:var(--cafe-gold);background:#c9a2271a}.cafe-nav-user{display:flex;align-items:center;gap:1rem}.cafe-nav-role{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:var(--cafe-brown);color:var(--cafe-cream);border-radius:var(--radius-full);font-size:.8rem;font-weight:500}.nav-role-icon{width:18px;height:18px}.cafe-nav-logout{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:1px solid rgba(255,255,255,.2);color:#ffffffd9;border-radius:var(--radius-md);font-size:.85rem;cursor:pointer;transition:all .2s ease;text-decoration:none}.cafe-nav-logout:hover{background:#ffffff1a;color:#fff}.cafe-nav-login{border-color:#c9a22766;color:var(--cafe-gold-light)}.cafe-nav-login:hover{background:#c9a22726;border-color:var(--cafe-gold);color:var(--cafe-gold-light)}.cafe-nav-register{border-color:#d4a5744d;color:var(--cafe-latte)}.cafe-nav-register:hover{background:#d4a5741a;border-color:var(--cafe-latte)}.cafe-main{min-height:100vh}.cafe-main.with-nav.needs-padding{padding-top:70px}@media(max-width:768px){.cafe-nav-toggle{display:block}.cafe-nav-menu{position:fixed;top:70px;left:0;right:0;background:var(--cafe-espresso);flex-direction:column;padding:1.5rem;gap:1.5rem;transform:translateY(-100%);opacity:0;pointer-events:none;transition:all .3s ease}.cafe-nav-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}.cafe-nav-links{flex-direction:column;width:100%}.cafe-nav-link{width:100%;text-align:center;padding:.75rem 1rem}.cafe-nav-user{flex-direction:column;width:100%}.cafe-nav-logout{width:100%;justify-content:center}}.floating-nav-panel{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;animation:slideInFromLeft .4s ease}.nav-btn{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#2c1810f2;border:1px solid rgba(212,165,116,.4);border-radius:12px;color:var(--cafe-latte);font-family:Inter,Segoe UI,sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 32px #0006,0 0 20px #d4a5741a;overflow:hidden;white-space:nowrap}.nav-btn:hover{background:#d4a57426;border-color:var(--cafe-latte);box-shadow:0 8px 32px #00000080,0 0 30px #d4a57440}.nav-btn:active{transform:scale(.97)}.nav-icon{width:20px;height:20px;min-width:20px;stroke:currentColor;transition:transform .2s ease}.nav-text{transition:all .3s ease;max-width:100px;opacity:1}.back-btn:hover .nav-icon{transform:translate(-4px)}.reset-btn:hover .nav-icon{transform:rotate(-45deg)}.back-btn{border-color:#d4a57466}.reset-btn{border-color:#c9a22766;color:var(--cafe-gold)}.reset-btn:hover{background:#c9a22726;border-color:var(--cafe-gold);box-shadow:0 8px 32px #00000080,0 0 30px #c9a22740}.floating-nav-panel.collapsed .nav-btn{padding:14px}.floating-nav-panel.collapsed .nav-text{max-width:0;opacity:0;padding:0;margin-left:-10px}.floating-nav-panel.collapsed:hover .nav-btn{padding:14px 18px}.floating-nav-panel.collapsed:hover .nav-text{max-width:100px;opacity:1;margin-left:0}@keyframes slideInFromLeft{0%{opacity:0;transform:translateY(-50%) translate(-30px)}to{opacity:1;transform:translateY(-50%) translate(0)}}@media(max-width:768px){.floating-nav-panel{left:10px;gap:6px}.nav-btn{padding:12px 14px}.nav-icon{width:22px;height:22px;min-width:22px}.floating-nav-panel.collapsed .nav-btn{padding:12px}}@media(max-width:480px){.floating-nav-panel{left:50%;top:auto;bottom:20px;transform:translate(-50%);flex-direction:row}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-50%) translateY(30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}}