:root{
  --ink:#12162b; --night:#171c37; --gold:#c9a227; --gold-bright:#e7c565;
  --parchment:#f6efdf; --parchment-2:#efe4c9; --ink-soft:#4a4f6b;
  --line: rgba(201,162,39,0.35); --shadow: 0 20px 50px rgba(10,12,30,0.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(1200px 700px at 15% -10%, #232a52 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #2a3260 0%, transparent 55%),
    linear-gradient(180deg, var(--night) 0%, var(--ink) 100%);
  color: var(--parchment); font-family:'Cormorant Garamond', Georgia, serif; font-size:18px; line-height:1.5; min-height:100vh;
}
.rtl{ font-family:'Noto Naskh Arabic','Noto Nastaliq Urdu', serif; direction:rtl; line-height:2; }
.wrap{ max-width:1180px; margin:0 auto; padding:40px 24px 90px; }
header.top{ text-align:center; margin-bottom:34px; }
.bismillah{ font-family:'Noto Naskh Arabic', serif; direction:rtl; color:var(--gold-bright); font-size:26px; margin-bottom:6px; opacity:.9;}
.brand-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px;}
.brand-star{ width:34px; height:34px; color:var(--gold);}
h1.brand{ font-family:'Cinzel', serif; letter-spacing:.09em; font-weight:600; font-size:clamp(34px,5vw,54px); margin:0; color:var(--parchment);}
h1.brand span{ color:var(--gold-bright); }
.tagline{ color:#cfc9e6; font-size:19px; margin-top:6px; font-style:italic;}
.tagline .rtl{ display:block; font-size:20px; color:#d8cfa0; margin-top:4px; font-style:normal;}
.panel{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:18px; padding:28px clamp(18px,4vw,34px); margin-bottom:30px; box-shadow:var(--shadow); }
.panel h2{ font-family:'Cinzel',serif; font-weight:600; letter-spacing:.05em; font-size:22px; color:var(--gold-bright); margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.panel h2 .num{ width:28px; height:28px; border-radius:50%; border:1px solid var(--gold); display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:var(--gold-bright);}
.panel .sub{ color:#b9b4d6; font-size:16px; margin-bottom:20px; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button{ background:transparent; border:none; color:#cfc9e6; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.06em; padding:10px 22px; cursor:pointer; }
.seg button.active{ background: linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241c04; font-weight:700;}
.controls-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.grid-form{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top:6px;}
@media (max-width:900px){ .grid-form{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .grid-form{ grid-template-columns: 1fr;} }
.field label{ display:block; font-size:14px; color:var(--gold-bright); letter-spacing:.03em; margin-bottom:6px; font-family:'Cinzel',serif; text-transform:uppercase; font-weight:500;}
.field input, .field select{ width:100%; background: rgba(10,12,28,.45); border:1px solid var(--line); color:var(--parchment); padding:11px 12px; border-radius:9px; font-family:'Cormorant Garamond',serif; font-size:17px; }
.field small{ color:#9a95bd; display:block; margin-top:5px; font-size:13px;}
.field small a{ color:var(--gold-bright); }
.field.span2{ grid-column: span 2; }
@media (max-width:560px){ .field.span2{ grid-column: span 1; } }
.btn{ font-family:'Cinzel',serif; letter-spacing:.06em; font-size:14px; font-weight:600; padding:13px 28px; border-radius:999px; border:1px solid var(--gold); background: linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241c04; cursor:pointer; }
.btn.ghost{ background:transparent; color:var(--gold-bright); }
.btn.small{ padding:8px 16px; font-size:12px;}
#resultWrap{ display:none; }
.chart-card{ background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%); color: var(--ink); border-radius:16px; padding:30px clamp(16px,4vw,40px); box-shadow: var(--shadow); }
.chart-head{ text-align:center; border-bottom:2px solid var(--gold); padding-bottom:14px; margin-bottom:20px;}
.chart-title{ font-family:'Cinzel',serif; font-size:22px; letter-spacing:.05em; margin-top:10px; color:#3a2f08;}
.meta-line{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-top:10px; font-size:16px; color:#4b4326;}
.chart-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px;}
@media (max-width:820px){ .chart-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .chart-grid{ grid-template-columns: 1fr;} }
.stat{ border:1px solid #c9b98a; border-radius:12px; padding:14px 16px; background: rgba(255,255,255,.35); }
.stat .k-en{ font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:#7a5a12;}
.stat .k-ar{ direction:rtl; font-size:15px; color:#7a5a12; margin-top:1px;}
.stat .v{ font-size:20px; margin-top:6px; color:#241c04; font-weight:600;}
.stat .v-ar{ direction:rtl; font-size:18px; color:#241c04; margin-top:2px;}
.print-btn-row{ text-align:center; margin-top:22px; }
.names-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:20px; }
.pillrow{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:14px; cursor:pointer; background:rgba(255,255,255,.03); color:#cfc9e6; font-family:'Cinzel',serif; }
.pill.active{ background: linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241c04; border-color:var(--gold);}
.name-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
.name-card{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background: rgba(255,255,255,.03); }
.name-card .nm-en{ font-family:'Cinzel',serif; font-size:17px; color:var(--parchment);}
.name-card .nm-ar{ direction:rtl; font-size:19px; color:var(--gold-bright); margin:3px 0;}
.name-card .nm-meaning{ font-size:15px; color:#c7c2e4;}
.name-card .nm-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.name-card .badge{ font-size:11px; color:#9a95bd; border:1px solid var(--line); border-radius:6px; padding:2px 7px;}
.name-card .use-btn{ background:none; border:1px solid var(--line); color:var(--gold-bright); border-radius:6px; padding:3px 9px; font-size:11px; cursor:pointer; font-family:'Cinzel',serif;}
.empty-note{ color:#9a95bd; padding:20px; text-align:center; font-style:italic;}
.calc-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.calc-result{ margin-top:18px; display:none; }
.num-badge{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background: radial-gradient(circle, var(--gold-bright), var(--gold)); color:#241c04; font-family:'Cinzel',serif; font-size:26px; font-weight:700; margin-right:14px; vertical-align:middle;}
.asma-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:16px;}
.asma-card{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; background: rgba(201,162,39,.05); }
.asma-card .ar{ direction:rtl; font-size:20px; color:var(--gold-bright);}
.asma-card .translit{ font-size:14px; color:#cfc9e6; }
.asma-card .meaning{ font-size:13px; color:#9a95bd; }
.import-results{ margin-top:18px; }
.import-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.import-row.exists{ opacity:.45; }
.import-row .meaning{ font-size:14px; color:#9a95bd; max-width:520px; }
.notice{ background: rgba(201,162,39,.08); border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:15px; color:#d8cfa0; margin-bottom:16px;}
footer.site{ text-align:center; color:#8a85ad; font-size:14px; margin-top:40px; }