*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0c1a;--surface:#1a1628;--surface2:#221e33;--border:#ffffff12;--accent:#a855f7;--accent2:#7c3aed;--text:#e2d9f3;--muted:#9d8ec4;--radius:16px;--shadow:0 4px 24px #0006}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Segoe UI,system-ui,sans-serif;line-height:1.6}.header{border-bottom:1px solid var(--border);text-align:center;background:linear-gradient(135deg,#1a0533 0%,#0f0c1a 60%);padding:40px 24px}.header-inner{align-items:center;gap:20px;display:inline-flex}.header-icon{background:linear-gradient(135deg, var(--accent), #ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:64px;line-height:1}h1{background:linear-gradient(135deg, #fff 30%, var(--accent));-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,5vw,3rem);font-weight:700}.subtitle{color:var(--muted);margin-top:4px;font-size:1rem}.main{max-width:1200px;margin:0 auto;padding:48px 24px}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:16px;padding:28px 24px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;position:relative;overflow:hidden}.card:before{content:"";pointer-events:none;background:linear-gradient(135deg,#a855f70f,#0000 60%);position:absolute;inset:0}.card:hover{border-color:#a855f74d;transform:translateY(-4px);box-shadow:0 12px 40px #a855f733}.quote-mark{background:linear-gradient(135deg, var(--accent), #ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.5rem;line-height:1;display:block}.quote-text{color:var(--text);flex:1;font-size:1rem;font-style:italic;line-height:1.75}.card-footer{border-top:1px solid var(--border);flex-direction:column;gap:10px;padding-top:12px;display:flex}.quote-author{color:var(--accent);font-size:.875rem;font-style:normal;font-weight:600}.tags{flex-wrap:wrap;gap:6px;display:flex}.tag{color:var(--muted);letter-spacing:.3px;background:#a855f71f;border:1px solid #a855f733;border-radius:50px;padding:3px 10px;font-size:.72rem}.pagination{justify-content:center;align-items:center;gap:16px;margin-top:48px;display:flex}.pagination button{background:var(--surface2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:50px;padding:10px 24px;font-size:.9rem;transition:background .2s,border-color .2s,transform .1s}.pagination button:hover:not(:disabled){background:var(--accent2);border-color:var(--accent);transform:scale(1.04)}.pagination button:disabled{opacity:.35;cursor:not-allowed}.page-info{color:var(--muted);text-align:center;min-width:120px;font-size:.9rem}.state-box{color:var(--muted);flex-direction:column;align-items:center;gap:16px;padding:80px 24px;display:flex}.state-box.error{color:#f87171}.state-box button{background:var(--accent2);color:#fff;cursor:pointer;border:none;border-radius:50px;padding:10px 28px;font-size:.9rem}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);padding:24px;font-size:.85rem}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}@media (width<=480px){.header-inner{flex-direction:column;gap:8px}.grid{grid-template-columns:1fr}}