:root { color-scheme:light; --bg:#f7f8f7; --surface:#fff; --soft:#eef7f3; --hero-bg:linear-gradient(125deg,#fff 0%,#effbf6 63%,#def8ee); --text:#142a2b; --muted:#687779; --accent:#007a78; --accent-dark:#005f5d; --border:#e1e7e5; --shadow:0 8px 24px rgb(20 42 43 / .07); }
:root[data-theme="dark"] { color-scheme:dark; --bg:#101817; --surface:#172321; --soft:#1e302d; --hero-bg:linear-gradient(125deg,#172a28 0%,#193431 63%,#1e403a); --text:#edf8f5; --muted:#a8bbb7; --accent:#37c9c4; --accent-dark:#159f9a; --border:#344846; --shadow:0 8px 24px rgb(0 0 0 / .2); }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --bg:#101817; --surface:#172321; --soft:#1e302d; --hero-bg:linear-gradient(125deg,#172a28 0%,#193431 63%,#1e403a); --text:#edf8f5; --muted:#a8bbb7; --accent:#37c9c4; --accent-dark:#159f9a; --border:#344846; --shadow:0 8px 24px rgb(0 0 0 / .2); } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; }
.site-header, main { width:min(1240px,100%); margin:auto; padding-inline:24px; }
.site-header { min-height:74px; display:flex; direction:ltr; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; direction:rtl; align-items:center; gap:9px; color:var(--text); font-size:1.22rem; font-weight:900; line-height:1; text-decoration:none; white-space:nowrap; }
.brand small { display:block; direction:ltr; margin-top:5px; color:var(--muted); font-size:.53rem; font-weight:700; letter-spacing:.02em; }
.brand-mark { display:grid; width:32px; height:32px; place-items:center; color:#fff; background:var(--accent); border-radius:8px; font-size:1.35rem; transform:rotate(-11deg); }
.site-nav { display:flex; direction:rtl; align-items:center; gap:18px; }
.site-nav a { color:var(--muted); font-size:.9rem; font-weight:700; text-decoration:none; }
.site-nav a { padding:8px 11px; border-radius:8px; }
.site-nav a:first-child { color:#fff; background:var(--accent); }
.theme-toggle, button { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:9px; padding:8px 11px; cursor:pointer; }
.nav-form { margin:0; }
.nav-form button { color:var(--muted); border:0; padding:8px 4px; font:inherit; font-size:.9rem; font-weight:700; }
.auth-card { width:min(480px,100%); margin:48px auto; padding:28px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }
.auth-card h1 { font-size:1.8rem; }
.auth-card > p:not(.eyebrow) { color:var(--muted); line-height:1.7; }
.auth-form { display:grid; gap:10px; margin-top:20px; }
.auth-form label { font-weight:800; }
.auth-form input { width:100%; padding:11px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.auth-form button { border:0; font:inherit; font-weight:800; }
.form-error { color:#b91c1c !important; font-weight:700; }
.favorite-form { margin:0; }
.favorite-button { display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:5px 8px; font-size:1.1rem; font-weight:900; line-height:1; text-decoration:none; }
.favorite-button:hover, .favorite-button.saved { color:#dc2626; border-color:#dc2626; }
.offer-content > .favorite-form, .offer-content > .favorite-button { position:absolute; top:10px; left:10px; z-index:1; }
.offer-content > .favorite-button { width:32px; height:31px; }
.detail-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.detail-heading .category-tag { margin:0; }
.favorites-heading { margin:25px 0; }
.account-danger { margin-top:34px; padding:18px; border:1px solid color-mix(in srgb,#dc2626 35%,var(--border)); border-radius:12px; }
.account-danger h2 { margin:0 0 6px; font-size:1rem; }
.account-danger p { color:var(--muted); font-size:.85rem; }
.account-danger form { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.confirm-delete { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; }
.delete-button { color:#fff; border:0; background:#dc2626; font-weight:800; }
main { padding-block:16px 38px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:center; min-height:220px; overflow:hidden; padding:28px 42px; border:1px solid #e6ede9; border-radius:18px; background:var(--hero-bg); box-shadow:var(--shadow); }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:.8rem; font-weight:800; }
h1 { margin:0; font-size:clamp(2rem,4vw,3.2rem); line-height:1.1; }
h1 span { color:var(--accent); }
.hero > div > p:not(.eyebrow) { max-width:560px; margin:10px 0 18px; color:var(--muted); }
.hero-art { position:relative; height:165px; }
.hero-art span { position:absolute; display:grid; place-items:center; border-radius:20px; box-shadow:var(--shadow); }
.hero-art span:nth-child(1) { inset:18px auto auto 10px; width:96px; height:96px; color:#fff; background:var(--accent); font-size:4rem; font-weight:900; transform:rotate(-12deg); }
.hero-art span:nth-child(2) { right:18px; top:0; font-size:5.2rem; }
.hero-art span:nth-child(3) { right:75px; bottom:-6px; font-size:3.5rem; }
.search { display:flex; direction:rtl; width:min(590px,100%); border-radius:10px; box-shadow:0 4px 12px rgb(20 42 43 / .08); }
.search label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.search input { min-width:0; flex:1; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:0 10px 10px 0; padding:13px 15px; outline:none; }
.search button { border:0; border-radius:10px 0 0 10px; padding-inline:20px; color:#fff; background:var(--accent); font-weight:800; }
.top-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px; }
.top-category { display:grid; min-height:92px; place-items:center; gap:4px; padding:10px 6px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); text-align:center; text-decoration:none; transition:transform .15s ease,border-color .15s ease; }
.top-category:hover { border-color:var(--accent); transform:translateY(-2px); }
.top-category span { font-size:2.05rem; line-height:1; }
.top-category strong { font-size:.8rem; line-height:1.25; }
.all-categories { color:var(--accent); background:var(--soft); }
.all-categories span { font-size:2.25rem; }
.catalog { margin-top:25px; }
.catalog-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:24px; margin-top:25px; }
.catalog-sidebar { position:sticky; top:14px; padding:18px 14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); }
.filters { display:grid; gap:16px; }
.filter-section { padding-bottom:14px; border-bottom:1px solid var(--border); }
.filter-section:last-of-type { border-bottom:0; padding-bottom:0; }
.catalog-sidebar h2 { margin:0 7px 10px; font-size:1.05rem; }
.filter-link { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 8px; color:var(--muted); border-radius:8px; font-size:.88rem; font-weight:650; text-decoration:none; }
.filter-link span { color:var(--muted); font-size:.82rem; }
.filter-link b { color:var(--muted); font-size:.72rem; }
.filter-link:hover, .filter-link.active { color:#fff; background:var(--accent); }
.filter-link.active span, .filter-link.active b { color:#fff; }
.more-categories { margin-top:4px; }
.more-categories summary { display:flex; justify-content:space-between; padding:9px 8px; color:var(--accent); cursor:pointer; font-size:.82rem; font-weight:800; list-style:none; }
.more-categories summary::-webkit-details-marker { display:none; }
.more-categories[open] summary span { transform:rotate(180deg); }
.price-range { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.price-range input { min-width:0; width:100%; padding:8px; font-size:.8rem; }
.filter-option { display:flex; align-items:center; gap:7px; padding:5px 3px; color:var(--muted); font-size:.83rem; cursor:pointer; }
.filter-option input { flex:0 0 auto; width:auto; accent-color:var(--accent); }
.apply-filters, .reset-filters { width:100%; padding:10px; border-radius:8px; font-size:.85rem; font-weight:800; text-align:center; text-decoration:none; }
.apply-filters { color:#fff; border:0; background:var(--accent); }
.reset-filters { color:var(--muted); border:1px solid var(--border); background:var(--surface); }
.catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.catalog-heading h2 { margin:0; font-size:1.4rem; }
.catalog-heading p { margin:4px 0 0; color:var(--muted); font-size:.85rem; }
.browse-categories, .back-link { color:var(--accent); font-size:.86rem; font-weight:800; text-decoration:none; }
.offers { display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr)); gap:14px; }
.offer { display:flex; flex-direction:column; overflow:hidden; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow); transition:transform .15s ease,box-shadow .15s ease; }
.offer:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgb(20 42 43 / .13); }
.offer-image { position:relative; display:block; width:100%; height:180px; padding:0; overflow:hidden; border:0; border-radius:0; background:var(--soft); }
.offer-image img { width:100%; height:100%; object-fit:cover; }
.offer-image-placeholder { display:grid; place-items:center; color:var(--accent); font-size:4rem; font-weight:900; }
.offer-content { position:relative; display:flex; flex:1; flex-direction:column; min-width:0; padding:13px; }
.category-tag { align-self:flex-start; margin-bottom:8px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-radius:999px; padding:4px 8px; font-size:.73rem; font-weight:800; text-decoration:none; }
.discount-badge { position:absolute; top:12px; left:12px; z-index:1; color:#fff; background:#dc2626; border-radius:9px; padding:8px 11px; font-size:1rem; font-weight:900; direction:ltr; box-shadow:0 3px 8px rgb(127 29 29 / .25); }
.offer-title { min-height:2.8em; color:var(--text); font-size:.88rem; font-weight:800; line-height:1.4; text-decoration:none; }
.prices { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:9px; }
.prices strong, .detail-prices strong { color:var(--accent); font-size:1.22rem; }
.prices del, .detail-prices del { color:var(--muted); font-size:.78rem; }
.meta { margin:10px 0 0; color:var(--muted); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:12px; }
.offer-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:6px 8px; border-radius:7px; font-size:.7rem; font-weight:800; text-decoration:none; }
.offer-link { flex:1; color:#fff; background:var(--accent); }
.history-button { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.offer-actions .history-button { display:inline-flex; }
.share-button { color:var(--muted); background:var(--soft); }
.empty { color:var(--muted); }
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:25px; }
.pagination a { color:#fff; background:var(--accent); border-radius:8px; padding:8px 12px; font-weight:800; text-decoration:none; }
.intro { margin-bottom:22px; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:20px; }
.category-card { display:grid; gap:7px; padding:16px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; text-decoration:none; }
.category-card:hover { border-color:var(--accent); }
.category-card strong { display:flex; align-items:center; gap:8px; }
.category-icon { display:grid; width:30px; height:30px; place-items:center; background:var(--soft); border-radius:8px; font-size:1.05rem; }
.category-card span, .category-card small, .muted { color:var(--muted); }
.offer-detail { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); gap:34px; max-width:1000px; margin:25px auto; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }
.offer-detail-media { display:grid; min-height:280px; place-items:center; overflow:hidden; background:var(--soft); border-radius:12px; }
.offer-detail-media img { width:100%; height:100%; object-fit:contain; }
.offer-detail-media span { color:var(--accent); font-size:7rem; font-weight:900; }
.offer-detail-content h1 { margin:12px 0; font-size:clamp(1.5rem,3vw,2.2rem); }
.offer-detail-content > .discount-badge { position:static; display:inline-block; margin:0 0 12px; }
.detail-prices { display:flex; align-items:baseline; gap:10px; margin:13px 0; }
.detail-text { margin:22px 0; white-space:pre-wrap; line-height:1.8; overflow-wrap:anywhere; }
.detail-text a { color:var(--accent); }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.detail-actions a { display:inline-flex; padding:9px 12px; border-radius:8px; font-size:.85rem; font-weight:800; text-decoration:none; }
.image-dialog { max-width:min(90vw,1000px); max-height:90vh; padding:0; border:0; background:transparent; }
.image-dialog::backdrop { background:rgb(0 0 0 / .75); }
.image-dialog img { display:block; max-width:90vw; max-height:90vh; object-fit:contain; }
.image-dialog button { position:absolute; top:8px; right:8px; font-size:1.5rem; line-height:1; }
@media (max-width:800px) { .site-header, main { padding-inline:16px; } .hero { grid-template-columns:1fr 170px; padding:24px; } .hero-art { transform:scale(.78); transform-origin:center left; } .catalog-layout { grid-template-columns:1fr; } .catalog-sidebar { position:static; } }
@media (max-width:800px) { .offer-detail { grid-template-columns:1fr; gap:20px; padding:16px; } .offer-detail-media { min-height:230px; } }
@media (max-width:520px) { .offer-actions { display:grid; grid-template-columns:1fr; } .offer-actions a { width:100%; min-height:32px; font-size:.7rem; } .offer-actions .history-button { display:flex !important; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); } .top-categories { gap:7px; margin-top:12px; } .top-category { min-height:72px; padding:7px 3px; border-radius:9px; } .top-category span { font-size:1.55rem; } .top-category strong { font-size:.63rem; } .site-header { min-height:62px; padding-inline:13px; } .brand { font-size:1rem; } .brand-mark { width:27px; height:27px; font-size:1.1rem; } .site-nav { gap:5px; } .site-nav a { padding:7px 8px; font-size:.7rem; white-space:nowrap; } main { padding:8px 12px 26px; } .hero { grid-template-columns:1fr; min-height:0; padding:21px 17px; } .hero-art { display:none; } h1 { font-size:2.15rem; } .hero > div > p:not(.eyebrow) { font-size:.88rem; } .search input { padding:11px; } .search button { padding-inline:13px; } .catalog-layout { margin-top:16px; gap:15px; } .offers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .offer-image { height:122px; } .offer-expanded .offer-image { height:min(300px,72vw); } .offer-content { padding:10px; } .offer-text { min-height:4.5em; font-size:.78rem; } .category-tag { margin-bottom:6px; font-size:.64rem; } .meta { margin-top:7px; font-size:.62rem; } .offer-actions { gap:4px; padding-top:8px; } .offer-actions a { min-height:27px; padding:5px 6px; font-size:.59rem; } .catalog-heading h2 { font-size:1.15rem; } }