:root {
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --dark: #111827;
  --gray: #6b7280;
  --light: #f9fafb;
  --border: #e5e7eb;
  --success: #16a34a;
  --danger: #dc2626;
  --radius: 10px;
}
* { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', Tahoma, Arial, sans-serif; color: var(--dark); background: #fff; line-height:1.6; }
a { text-decoration:none; color: var(--primary); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { border-bottom:1px solid var(--border); position: sticky; top:0; background:#fff; z-index:50; }
.header-inner { display:flex; align-items:center; gap:20px; padding:14px 20px; flex-wrap:wrap; }
.logo { font-size:22px; font-weight:800; color: var(--primary); }
.main-nav { display:flex; gap:16px; flex:1; }
.main-nav a { color: var(--dark); font-weight:500; }
.search-form { display:flex; }
.search-form input { padding:8px 12px; border:1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); min-width:180px; }
.search-form button { padding:8px 14px; border:none; background:var(--primary); color:#fff; border-radius: 0 var(--radius) var(--radius) 0; cursor:pointer; }
.header-actions { display:flex; gap:14px; align-items:center; }
.btn-outline { border:1px solid var(--primary); padding:6px 14px; border-radius: var(--radius); }

/* Flash */
.flash { padding:12px 0; text-align:center; font-weight:600; }
.flash-success { background:#dcfce7; color:#166534; }
.flash-error { background:#fee2e2; color:#991b1b; }

/* Buttons */
.btn { display:inline-block; padding:10px 22px; background:var(--primary); color:#fff; border:none; border-radius: var(--radius); cursor:pointer; font-weight:600; }
.btn:hover { background:var(--primary-dark); }
.btn-sm { padding:6px 14px; font-size:14px; }
.btn-danger { background: var(--danger); }
.btn-secondary { background:#fff; color:var(--primary); border:1px solid var(--primary); }

/* Hero */
.hero { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:60px 0; text-align:center; }
.hero h1 { font-size:34px; margin-bottom:10px; }
.hero p { opacity:.9; font-size:18px; }

/* Grid & cards */
.section { padding:40px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:22px; }
.card { border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; transition:.2s; background:#fff; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-3px); }
.card img { width:100%; height:150px; object-fit:cover; }
.card-body { padding:14px; }
.card-title { font-weight:700; margin:0 0 6px; font-size:16px; }
.price { font-weight:800; color: var(--primary); font-size:17px; }
.price-old { color: var(--gray); text-decoration: line-through; font-size:14px; margin-left:8px;}

/* Product page */
.product-header { display:flex; gap:30px; flex-wrap:wrap; padding:30px 0; }
.product-header img { width:100%; max-width:420px; border-radius: var(--radius); }
.product-info { flex:1; min-width:280px; }
.breadcrumb { color:var(--gray); font-size:14px; padding:14px 0; }
.tabs-content { padding:20px 0; border-top:1px solid var(--border); margin-top:20px; }

/* Forms */
.form-box { max-width:460px; margin:40px auto; padding:30px; border:1px solid var(--border); border-radius: var(--radius); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; font-weight:600; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; font-size:15px; }
.error-text { color: var(--danger); font-size:13px; margin-top:4px; }

/* Tables (admin) */
table { width:100%; border-collapse: collapse; background:#fff; }
table th, table td { padding:10px 12px; border-bottom:1px solid var(--border); text-align:right; font-size:14px; }
table th { background: var(--light); }
.badge { padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef9c3; color:#854d0e; }
.badge-danger { background:#fee2e2; color:#991b1b; }

/* Footer */
.site-footer { background: linear-gradient(180deg, var(--dark), #0b0f19); color:#d1d5db; margin-top:60px; }
.footer-inner { display:flex; gap:40px; padding:50px 20px 30px; flex-wrap:wrap; }
.footer-inner a { color:#d1d5db; display:block; margin-bottom:8px; transition:.15s; }
.footer-inner a:hover { color:#818cf8; }
.footer-brand { flex:1.4; min-width:220px; }
.footer-brand h3 { font-size:20px; margin-bottom:6px; }
.footer-brand p { color:#9ca3af; font-size:14px; }
.footer-social { display:flex; gap:10px; margin-top:14px; }
.footer-social a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); font-size:12px; font-weight:700; margin-bottom:0; }
.footer-social a:hover { background: var(--primary); color:#fff; }
.footer-inner h4 { color:#fff; font-size:15px; margin-bottom:14px; letter-spacing:.3px; }
.copyright { text-align:center; padding:16px; border-top:1px solid #1f2937; font-size:13px; color:#9ca3af; }

/* Admin layout */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar { width:230px; background:var(--dark); color:#fff; padding:20px 0; }
.admin-sidebar a { display:block; color:#d1d5db; padding:10px 22px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--primary); color:#fff; }
.admin-content { flex:1; padding:26px; background: var(--light); }
.stat-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:26px; }
.stat-card { background:#fff; border-radius: var(--radius); padding:20px; border:1px solid var(--border); }
.stat-card .num { font-size:28px; font-weight:800; color:var(--primary); }

/* ===== Visual refresh additions ===== */
.site-logo-img { max-height:38px; display:block; }

/* Hero */
.hero { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 45%, #3730a3 100%); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.10) 0, transparent 40%); }
.hero .container { position:relative; z-index:2; }
.hero h1 { font-size:38px; font-weight:800; letter-spacing:-0.5px; }

/* Section headings */
.section h2 { font-size:26px; margin-bottom:20px; position:relative; padding-left:14px; }
.section h2::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; background: var(--primary); border-radius:4px; }

/* Cards refresh */
.card { position:relative; }
.card img { transition: transform .3s ease; }
.card:hover img { transform: scale(1.04); }
.card-body { position:relative; }

/* Product page gallery */
.product-header { align-items:flex-start; }
.product-gallery { flex:1; min-width:300px; max-width:460px; }
.main-image-wrap { position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); background:#f9fafb; }
.main-image-wrap img { width:100%; display:block; max-height:420px; object-fit:contain; background:#fff; }
.sale-ribbon { position:absolute; top:14px; left:-6px; background:var(--danger); color:#fff; padding:4px 16px; font-size:12px; font-weight:800; border-radius:0 4px 4px 0; z-index:2; }
.thumb-strip { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.thumb-item { width:64px; height:50px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; opacity:.7; transition:.15s; }
.thumb-item:hover { opacity:1; }
.thumb-item.active { border-color: var(--primary); opacity:1; }

.category-tags { margin-bottom:10px; }
.tag { display:inline-block; background:#eef2ff; color: var(--primary); font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; margin-right:6px; }
.short-desc { color:var(--gray); font-size:16px; }
.price-box { margin:14px 0; }
.meta-list { list-style:none; padding:0; margin:14px 0; color:var(--gray); font-size:14px; }
.meta-list li { margin-bottom:4px; }
.btn-buy { width:100%; font-size:16px; padding:14px; margin-top:10px; }
.rich-content img { max-width:100%; border-radius:8px; }
.rich-content { line-height:1.8; }

/* Error pages */
.error-page { text-align:center; padding:80px 20px; }
.error-code { font-size:96px; font-weight:900; color: var(--primary); line-height:1; }
.error-actions { display:flex; gap:14px; justify-content:center; margin-top:20px; }

/* Account layout */
.account-layout { display:flex; gap:30px; padding:30px 0; align-items:flex-start; }
.account-sidebar { width:200px; flex-shrink:0; background:#fff; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.account-sidebar a { display:block; padding:12px 18px; color:var(--dark); border-bottom:1px solid var(--border); font-weight:500; }
.account-sidebar a:last-child { border-bottom:none; }
.account-sidebar a:hover { background: var(--light); }
.account-sidebar a.active { background: var(--primary); color:#fff; }
.account-content { flex:1; min-width:0; }

@media (max-width: 760px) {
  .account-layout { flex-direction:column; }
  .account-sidebar { width:100%; display:flex; }
  .account-sidebar a { flex:1; text-align:center; border-bottom:none; border-right:1px solid var(--border); }
  .account-sidebar a:last-child { border-right:none; }
}

/* ===== Product page v2 (Codester-style) ===== */
.pp-wrap { padding:30px 20px 50px; }
.pp-title-row h1 { font-size:26px; margin-bottom:4px; }
.pp-title-row .short-desc { margin:0 0 8px; }
.badge-recent { display:inline-block; color:#16a34a; font-weight:600; font-size:13px; }
.meta-line { color:var(--muted); font-size:14px; margin:4px 0 8px; }

.pp-columns { display:flex; gap:26px; align-items:flex-start; margin-top:18px; }
.pp-main { flex:1; min-width:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.pp-sidebar { width:300px; flex-shrink:0; }

.btn-demo { display:inline-block; margin-top:12px; background:#0ea5e9; }
.btn-demo:hover { background:#0284c7; }

.share-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.share-label { font-weight:700; margin-right:4px; }
.share-btn { font-size:12px; font-weight:700; color:#fff; padding:6px 12px; border-radius:6px; }
.share-whatsapp { background:#25D366; }
.share-facebook { background:#1877F2; }
.share-instagram { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.share-twitter { background:#000; }
.share-reddit { background:#FF4500; }
.share-linkedin { background:#0A66C2; }
.share-pinterest { background:#E60023; }

.buy-box { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.license-select { width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; margin-bottom:12px; font-size:14px; }
.price-line { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.buy-price { font-size:28px; font-weight:800; color:var(--dark); }
.buy-price-old { color:#9ca3af; font-size:18px; text-decoration:line-through; font-weight:600; }
.payment-icons { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; font-size:11px; color:var(--gray); }
.payment-icons span { border:1px solid var(--border); padding:3px 8px; border-radius:4px; }

.top-scripts-box { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.top-scripts-header { background:#0ea5e9; color:#fff; font-weight:700; padding:12px 16px; font-size:17px; }
.top-script-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); background:#fff; }
.top-script-item:last-child { border-bottom:none; }
.top-script-item img { width:46px; height:36px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.top-script-item span { font-size:13px; color:var(--dark); font-weight:500; line-height:1.3; }

@media (max-width: 860px) {
  .pp-columns { flex-direction:column; }
  .pp-sidebar { width:100%; }
}