.landing-header{text-align:center;margin-bottom:4rem;max-width:600px}.landing-title{font-size:3rem;margin:0;font-weight:700;background:linear-gradient(to right,#fff,#94a3b8);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.landing-icon{font-size:3rem}.landing-subtitle{color:var(--text-secondary);font-size:1rem;margin:0}.cards-container{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:900px}.landing-card{flex:1 1 350px;min-width:300px;background:var(--bg-card);border-radius:24px;padding:2rem;border:1px solid var(--border);box-shadow:0 4px 24px #0003;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.landing-input{width:100%;padding:.9rem 1rem;margin-bottom:1.2rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:.95rem;outline:none;transition:border-color .2s;box-sizing:border-box}.landing-input:focus{border-color:var(--accent)}.create-room-btn{width:100%;padding:1.5rem;font-size:1.2rem;border-radius:16px;background:var(--accent);color:#fff;box-shadow:0 8px 32px var(--accent-glow);border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.create-room-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px var(--accent-glow)}.create-room-btn.dimmed{opacity:.5;background:var(--bg-secondary);box-shadow:none;color:var(--text-secondary)!important;border:1px solid var(--border)}.create-room-btn.dimmed:hover{opacity:1;background:var(--bg-card);color:var(--text-primary);transform:none;box-shadow:none}.join-form{display:flex;gap:1rem;width:100%}.join-input{flex:2;padding:1.2rem;border-radius:16px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;outline:none;transition:border-color .2s}.join-input:focus{border-color:var(--accent)}.join-btn{border-radius:16px;padding:0 2rem;color:#fff;border:none;font-weight:600;transition:all .2s;cursor:pointer}@media(max-width:600px){.landing-header{margin-bottom:2rem;padding:0 1rem}.landing-title,.landing-icon{font-size:2.2rem}.landing-card{min-width:unset;flex:1 1 100%;padding:1.5rem;border-radius:20px}.join-form{flex-direction:column;gap:.75rem;align-items:center}.join-input{width:100%;padding:1rem;box-sizing:border-box}.join-btn{width:auto;min-width:120px;padding:1rem 2rem}.create-room-btn{padding:1.2rem;font-size:1.1rem}.cards-container{gap:1rem}}.note-modal-overlay{padding:2rem}.note-modal-card{border-radius:var(--radius)}.note-modal-body{padding:2rem;font-size:1.1rem}@media(max-width:600px){.note-modal-overlay{padding:.75rem}.note-modal-body{padding:1.25rem;font-size:1rem}}.room-header{padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,#0f141ef2,#0b0e14e6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;background-clip:padding-box;box-shadow:0 1px #2f54eb33,0 4px 20px #0000004d}.room-nav{display:flex;align-items:center;gap:.5rem;z-index:2}.room-info{position:absolute;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:0 1rem;max-width:40%;z-index:1}.room-info:has(input){z-index:10}.room-actions{display:flex;align-items:center;gap:.75rem;z-index:2}.share-btn{padding:.5rem 1rem;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 4px 16px var(--accent-glow);transition:all .2s}.share-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-glow)}.share-text{display:inline}@media(max-width:600px){.share-text{display:none}.share-btn{padding:.55rem}.room-header{padding:.75rem}.room-actions{gap:.5rem}.room-info input{width:100%!important;max-width:100%;box-sizing:border-box}}:root{--sidebar-width: 280px;--bg-hover: rgba(47, 84, 235, .1);--accent-rgb: 47, 84, 235}.app-layout{display:flex;min-height:100vh}.sidebar-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s}.sidebar-overlay.active{opacity:1;pointer-events:auto}.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--bg-primary);transform:translate(-100%);transition:transform .3s ease;z-index:100;display:flex;flex-direction:column;padding:1.5rem 1rem}.sidebar.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;padding:0 .5rem;margin-bottom:1.5rem}.sidebar-logo{display:flex;align-items:center;gap:12px}.logo-icon{width:44px;height:44px;background:var(--bg-card);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.logo-text{font-size:1.4rem;font-weight:700;color:var(--text-primary)}.sidebar-nav{padding:0 .5rem;margin-bottom:2rem}.create-room-btn{width:100%;padding:1rem;background:var(--accent);color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 20px var(--accent-glow)}.create-room-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-glow)}.create-room-btn span{font-size:1.2rem;font-weight:400}.sidebar-section{flex:1;overflow-y:auto;padding:0 .5rem}.sidebar-section h3{font-size:1rem;color:var(--text-primary);margin:0 0 1rem;font-weight:600}.history-group{margin-bottom:1rem}.group-label{font-size:.75rem;color:var(--text-secondary);margin-bottom:.5rem;padding-left:.25rem}.history-item{display:flex;align-items:center;padding:.9rem 1rem;margin-bottom:.5rem;border-radius:14px;cursor:pointer;background:var(--bg-card);border:1px solid transparent;transition:all .2s ease}.history-item:hover{border-color:#2f54eb66;transform:translate(2px)}.history-item.active{border-color:var(--accent);background:linear-gradient(135deg,rgba(47,84,235,.15) 0%,var(--bg-card) 100%)}.history-item.deleting{background:#ff44441a;border-color:var(--danger)}.room-indicator{width:20px;display:flex;align-items:center;justify-content:flex-start}.active-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent)}.room-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.room-name{font-size:.95rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-time{font-size:.75rem;color:var(--text-secondary)}.room-actions{display:flex;align-items:center;gap:4px}.room-arrow{font-size:1.4rem;color:var(--text-secondary);margin-left:8px}.history-actions{display:flex;gap:2px;opacity:0;transition:opacity .2s}.history-item:hover .history-actions,.history-actions.visible{opacity:1}@media(hover:none){.history-actions{opacity:1}}.btn-mini{padding:6px 8px;font-size:.85rem;background:transparent;color:var(--text-secondary);border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-mini:hover{background:#ffffff1a;color:var(--text-primary)}.btn-mini.danger:hover{background:#f443;color:#f44}.btn-icon-small{background:none;border:none;cursor:pointer;color:var(--accent);font-size:1rem}.edit-box{display:flex;gap:8px;flex:1;align-items:center}.edit-box input{width:100%;padding:6px 10px;border:1px solid var(--accent);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.9rem}.empty-msg{color:var(--text-secondary);font-size:.9rem;padding:2rem 1rem;text-align:center;opacity:.6}:root{--bg-primary: #0b0e14;--bg-secondary: #10141d;--bg-card: #151a25;--text-primary: #ffffff;--text-secondary: #94a3b8;--accent: #2f54eb;--accent-hover: #597ef7;--accent-glow: rgba(47, 84, 235, .5);--danger: #ff4d4d;--border: #1f2937;--font-family: "Inter", system-ui, -apple-system, sans-serif;--radius: 16px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px}body{margin:0;padding:0;background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-md);width:100%;box-sizing:border-box}.btn{background-color:var(--accent);color:var(--bg-primary);border:none;padding:12px 24px;border-radius:var(--radius);font-weight:600;cursor:pointer;transition:all .2s;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.btn-secondary{background-color:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background-color:var(--border)}.input{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);padding:12px 16px;border-radius:var(--radius);font-size:1rem;width:100%;box-sizing:border-box;transition:border-color .2s}.input:focus{outline:none;border-color:var(--accent)}textarea{resize:none!important;scrollbar-width:none;-ms-overflow-style:none}textarea::-webkit-scrollbar{display:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}