:root{
  --bg:#ffffff; --panel:#ffffff; --panel-2:#f9fafb; --text:#111827;
  --muted:#6b7280; --brand:#349c52; --border:#e5e7eb;
}

*{box-sizing:border-box}
body{ margin:0; font-family:'Segoe UI', Tahoma, Arial, sans-serif; background:var(--bg); color:var(--text) }

/* Header (sticky, unified, no search) */
.site-header{
  position:sticky; top:0; z-index:50; isolation:isolate;
  background:#fff; border-bottom:1px solid var(--border);
  padding:12px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; pointer-events:none;
  background:radial-gradient(rgba(17,24,39,0.04) 1px, transparent 1px);
  background-size:8px 8px; box-shadow:0 6px 8px -6px rgba(0,0,0,.08);
}
.left{ display:flex; align-items:center; gap:12px }
.logo img{ height:100px; display:block }
.divider{ width:1px; height:28px; background:var(--border) }
.nav a{ color:#6b7280; text-decoration:none; margin:0 6px; font-size:15px; font-weight:700; padding:8px 10px; border-radius:8px; transition:.15s }
.nav a:hover{ color:#374151 } 
.nav a.active{ color:#111827; background:#f3f4f6 }
.right{ display:flex; align-items:center; gap:10px }
.icon-btn{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer }
.icon-btn:hover{ background:#f9fafb }
.lang-switch{ cursor:pointer; border:1px solid var(--border); padding:8px 10px; border-radius:8px; color:#374151; text-decoration:none; background:#fff }
.avatar{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border) }
[dir="rtl"] .nav a{ margin:0 4px }

/* Layout */
.container{ max-width:1100px; margin:32px auto; padding:0 20px 40px }
.site-footer{ border-top:1px solid var(--border); padding:24px 40px; color:#6b7280; text-align:center; background:#fff }

/* Support content */
.hero{text-align:center;margin-bottom:24px}
.hero h1{margin:0 0 8px}
.sub{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.panel-title{font-size:14px;color:var(--muted);margin-bottom:10px}
.list{list-style:none;margin:0;padding:0}
.list li{margin:10px 0}
.list a{color:#374151;text-decoration:none}
.list a:hover{text-decoration:underline}
.form label{display:block;margin:10px 0 6px;font-size:14px;color:#374151}
.form input,.form textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);outline:none}
.form textarea{resize:vertical}
.primary{margin-top:14px;background:var(--brand);color:#fff;border:none;padding:12px 16px;border-radius:8px;cursor:pointer;font-weight:700}
.primary:hover{opacity:.95}
.muted{color:var(--muted)}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid{grid-template-columns:1fr}}