:root { color-scheme: dark; --background: #111113; --surface: #1c1c20; --text: #f4f4f5; --muted: #aaaab5; --line: #3c3c43; --accent: #34d399; }
:root.light { color-scheme: light; --background: #f6f7f9; --surface: #fff; --text: #202127; --muted: #656573; --line: #dedee5; --accent: #087e5b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); font: 16px/1.55 system-ui, sans-serif; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
button { font: inherit; cursor: pointer; }
.container { max-width: 1200px; margin-inline: auto; }
.panel { background: var(--surface); border: 1px solid var(--line); }
.muted { color: var(--muted); }
.price { color: var(--accent); }
.product-card:hover { border-color: var(--accent); }
.product-image { height: 220px; background: white; }
.product-image > img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.product-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.discount { position: absolute; top: .5rem; right: .5rem; padding: .2rem .7rem; border-radius: 2rem; color: white; background: #1478b3; font-size: .8rem; }
.avatar, .avatar-large { object-fit: cover; border-radius: 50%; flex-shrink: 0; width: 42px; height: 42px; }
.avatar-large { width: 100px; height: 100px; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--background); }
.button { display: inline-block; border: 1px solid var(--line); padding: .7rem 1.2rem; border-radius: 2rem; }
.offer-button { background: #dc3545; color: white; font-weight: 700; }
.coupon { border: 1px dashed var(--accent); background: transparent; color: inherit; }
.theme-button { border: 0; background: transparent; color: inherit; font-size: 1.5rem; }
.bio { max-width: 700px; }
.bio-link { background: #34d399; color: #07241a; min-height: 80px; }
.social-icon { background: white; border-radius: 50%; padding: 2px; }
.border-top-1 { border-color: var(--line); }
main a:not(.product-card):not(.bio-link):hover { text-decoration: underline; }