/* === NumerologyCalc — Emerald Mathematical Theme (Wide Layout) === */
:root{
  --bg:#061210;
  --bg2:#0a1c1a;
  --surface:rgba(255,255,255,0.04);
  --surface2:rgba(16,185,129,0.08);
  --border:rgba(16,185,129,0.2);
  --text:#e0f0ec;
  --text2:#9cc4b8;
  --accent:#34d399;
  --accent2:#6ee7b7;
  --gold:#f59e0b;
  --gold2:#fbbf24;
  --accent-bg:rgba(16,185,129,0.12);
  --card-bg:rgba(255,255,255,0.03);
  --card-border:rgba(16,185,129,0.15);
  --radius:12px;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --glow:0 0 30px rgba(16,185,129,.12);
  --font:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:var(--font);
  background:var(--bg);
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(16,185,129,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(245,158,11,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(110,231,183,0.03) 0%, transparent 50%);
  color:var(--text);
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold2);text-decoration:none}

/* ─── Container ─── */
.s-container{max-width:1200px; margin:0 auto; padding:0 32px}

/* ─── Header ─── */
.s-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(6,18,16,.85);
  border-bottom:1px solid var(--card-border);
}
.s-header .s-container{display:flex; align-items:center; justify-content:space-between; height:56px}
.s-logo{font-size:1.15rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; letter-spacing:-.5px}
.s-logo:hover{color:var(--accent2); text-decoration:none}
.s-nav{display:flex; gap:4px; align-items:center}
.s-nav a{color:var(--text2); font-size:.85rem; font-weight:500; padding:6px 14px; border-radius:8px; transition:all .2s}
.s-nav a:hover{color:var(--accent2); background:var(--surface)}

/* ─── Language Switcher ─── */
.s-langwrap{position:relative}
.s-langbtn{display:inline-flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--card-border); border-radius:8px; padding:5px 12px; font-size:.85rem; color:var(--text2); cursor:pointer; transition:.2s; font-family:var(--font)}
.s-langbtn:hover{background:var(--surface2); color:var(--accent2)}
.s-langdrop{display:none; position:absolute; top:42px; right:0; background:var(--bg2); border:1px solid var(--card-border); border-radius:10px; box-shadow:var(--shadow); z-index:100; min-width:150px; max-height:300px; overflow-y:auto; padding:4px 0}
.s-langdrop.show{display:block}
.s-langdrop button{display:block; width:100%; padding:6px 14px; font-size:.82rem; color:var(--text2); transition:.15s; text-align:left; background:none; border:none; cursor:pointer; font-family:var(--font); white-space:nowrap}
.s-langdrop button:hover,.s-langdrop button.active{color:var(--accent2); background:var(--surface)}
.s-arrow{font-size:.7rem; transition:transform .2s}

/* ─── Hero ─── */
.s-hero{text-align:center; padding:72px 0 44px}
.s-hero h1{font-size:2.8rem; font-weight:700; letter-spacing:-1px; background:linear-gradient(135deg,var(--accent2),var(--gold2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:14px}
.s-hero p{font-size:1.1rem; color:var(--text2); max-width:800px; margin:0 auto}
.s-herobadges{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:28px auto 0; max-width:800px}
.s-badge{display:inline-flex; align-items:center; gap:6px; background:var(--accent-bg); border:1px solid var(--card-border); border-radius:22px; padding:7px 20px; font-size:.82rem; color:var(--accent2); font-weight:500}

/* ─── Tool Section ─── */
.s-tool-body{max-width:1200px; margin:0 auto; padding:0 16px}
.s-calc-form{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:40px 36px; margin-bottom:20px; box-shadow:var(--shadow)}
.s-form-row{margin-bottom:18px}
.s-form-row label{display:block; font-size:.9rem; color:var(--text2); margin-bottom:6px; font-weight:500}
.s-sign-select{width:100%; padding:14px 16px; border-radius:8px; background:var(--bg2); border:1px solid var(--card-border); color:var(--text); font-size:1rem; font-family:var(--font); cursor:pointer; transition:.2s}
.s-sign-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.s-btn-primary{width:100%; padding:16px; border:none; border-radius:8px; background:linear-gradient(135deg,var(--accent),#059669); color:#fff; font-size:1.1rem; font-weight:600; cursor:pointer; transition:.2s; margin-top:6px; font-family:var(--font); letter-spacing:.3px}
.s-btn-primary:hover{opacity:.92; transform:translateY(-1px); box-shadow:var(--glow)}

/* ─── Results ─── */
.s-overall-score{text-align:center; padding:36px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--shadow)}
.s-score-number{font-size:4.5rem; margin-bottom:10px}
.s-score-label{font-size:1.15rem; color:var(--text2); margin-bottom:16px}

/* ─── Tool Cards Grid ─── */
.s-tool-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; margin-bottom:36px}
.s-tool-card{display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 16px; border-radius:var(--radius); background:var(--card-bg); border:1px solid var(--card-border); transition:.2s; text-align:center}
.s-tool-card:hover{background:var(--surface2); border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--glow)}
.s-tool-icon{font-size:2.5rem}
.s-tool-name{font-size:.88rem; font-weight:500; color:var(--text2); line-height:1.4}

/* ─── Content pages ─── */
.s-content-body{max-width:1200px; margin:0 auto; padding:40px 16px 0}
.s-content-body h2{font-size:1.5rem; margin-bottom:20px}
.s-content-body h3{font-size:1.15rem; color:var(--accent2); margin:32px 0 14px}
.s-content-body p{color:var(--text2); margin-bottom:18px; line-height:1.95}

/* ─── Sign detail page ─── */
.s-sign-detail{max-width:1200px; margin:0 auto; padding:16px 16px 0}
.s-sign-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:16px 0}
.s-sign-item{background:var(--accent-bg); border:1px solid var(--card-border); border-radius:10px; padding:14px 18px}
.s-sign-item strong{display:block; font-size:.8rem; color:var(--accent2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px}
.s-sign-item span{font-size:.95rem; color:var(--text)}
.s-sign-personality{margin-top:24px; padding:28px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius)}
.s-sign-personality h3{color:var(--accent2); margin-bottom:14px; font-size:1.1rem}
.s-sign-personality p{color:var(--text2); line-height:2}
.s-month-sign{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; margin-bottom:18px}

