*{box-sizing:border-box}
:root{--bg:#0d1117;--panel:#0e1420;--ink:#e6edf3;--muted:#93a4b1;--brand1:#2563eb;--brand2:#06b6d4;--accent:linear-gradient(135deg,var(--brand1),var(--brand2));--input:#0b1220;--border:#203042}
:root[data-theme="light"]{--bg:#f6f8fa;--panel:#ffffff;--ink:#0b1220;--muted:#556371;--input:#f0f3f6;--border:#d0d7de}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:ui-serif,Georgia,Cambria,'Times New Roman',Times,serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container{max-width:1120px;margin:0 auto;padding:24px}
.header{background:radial-gradient(1200px 400px at 10% -10%,rgba(37,99,235,.18),transparent),radial-gradient(900px 400px at 90% -20%,rgba(6,182,212,.16),transparent);border:1px solid var(--border);border-radius:20px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:12px;backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:132px;height:36px}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr auto auto auto;gap:10px;align-items:center;width:100%}
@media (max-width:960px){.controls{grid-template-columns:1fr 1fr;width:100%}}
.input,.select,.button{background:var(--input);border:1px solid var(--border);border-radius:14px;padding:10px 12px;color:var(--ink);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,Noto Sans}
.input::placeholder{color:var(--muted)}
.button{font-weight:700;cursor:pointer;transition:box-shadow .2s ease,transform .05s ease}
.button.primary{background:var(--accent);border-color:#274777;color:white}
.button:hover{box-shadow:0 10px 30px rgba(37,99,235,.18)}.button:active{transform:translateY(1px)}
.tagline{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin:10px 0 12px 0;text-align:center}
.topics-row{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:10px;overflow-x:auto;display:flex;gap:10px;scroll-snap-type:x mandatory}
.topics-row .card{min-width:180px;scroll-snap-align:start}
.card{background:var(--input);border:1px solid var(--border);border-radius:16px;padding:12px;cursor:pointer;transition:border-color .15s ease,transform .05s ease,box-shadow .2s ease}
.card:hover{border-color:#274777;box-shadow:0 8px 24px rgba(6,182,212,.12)}.card.active{border-color:#06b6d4;box-shadow:0 10px 28px rgba(6,182,212,.18)}
.card h4{margin:0 0 4px 0;font-size:14px}.card p{margin:0;font-size:12px;color:var(--muted)}
.compose-panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:16px;margin-top:12px}
.feed-panel{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:16px;margin-top:12px}
.feed{display:grid;gap:12px}
.item{background:var(--input);border:1px solid var(--border);border-radius:18px;padding:16px}
.item h3{margin:0 0 10px 0;font-size:18px;letter-spacing:.2px}
.meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--input)}
.hashtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.footer{margin:28px 0 0 0;text-align:center;color:var(--muted);font-size:12px}
.form{display:grid;gap:10px}.textarea{min-height:120px;resize:vertical}
.link{color:#346ae6;text-decoration:none}
hr{border:none;border-top:1px solid var(--border);margin:12px 0}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
.themeToggle{border-radius:999px}
@media (max-width:720px){
  .controls{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(38px,auto)}
  .topics-row .card{min-width:160px}
  .compose-panel .form .input,.compose-panel .form .textarea{font-size:16px}
}