* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font: 15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 52px 0 88px; }
.top { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--bg-elevated) 86%, transparent); backdrop-filter: blur(18px); }
.top-inner { width: min(1240px, calc(100% - 40px)); min-height: 74px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.brand-mark { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, #65b7ff), var(--accent)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent); }
.brand-mark-image { overflow: hidden; padding: 4px; background: var(--surface-solid); }
.brand-mark-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-logo-set { display: inline-flex; align-items: center; max-width: 210px; height: 46px; }
.brand-logo { display: block; max-width: 210px; max-height: 46px; width: auto; height: auto; object-fit: contain; }
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }
.brand:has(.brand-logo-set) > span:not(.brand-logo-set), .admin-brand:has(.brand-logo-set) > span:not(.brand-logo-set), .brand-preview:has(.brand-logo-set) > div { display: none; }
.top nav { display: flex; align-items: center; gap: 5px; }
.top nav > a { color: var(--text-soft); padding: 10px 13px; border-radius: 10px; font-weight: 650; transition: .2s ease; }
.top nav > a:hover { color: var(--text); background: var(--surface-soft); }
.top .nav-cta { color: #fff; background: var(--accent); padding-inline: 17px; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
.top .nav-cta:hover { color: #fff; background: color-mix(in srgb, var(--accent) 88%, #000); }
.nav-tools { display: flex; align-items: center; gap: 3px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); }
.lang-link { min-width: 32px; padding: 7px 6px !important; text-align: center; border-radius: 8px !important; font-size: 12px; }
.lang-link.active { color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.theme-toggle, .mobile-menu { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-solid); cursor: pointer; transition: .2s ease; }
.theme-toggle:hover, .mobile-menu:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.mobile-menu { display: none; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.035em; }
h1 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 18px; }
h2 { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 14px; }
h3 { font-size: 19px; margin-bottom: 10px; }
p { color: var(--text-soft); }
.muted, .subtitle, .form-note { color: var(--text-soft); }
.eyebrow, .hero-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.badge { display: inline-flex; align-items: center; width: max-content; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-solid)); font-size: 11px; line-height: 1.4; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.card { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.button, button:not(.theme-toggle):not(.mobile-menu):not(.modal-x):not(.announcement-close):not(.icon-btn):not(.admin-menu-button):not([data-admin-menu-close]) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--accent); border-radius: 11px; color: #fff; background: var(--accent); appearance: none; opacity: 1; visibility: visible; font-weight: 780; cursor: pointer; transition: .2s ease; }
.button:hover, button:not(.theme-toggle):not(.mobile-menu):not(.modal-x):not(.announcement-close):not(.icon-btn):not(.admin-menu-button):not([data-admin-menu-close]):hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 88%, #000); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent); }
.button.secondary, button.secondary { color: var(--text); border-color: var(--line); background: var(--surface-solid); box-shadow: none; }
.button.secondary:hover, button.secondary:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid)); }
button.danger, .danger { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 28%, var(--line)) !important; background: var(--danger-soft) !important; box-shadow: none !important; }
button:disabled { opacity: .6; cursor: wait; transform: none !important; }

label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--text); font-weight: 700; font-size: 13px; }
label small { color: var(--text-faint); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; outline: none; color: var(--text); background: var(--surface-solid); transition: border-color .2s, box-shadow .2s, background .2s; }
textarea { min-height: 128px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent); }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--accent); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.row, .section-head, .page-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-head { margin-bottom: 22px; }
.section-head h2, .section-head h3, .page-title h1 { margin-bottom: 4px; }
.section-head p, .section-head small, .page-title p { margin: 0; color: var(--text-soft); }
.page-title { align-items: flex-end; margin-bottom: 30px; }
.page-title h1 { font-size: clamp(32px, 4vw, 46px); }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px; color: var(--text-soft); font-weight: 700; }
.back-link:hover { color: var(--accent); }

.hero { position: relative; min-height: 610px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 62px; margin-top: -52px; margin-inline: calc((100vw - min(1180px, calc(100vw - 40px))) / -2); padding: 86px max(20px, calc((100vw - 1180px) / 2)) 78px; overflow: hidden; background: radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30%), linear-gradient(135deg, var(--hero-start), var(--hero-end)); border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, #000, transparent 78%); }
.hero-content, .hero-visual { position: relative; z-index: 1; }
.hero h1 { max-width: 760px; color: var(--text); }
.hero h1::after { content: "."; color: var(--accent); }
.hero-content > p { max-width: 660px; font-size: 19px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 40px; }
.hero-actions .button { min-height: 52px; padding-inline: 24px; }
.hero-proof { display: flex; gap: 34px; }
.hero-proof div { display: grid; }
.hero-proof strong { font-size: 20px; }
.hero-proof span { color: var(--text-soft); font-size: 12px; }
.hero-visual { min-height: 440px; display: grid; place-items: center; }
.visual-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 24%, transparent); filter: blur(70px); }
.dashboard-preview { position: relative; width: min(480px, 100%); padding: 22px; transform: perspective(900px) rotateY(-4deg) rotateX(2deg); box-shadow: var(--shadow-lg); }
.preview-head { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: 12px; font-weight: 750; }
.preview-dots { color: var(--line-strong); letter-spacing: 4px; }
.preview-balance { position: relative; margin: 20px 0; padding: 22px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 75%, #193b74), color-mix(in srgb, var(--accent) 55%, #0d213f)); overflow: hidden; }
.preview-balance::after { content: ""; position: absolute; width: 150px; height: 150px; right: -40px; top: -70px; border: 26px solid rgba(255,255,255,.08); border-radius: 50%; }
.preview-balance small, .preview-balance strong { display: block; color: #fff; }
.preview-balance strong { margin-top: 6px; font-size: 30px; letter-spacing: -.04em; }
.preview-balance span { position: absolute; right: 20px; bottom: 22px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.14); font-size: 11px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.preview-grid span { display: grid; gap: 3px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--text-soft); font-size: 11px; }
.preview-grid b { color: var(--text); font-size: 23px; }
.preview-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.preview-row i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-style: normal; }
.preview-row span { display: grid; }
.preview-row small { color: var(--text-soft); }
.preview-row em { color: var(--success); font-style: normal; }