/* ─── Usage section ─── */
.s-usage{max-width:1200px; margin:0 auto; padding:0 16px 40px}
.s-usage h2{font-size:1.5rem; color:var(--accent2); text-align:center; margin-bottom:24px}

/* ─── Footer ─── */
.s-footer{border-top:1px solid var(--card-border); margin-top:56px; padding:28px 0; text-align:center; font-size:.82rem; color:var(--text2)}
.s-footer .s-container{display:flex; flex-direction:column; gap:8px; align-items:center}
.s-footer-links{display:flex; gap:24px}
.s-footer-links a{color:var(--text2); font-size:.82rem}
.s-footer-links a:hover{color:var(--accent2)}

/* ─── Cookie consent ─── */
.s-cookie{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); max-width:540px; width:calc(100% - 40px); background:var(--bg2); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow); z-index:200; font-size:.84rem; display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.s-cookie p{flex:1; color:var(--text2); line-height:1.5; min-width:200px}
.s-cookie a{color:var(--accent2); text-decoration:underline}
.s-cookie-btns{display:flex; gap:8px}
.s-cookie-btns button{padding:7px 18px; border-radius:6px; font-size:.82rem; cursor:pointer; border:1px solid var(--card-border); background:var(--surface); color:var(--text); font-family:var(--font); transition:.2s}
.s-cookie-btns .s-btn-accept{background:var(--accent); border-color:var(--accent); color:#fff}
.s-cookie-btns button:hover{opacity:.9}

/* ─── Responsive ─── */
@media(max-width:768px){
  .s-hero h1{font-size:2rem}
  .s-hero{padding:44px 0 28px}
  .s-tool-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .s-sign-grid{grid-template-columns:1fr 1fr}
  .s-container{padding:0 16px}
  .s-tool-body{max-width:100%}
}
@media(max-width:480px){
  .s-tool-grid{grid-template-columns:repeat(3,1fr)}
  .s-sign-grid{grid-template-columns:1fr}
  .s-calc-form{padding:24px 16px}
}

/* === Tool Tab Navigation === */
.s-tool-nav { display:flex; gap:8px; margin:0 auto 28px; flex-wrap:wrap; justify-content:center; max-width:640px; }
.s-tool-nav a { display:inline-flex; align-items:center; gap:6px; padding:12px 22px; border-radius:28px; background:var(--bg2); color:var(--text2); text-decoration:none; font-size:.88rem; font-weight:600; transition:all .25s; border:2px solid transparent; letter-spacing:.3px; }
.s-tool-nav a:hover { background:var(--accent2); color:#fff; transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,210,160,.3); }
.s-tool-nav a[style*="background:var(--accent2)"] { background:var(--accent2)!important; color:#fff!important; border-color:var(--accent2)!important; box-shadow:0 2px 12px rgba(0,210,160,.35); }
@media(max-width:600px){ .s-tool-nav a { padding:10px 16px; font-size:.8rem; } }

/* === Premium Brand Upgrade === */
.s-tool-nav a {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.s-tool-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16,185,129,.25);
}
.s-badge, .s-herobadges span {
  background: var(--surface2) !important;
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--accent2);
}
.s-sign-personality {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 18px;
  transition: transform .2s, box-shadow .2s;
}
.s-sign-personality:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.s-sign-personality h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 8px;
}
.s-sign-personality p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text);
}
.s-overall-score {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.02));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
}
.s-btn-primary {
  background: linear-gradient(135deg, var(--accent), #059669) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(16,185,129,.3);
  transition: all .3s;
}
.s-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16,185,129,.4);
}
.s-sign-select {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: 0.9rem !important;
}
.s-form-row label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent2);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
h1 {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -0.5px;
}
h2 {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Author Trust Section */
.s-author {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-top: 32px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.s-author-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.s-author-text strong {
  color: var(--accent2);
}

/* Methodology section */
.s-methodology {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-top: 24px;
}
.s-methodology h3 {
  color: var(--gold2);
  margin-bottom: 12px;
}

/* Footer upgrade */
footer {
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding: 32px 0 24px;
  text-align: center;
}
footer a {
  color: var(--accent2);
  text-decoration: none;
  font-size: 0.85rem;
  margin: 0 12px;
}
footer a:hover { text-decoration: underline; }

/* Responsive */
@media(max-width:768px){
  .s-sign-personality { padding: 20px 18px; }
  .s-author { flex-direction: column; text-align: center; }
}