* { box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; }
body { margin: 0; background: #000000; color: #FFFFFF; min-height: 100vh; position: relative; overflow-x: hidden; }
.glow-tr { position: fixed; top: -120px; right: -120px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(255,20,147,0.42), rgba(91,6,51,0.18), transparent 70%); pointer-events: none; }
.glow-bl { position: fixed; bottom: -140px; left: -120px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(205,13,114,0.35), transparent 70%); pointer-events: none; }
.shell-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px; position: relative; z-index: 1; }
.zine-strip { background: #000; border: 2px solid #FF1493; color: #FF1493; font-weight: 900; padding: 10px 14px; text-align: center; letter-spacing: 0.14em; margin-bottom: 16px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; background: #111111; border: 1px solid #9A0957; border-radius: 20px; padding: 20px; }
.agent-medallion { width: 64px; height: 64px; border-radius: 50%; background: #E8DCC8; color: #111111; border: 2px dashed #FF1493; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; flex-shrink: 0; }
.badge { font-size: 11px; letter-spacing: 0.12em; color: #FFB6D9; font-weight: 700; }
h1 { margin: 6px 0; font-size: 28px; color: #FFFFFF; }
.bio { margin: 4px 0 10px; color: #B8B8B8; font-size: 14px; }
.npub { font-size: 11px; color: #FFB6D9; word-break: break-all; }
.circuit-rule { text-align: center; color: #E8DCC8; font-size: 10px; letter-spacing: 0.2em; margin: 18px 0; opacity: 0.85; }
.primary-btn { background: #FF1493; color: #FFFFFF; border: none; border-radius: 14px; padding: 11px 18px; cursor: pointer; font-weight: 800; }
.secondary-btn { background: #000000; color: #FFFFFF; border: 1px solid #CD0D72; border-radius: 14px; padding: 10px 16px; cursor: pointer; font-weight: 700; }
.composer-box { margin: 18px 0; padding: 18px; border-radius: 18px; background: #1A1A1A; border: 1px solid #9A0957; }
.row { display: flex; gap: 10px; }
input { flex: 1; background: #000000; border: 1px solid #5E5E5E; color: #FFFFFF; border-radius: 12px; padding: 10px 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.grid.list-mode { grid-template-columns: 1fr; }
.card { background: #1A1A1A; border: 1px solid #9A0957; border-radius: 18px; padding: 16px; }
.icon-box { width: 42px; height: 42px; border-radius: 10px; background: #5B0633; border: 1px solid #FF1493; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; }
.desc { color: #B8B8B8; font-size: 13px; margin-top: 6px; line-height: 1.45; }
.cta-pill { display: inline-block; margin-top: 10px; background: #CD0D72; color: #FFF; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.status { margin-top: 8px; font-size: 12px; color: #FFB6D9; }
footer { margin-top: 32px; font-size: 12px; color: #5E5E5E; }