:root{--bg: #0f172a;--card: #111827;--muted: #94a3b8;--text: #e5e7eb;--primary: #3b82f6;--primary-hover: #2563eb;--danger: #ef4444;--danger-hover: #dc2626;--success: #22c55e;--border: rgba(255,255,255,.08)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(1000px 600px at 10% 10%,#1f2937 0%,var(--bg) 60%)}.app-container{max-width:900px;margin:0 auto;padding:24px}.auth-page,.home-page{min-height:100vh;display:flex;align-items:center;justify-content:center}.home-container{width:100%;max-width:900px}.auth-container{max-width:420px;margin:8vh auto;padding:28px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,#111827f2,#111827d9);box-shadow:0 20px 60px #00000059;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.auth-title{margin:0 0 18px;font-size:24px;letter-spacing:.2px}.auth-form .input,.auth-container input{display:block;width:100%;margin-bottom:12px;padding:12px 14px;color:var(--text);background:#0b1220;border:1px solid var(--border);border-radius:10px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.auth-form .input:focus,.auth-container input:focus{border-color:#4c82fb66;box-shadow:0 0 0 3px #3b82f640}.auth-container .btn{width:100%}.auth-switch{color:var(--muted);text-align:center}.auth-switch a{color:var(--text)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid var(--border);border-radius:10px;background:#0b1220;color:var(--text);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .02s ease}.btn:hover{border-color:#4c82fb66}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-hover) 100%);border-color:transparent}.btn-primary:hover{background:linear-gradient(180deg,var(--primary-hover) 0%,var(--primary) 100%)}.btn-danger{background:linear-gradient(180deg,var(--danger) 0%,var(--danger-hover) 100%);border-color:transparent}.btn-danger:hover{background:linear-gradient(180deg,var(--danger-hover) 0%,var(--danger) 100%)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:14px}.brand{font-size:26px;margin:0}.welcome{margin-right:12px;color:var(--muted)}.add-comment textarea{width:100%;min-height:96px;padding:12px 14px;margin-bottom:12px;color:var(--text);background:#0b1220;border:1px solid var(--border);border-radius:10px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.add-comment textarea:focus{border-color:#4c82fb66;box-shadow:0 0 0 3px #3b82f640}.add-comment .btn{min-width:160px}.comment-list-container{margin-top:20px}.controls{margin-bottom:15px;display:flex;justify-content:flex-end}.controls select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#0b1220;color:var(--text)}.comment-item{border:1px solid var(--border);padding:16px;margin-bottom:16px;border-radius:14px;background:linear-gradient(180deg,#111827f2,#111827d9);box-shadow:0 12px 40px #00000040}.comment-header{display:flex;justify-content:space-between;color:var(--muted);font-size:.9em;margin-bottom:12px}.username{font-weight:700;color:var(--text)}.comment-content{margin-bottom:14px;white-space:pre-wrap}.comment-actions button{margin-right:10px;padding:6px 12px;border:1px solid var(--border);background:#0b1220;color:var(--text);border-radius:10px;cursor:pointer}.comment-actions button.active{background:#0e1a2d;font-weight:600;color:var(--primary);border-color:#4c82fb66}.pagination{display:flex;justify-content:center;gap:10px;margin-top:20px}.error{color:#f87171;margin-bottom:10px}.replies{margin-top:12px;padding-left:18px;border-left:2px solid var(--border)}.reply-form textarea{width:100%;min-height:80px;padding:10px 12px;margin-bottom:10px;color:var(--text);background:#0b1220;border:1px solid var(--border);border-radius:10px}.reply-list .comment-item{margin-top:10px}.muted{color:var(--muted)}