: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 (unified, no search) */
.site-header{
  position:relative; 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;
  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 }

.user{ position:relative }
.user .avatar{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); cursor:pointer }
.user:hover .menu{ display:block }
.user .menu{
  display:none; position:absolute; right:0; top:42px; background:#fff; border:1px solid var(--border);
  border-radius:10px; min-width:160px; padding:8px; box-shadow:0 10px 24px rgba(0,0,0,.1);
}
.user .menu a{ display:block; padding:8px 10px; color:#374151; text-decoration:none; border-radius:8px }
.user .menu a:hover{ background:#f3f4f6 }

/* 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 }

/* Subscriptions content */
h2{ color:#111827; margin:0 0 8px; font-size:22px }
.summary .card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; margin:16px 0; box-shadow:0 6px 16px rgba(0,0,0,.04) }
.subscription{ background:var(--panel-2); padding:20px; border-radius:12px; margin-top:20px; border:1px solid var(--border) }
.subscription label{ display:block; margin-top:10px; color:#374151 }
.subscription input,.subscription select{ width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; background:#fff; color:#111827; margin-top:5px }
.primary{ background:var(--brand); border:none; color:#fff; border-radius:8px; padding:12px 16px; cursor:pointer; margin-top:16px; font-weight:700 }
.primary:hover{ opacity:.95 }
.ghost{ background:#fff; border:1px solid var(--border); color:#374151; border-radius:8px; padding:12px 16px; cursor:pointer; margin-inline-start:8px }
.ghost:hover{ background:#f9fafb }