:root{--primary-color:#4299e1;--primary-hover:#3182ce;--bg-color:#f4f4f4;--text-color:#333;--container-bg:white;--input-border:#ddd;--post-bg:#f9f9f9;--card-shadow:0 4px 6px #0000001a}.dark-mode{--bg-color:#1a202c;--text-color:#e2e8f0;--container-bg:#2d3748;--input-border:#4a5568;--post-bg:#4a5568;--card-shadow:0 4px 6px #0000004d}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-color);max-width:100vw;color:var(--text-color);font-family:Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.dark-mode-toggle{cursor:pointer;z-index:1000;background:0 0;border:none;padding:5px;font-size:1.5rem;position:absolute;top:10px;right:10px}.container{background-color:var(--container-bg);border-radius:5px;padding:20px;position:relative;box-shadow:0 0 10px #0000001a}.form-group{margin-bottom:15px}label{color:var(--text-color);margin-bottom:5px;display:block}input,textarea{border:1px solid var(--input-border);box-sizing:border-box;background-color:var(--container-bg);width:100%;color:var(--text-color);border-radius:4px;padding:8px}button{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:8px 15px}button:hover{background-color:var(--primary-hover)}.nav-buttons{gap:10px;display:flex}.nav-buttons a{color:#fff;background-color:var(--primary-color);border-radius:4px;padding:8px 15px;text-decoration:none}.nav-buttons a:hover{background-color:var(--primary-hover)}.post{background-color:var(--post-bg);border-radius:4px;margin-bottom:15px;padding:15px}.post-header{justify-content:space-between;margin-bottom:10px;display:flex}.post-actions{gap:10px;display:flex}.post-actions a{color:var(--primary-color);text-decoration:none}.post-actions a:hover{text-decoration:underline}.loading{background:var(--container-bg);width:100%;height:100%;color:var(--text-color);z-index:10;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:absolute;top:0;left:0}.spinner{border:4px solid #ffffff4d;border-top:4px solid var(--text-color);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}