.benefit-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: -1px 0 88px; border: 1px solid var(--line); border-radius: 0 0 20px 20px; background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.benefit-strip > div { display: grid; grid-template-columns: 46px 1fr; align-items: center; column-gap: 13px; padding: 24px 28px; border-right: 1px solid var(--line); }
.benefit-strip > div:last-child { border-right: 0; }
.benefit-strip span { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.benefit-strip small { color: var(--text-soft); }
.featured-section { padding: 18px 0 60px; }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.product { min-height: 290px; display: flex; flex-direction: column; padding: 25px; transition: .25s ease; }
.product:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-md); }
.product-card-top { min-height: 54px; display: flex; align-items: flex-start; justify-content: space-between; }
.product-symbol, .metric-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-soft)); font-size: 20px; }
.product h2 { margin: 22px 0 10px; font-size: 22px; }
.product > p { flex: 1; }
.product-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-card-foot > div { display: grid; }
.product-card-foot small { color: var(--text-faint); font-size: 11px; }
.product-card-foot strong { font-size: 19px; }
.product-card-foot a:not(.button) { color: var(--accent); font-weight: 800; }
.catalog-head { max-width: 740px; margin: 16px 0 50px; }
.catalog-head p { font-size: 18px; }
.product-category-line { display: block; margin: 8px 0 12px; color: var(--text-faint); font-size: 11px; }
.products.layout-horizontal, .products.layout-compact { grid-template-columns: 1fr; }
.product-horizontal { min-height: 154px; display: grid; grid-template-columns: minmax(210px,.75fr) minmax(520px,2fr) auto; align-items: center; gap: 24px; padding: 26px; }
.product-horizontal:hover, .product-compact:hover { transform: translateY(-2px); }
.horizontal-main { position: relative; display: grid; gap: 4px; }.horizontal-main h2 { margin: 4px 0; font-size: 19px; }.horizontal-main > strong { color: var(--accent); font-size: 25px; }.horizontal-main .badge { margin-bottom: 3px; }
.horizontal-specs { display: grid; grid-template-columns: repeat(5,minmax(90px,1fr)); gap: 10px; }.product-spec { min-height: 96px; display: grid; place-items: center; align-content: center; padding: 11px 8px; border-radius: 14px; text-align: center; background: var(--surface-soft); }.product-spec i { color: var(--accent); font-size: 18px; font-style: normal; }.product-spec b { font-size: 12px; }.product-spec small { color: var(--text-faint); font-size: 10px; }
.product-compact { min-height: 170px; display: grid; grid-template-columns: 180px minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 18px; }.compact-cover { width: 180px; height: 132px; overflow: hidden; border-radius: 14px; object-fit: cover; background: var(--surface-soft); }.compact-cover img { width:100%;height:100%;object-fit:cover; }.compact-placeholder { display:grid;place-items:center;font-size:34px; }.compact-copy { position: relative; min-width:0; }.compact-copy h2 { margin:6px 0;font-size:21px; }.compact-copy p { margin:0; }.compact-action { display:grid;justify-items:end;gap:5px;min-width:145px; }.compact-action small { color:var(--text-faint); }.compact-action strong { color:var(--accent);font-size:22px; }
.product-tools { display: inline-flex; gap: 5px; margin-left: auto; }.product-tool { width: 32px !important; height: 32px !important; min-height:32px !important; padding:0 !important; border-color:var(--line) !important; color:var(--text-soft) !important; background:var(--surface-solid) !important; box-shadow:none !important; }.product-tool.active { color:#fff !important;background:var(--accent) !important;border-color:var(--accent) !important; }.horizontal-main .product-tools,.compact-copy .product-tools{position:absolute;right:0;top:0}
.product-tabs { margin-top: 12px; }.product-tab-buttons { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding:7px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft); }.product-tab-buttons button { min-height:38px !important;padding:7px 16px !important;border-color:transparent !important;color:var(--text-soft) !important;background:transparent !important;box-shadow:none !important; }.product-tab-buttons button.active { color:#fff !important;background:var(--accent) !important; }.product-tab-panel { display:none; }.product-tab-panel.active { display:block;animation:tab-in .25s ease both; }@keyframes tab-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
.home-category-strip { margin: 0 0 42px; padding-top: 8px; }.home-category-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:13px; }.home-category-item,.category-glow-card { position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--category-color) 32%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--category-color) 12%,var(--surface-solid)),var(--surface-solid));box-shadow:0 12px 35px color-mix(in srgb,var(--category-color) 9%,transparent); }.home-category-item::before,.category-glow-card::before,.category-hero::before{content:"";position:absolute;z-index:-1;width:150px;height:150px;border-radius:50%;background:var(--category-color);filter:blur(65px);opacity:.24;}.home-category-item.is-animated::before,.category-glow-card.is-animated::before,.category-hero.is-animated::before{animation:category-glow 5s ease-in-out infinite alternate;}@keyframes category-glow{from{transform:translate(-30%,-20%) scale(.8)}to{transform:translate(140%,50%) scale(1.3)}}
.home-category-strip + .hero { margin-top: 0; }
.home-category-item { display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:18px;border-radius:16px; }.home-category-item>span{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--category-color) 14%,var(--surface-soft));font-size:22px}.home-category-item small{color:var(--category-color);font-size:20px}
.category-showcase{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.category-glow-card{display:flex;gap:20px;min-height:190px;padding:28px;border-radius:22px}.category-glow-card>span{font-size:38px}.category-glow-card h2{margin:0 0 8px}.category-glow-card p{margin-bottom:12px}.category-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:24px;margin-bottom:35px;padding:38px;border:1px solid color-mix(in srgb,var(--category-color) 32%,var(--line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--category-color) 14%,var(--surface-solid)),var(--surface-solid))}.category-hero>span{font-size:50px}.category-hero h1{margin:3px 0 8px}.category-hero p{margin:0}.catalog-search{max-width:520px;display:flex;align-items:center;grid-template-columns:auto 1fr;gap:9px;margin-top:20px;padding-left:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-solid)}.catalog-search input{border:0;box-shadow:none!important}
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:34px 0}.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-solid)}.pagination a.active{color:#fff;border-color:var(--accent);background:var(--accent)}
.footer-category-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 15px}.footer-category-links a:hover{color:var(--accent)}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.blog-card{overflow:hidden}.blog-card>a{display:block;aspect-ratio:16/8;overflow:hidden}.blog-card img{width:100%;height:100%;object-fit:cover;transition:.3s}.blog-card:hover img{transform:scale(1.03)}.blog-card>div{padding:24px}.blog-card h2{margin:12px 0 8px;font-size:25px}.blog-detail-cover{width:100%;max-height:520px;object-fit:cover;margin-bottom:20px;border-radius:22px}.recent-products{margin-top:65px}.recent-product-card{min-height:120px}.compare-tray{position:fixed;left:50%;bottom:18px;z-index:150;width:min(780px,calc(100% - 28px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface-solid) 94%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(14px);transform:translateX(-50%)}.compare-tray[hidden]{display:none}.compare-tray>div{display:flex;gap:8px;overflow:auto}.compare-tray a{display:grid;min-width:145px;padding:7px 10px;border-radius:9px;background:var(--surface-soft)}.compare-tray small{color:var(--accent)}.compare-tray button{min-height:36px!important;padding:6px 10px!important}.quick-view-image{width:100%;max-height:270px;object-fit:cover;margin-bottom:18px;border-radius:14px}.quick-view-price{display:block;margin:10px 0 18px;color:var(--accent);font-size:25px}
.cta-section { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 82px; padding: 42px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 24px; background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 10%, var(--surface-solid)), var(--surface-solid)); box-shadow: var(--shadow-md); }
.cta-section h2 { max-width: 650px; }
.cta-section p { margin-bottom: 0; }

.auth-shell { min-height: 650px; display: grid; grid-template-columns: 1fr minmax(380px, 480px); align-items: center; gap: 80px; }
.auth-copy h1 { font-size: clamp(38px, 5vw, 58px); }
.auth-copy > p { max-width: 630px; font-size: 18px; }
.trust-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.trust-list span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: var(--surface-solid); font-size: 12px; }
.auth-card { padding: 30px; box-shadow: var(--shadow-md); }
.auth-card h2 { margin: 14px 0 24px; }
.auth-card button { width: 100%; margin-top: 4px; }
.form-note { margin: 18px 0 0; text-align: center; font-size: 13px; }

