:root{--z-footer: 50;--z-navbar: 100;--z-dropdown: 200;--z-popover: 300;--z-overlay: 1000;--z-banner: 1100;--z-lightbox: 3000;--z-modal: 4000;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-pill: 20px;--radius-full: 9999px;--text-xs: .75rem;--text-sm: .85rem;--text-base: .95rem;--text-md: 1rem;--text-lg: 1.05rem;--text-xl: 1.15rem;--text-2xl: 1.3rem;--text-3xl: 1.45rem;--text-4xl: 1.65rem;--transition-fast: .18s;--transition-base: .25s;--transition-slow: .35s;--bg-page: #f6f4ee;--bg-surface: #ffffff;--bg-surface-solid: #ffffff;--bg-surface-hover: #f0ede6;--bg-surface-subtle: #f6f4ee;--bg-input: #ffffff;--bg-unread: rgba(74, 114, 160, .06);--bg-bubble-other: #edeae3;--bg-dragover: rgba(74, 114, 160, .06);--bg-comment: #f2f0ea;--text-primary: #252730;--text-secondary: rgba(37, 39, 48, .72);--text-muted: rgba(37, 39, 48, .38);--text-hint: rgba(37, 39, 48, .25);--text-bio: rgba(37, 39, 48, .65);--border-light: rgba(0, 0, 0, .06);--border-input: rgba(0, 0, 0, .12);--border-button: rgba(0, 0, 0, .15);--border-separator: rgba(0, 0, 0, .06);--border-dashed: rgba(0, 0, 0, .12);--skeleton: rgba(0, 0, 0, .08);--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .25);--typing-dot: rgba(0, 0, 0, .15);--shadow-sm: rgba(0, 0, 0, .04);--shadow: rgba(0, 0, 0, .06);--shadow-md: rgba(0, 0, 0, .08);--shadow-lg: rgba(0, 0, 0, .1);--shadow-xl: rgba(0, 0, 0, .12);--shadow-2xl: rgba(0, 0, 0, .2);--color-primary: #4a72a0;--color-primary-hover: #3d6290;--color-accent: #8a7d42;--color-danger: #b84040;--color-danger-hover: #a03535;--color-success: #4a8a4a;--color-warning: #e08a00}[data-theme=twilight]{--bg-page: #262a3a;--bg-surface: rgba(255, 255, 255, .045);--bg-surface-solid: #282c3c;--bg-surface-hover: rgba(255, 255, 255, .065);--bg-surface-subtle: rgba(255, 255, 255, .03);--bg-input: rgba(255, 255, 255, .06);--bg-unread: rgba(127, 160, 196, .08);--bg-bubble-other: rgba(255, 255, 255, .06);--bg-dragover: rgba(127, 160, 196, .1);--bg-comment: rgba(255, 255, 255, .035);--text-primary: #d8d3c4;--text-secondary: rgba(216, 211, 196, .7);--text-muted: rgba(216, 211, 196, .38);--text-hint: rgba(216, 211, 196, .22);--text-bio: rgba(216, 211, 196, .6);--border-light: rgba(255, 255, 255, .06);--border-input: rgba(255, 255, 255, .1);--border-button: rgba(255, 255, 255, .12);--border-separator: rgba(255, 255, 255, .06);--border-dashed: rgba(255, 255, 255, .1);--skeleton: rgba(255, 255, 255, .06);--scrollbar-thumb: rgba(255, 255, 255, .12);--scrollbar-thumb-hover: rgba(255, 255, 255, .2);--typing-dot: rgba(255, 255, 255, .12);--shadow-sm: rgba(0, 0, 0, .2);--shadow: rgba(0, 0, 0, .25);--shadow-md: rgba(0, 0, 0, .28);--shadow-lg: rgba(0, 0, 0, .32);--shadow-xl: rgba(0, 0, 0, .35);--shadow-2xl: rgba(0, 0, 0, .4);--color-primary: #7fa0c4;--color-primary-hover: #8fb0d4;--color-accent: #c4b86a;--color-danger: #d06060;--color-danger-hover: #e07070;--color-success: #60b060;--color-warning: #e0a030}[data-theme=dark]{--bg-page: #151720;--bg-surface: rgba(255, 255, 255, .03);--bg-surface-solid: #191b24;--bg-surface-hover: rgba(255, 255, 255, .05);--bg-surface-subtle: rgba(255, 255, 255, .02);--bg-input: rgba(255, 255, 255, .04);--bg-unread: rgba(136, 174, 206, .06);--bg-bubble-other: rgba(255, 255, 255, .045);--bg-dragover: rgba(136, 174, 206, .08);--bg-comment: rgba(255, 255, 255, .025);--text-primary: #ddd9ca;--text-secondary: rgba(221, 217, 202, .68);--text-muted: rgba(221, 217, 202, .32);--text-hint: rgba(221, 217, 202, .18);--text-bio: rgba(221, 217, 202, .55);--border-light: rgba(255, 255, 255, .05);--border-input: rgba(255, 255, 255, .08);--border-button: rgba(255, 255, 255, .1);--border-separator: rgba(255, 255, 255, .05);--border-dashed: rgba(255, 255, 255, .08);--skeleton: rgba(255, 255, 255, .04);--scrollbar-thumb: rgba(255, 255, 255, .1);--scrollbar-thumb-hover: rgba(255, 255, 255, .18);--typing-dot: rgba(255, 255, 255, .1);--shadow-sm: rgba(0, 0, 0, .3);--shadow: rgba(0, 0, 0, .35);--shadow-md: rgba(0, 0, 0, .38);--shadow-lg: rgba(0, 0, 0, .42);--shadow-xl: rgba(0, 0, 0, .45);--shadow-2xl: rgba(0, 0, 0, .5);--color-primary: #88aece;--color-primary-hover: #98bede;--color-accent: #d0c470;--color-danger: #d87070;--color-danger-hover: #e88080;--color-success: #70c070;--color-warning: #e8b040}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-page);color:var(--text-primary);line-height:1.6;transition:background-color .3s,color .3s}a{color:inherit;text-decoration:none}button,input,textarea{font-family:inherit}img{max-width:100%;height:auto}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.toast-container{position:fixed;top:72px;right:16px;z-index:var(--z-overlay);display:flex;flex-direction:column;gap:8px}.toast{padding:12px 20px;border-radius:8px;color:#fff;font-size:.9rem;box-shadow:0 4px 12px var(--shadow-xl);animation:slideIn .3s ease-out}.toast.error{background:var(--color-danger)}.toast.success{background:var(--color-success)}.toast.info{background:var(--color-primary)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pressScale{0%{transform:scale(1)}50%{transform:scale(.97)}to{transform:scale(1)}}@keyframes likePulse{0%{transform:scale(1)}30%{transform:scale(1.25)}to{transform:scale(1)}}.btn{cursor:pointer;font-family:inherit;font-size:var(--text-base);font-weight:500;border:none;border-radius:var(--radius-lg);transition:background var(--transition-fast),opacity var(--transition-fast)}.btn:active:not(:disabled){transform:scale(.97)}.btn-primary{padding:8px 20px;background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-primary:disabled{opacity:.5;cursor:default}.btn-secondary{padding:8px 20px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-input)}.btn-secondary:hover{background:var(--bg-surface-hover)}.btn-danger{padding:10px 20px;background:var(--color-danger);color:#fff}.btn-danger:hover{opacity:.9}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:none;border:none;color:var(--text-secondary);padding:4px 8px;border-radius:var(--radius-md)}.btn-ghost:hover{background:var(--bg-surface-hover)}.card{background:var(--bg-surface);padding:1.25rem;border-radius:var(--radius-xl);box-shadow:0 1px 3px var(--shadow)}.card-hoverable{transition:box-shadow var(--transition-base)}.card-hoverable:hover{box-shadow:0 2px 8px var(--shadow-lg)}.empty-state{text-align:center;color:var(--text-muted);padding:3rem;background:var(--bg-surface);border-radius:var(--radius-xl)}.input{width:100%;padding:.75rem;border:1px solid var(--border-input);border-radius:var(--radius-lg);font-family:inherit;font-size:var(--text-lg);outline:none;transition:border-color var(--transition-base);background:var(--bg-surface-solid);color:var(--text-primary)}.input:focus{border-color:var(--color-primary)}.input-pill{border-radius:var(--radius-pill);padding:8px 14px;font-size:var(--text-base)}.skeleton-line{height:14px;background:var(--skeleton);border-radius:var(--radius-sm);animation:pulse 1.5s infinite}.skeleton-avatar{border-radius:var(--radius-full);background:var(--skeleton);animation:pulse 1.5s infinite;flex-shrink:0}.overlay-backdrop{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}.modal-dialog{background:var(--bg-surface-solid);border-radius:var(--radius-xl);padding:1.5rem;max-width:400px;width:90%;box-shadow:0 8px 32px var(--shadow-xl);animation:scaleIn .15s ease-out}.list-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-surface);border-radius:var(--radius-xl);margin-bottom:.5rem;text-decoration:none;color:var(--text-primary);box-shadow:0 1px 3px var(--shadow-sm);transition:box-shadow var(--transition-fast)}.list-item:hover{box-shadow:0 2px 8px var(--shadow-md)}.user-list-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-surface);border-radius:var(--radius-lg);margin-bottom:.5rem;text-decoration:none;color:var(--text-primary);box-shadow:0 1px 2px var(--shadow-sm)}.user-list-item:hover{background:var(--bg-surface-subtle)}.delete-btn-reveal{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:4px;opacity:0;transition:opacity var(--transition-fast)}.delete-btn-reveal:hover{color:var(--color-danger)}.load-more-btn{display:block;width:100%;padding:12px;background:var(--bg-surface);border:1px solid var(--border-input);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-md);color:var(--color-primary);font-weight:500}.load-more-btn:hover{background:var(--bg-surface-subtle)}.load-more-btn:disabled{color:var(--text-muted)}.mention-hovercard{position:fixed;visibility:hidden;z-index:var(--z-popover);background:var(--bg-surface-solid);border:1px solid var(--border-input);border-radius:var(--radius-lg);box-shadow:0 4px 12px var(--shadow-md);padding:var(--space-3);min-width:220px;max-width:300px;animation:fadeIn .15s ease-out}.mention-hovercard-header{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text-primary)}.mention-hovercard-header:hover .mention-hovercard-name{text-decoration:underline}.mention-hovercard-avatar{width:48px;height:48px;border-radius:var(--radius-full);object-fit:cover}.mention-hovercard-name{font-weight:600;font-size:var(--text-sm)}.mention-hovercard-bio{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--text-muted);line-height:1.4}