/* Shared components - does NOT alter existing body backgrounds */
:root{ --radius:16px; --gap:1rem; --shadow:0 10px 25px rgba(0,0,0,.08); }
.container{max-width:1100px;margin:0 auto;padding:1rem;}
.card{background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(6px);
      border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap);}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     border-radius:999px;border:1px solid #ddd;padding:.7rem 1.1rem;
     text-decoration:none;cursor:pointer}
.btn.primary{border-color:transparent;background:#111;color:#fff}
.input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:12px}
.label{font-size:.9rem;color:#333;margin:.2rem 0 .4rem}
.hidden{display:none !important}
.notice{padding:.75rem;border-radius:12px;background:#fff3cd;border:1px solid #ffe69c;margin:.5rem 0}
.success{background:#d1e7dd;border:1px solid #a3cfbb}
.error{background:#f8d7da;border:1px solid #f5c2c7}
.nav{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.badge{display:inline-block;padding:.2rem .55rem;border:1px solid #ddd;border-radius:999px;font-size:.75rem}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid #eee}
hr{border:none;border-top:1px solid #eee;margin:1rem 0}
.small{font-size:.9rem;color:#444}