.panel-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 34px; align-items: start; }
.sidebar { position: sticky; top: 100px; padding: 19px; border-radius: 22px; color: var(--sidebar-text); background: var(--sidebar-bg); box-shadow: var(--shadow-md); }
.sidebar-user { display: flex; align-items: center; gap: 12px; padding: 7px 5px 18px; }
.sidebar-user .avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--accent); font-weight: 800; }
.sidebar-user h3 { margin: 0; color: #fff; font-size: 15px; }
.sidebar-user small { color: #879bb8; }
.balance-card { display: grid; gap: 4px; margin-bottom: 13px; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.05); }
.balance-card small { color: #8fa2bd; }
.balance-card strong { color: #fff; font-size: 20px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; color: #aabbd2; font-weight: 650; transition: .2s; }
.sidebar nav a span { width: 21px; color: #7890ae; text-align: center; }
.menu-count { min-width: 23px; height: 23px; display: inline-grid; place-items: center; margin-left: auto; padding: 0 7px; border-radius: 999px; color: #fff; background: var(--accent); font-size: 11px; line-height: 1; font-style: normal; font-weight: 850; box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 28%, transparent); }
.sidebar nav a:hover, .sidebar nav a.active { color: #fff; background: rgba(255,255,255,.08); }
.sidebar nav a.active span { color: #6ab2ff; }
.content { min-width: 0; }
.content .page-title h1 { font-size: 40px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metric { min-height: 112px; display: flex; align-items: center; gap: 15px; padding: 20px; }
.metric > div { display: grid; gap: 3px; }
.metric small { color: var(--text-soft); }
.metric strong { font-size: 24px; line-height: 1.2; }
.dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.action-card { display: flex; align-items: center; gap: 15px; padding: 21px; }
.action-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 20px; }
.action-card div { display: grid; }
.action-card small { color: var(--text-soft); }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-card { padding: 24px; }
.service-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.service-card h3 { margin: 18px 0 6px; font-size: 22px; }
.service-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0; padding: 16px; border-radius: 13px; background: var(--surface-soft); }
.service-card dl div { display: grid; gap: 2px; }
.service-card dt { color: var(--text-faint); font-size: 11px; }
.service-card dd { margin: 0; font-size: 12px; font-weight: 700; }
.download-button { width: 100%; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: max-content; padding: 5px 9px; border-radius: 999px; font-size: 11px; line-height: 1.35; font-weight: 800; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active, .status-approved, .status-success, .status-answered { color: var(--success); background: var(--success-soft); }
.status-pending, .status-open, .status-warning { color: var(--warning); background: var(--warning-soft); }
.status-rejected, .status-cancelled, .status-expired, .status-error, .status-closed { color: var(--danger); background: var(--danger-soft); }
.status-info { color: var(--accent); background: var(--info-soft); }

.order-list, .notification-list { display: grid; gap: 13px; }
.order-card { padding: 20px; }
.order-card, .order-main, .order-meta { display: flex; align-items: center; gap: 15px; }
.order-card { justify-content: space-between; flex-wrap: wrap; }
.order-main { min-width: 280px; }
.order-main h3, .order-main p { margin: 0; }
.order-main p { margin-top: 4px; font-size: 12px; }
.order-id { min-width: 52px; padding: 8px 10px; border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 850; text-align: center; }
.order-meta strong { font-size: 17px; }
.order-fields { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
.order-fields summary { color: var(--accent); font-weight: 750; cursor: pointer; }
.order-fields dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.order-fields dl div { padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); }
.order-fields dt { color: var(--text-faint); font-size: 11px; }
.order-fields dd { margin: 2px 0 0; font-weight: 700; }
.notification { display: flex; gap: 14px; padding: 20px; }
.notification-dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.notification h3, .notification p { margin-bottom: 5px; }
.notification small { color: var(--text-faint); }

.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-card, .methods-card, .transaction-card { padding: 25px; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span { display: grid; place-items: center; width: 46px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 11px 0 0 11px; color: var(--text-soft); background: var(--surface-soft); }
.input-prefix input { border-radius: 0 11px 11px 0; }
.payment-method { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.payment-method:last-child { border-bottom: 0; }
.method-icon, .transaction-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 850; }
.payment-method p { margin: 3px 0 0; font-size: 12px; }
.transaction-card { grid-column: 1 / -1; margin-top: 20px; }
.transaction-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line); }
.transaction-row div { display: grid; }
.transaction-row small { color: var(--text-faint); }
.transaction-icon.positive { color: var(--success); background: var(--success-soft); }
.transaction-icon.negative { color: var(--danger); background: var(--danger-soft); }

.support-dashboard { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap: 20px; align-items: start; }
.ticket-create { position: sticky; top: 100px; padding: 25px; }
.ticket-create-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 15px; color: #fff; background: var(--accent); font-size: 22px; box-shadow: 0 12px 25px color-mix(in srgb, var(--accent) 22%, transparent); }
.ticket-inbox { min-width: 0; }
.ticket-list { display: grid; gap: 10px; }
.ticket-item { display: grid; grid-template-columns: 9px 1fr auto auto; align-items: center; gap: 13px; padding: 18px; transition: .2s ease; }
.ticket-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateX(3px); }
.ticket-item > div { display: grid; }
.ticket-item small { color: var(--text-faint); }
.ticket-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.ticket-status-dot.status-open { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.ticket-status-dot.status-answered { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.ticket-status-dot.status-closed { background: var(--text-faint); }
.ticket-arrow { color: var(--text-faint); font-size: 23px; }

.conversation-page { max-width: 920px; margin: auto; }
.conversation-head { margin-bottom: 24px; }
.conversation-head h1 { margin-top: 12px; font-size: 35px; }
.ticket-chat { display: grid; gap: 18px; min-height: 240px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface-soft) 68%, transparent); }
.message { display: flex; align-items: flex-end; gap: 11px; max-width: 82%; }
.message.admin { justify-self: start; }
.message.me { justify-self: end; flex-direction: row-reverse; }
.message-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: var(--accent); font-weight: 800; }
.message.me .message-avatar { color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); }
.message-bubble { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.message.me .message-bubble { color: #fff; border-color: var(--accent); border-radius: 16px 16px 4px 16px; background: var(--accent); }
.message-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 7px; font-size: 11px; }
.message-meta time { color: var(--text-faint); }
.message.me .message-meta time { color: rgba(255,255,255,.7); }
.message-bubble p { margin: 0; color: inherit; }
.reply-box { margin-top: 16px; padding: 20px; }
.reply-box textarea { min-height: 95px; }
.closed-note { margin-top: 16px; padding: 18px; color: var(--text-soft); text-align: center; }

.product-detail { max-width: 1120px; margin: auto; }
.product-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(370px, .75fr); gap: 58px; align-items: start; }
.product-copy { padding: 25px 0; }
.product-copy .badge { margin-bottom: 16px; }
.product-copy h1 { font-size: clamp(42px, 6vw, 66px); }
.product-lead { font-size: 20px; }
.product-description { margin: 26px 0; color: var(--text-soft); font-size: 16px; }
.product-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; }
.product-trust span { padding: 8px 11px; border-radius: 9px; color: var(--success); background: var(--success-soft); font-size: 12px; font-weight: 700; }
.free-content-notice { max-width: 1120px; display: flex; gap: 13px; margin: 22px auto 0; padding: 17px 19px; border: 1px solid color-mix(in srgb,var(--warning) 32%,var(--line)); border-radius: 15px; background: color-mix(in srgb,var(--warning) 8%,var(--surface-solid)); }
.free-content-notice > span { font-size: 24px; }.free-content-notice b { display: block; margin-bottom: 5px; }.free-content-notice p { margin: 0; font-size: 13px; line-height: 1.65; }
.payment-context-note { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: var(--surface-soft); font-size: 12px; line-height: 1.55; }
.checkout-card { position: sticky; top: 100px; padding: 25px; box-shadow: var(--shadow-md); }
.checkout-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: 12px; font-weight: 750; }
.checkout-head small { color: var(--success); }
.plan-list { display: grid; gap: 9px; margin-bottom: 20px; }
.plan { margin: 0; cursor: pointer; }
.plan > input { position: absolute; opacity: 0; pointer-events: none; }
.plan-body { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-solid); transition: .2s; }
.plan-body > span { display: grid; }
.plan-body small { color: var(--text-soft); }
.plan-body strong { font-size: 17px; }
.plan input:checked + .plan-body { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-solid)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 9%, transparent); }
.custom-fields { margin-top: 22px; }
.form-divider { position: relative; margin: 25px 0 20px; text-align: center; }
.form-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.form-divider span { position: relative; padding: 0 10px; color: var(--text-faint); background: var(--surface-solid); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.required { color: var(--danger); }
.purchase-button { width: 100%; justify-content: space-between !important; margin-top: 5px; }
.checkout-note { margin: 13px 0 0; color: var(--text-faint); font-size: 11px; text-align: center; }

.empty-state { grid-column: 1 / -1; padding: 46px 24px; text-align: center; }
.empty-state > span { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 17px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 22px; }
.empty-state p { margin-bottom: 20px; }

.flash { margin-bottom: 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; font-weight: 650; }
.flash.success { color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, var(--line)); background: var(--success-soft); }
.flash.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); background: var(--danger-soft); }
.announcement-bar { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 9px 44px; color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 84%, #102443), var(--accent)); font-size: 13px; }
.announcement-bar > div { display: flex; gap: 9px; }
.announcement-action { padding: 4px 10px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.14); font-weight: 800; }
.announcement-close { position: absolute; right: 15px; border: 0; color: #fff; background: transparent; font-size: 22px; cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 20px; }
.modal.show { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,10,22,.68); backdrop-filter: blur(8px); }
.modal-dialog { position: relative; z-index: 1; width: min(470px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 30px; border: 1px solid var(--line); border-radius: 22px; color: var(--text); background: var(--surface-solid); box-shadow: var(--shadow-lg); }
.modal-x { position: absolute; right: 15px; top: 13px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: var(--surface-soft); cursor: pointer; }
.modal-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 15px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 22px; }
.modal-icon.warn { color: var(--warning); background: var(--warning-soft); }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-balance-details { display: grid; gap: 8px; margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--surface-soft); }
.modal-balance-details div { display: flex; justify-content: space-between; gap: 20px; }
.modal-balance-details span { color: var(--text-soft); }
.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: grid; gap: 10px; width: min(380px, calc(100% - 44px)); }
.toast { padding: 13px 15px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; color: var(--text); background: var(--surface-solid); box-shadow: var(--shadow-md); animation: toast-in .25s ease both; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

footer { border-top: 1px solid var(--line); background: var(--surface-solid); }
.footer-inner { width: min(1180px, calc(100% - 40px)); min-height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text-soft); font-size: 12px; }

.product-cover { display: block; margin: -25px -25px 18px; overflow: hidden; border-radius: 17px 17px 0 0; aspect-ratio: 16/9; background: var(--surface-soft); }
.product-cover img, .product-cover-detail { width: 100%; height: 100%; object-fit: cover; }
.product-cover img { transition: transform .35s ease; }
.product:hover .product-cover img { transform: scale(1.035); }
.product-cover-detail { max-height: 430px; margin-bottom: 26px; border-radius: 20px; box-shadow: var(--shadow-md); aspect-ratio: 16/9; }
.rich-content { overflow-wrap: anywhere; line-height: 1.75; }
.rich-content h2, .rich-content h3, .rich-content h4 { margin: 1.3em 0 .55em; line-height: 1.25; }
.rich-content ul, .rich-content ol { margin: .8em 0; padding-left: 1.6em; }
.rich-content blockquote { margin: 1em 0; padding: 10px 18px; border-left: 4px solid var(--accent); background: var(--surface-soft); }
.rich-content img { display: block; max-width: 100%; height: auto; margin: 18px auto; border-radius: 14px; }
.rich-content img.align-left { margin-left: 0; margin-right: auto; }.rich-content img.align-center { margin-inline: auto; }.rich-content img.align-right { margin-left: auto; margin-right: 0; }
.rich-content img.img-w-25 { width: 25%; }.rich-content img.img-w-50 { width: 50%; }.rich-content img.img-w-75 { width: 75%; }.rich-content img.img-w-100 { width: 100%; }
.rich-content pre { overflow: auto; padding: 15px; border-radius: 12px; background: var(--surface-soft); }
.rich-content table { width: 100%; border-collapse: collapse; overflow: auto; }
.rich-content th, .rich-content td { padding: 9px 11px; border: 1px solid var(--line); }
.rich-content .align-center { text-align: center; } .rich-content .align-right { text-align: right; } .rich-content .align-justify { text-align: justify; }
.coupon-apply-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 7px; }
.coupon-feedback { display: block; min-height: 18px; margin: 6px 0 12px; color: var(--text-soft); }
.coupon-feedback.success { color: var(--success); } .coupon-feedback.error { color: var(--danger); }
.checkout-totals { display: grid; gap: 9px; margin: 18px 0; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.checkout-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.checkout-totals small { color: var(--text-faint); }.checkout-total-final { padding-top: 10px; border-top: 1px solid var(--line); }.checkout-total-final strong { color: var(--accent); font-size: 21px; }
.online-payment-fields { display: grid; gap: 12px; margin: 8px 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.payment-page { width: min(900px, 100%); margin: 35px auto; padding: 28px; }.paytr-frame { width: 100%; min-height: 720px; border: 0; border-radius: 14px; background: #fff; }.payment-result { padding: 25px; border-radius: 15px; }.payment-result.success { background: var(--success-soft); }.payment-result.error { background: var(--danger-soft); }
.static-page { width: min(980px, 100%); margin: 22px auto 70px; }.static-page-head { margin-bottom: 25px; }.static-page-head h1 { font-size: clamp(36px,5vw,58px); }.static-page-content { padding: clamp(22px,4vw,48px); }
.contact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 18px 0; }.contact-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; }.contact-item > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 11px; color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,transparent); font-weight: 800; }.contact-item p { margin: 4px 0 0; color: var(--text-soft); }.support-cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; padding: 25px; }
.hero-slider { position: relative; overflow: visible; }
.hero-slider .hero-slides { position: relative; min-height: 530px; padding: clamp(30px,4vw,52px); overflow: hidden; border-radius: 28px; background: linear-gradient(145deg,var(--surface-solid),color-mix(in srgb,var(--accent) 7%,var(--surface-solid))); box-shadow: var(--shadow-lg); isolation: isolate; }
.hero-slider .hero-slides::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -100px; border-radius: 50%; background: color-mix(in srgb,var(--accent) 18%,transparent); filter: blur(8px); z-index: -1; }
.hero-slide { display: none; min-height: 430px; animation: hero-slide-in .45s ease both; }
.hero-slide.active { display: flex; align-items: center; }
.hero-slider .hero-content { position: relative; z-index: 2; width: 100%; }
.hero-card-image { position: absolute; right: -8%; bottom: -10%; z-index: 0; width: 58%; max-height: 70%; object-fit: cover; border-radius: 24px; opacity: .12; filter: saturate(.85); pointer-events: none; -webkit-mask-image: linear-gradient(135deg,transparent 2%,#000 55%); mask-image: linear-gradient(135deg,transparent 2%,#000 55%); }
.hero-slider-nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-slider-nav > button { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.hero-slider-dots { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 7px; transform: translateX(-50%); pointer-events: auto; }
.hero-slider-dots button { width: 9px; height: 9px; min-height: 9px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb,var(--text) 25%,transparent); }
.hero-slider-dots button.active { width: 26px; background: var(--accent); }
@keyframes hero-slide-in{from{opacity:.2;transform:translateX(16px)}to{opacity:1;transform:none}}

/* Slider controls: keep arrows and dots independent from the global button skin. */
.hero-slider .hero-slider-nav > button { position: absolute; top: 50%; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; border: 1px solid color-mix(in srgb,var(--line) 72%,transparent) !important; border-radius: 50% !important; color: var(--text) !important; background: color-mix(in srgb,var(--surface-solid) 68%,transparent) !important; box-shadow: 0 10px 30px color-mix(in srgb,#07142b 18%,transparent) !important; backdrop-filter: blur(10px); opacity: .62; transform: translateY(-50%) !important; pointer-events: auto; }
.hero-slider .hero-slider-nav > button:hover,.hero-slider .hero-slider-nav > button:focus-visible { color: #fff !important; border-color: color-mix(in srgb,var(--accent) 65%,transparent) !important; background: color-mix(in srgb,var(--accent) 82%,transparent) !important; opacity: 1; transform: translateY(-50%) scale(1.05) !important; }
.hero-slider .hero-slider-nav > [data-slider-prev] { left: 16px; }
.hero-slider .hero-slider-nav > [data-slider-next] { right: 16px; }
.hero-slider .hero-slider-dots > button { display: block !important; width: 9px !important; min-width: 9px !important; height: 9px !important; min-height: 9px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--line-strong) !important; box-shadow: none !important; transform: none !important; }
.hero-slider .hero-slider-dots > button.active { width: 26px !important; background: var(--accent) !important; }
.product-title-link { color: inherit; text-decoration: none; }
.product-title-link:hover { color: var(--accent); }
.hero-no-preview { grid-template-columns: minmax(0, 880px); justify-content: center; }
.hero-custom-preview { min-height: 430px; }
.custom-preview { width: min(500px,100%); overflow: hidden; padding: 0; box-shadow: var(--shadow-lg); }
.custom-preview > img,.custom-preview-placeholder { width: 100%; height: 245px; object-fit: cover; }
.custom-preview-placeholder { display: grid; place-items: center; color: var(--accent); background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface-soft)),var(--surface-solid)); font-size: 58px; }
.custom-preview-copy { padding: 24px; }.custom-preview-copy h2 { margin-bottom: 8px; font-size: 26px; }.custom-preview-copy p { margin-bottom: 20px; }
.plugin-section { margin: 55px 0; }.trust-badges { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; }
.trust-badges > div { display: flex; align-items: center; gap: 11px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-solid); }
.trust-badges span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,transparent); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.testimonial { padding: 24px; }.testimonial > span { color: var(--accent); font-size: 45px; line-height: .8; }.testimonial p { min-height: 72px; margin: 12px 0 20px; }.testimonial div { display: grid; }.testimonial small { color: var(--text-faint); }
.faq-list { display: grid; gap: 10px; }.faq-list details { padding: 0 20px; }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; color: var(--text); font-weight: 800; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list details p { padding: 0 0 20px; }
.countdown { display: grid; grid-template-columns: minmax(240px,1fr) auto auto; align-items: center; gap: 28px; padding: 30px; background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface-solid)),var(--surface-solid)); }.countdown-clock { display: flex; gap: 8px; }.countdown-clock span { min-width: 66px; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; text-align: center; background: var(--surface-solid); }.countdown-clock b { font-size: 22px; }.countdown-clock small { color: var(--text-faint); font-size: 10px; }
.whatsapp-float { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 999px; color: #fff; background: #18a957; box-shadow: 0 14px 35px rgba(8,105,50,.3); }.whatsapp-float span { font-size: 22px; }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-slider .hero-slides { min-height: auto; }
  .hero-slide { min-height: 430px; padding-bottom: 48px; }
  .hero-visual { min-height: 360px; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .product-horizontal { grid-template-columns:1fr; }.horizontal-specs{grid-template-columns:repeat(3,1fr)}
  .home-category-grid{grid-template-columns:repeat(2,1fr)}
  .stats { grid-template-columns: repeat(2, 1fr); }
  .panel-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar nav { grid-template-columns: repeat(3, 1fr); }
  .product-hero { grid-template-columns: 1fr; }
  .checkout-card { position: static; }
  .auth-shell { gap: 42px; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .countdown { grid-template-columns: 1fr; }
}

/* Community comments and content reactions */
.community-login-callout{display:flex;align-items:center;gap:15px;margin-bottom:26px;padding:20px 22px}.community-login-callout>span{font-size:28px}.community-login-callout>div{flex:1}.community-login-callout h3{margin:0 0 4px}.community-login-callout p{margin:0}
.community-area{width:min(1080px,100%);margin:42px auto 10px}.content-reactions{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 28px;padding:22px 24px;overflow:visible;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 96%,var(--accent) 4%),var(--surface-solid));border-color:color-mix(in srgb,var(--accent) 16%,var(--line))}.reaction-copy h3{margin:5px 0 0;font-size:clamp(17px,2vw,22px)}.reaction-control{position:relative;display:flex;align-items:center;gap:10px}.reaction-summary{display:flex;align-items:center;min-width:72px}.reaction-summary>span{display:grid;place-items:center;width:29px;height:29px;margin-left:-7px;border:2px solid var(--surface-solid);border-radius:50%;background:var(--surface-soft);font-size:15px}.reaction-summary>span:first-child{margin-left:0}.reaction-summary>b{margin-left:7px;color:var(--muted);font-size:13px}.reaction-toggle{min-height:42px!important;padding:0 17px!important;border:1px solid var(--line)!important;border-radius:999px!important;color:var(--text)!important;background:var(--surface-solid)!important;box-shadow:none!important}.reaction-picker{position:absolute;right:0;bottom:calc(100% + 12px);z-index:20;display:grid;grid-template-columns:repeat(5,48px);gap:7px;width:max-content;padding:10px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface-solid) 94%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(16px)}.reaction-picker[hidden]{display:none}.reaction-picker button{position:relative;display:grid!important;place-items:center;width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;border:1px solid var(--line)!important;border-radius:13px!important;background:var(--surface-soft)!important;box-shadow:none!important;transform:none!important}.reaction-picker button:hover,.reaction-picker button.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface-solid))!important;transform:translateY(-2px)!important}.reaction-picker button>span{font-size:23px}.reaction-picker button>small{position:absolute;right:3px;bottom:2px;min-width:15px;padding:1px 3px;border-radius:7px;color:var(--muted);background:var(--surface-solid);font-size:9px}.community-shell{margin-top:28px}.community-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.community-heading h2{margin:5px 0 7px;font-size:clamp(26px,4vw,38px);letter-spacing:-.035em}.community-heading p{margin:0;color:var(--muted)}.community-count{display:grid;place-items:center;min-width:88px;padding:13px 18px;border:1px solid var(--line);border-radius:20px;background:var(--surface-soft)}.community-count b{font-size:24px}.community-count span{color:var(--muted);font-size:12px}.community-composer{position:relative;padding:24px;margin-bottom:26px;border-color:color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:0 22px 60px color-mix(in srgb,#07142b 7%,transparent)}.community-composer textarea{min-height:135px;resize:vertical;padding-bottom:31px}.community-composer>label{position:relative}.community-character-count{position:absolute;right:13px;bottom:11px;color:var(--muted);font-size:11px}.community-guest-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.community-guest-fields label{position:relative}.community-guest-fields small{position:absolute;right:12px;bottom:13px;color:var(--muted);font-size:10px}.commenting-as{display:flex;align-items:center;gap:11px;margin-bottom:16px}.commenting-as>span,.community-avatar{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#8b5cf6));font-weight:800;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 22%,transparent)}.commenting-as div{display:grid}.commenting-as small{color:var(--muted)}.composer-context{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-5px 0 17px;padding:12px 14px;border-left:3px solid var(--accent);border-radius:4px 12px 12px 4px;background:color-mix(in srgb,var(--accent) 8%,var(--surface-soft))}.composer-context[hidden]{display:none}.composer-context>div{display:grid;gap:3px}.composer-context span{max-width:680px;overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.composer-context button{display:grid!important;place-items:center;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border-radius:50%!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}.composer-bottom>button{min-width:185px}.community-captcha{display:flex!important;align-items:center;gap:10px;margin:0!important}.community-captcha>span{display:grid;place-items:center;min-width:85px;height:44px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,var(--surface-soft));font-size:17px}.community-captcha input{width:72px!important;height:44px!important;text-align:center;font-weight:800}.community-rules{margin:15px 0 0;color:var(--muted);font-size:12px}.community-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.comment-live-preview{margin-top:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-soft)}.comment-live-preview[hidden]{display:none}.comment-live-preview small{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.comment-live-preview p{margin:0;white-space:pre-wrap}.community-mention{display:inline;padding:1px 5px;border-radius:7px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:750}.mention-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.mention-suggestions[hidden]{display:none}.mention-suggestions button{min-height:30px!important;padding:5px 10px!important;border:1px solid var(--line)!important;border-radius:999px!important;color:var(--accent)!important;background:var(--surface-soft)!important;box-shadow:none!important;font-size:12px}.community-toolbar{display:flex;align-items:center;justify-content:space-between;margin:30px 0 8px;padding-bottom:12px;border-bottom:1px solid var(--line)}.community-toolbar nav{display:flex;gap:5px;padding:4px;border-radius:12px;background:var(--surface-soft)}.community-toolbar a{padding:7px 11px;border-radius:9px;color:var(--muted);font-size:12px;font-weight:750}.community-toolbar a.active{color:var(--text);background:var(--surface-solid);box-shadow:0 4px 14px color-mix(in srgb,#07142b 7%,transparent)}.community-thread{display:grid}.community-comment{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;padding:19px 0;border-bottom:1px solid var(--line)}.community-comment.is-pinned{margin:8px 0;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 4%,var(--surface-solid))}.community-comment-main{min-width:0}.community-comment-main>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.community-comment-main>header>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.community-comment-main>header b{font-size:14px}.community-comment-main>header span{padding:2px 7px;border-radius:999px;color:var(--muted);background:var(--surface-soft);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.community-comment-main>header .verified-member{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.community-comment-main>header .pinned-comment{color:#b7791f;background:#fff7db}.community-comment-main time{color:var(--muted);font-size:11px;white-space:nowrap}.community-comment-body{padding:10px 0 12px;color:var(--text);line-height:1.72;overflow-wrap:anywhere}.community-comment-main blockquote{display:grid;gap:4px;margin:12px 0 2px;padding:10px 13px;border-left:3px solid var(--accent);border-radius:4px 11px 11px 4px;background:var(--surface-soft);font-size:12px}.community-comment-main blockquote span{color:var(--muted)}.community-comment-main>footer{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.community-comment-main>footer button{min-height:28px!important;padding:4px 8px!important;border:0!important;border-radius:8px!important;color:var(--muted)!important;background:transparent!important;box-shadow:none!important;font-size:11px}.community-comment-main>footer button:hover{color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 8%,transparent)!important}.community-replies{margin-top:10px;padding-left:20px;border-left:2px solid color-mix(in srgb,var(--accent) 16%,var(--line))}.community-replies .community-comment:last-child{border-bottom:0}.community-replies .community-avatar{width:34px;height:34px;border-radius:11px;font-size:12px}.community-replies .community-comment{grid-template-columns:34px minmax(0,1fr);padding:15px 0}.community-empty{display:grid;place-items:center;padding:45px 20px;text-align:center}.community-empty>span{font-size:35px}.community-empty h3{margin:10px 0 4px}.community-empty p{margin:0;color:var(--muted)}.community-report-form{display:grid;gap:14px}.report-reasons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.report-reasons label{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}.report-reasons input{width:auto}.community-report-form textarea{min-height:90px}

@media(max-width:700px){.community-area{margin-top:30px}.content-reactions{align-items:flex-start;padding:18px}.reaction-copy h3{font-size:17px}.reaction-control{flex-direction:column-reverse;align-items:flex-end}.reaction-summary{justify-content:flex-end}.reaction-picker{right:-2px;grid-template-columns:repeat(5,43px)}.reaction-picker button{width:43px!important;min-width:43px!important;height:43px!important;min-height:43px!important}.community-heading{align-items:flex-start}.community-heading p{font-size:13px}.community-count{min-width:70px;padding:10px}.community-composer{padding:17px}.community-guest-fields{grid-template-columns:1fr}.composer-bottom{align-items:stretch;flex-direction:column}.community-captcha{justify-content:flex-start}.composer-bottom>button{width:100%}.community-comment{grid-template-columns:34px minmax(0,1fr);gap:9px}.community-avatar{width:34px;height:34px;border-radius:11px;font-size:12px}.community-comment-main>header{align-items:flex-start;flex-direction:column;gap:4px}.community-replies{padding-left:9px}.community-replies .community-comment{grid-template-columns:28px minmax(0,1fr)}.community-replies .community-avatar{width:28px;height:28px}.report-reasons{grid-template-columns:1fr}}

@media (max-width: 760px) {
  .container { width: min(100% - 26px, 1180px); padding-top: 34px; }
  .top-inner { width: calc(100% - 26px); min-height: 66px; }
  .mobile-menu { display: inline-grid; }
  .top nav { position: absolute; left: 13px; right: 13px; top: 70px; display: none; align-items: stretch; flex-direction: column; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-solid); box-shadow: var(--shadow-md); }
  .top nav.open { display: flex; }
  .nav-tools { margin: 5px 0 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero { min-height: auto; margin-top: -34px; margin-inline: -13px; padding: 58px 20px; }
  .hero h1 { font-size: 39px; }
  .hero-proof { gap: 18px; }
  .hero-visual { min-height: 300px; }
  .dashboard-preview { transform: none; }
  .hero-slider .hero-slides { padding-bottom: 30px; }
  .hero-slider .hero-slide { min-height: auto; padding-bottom: 0; }
  .hero-slider .hero-slider-nav { position: absolute; inset: 0; margin: 0; }
  .hero-slider .hero-slider-nav > [data-slider-prev] { left: 10px; }
  .hero-slider .hero-slider-nav > [data-slider-next] { right: 10px; }
  .hero-custom-preview { min-height: auto; }
  .benefit-strip { grid-template-columns: 1fr; margin-bottom: 55px; }
  .benefit-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit-strip > div:last-child { border-bottom: 0; }
  .products, .service-grid, .wallet-grid, .support-dashboard, .auth-shell, .contact-grid { grid-template-columns: 1fr; }
  .product-horizontal,.product-compact{grid-template-columns:1fr}.horizontal-specs{grid-template-columns:repeat(2,1fr)}.product-compact .compact-cover{width:100%;height:auto;aspect-ratio:16/8}.compact-action{justify-items:start}.home-category-grid,.category-showcase,.blog-grid{grid-template-columns:1fr}.category-hero{align-items:flex-start;padding:25px}.footer-category-links{justify-content:flex-start}.compare-tray{grid-template-columns:1fr}.compare-tray>div{order:2}.product-tab-buttons{flex-wrap:nowrap;overflow:auto}
  .auth-copy { display: none; }
  .auth-shell { min-height: auto; }
  .auth-card { padding: 23px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .countdown-clock { width: 100%; }.countdown-clock span { min-width: 0; flex: 1; padding-inline: 7px; }
  .whatsapp-float b { display: none; }.whatsapp-float { right: 15px; bottom: 15px; width: 52px; height: 52px; justify-content: center; padding: 0; }
  .grid, .grid2 { grid-template-columns: 1fr; }
  .page-title, .section-head, .cta-section { align-items: flex-start; flex-direction: column; }
  .stats { grid-template-columns: 1fr 1fr; }
  .dashboard-actions { grid-template-columns: 1fr; }
  .sidebar nav { grid-template-columns: 1fr 1fr; }
  .ticket-create { position: static; }
  .message { max-width: 95%; }
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; }
  .support-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 470px) {
  .stats, .sidebar nav, .service-card dl { grid-template-columns: 1fr; }
  .hero-actions, .hero-actions .button, .cta-section .button { width: 100%; }
  .hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hero-proof strong { font-size: 16px; }
  .preview-grid { grid-template-columns: 1fr; }
  .ticket-item { grid-template-columns: 8px 1fr auto; }
  .ticket-item .status-badge { display: none; }
  .order-card { align-items: flex-start; }
  .order-meta { width: 100%; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
}

/* Forum stream and overflow-safe math challenge */
.community-captcha{flex:0 0 auto;width:auto!important;min-width:0;white-space:nowrap}.community-captcha>span{display:flex!important;align-items:center;justify-content:center;gap:5px;width:auto;min-width:108px;padding:0 13px;white-space:nowrap;line-height:1}.community-captcha>span b,.community-captcha>span i{display:inline;white-space:nowrap}.community-captcha>span i{font-style:normal;font-weight:700}.community-captcha input{flex:0 0 72px;min-width:72px;max-width:72px}
.community-home{margin-block:72px}.forum-stream{overflow:hidden}.forum-stream>nav,.forum-page-tabs{display:flex;gap:7px;padding:10px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--surface-soft);scrollbar-width:thin}.forum-stream>nav button,.forum-page-tabs a{flex:0 0 auto;min-height:38px;padding:8px 14px;border:0;border-radius:11px;color:var(--muted);background:transparent;box-shadow:none;font-size:13px;font-weight:800}.forum-stream>nav button:hover,.forum-stream>nav button.active,.forum-page-tabs a:hover,.forum-page-tabs a.active{color:var(--accent);background:var(--surface-solid);box-shadow:0 7px 22px color-mix(in srgb,#07142b 8%,transparent);transform:none}.forum-tab-panel{display:none}.forum-tab-panel.active{display:block}.forum-topic-row{display:grid;grid-template-columns:44px minmax(0,1fr) 70px 84px 22px;align-items:center;gap:13px;padding:16px 19px;border-bottom:1px solid var(--line);color:var(--text);transition:background .2s ease}.forum-topic-row:last-child{border-bottom:0}.forum-topic-row:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface-solid))}.forum-avatar{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--accent),#8b5cf6);font-size:14px;font-weight:850;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 18%,transparent)}.forum-topic-copy{display:grid;min-width:0;gap:4px}.forum-topic-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forum-topic-copy small{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.forum-topic-stats{display:grid;text-align:center}.forum-topic-stats b{font-size:16px}.forum-topic-stats small{color:var(--text-faint);font-size:9px}.forum-topic-row>i{color:var(--accent);font-style:normal}.forum-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:10px 0 34px;padding:35px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:28px;background:radial-gradient(circle at 90% 15%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),var(--surface-solid)}.forum-page-head h1{margin:7px 0;font-size:clamp(34px,5vw,56px);letter-spacing:-.045em}.forum-page-head p{margin:0;color:var(--muted)}.forum-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}.forum-page-tabs{margin-bottom:13px;border:1px solid var(--line);border-radius:16px}.forum-topic-list{overflow:hidden}.forum-composer{position:sticky;top:95px;padding:23px}.forum-composer h2{margin:7px 0 15px}.forum-composer form{display:grid;gap:14px}.forum-composer textarea{min-height:170px;resize:vertical}.forum-composer .community-captcha{margin-top:2px!important}.forum-composer-icon{font-size:36px}.breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:20px;color:var(--muted);font-size:13px}.breadcrumb b{max-width:65vw;overflow:hidden;color:var(--text);text-overflow:ellipsis;white-space:nowrap}.forum-topic-detail{padding:30px}.forum-topic-detail>header{display:flex;gap:15px;align-items:flex-start}.forum-topic-detail h1{margin:5px 0 7px;font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}.forum-topic-detail small{color:var(--muted)}.forum-post-body{margin-top:24px;line-height:1.8;overflow-wrap:anywhere}.forum-replies{width:min(920px,100%);margin:45px auto 0}.forum-reply{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;margin-bottom:12px;padding:20px}.forum-reply header{display:flex;justify-content:space-between;gap:12px}.forum-reply time{color:var(--muted);font-size:11px}.forum-reply .forum-post-body{margin-top:10px}.forum-reply-form{margin-top:22px;padding:24px}.forum-reply-form textarea{min-height:145px;resize:vertical}
@media(max-width:900px){.forum-page-layout{grid-template-columns:1fr}.forum-composer{position:static}.forum-topic-row{grid-template-columns:40px minmax(0,1fr) 58px 20px}.forum-topic-row .view-stat{display:none}}
@media(max-width:600px){.community-home{margin-block:50px}.community-home .section-head,.forum-page-head{align-items:flex-start;flex-direction:column}.forum-page-head{padding:24px}.forum-page-head .button{width:100%}.forum-topic-row{grid-template-columns:36px minmax(0,1fr) 18px;padding:14px 12px}.forum-topic-row .forum-topic-stats{display:none}.forum-avatar{width:36px;height:36px;border-radius:11px}.forum-stream>nav{padding:8px}.forum-topic-detail{padding:20px}.forum-topic-detail>header{align-items:flex-start}.forum-reply{grid-template-columns:34px minmax(0,1fr);padding:15px}.community-captcha{width:100%!important}.community-captcha>span{flex:1 1 auto}.community-captcha input{flex:0 0 72px}.forum-reply-form .composer-bottom{align-items:stretch}}

/* Profile center and reusable user avatars */
[data-user-avatar]{overflow:hidden}.avatar img,.community-avatar img,.forum-avatar img{width:100%;height:100%;display:block;object-fit:cover}.sidebar-user .avatar{flex:0 0 42px}.profile-page-title{margin-bottom:24px}.profile-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:27px;background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 42%),var(--surface-solid)}.profile-avatar-large{position:relative}.profile-avatar{display:grid;place-items:center;width:92px!important;height:92px!important;border-radius:28px!important;color:#fff;background:linear-gradient(135deg,var(--accent),#8b5cf6);font-size:31px;font-weight:850;box-shadow:0 18px 38px color-mix(in srgb,var(--accent) 25%,transparent)}.profile-avatar-large>button{position:absolute;right:-5px;bottom:-5px;display:grid!important;place-items:center;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border:3px solid var(--surface-solid)!important;border-radius:50%!important;color:#fff!important;background:var(--accent)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent)!important}.profile-hero h2{margin:8px 0 3px;font-size:28px}.profile-hero p,.profile-hero small{color:var(--muted)}.profile-setting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}.profile-setting-card{display:flex;align-items:flex-start;flex-direction:column;min-height:245px;padding:23px}.profile-setting-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:color-mix(in srgb,var(--accent) 10%,var(--surface-soft));font-size:23px}.profile-setting-card>div{flex:1}.profile-setting-card h3{margin:17px 0 7px}.profile-setting-card p{margin:0;color:var(--muted);line-height:1.55}.profile-setting-card>button{width:100%;margin-top:20px}.profile-modal-head{display:flex;align-items:center;gap:13px;margin-bottom:22px}.profile-modal-head>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:color-mix(in srgb,var(--accent) 10%,var(--surface-soft));font-size:23px}.profile-modal-head h2{margin:3px 0 0}.profile-modal-form{display:grid;gap:14px}.profile-modal-form label{margin:0}.profile-modal-form label>small{display:block;margin-top:5px;color:var(--muted)}.modal-form-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:6px}.modal-form-actions .button,.modal-form-actions button{width:100%}.avatar-upload-preview{display:grid;place-items:center;margin:0 auto 12px}.avatar-dropzone{position:relative;display:grid;place-items:center;gap:5px;min-height:120px;padding:20px;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:16px;color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface-soft));cursor:pointer}.avatar-dropzone small{color:var(--muted)}.avatar-dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.profile-remove-form{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:1000px){.profile-setting-grid{grid-template-columns:1fr}.profile-setting-card{min-height:0}.profile-hero{grid-template-columns:auto minmax(0,1fr)}}
@media(max-width:600px){.profile-hero{grid-template-columns:1fr;text-align:center}.profile-avatar-large{justify-self:center}.profile-hero>.button{width:100%}.profile-setting-card{padding:19px}.modal-form-actions{grid-template-columns:1fr}.profile-modal-form .grid2{grid-template-columns:1fr}}

/* Animated circular avatar frames */
.avatar,.community-avatar,.forum-avatar{position:relative!important;isolation:isolate;overflow:visible!important;border-radius:50%!important;background:linear-gradient(135deg,var(--accent),#8b5cf6)!important}.avatar::before,.community-avatar::before,.forum-avatar::before{content:"";position:absolute;inset:-4px;z-index:2;border:3px solid var(--accent);border-top-color:#8b5cf6;border-right-color:#22d3ee;border-bottom-color:#f59e0b;border-radius:50%;pointer-events:none;animation:avatar-frame-spin 5s linear infinite}.avatar img,.community-avatar img,.forum-avatar img{position:relative;z-index:1;border-radius:50%!important}.profile-avatar{border-radius:50%!important}.profile-avatar::before{inset:-6px;border-width:4px}@keyframes avatar-frame-spin{to{transform:rotate(1turn)}}@media(prefers-reduced-motion:reduce){.avatar::before,.community-avatar::before,.forum-avatar::before{animation:none}}

/* Public rich editor */
.rich-editor{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface-solid)}.rich-toolbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:5px;padding:9px;border-bottom:1px solid var(--line);background:var(--surface-soft)}.rich-editor .rich-toolbar button,.rich-editor .rich-image-tools button{display:inline-grid!important;place-items:center;width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:6px!important;border:1px solid transparent!important;border-radius:9px!important;color:var(--text)!important;background:transparent!important;box-shadow:none!important;transform:none!important;font-size:12px;font-weight:800}.rich-editor .rich-toolbar button:hover,.rich-editor .rich-image-tools button:hover{border-color:var(--line-strong)!important;color:var(--accent)!important;background:var(--surface-solid)!important}.rich-toolbar select{min-height:34px;width:42px;padding:6px}.rich-tool{display:inline-grid;place-items:center}.editor-glyph{display:inline-grid;place-items:center;min-width:18px;height:18px;font:700 14px/1 Arial,sans-serif}.editor-bold{font-weight:900}.editor-italic{font-style:italic}.editor-underline{text-decoration:underline}.editor-strike{text-decoration:line-through}.editor-code,.editor-alt{font-size:9px}.rich-editor-area{min-height:420px;padding:30px;outline:0;background:var(--surface-solid)}.rich-editor-area:empty::before{content:attr(data-placeholder);color:var(--text-faint);pointer-events:none}.rich-editor-area:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.rich-source-area{width:100%;min-height:420px;padding:22px;border:0;border-radius:0;color:var(--text);background:#101827;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.rich-editor-area img.is-selected{outline:3px solid var(--accent);outline-offset:3px}.rich-image-tools{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:9px 12px;border-top:1px solid var(--line);background:var(--surface-soft)}.rich-image-tools[hidden]{display:none}.rich-image-tools select{width:auto;min-height:34px}.image-tools-label{margin-right:4px;color:var(--text-faint);font-size:11px;font-weight:800}.rich-editor.fullscreen{position:fixed;inset:12px;z-index:500;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}.rich-editor.fullscreen .rich-editor-area{flex:1;overflow:auto}body.editor-fullscreen{overflow:hidden}

/* Full-width composer and forum reading experience */
.forum-page-layout{grid-template-columns:1fr}.forum-topic-composer{position:static;top:auto;margin-top:22px;padding:30px}.forum-composer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}.forum-composer-head h2{margin:6px 0}.forum-composer-head p{margin:0;color:var(--muted)}.forum-composer-head>span{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;color:#fff;background:linear-gradient(135deg,var(--accent),#8b5cf6);font-size:23px}.forum-topic-form{display:grid;gap:15px}.forum-editor-label{margin-bottom:-7px}.forum-rich-editor,.forum-live-preview .preview-topic{width:100%}.forum-composer-actions{display:grid;grid-template-columns:auto minmax(190px,1fr) auto;align-items:center;gap:13px;margin-top:3px}.forum-live-preview{display:block;margin-top:4px}.forum-live-preview[hidden]{display:none}.forum-preview-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:11px;padding:11px 14px;border-radius:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-soft))}.forum-preview-label button{min-height:32px!important;padding:5px 10px!important}.forum-topic-form.previewing>label:not(.community-honeypot),.forum-topic-form.previewing>.rich-editor{display:none}.forum-topic-form.previewing>.forum-composer-actions>[data-forum-preview-toggle]{visibility:hidden}.forum-topic-detail{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr);gap:0;padding:0;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}.forum-topic-detail::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),#8b5cf6,#22d3ee)}.forum-author-panel{display:flex;align-items:center;flex-direction:column;gap:8px;padding:34px 20px;border-right:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--surface-soft)),var(--surface-soft));text-align:center}.forum-author-panel .forum-avatar{width:72px;height:72px;margin-bottom:7px;font-size:25px}.forum-author-panel>b{max-width:145px;overflow:hidden;text-overflow:ellipsis}.forum-author-panel>span{padding:4px 8px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:10px;font-weight:800}.forum-author-panel>small{color:var(--muted)}.forum-topic-main{min-width:0}.forum-topic-main>header{display:grid;gap:15px;padding:30px 34px 22px;border-bottom:1px solid var(--line)}.forum-topic-main h1{margin:6px 0 0;font-size:clamp(27px,4vw,43px);letter-spacing:-.04em}.forum-topic-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:11px}.forum-topic-main>.forum-post-body{min-height:330px;margin:0;padding:30px 34px}.forum-topic-main>.forum-post-body>.rich-content{line-height:1.8}.forum-topic-main>footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 34px;border-top:1px solid var(--line);background:var(--surface-soft)}.forum-topic-main>footer a{color:var(--accent);font-size:12px;font-weight:800}.forum-replies{width:100%}.forum-reply{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;padding:0;overflow:hidden}.forum-reply-author{display:flex;align-items:center;flex-direction:column;gap:7px;padding:22px 15px;border-right:1px solid var(--line);background:var(--surface-soft);text-align:center}.forum-reply-author .forum-avatar{width:50px;height:50px;margin-bottom:4px}.forum-reply-author b{max-width:125px;overflow:hidden;text-overflow:ellipsis}.forum-reply-author small{color:var(--muted);font-size:10px}.forum-reply-main{min-width:0}.forum-reply-main>header{display:flex;align-items:center;justify-content:space-between;padding:11px 20px;border-bottom:1px solid var(--line);color:var(--muted);background:color-mix(in srgb,var(--surface-soft) 65%,transparent);font-size:11px}.forum-reply-main>.forum-post-body{min-height:115px;margin:0;padding:20px 24px}.preview-topic .forum-topic-main>.forum-post-body{min-height:420px}.preview-topic .forum-topic-main>header{min-height:118px}
@media(max-width:760px){.rich-editor-area{min-height:340px;padding:20px}.forum-topic-composer{padding:18px}.forum-composer-actions{grid-template-columns:1fr}.forum-composer-actions>button{width:100%}.forum-topic-detail{grid-template-columns:1fr}.forum-author-panel{align-items:center;flex-direction:row;padding:20px;border-right:0;border-bottom:1px solid var(--line);text-align:left}.forum-author-panel .forum-avatar{width:52px;height:52px;margin:0}.forum-author-panel>small{margin-left:auto}.forum-topic-main>header,.forum-topic-main>.forum-post-body{padding:22px}.forum-topic-main>footer{padding:14px 22px}.forum-reply{grid-template-columns:1fr}.forum-reply-author{align-items:center;flex-direction:row;padding:14px;border-right:0;border-bottom:1px solid var(--line);text-align:left}.forum-reply-author .forum-avatar{width:38px;height:38px;margin:0}.forum-reply-author small{margin-left:auto}.forum-reply-main>.forum-post-body{padding:17px}.forum-composer-head>span{display:none}}