/*
Theme Name: WheelSpinner
Theme URI: https://wheelspinner.example/
Description: Hand-built lightweight theme for the wheel spinner site. No page builder, no frameworks. Edit colors in :root below.
Version: 1.7.14
Author: Site Owner
Text Domain: wheelspinner
*/

/* ============================================================
   DESIGN TOKENS — edit these to restyle the whole site.
   ============================================================ */
:root{
  --ws-primary:#2563eb;        /* main brand blue */
  --ws-primary-dark:#1d4ed8;   /* hover / accents */
  --ws-accent:#f59e0b;         /* winner gold */
  --ws-ink:#0f172a;            /* headings */
  --ws-body:#334155;           /* body text */
  --ws-muted:#64748b;          /* secondary text */
  --ws-bg:#ffffff;             /* page background */
  --ws-soft:#f1f5f9;           /* soft section background */
  --ws-card:#ffffff;           /* card background */
  --ws-border:#e2e8f0;         /* borders */
  --ws-radius:14px;            /* card corner radius */
  --ws-font:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ws-font-display:"Fredoka","Nunito",system-ui,sans-serif;
  --ws-max:1080px;             /* content width */
  --ws-grad:linear-gradient(135deg,#2563eb,#7c3aed);  /* brand gradient */
  --ws-dark:#0f172a;           /* hero + footer navy */
}

/* ============ base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ws-font);color:var(--ws-body);background:#f8fafc;line-height:1.65;font-size:17px}
img{max-width:100%;height:auto}
a{color:var(--ws-primary);text-decoration:none}
a:hover{color:var(--ws-primary-dark)}
h1,h2,h3{color:var(--ws-ink);line-height:1.25}
.wrap{max-width:var(--ws-max);margin:0 auto;padding:0 20px}

/* ============ header ============ */
.ws-header{background:var(--ws-bg);border-bottom:1px solid var(--ws-border);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.ws-header-in{display:flex;align-items:center;justify-content:space-between;max-width:var(--ws-max);margin:0 auto;padding:12px 20px}
.ws-logo{font-weight:800;font-size:22px;color:var(--ws-ink);display:flex;align-items:center;gap:9px;background:var(--ws-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ws-logo svg{width:30px;height:30px}
.ws-nav{display:flex;gap:4px;align-items:center}
.ws-nav a{color:var(--ws-body);font-weight:600;font-size:15px;padding:8px 12px;border-radius:8px}
.ws-nav a:hover{background:var(--ws-soft);color:var(--ws-ink)}
.ws-langs{position:relative}
.ws-langs summary{list-style:none;cursor:pointer;font-weight:600;font-size:15px;padding:8px 12px;border:1px solid var(--ws-border);border-radius:8px;color:var(--ws-body)}
.ws-langs summary::-webkit-details-marker{display:none}
.ws-langs .ws-lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--ws-card);border:1px solid var(--ws-border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:170px;padding:6px;z-index:60}
.ws-langs .ws-lang-menu a{display:block;padding:8px 12px;border-radius:6px;font-size:14px;color:var(--ws-body)}
.ws-langs .ws-lang-menu a:hover{background:var(--ws-soft)}
.ws-langs .ws-lang-menu a[aria-current="page"]{color:var(--ws-primary);font-weight:700}

/* ============ hero ============ */
.ws-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#5b21b6 100%);border-radius:calc(var(--ws-radius) + 6px);padding:48px 28px;margin:26px 0;text-align:center;color:#e2e8f0}
.ws-hero h1{font-size:clamp(30px,4.5vw,46px);margin:0 0 10px;letter-spacing:-.5px;color:#fff}
.ws-hero p.lead{font-size:clamp(16px,2vw,19px);color:#c7d2fe;max-width:640px;margin:0 auto}
.ws-hero-wheel{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:230px;height:230px;opacity:.55;animation:wsSlowSpin 26s linear infinite;pointer-events:none}
@keyframes wsSlowSpin{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}
.ws-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px;position:relative}
.ws-badges span{border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600;background:rgba(255,255,255,.08);backdrop-filter:blur(2px)}
@media(max-width:640px){.ws-hero-wheel{width:150px;height:150px;right:-50px;opacity:.35}}
@media (prefers-reduced-motion: reduce){.ws-hero-wheel{animation:none}.ws-spin{animation:none!important}}

/* ============ tool ============ */
.ws-tool{position:relative;background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);box-shadow:0 16px 44px rgba(37,99,235,.14);padding:26px 22px 22px;margin:0 auto 8px;max-width:720px;overflow:hidden}
.ws-tool::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--ws-grad)}
.ws-stage{position:relative;width:min(88vw,400px);margin:6px auto}
.ws-stage canvas{width:100%;height:auto;display:block;border-radius:50%}
.ws-pointer{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #e11d48;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));z-index:3}
.ws-spin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:4px solid #fff;background:var(--ws-grad);color:#fff;font-weight:800;font-size:17px;letter-spacing:1px;cursor:pointer;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:wsPulse 2.4s ease-in-out infinite}
@keyframes wsPulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 0 rgba(37,99,235,.45)}50%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 14px rgba(37,99,235,0)}}
.ws-spin:hover{filter:brightness(1.08)}
.ws-spin:disabled{opacity:.55;cursor:default}
.ws-reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;background:rgba(10,10,25,.5);border-radius:10px;cursor:pointer}
.ws-reveal[hidden]{display:none}
.ws-card{position:relative;background:linear-gradient(150deg,#fff7ed,#fef3c7);border:3px solid var(--ws-accent);border-radius:18px;padding:26px 40px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;animation:wsPop .65s cubic-bezier(.2,1.6,.4,1) both}
@keyframes wsPop{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{transform:scale(1.1) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ws-ribbon{position:absolute;top:0;left:0;right:0;height:10px;background:repeating-linear-gradient(45deg,#e11d48 0 14px,var(--ws-accent) 14px 28px,#10b981 28px 42px,#3b82f6 42px 56px)}
.ws-wlabel{font-size:13px;font-weight:800;letter-spacing:4px;color:#b45309;margin-bottom:4px}
.ws-wname{font-size:42px;font-weight:900;color:#111827;line-height:1.1;word-break:break-word}
.ws-wverdict{font-size:16px;font-weight:700;color:#b45309;margin-top:6px}
.ws-wactions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.ws-wactions .ws-btn{background:#fff;border-color:var(--ws-accent);font-weight:700}
.ws-wsub{font-size:12px;color:#6b7280;margin-top:10px}
.ws-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0 2px}
.ws-chip{background:var(--ws-soft);border:1px solid var(--ws-border);color:var(--ws-ink);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.ws-chip:hover{border-color:var(--ws-primary);color:var(--ws-primary);transform:translateY(-1px)}
.ws-canvas{touch-action:none;cursor:grab}
.ws-canvas:active{cursor:grabbing}
.ws-ctl{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:14px 0 4px;font-size:14px;color:var(--ws-muted)}
.ws-ctl select{border:1px solid var(--ws-border);border-radius:8px;padding:6px 10px;font-size:14px;color:var(--ws-ink);background:#fff}
.ws-check{display:flex;align-items:center;gap:6px;cursor:pointer}
.ws-iconbtn{background:#fff;border:1px solid var(--ws-border);border-radius:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ws-body)}
.ws-iconbtn.off{color:var(--ws-muted)}
.ws-iconbtn.off .snd-waves{display:none}

/* ============ content sections ============ */
.ws-section{margin:44px 0}
.ws-section h2{font-size:clamp(24px,3vw,32px);margin:0 0 14px;padding-bottom:10px;position:relative}
.ws-section h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:2px;background:var(--ws-grad)}
.ws-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.ws-step{background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);padding:18px}
.ws-step b{display:block;color:var(--ws-ink);margin-bottom:6px}
.ws-step .n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--ws-primary);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.ws-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:18px}
.ws-feat{background:var(--ws-card);border:1px solid var(--ws-border);border-top:4px solid var(--ws-primary);border-radius:var(--ws-radius);padding:18px;transition:transform .15s, box-shadow .15s}
.ws-feat:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.08)}
.ws-feat b{display:block;color:var(--ws-ink);margin-bottom:6px}
.ws-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:18px;grid-auto-rows:1fr}
.ws-preset{border:1px solid var(--ws-border);border-radius:12px;padding:16px 12px;text-align:center;color:var(--ws-ink);font-weight:700;background:var(--ws-card);display:flex;flex-direction:column;justify-content:center}
.ws-preset:hover{border-color:var(--ws-primary);color:var(--ws-primary);transform:translateY(-2px)}
.ws-preset small{display:block;font-weight:400;color:var(--ws-muted);font-size:13px;margin-top:4px}
.ws-faq{border:1px solid var(--ws-border);border-radius:12px;margin-bottom:10px;background:var(--ws-card)}
.ws-faq summary{cursor:pointer;font-weight:700;color:var(--ws-ink);padding:14px 18px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.ws-faq summary::-webkit-details-marker{display:none}
.ws-faq summary::after{content:"+";font-size:22px;color:var(--ws-primary);font-weight:400}
.ws-faq[open] summary::after{content:"–"}
.ws-faq .a{padding:0 18px 16px;color:var(--ws-body)}
.ws-entries{background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);padding:18px;margin-top:18px}
.ws-entries textarea{width:100%;border:1px solid var(--ws-border);border-radius:10px;padding:10px;font-size:15px;font-family:inherit;resize:vertical;min-height:120px}
.ws-entries .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ws-btn{background:var(--ws-soft);border:1px solid var(--ws-border);color:var(--ws-ink);border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:14px}
.ws-btn:hover{border-color:var(--ws-primary);color:var(--ws-primary)}
.ws-hist{margin-top:18px}
.ws-hist-item{display:flex;justify-content:space-between;background:var(--ws-soft);border-radius:8px;padding:8px 14px;margin-bottom:6px;font-size:15px}
.ws-hist-item span{color:var(--ws-muted);font-size:13px}

/* ============ footer ============ */
.ws-footer{background:var(--ws-dark);margin-top:60px;padding:38px 0 26px;color:#94a3b8;font-size:14px}
.ws-footer-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:var(--ws-max);margin:0 auto;padding:0 20px}
.ws-footer nav{display:flex;gap:16px;flex-wrap:wrap}
.ws-footer a{color:#cbd5e1}
.ws-footer a:hover{color:#fff}
.ws-foot-brand{max-width:340px}
.ws-foot-brand strong{color:#fff!important}
.ws-foot-langs{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:12px}
.ws-foot-langs a{font-size:13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 11px}
.ws-foot-langs a:hover{border-color:rgba(255,255,255,.5)}
.ws-footer .wrap{color:#64748b}
.ws-footer a:hover{color:var(--ws-primary)}

@media(max-width:640px){
  .ws-nav a{padding:8px 8px;font-size:14px}
  .ws-hero{padding:32px 18px}
  .ws-tool{padding:14px}
}

/* ============================================================
   v1.3 DESIGN + UX UPGRADE
   Richer visuals, compact hero, two-column tool.
   ============================================================ */

/* ---- typography + page feel ---- */
body{font-family:var(--ws-font);background:linear-gradient(180deg,#eef2ff 0,#f8fafc 340px,#f8fafc 100%);font-weight:600}
h1,h2,h3,.ws-logo,.ws-spin,.ws-wname,.ws-step b,.ws-feat b,.ws-foot-brand strong{font-family:var(--ws-font-display)}
::selection{background:#fde68a;color:#111827}

/* ---- header ---- */
.ws-header{background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.ws-logo{font-size:24px;letter-spacing:.2px}
.ws-logo svg{transition:transform .6s ease}
.ws-logo:hover svg{transform:rotate(180deg)}
.ws-nav a{border-radius:999px;transition:all .15s}
.ws-nav a:hover{background:#eef2ff;color:var(--ws-primary)}
.ws-langs summary{border-radius:999px}

/* ---- hero: compact, animated, tool-first ---- */
.ws-hero{background:linear-gradient(120deg,#0f172a 0%,#1e3a8a 30%,#6d28d9 62%,#be185d 100%);background-size:220% 220%;animation:wsHeroShift 14s ease-in-out infinite alternate;border-radius:22px;padding:30px 28px 64px;margin:18px 0 0;text-align:left}
@keyframes wsHeroShift{from{background-position:0% 40%}to{background-position:100% 60%}}
.ws-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.20) 1.6px,transparent 1.7px),radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.3px);background-size:26px 26px,42px 42px;background-position:0 0,14px 20px;pointer-events:none}
.ws-hero::after{content:"";position:absolute;left:-46px;bottom:-70px;width:170px;height:170px;border-radius:50%;background:conic-gradient(#f59e0b 0 25%,#10b981 0 50%,#e11d48 0 75%,#3b82f6 0);opacity:.30;animation:wsSlowSpinL 30s linear infinite reverse;pointer-events:none}
@keyframes wsSlowSpinL{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ws-hero h1{font-size:clamp(30px,4.2vw,44px);font-weight:700;max-width:640px;position:relative;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ws-hero p.lead{margin:0;max-width:560px;position:relative}
.ws-hero-wheel{width:250px;height:250px;right:-30px;opacity:.65}
.ws-badges{justify-content:flex-start;margin-top:16px}
.ws-badges span{border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.ws-badges span::before{content:"✓";margin-right:6px;color:#fbbf24;font-weight:900}
@media(max-width:640px){.ws-hero{padding:24px 18px 56px;text-align:center}.ws-badges{justify-content:center}}

/* ---- tool: two-column, overlapping the hero ---- */
.ws-tool{max-width:var(--ws-max);display:grid;grid-template-columns:minmax(360px,470px) 1fr;gap:26px;padding:28px;margin-top:-38px;z-index:2;border-radius:20px;box-shadow:0 24px 60px rgba(30,27,75,.20);animation:wsRise .45s ease both}
@keyframes wsRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ws-tool::before{height:7px;background:linear-gradient(90deg,#2563eb,#7c3aed,#db2777,#f59e0b,#10b981,#2563eb);background-size:200% 100%;animation:wsBarShift 8s linear infinite}
@keyframes wsBarShift{from{background-position:0 0}to{background-position:200% 0}}
.ws-main{display:flex;flex-direction:column}
.ws-stage{width:min(88vw,440px)}
.ws-stage canvas{box-shadow:0 0 0 10px #fff,0 0 0 13px #e2e8f0,0 24px 44px rgba(15,23,42,.28)}
.ws-spin{width:96px;height:96px;font-size:19px;border-width:5px}
.ws-under{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;color:var(--ws-muted);font-size:13.5px;flex-wrap:wrap}
.ws-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ws-side .ws-chips{margin:0;justify-content:flex-start}
.ws-side .ws-entries{margin-top:0}
.ws-side .ws-ctl{margin:0}
.ws-side .ws-hist{margin-top:0}
@media(max-width:899px){.ws-tool{grid-template-columns:1fr;padding:18px 14px}.ws-stage{margin:0 auto}.ws-under{justify-content:center}}

/* ---- preset chips: one colour each ---- */
.ws-chip{border:2px solid transparent;font-weight:800;padding:8px 15px;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.ws-chip[data-preset="yesno"]{background:#dbeafe;color:#1d4ed8}
.ws-chip[data-preset="names"]{background:#ede9fe;color:#6d28d9}
.ws-chip[data-preset="numbers"]{background:#fef3c7;color:#b45309}
.ws-chip[data-preset="colors"]{background:#fce7f3;color:#be185d}
.ws-chip[data-preset="food"]{background:#d1fae5;color:#047857}
.ws-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.13);color:inherit;border-color:currentColor}

/* ---- entries + controls + history panels ---- */
.ws-entries{background:#f8faff;border-color:#dbe4ff;padding:16px}
.ws-entries .row strong{font-size:16px}
.ws-count{color:var(--ws-primary);background:#dbeafe;border-radius:999px;padding:1px 9px;font-size:13.5px;margin-left:4px}
.ws-perline{color:var(--ws-muted);font-weight:600;font-size:13.5px}
.ws-entries textarea{border:2px solid var(--ws-border);border-radius:12px;padding:12px;font-size:15.5px;background:#fff;transition:border-color .15s,box-shadow .15s}
.ws-entries textarea:focus{outline:none;border-color:var(--ws-primary);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.ws-btn{border-radius:999px;padding:8px 15px;font-weight:700;transition:all .15s}
.ws-update{background:var(--ws-grad);color:#fff;border:none}
.ws-update:hover{color:#fff;filter:brightness(1.1);transform:translateY(-1px)}
.ws-check{margin-top:10px;font-size:14.5px}
.ws-check input{width:17px;height:17px;accent-color:var(--ws-primary)}
.ws-ctl{background:var(--ws-soft);border-radius:14px;padding:10px 14px;justify-content:flex-start;gap:16px}
.ws-ctl label{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--ws-body)}
.ws-ctl select{border:2px solid var(--ws-border);border-radius:999px;padding:6px 12px;font-weight:700}
.ws-ctl-btns{margin-left:auto;display:flex;gap:8px}
.ws-iconbtn{border-radius:50%;width:38px;height:38px;border:2px solid var(--ws-border);transition:all .15s}
.ws-iconbtn:hover{border-color:var(--ws-primary);color:var(--ws-primary);transform:translateY(-1px)}
.ws-hist{background:#fff;border:1px solid var(--ws-border);border-radius:var(--ws-radius);padding:14px 16px}
.ws-hist .row{display:flex;justify-content:space-between;align-items:center}
.ws-hist-item{background:#fffbeb;border:1px solid #fde68a;border-left:5px solid var(--ws-accent);border-radius:10px;font-weight:700;color:var(--ws-ink)}
.ws-hist-empty{color:var(--ws-muted);font-size:14.5px;margin-top:8px}

/* ---- content sections ---- */
.ws-section h2{font-size:clamp(25px,3vw,34px)}
.ws-section h2::after{width:86px;height:5px;background:linear-gradient(90deg,#2563eb,#7c3aed,#db2777,#f59e0b)}
.ws-step{padding:22px;box-shadow:0 6px 18px rgba(15,23,42,.05);transition:transform .15s,box-shadow .15s}
.ws-step:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,23,42,.09)}
.ws-step .n{width:46px;height:46px;font-size:20px;font-family:var(--ws-font-display);background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 6px 14px rgba(37,99,235,.35)}
.ws-step:nth-child(2) .n{background:linear-gradient(135deg,#db2777,#f59e0b);box-shadow:0 6px 14px rgba(219,39,119,.3)}
.ws-step:nth-child(3) .n{background:linear-gradient(135deg,#059669,#2563eb);box-shadow:0 6px 14px rgba(5,150,105,.3)}
.ws-step b{font-size:18px}
.ws-feat{padding:22px;border-top-width:5px;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.ws-feat b{font-size:18px}
.ws-feats .ws-feat:nth-child(3n+2){border-top-color:#7c3aed}
.ws-feats .ws-feat:nth-child(3n+3){border-top-color:#db2777}
.ws-feats .ws-feat:nth-child(4n+4){border-top-color:#059669}
.ws-feat:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,23,42,.11)}
.ws-preset{border-width:2px;padding:20px 14px;font-size:16.5px;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:all .15s}
.ws-preset::after{content:"Spin it →";display:block;margin-top:8px;font-size:13px;font-weight:800;color:var(--ws-primary);opacity:0;transition:opacity .15s}
.ws-preset:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,23,42,.10)}
.ws-preset:hover::after{opacity:1}
.ws-faq{border-width:2px;border-radius:14px;transition:border-color .15s,box-shadow .15s}
.ws-faq summary{padding:16px 20px;font-size:16.5px}
.ws-faq summary::after{width:30px;height:30px;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#eef2ff;font-size:20px}
.ws-faq[open ]{border-color:var(--ws-primary);box-shadow:0 10px 24px rgba(37,99,235,.10)}

/* ---- footer ---- */
.ws-footer{position:relative}
.ws-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2563eb,#7c3aed,#db2777,#f59e0b,#10b981)}
.ws-foot-langs a{transition:all .15s}
.ws-foot-langs a:hover{border-color:#fff;color:#fff;transform:translateY(-1px)}

@media (prefers-reduced-motion: reduce){
  .ws-hero,.ws-tool::before,.ws-hero::after{animation:none}
}

/* ============================================================
   v1.4 TOOL-FIRST LAYOUT (three zones, light, wide)
   Own palette: indigo + violet brand, amber badges, ice tint.
   ============================================================ */
:root{
  --ws-primary:#4f46e5;
  --ws-primary-dark:#4338ca;
  --ws-grad:linear-gradient(135deg,#4f46e5,#7c3aed);
}
body{background:#f7f8ff}
main.wrap:has(.ws-tool){max-width:1400px}

/* ---- header: logo left, nav centre, actions right ---- */
.ws-header-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ws-logo{justify-self:start;font-family:var(--ws-font-display);color:var(--ws-ink);-webkit-text-fill-color:currentColor;background:none}
.ws-nav{justify-self:center}
.ws-nav a{font-size:15.5px;color:#1e293b}
.ws-head-right{justify-self:end;display:flex;align-items:center;gap:10px}
.ws-cta{background:var(--ws-grad);color:#fff;font-family:var(--ws-font-display);font-weight:600;font-size:15px;padding:9px 18px;border-radius:9px;box-shadow:0 6px 16px rgba(79,70,229,.35);transition:all .15s;white-space:nowrap}
.ws-cta:hover{color:#fff;filter:brightness(1.1);transform:translateY(-1px)}
@media(max-width:760px){.ws-cta{display:none}.ws-header-in{grid-template-columns:auto 1fr}.ws-head-right{justify-self:end}.ws-nav{display:none}}

/* ---- slim title bar (replaces the hero banner) ---- */
.ws-titlebar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:20px 4px 12px}
.ws-titlebar h1{font-size:clamp(24px,3vw,34px);margin:0;line-height:1.2}
.ws-titlebar p.lead{margin:4px 0 0;color:var(--ws-muted);font-size:16px;max-width:640px}
.ws-titlebar .ws-badges{margin:0 0 4px;display:flex;gap:6px;flex-wrap:wrap}
.ws-titlebar .ws-badges span{border:1px solid #e0e7ff;background:#eef2ff;color:#4338ca;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:800}
.ws-titlebar .ws-badges span::before{content:"✓";margin-right:5px;color:#f59e0b;font-weight:900}

/* ---- tool: three zones on a soft tint ---- */
.ws-tool{grid-template-columns:232px minmax(0,1fr) 336px;gap:18px;align-items:start;background:linear-gradient(180deg,#edf1ff 0%,#f3f0ff 100%);border:1px solid #e3e8ff;border-radius:20px;padding:18px;margin-top:6px;box-shadow:0 18px 44px rgba(67,56,202,.10);animation:none}
.ws-tool::before{display:none}
.ws-discover{background:#fff;border:1px solid #e6e9f5;border-radius:14px;padding:8px 0;box-shadow:0 8px 22px rgba(30,27,75,.06)}
.ws-discover .ws-discover-title{font-size:14.5px;margin:8px 16px 10px;color:var(--ws-ink);background:#eef2ff;border-radius:8px;padding:8px 10px;font-weight:700;font-family:var(--ws-font-display)}
.ws-discover a{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;color:#1e293b;font-weight:700;font-size:14.5px;border-top:1px solid #f1f5f9}
.ws-discover a span{color:#94a3b8;font-size:18px}
.ws-discover a:hover{color:var(--ws-primary);background:#fafaff}
.ws-main{background:transparent;display:flex;flex-direction:column;align-items:center}
.ws-topbar{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ws-topbar-tip{font-size:13px;color:#6366f1;font-weight:700}
.ws-topbar-btns{display:flex;gap:8px}
.ws-topbar .ws-iconbtn{background:#fff;border-color:#e0e7ff}
.ws-stage{width:min(100%,560px)}
.ws-stage canvas{box-shadow:0 22px 48px rgba(30,27,75,.22)}
.ws-pointer{border-top-color:#4f46e5;border-left-width:16px;border-right-width:16px;border-top-width:30px;top:-12px}
.ws-spin{background:#fff;color:var(--ws-primary);border:5px solid #eef2ff;width:104px;height:104px;font-size:19px;box-shadow:0 10px 26px rgba(30,27,75,.25);animation:none}
.ws-spin:hover{filter:none;background:#eef2ff}
.ws-under{margin-top:12px;color:#6366f1;font-weight:700;font-size:13.5px}

/* ---- side panel: tabs, toolbar, accordions ---- */
.ws-side{gap:0}
.ws-tabs{display:flex;gap:2px;background:#fff;border:1px solid #e6e9f5;border-bottom:none;border-radius:14px 14px 0 0;padding:8px 10px 0}
.ws-tab{background:none;border:none;border-bottom:3px solid transparent;font-family:var(--ws-font-display);font-weight:600;font-size:15.5px;color:#64748b;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ws-tab.active{color:var(--ws-ink);border-bottom-color:var(--ws-primary)}
.ws-badge{background:#f59e0b;color:#fff;border-radius:999px;font-family:var(--ws-font);font-size:12px;font-weight:900;padding:1px 8px;min-width:24px;text-align:center}
.ws-res-count{background:#a5b4fc}
.ws-panel{background:#fff;border:1px solid #e6e9f5;border-top:none;padding:12px 14px 14px}
.ws-panel[data-panel="results"]{border-top:1px solid #e6e9f5}
.ws-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ws-toolbtn{background:#fff;border:1px solid #e2e8f0;border-radius:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .15s}
.ws-toolbtn:hover{border-color:var(--ws-primary);color:var(--ws-primary);transform:translateY(-1px)}
.ws-toolbar-note{margin-left:auto;font-size:12.5px;color:var(--ws-muted);font-weight:700}
.ws-panel .ws-list{width:100%;border:1px solid #e6e9f5;border-radius:10px;padding:12px;font-size:15px;font-family:inherit;resize:vertical;background:#fbfbfe;line-height:1.9}
.ws-panel .ws-list:focus{outline:none;border-color:var(--ws-primary);box-shadow:0 0 0 3px rgba(79,70,229,.14);background:#fff}
.ws-hist{border:none;padding:2px}
.ws-acc{background:#fff;border:1px solid #e6e9f5;border-top:none;padding:0 14px}
.ws-acc:last-child{border-radius:0 0 14px 14px;padding-bottom:12px}
.ws-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:12.5px;font-weight:900;letter-spacing:1.6px;color:#64748b;text-transform:uppercase}
.ws-acc summary::-webkit-details-marker{display:none}
.ws-acc summary::after{content:"▾";font-size:14px;color:#94a3b8}
.ws-acc-body{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.ws-acc-body label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ws-body)}
.ws-acc-body select{border:1px solid #e2e8f0;border-radius:8px;padding:6px 10px;font-size:14px;font-weight:700;color:var(--ws-ink);background:#fff}
.ws-acc .ws-chips{justify-content:flex-start;margin:0}
.ws-chip{font-size:13.5px;padding:7px 12px}

/* ---- sections under the tool: centred headings ---- */
.ws-section h2{text-align:center}
.ws-section h2::after{left:50%;transform:translateX(-50%)}

/* ---- responsive: stack zones, wheel first ---- */
@media(max-width:1099px){
  .ws-tool{grid-template-columns:minmax(0,1fr) 320px}
  .ws-discover{display:none}
}
@media(max-width:760px){
  .ws-tool{grid-template-columns:1fr;padding:12px}
  .ws-side{order:2}
  .ws-stage{width:min(94vw,440px)}
  .ws-titlebar{padding-top:14px}
}

/* ============ v1.5: professional results (winner card + history) ============ */
.ws-reveal{background:rgba(13,16,38,.48)}
.ws-card{background:#fff;border:1px solid var(--ws-border);border-radius:16px;padding:30px 44px 24px;box-shadow:0 24px 60px rgba(15,18,50,.28);animation:wsFadeUp .35s ease both}
@keyframes wsFadeUp{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.ws-ribbon{height:4px;background:linear-gradient(90deg,var(--ws-primary),#7c3aed)}
.ws-wlabel{font-size:12px;letter-spacing:3px;color:var(--ws-primary);margin-bottom:6px}
.ws-wname{font-size:40px;color:var(--ws-ink)}
.ws-wverdict{font-size:15px;font-weight:600;color:var(--ws-muted);margin-top:8px}
.ws-wactions{margin-top:18px}
.ws-wactions .ws-btn{background:#fff;border:1px solid var(--ws-border);color:var(--ws-ink);border-radius:10px;padding:10px 20px}
.ws-wactions .ws-btn.ws-again{background:linear-gradient(135deg,var(--ws-primary),#7c3aed);border:none;color:#fff}
.ws-wsub{margin-top:14px}
.ws-hist-item{background:#fff;border:1px solid var(--ws-border);border-left:3px solid var(--ws-primary);border-radius:10px;font-weight:600}

/* ============ v1.5.1: professional header + footer ============ */
.ws-header::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ws-primary),#7c3aed)}
.ws-logo svg{width:32px;height:32px;filter:drop-shadow(0 2px 6px rgba(79,70,229,.35))}
.ws-nav li{list-style:none}
.ws-nav li.current-menu-item a{color:var(--ws-primary);background:#eef2ff}
.ws-langs summary{display:flex;align-items:center;gap:7px;border-radius:10px;transition:border-color .15s}
.ws-langs summary:hover{border-color:var(--ws-primary)}
.ws-langs summary .ws-chev{color:#94a3b8;font-size:11px}
.ws-langs .ws-lang-menu{border-radius:12px}
.ws-cta{border-radius:10px;padding:10px 20px;box-shadow:0 4px 14px rgba(79,70,229,.28)}
.ws-footer::before{background:linear-gradient(90deg,var(--ws-primary),#7c3aed);height:3px}
.ws-footer{padding:48px 0 0}
.ws-footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;align-items:start}
.ws-foot-logo{display:flex;align-items:center;gap:10px}
.ws-foot-logo svg{width:30px;height:30px}
.ws-foot-logo strong{color:#fff;font-size:19px}
.ws-foot-tag{margin-top:12px;line-height:1.65;color:#94a3b8;max-width:320px}
.ws-foot-head{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e2e8f0;margin-bottom:14px}
.ws-foot-nav{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ws-foot-nav li{list-style:none}
.ws-foot-nav a{font-size:14.5px}
.ws-foot-langs2{display:flex;flex-direction:column;gap:9px}
.ws-foot-langs2 a{font-size:14.5px}
.ws-foot-langs2 a[aria-current="page"]{color:#fff;font-weight:700}
.ws-footer-bar{max-width:var(--ws-max);margin:36px auto 0;padding:18px 20px 22px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#7d8aa0}
@media (max-width:760px){.ws-footer-in{grid-template-columns:1fr;gap:26px}}

/* ============ v1.6.0: RTL support (Arabic) ============ */
[dir="rtl"] .ws-langs .ws-lang-menu{right:auto;left:0}
[dir="rtl"] .ws-list{text-align:right}

/* ============================================================
   v1.6.2: BLOG — index grid, post cards, single article,
   category archives. Uses only the tokens in :root above.
   ============================================================ */
.ws-blog-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 22px}
.ws-blog-chips a{border:1px solid var(--ws-border);background:var(--ws-card);color:var(--ws-body);border-radius:999px;padding:7px 15px;font-size:14px;font-weight:700;transition:all .15s}
.ws-blog-chips a:hover{border-color:var(--ws-primary);color:var(--ws-primary);transform:translateY(-1px)}
.ws-blog-chips a.active{background:var(--ws-grad);border-color:transparent;color:#fff}
.ws-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.ws-post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ws-post-grid{grid-template-columns:1fr}}
.ws-post-card{background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(15,23,42,.05);transition:transform .15s,box-shadow .15s}
.ws-post-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,23,42,.10)}
.ws-post-cover{display:block;aspect-ratio:16/9;background:var(--ws-grad);position:relative;overflow:hidden}
.ws-post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ws-post-cover-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ws-post-cover-initial span{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-family:var(--ws-font-display);font-size:34px;font-weight:700;color:#fff}
.ws-post-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.ws-cat-chip{align-self:flex-start;background:#eef2ff;color:var(--ws-primary-dark);border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:800;letter-spacing:.4px}
.ws-cat-chip a{color:inherit}
.ws-titlebar-text .ws-cat-chip{display:inline-block;margin-bottom:10px}
.ws-post-title{margin:0;font-size:20px;line-height:1.3}
.ws-post-title a{color:inherit}
.ws-post-title a:hover{color:var(--ws-primary)}
.ws-post-excerpt{margin:0;color:var(--ws-body);font-size:15.5px;line-height:1.6}
.ws-post-meta{margin-top:auto;padding-top:6px;color:var(--ws-muted);font-size:13.5px;font-weight:600;display:flex;gap:8px;flex-wrap:wrap}
.ws-post-card-featured{grid-column:1/-1}
@media(min-width:761px){
.ws-post-card-featured{flex-direction:row}
.ws-post-card-featured .ws-post-cover{flex:1 1 50%;aspect-ratio:auto;min-height:280px}
.ws-post-card-featured .ws-post-body{flex:1 1 50%;justify-content:center;padding:30px 34px}
.ws-post-card-featured .ws-post-title{font-size:clamp(24px,3vw,32px)}
.ws-post-card-featured .ws-post-excerpt{font-size:16.5px}
}
.ws-pagination{margin:34px 0 6px;text-align:center}
.ws-pagination .page-numbers{display:inline-block;border:1px solid var(--ws-border);background:var(--ws-card);color:var(--ws-body);border-radius:999px;padding:8px 15px;margin:0 3px;font-weight:700;font-size:14.5px}
.ws-pagination .page-numbers:hover{border-color:var(--ws-primary);color:var(--ws-primary)}
.ws-pagination .page-numbers.current{background:var(--ws-grad);border-color:transparent;color:#fff}
.ws-blog-empty{background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);padding:44px 28px;text-align:center;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.ws-blog-empty h2{margin:0 0 8px}
.ws-blog-empty p{color:var(--ws-muted);margin:0 auto 20px;max-width:440px}
/* ---- single post ---- */
.ws-meta-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;color:var(--ws-muted);font-size:14.5px;font-weight:600;margin-top:8px}
.ws-article{max-width:720px;margin:10px auto 0;font-size:17.5px}
.ws-article p{margin:0 0 20px}
.ws-article h2{font-size:clamp(23px,2.6vw,29px);margin:38px 0 12px}
.ws-article h3{font-size:21px;margin:30px 0 10px}
.ws-article ul,.ws-article ol{margin:0 0 20px;padding-left:24px}
.ws-article li{margin-bottom:8px}
.ws-article blockquote{margin:26px 0;padding:16px 22px;background:var(--ws-soft);border-left:4px solid var(--ws-primary);border-radius:0 var(--ws-radius) var(--ws-radius) 0}
.ws-article blockquote p{margin:0}
.ws-article img{border-radius:var(--ws-radius)}
.ws-article code{background:var(--ws-soft);border-radius:6px;padding:2px 6px;font-size:15px}
.ws-article pre{background:var(--ws-dark);color:#e2e8f0;border-radius:var(--ws-radius);padding:16px 18px;overflow:auto}
.ws-article pre code{background:none;color:inherit;padding:0}
.ws-article a{text-decoration:underline;text-underline-offset:3px}
.ws-article-cta{max-width:720px;margin:38px auto 0;background:linear-gradient(180deg,#edf1ff,#f3f0ff);border:1px solid #e3e8ff;border-radius:var(--ws-radius);padding:26px 28px;text-align:center}
.ws-article-cta h2{margin:0 0 6px;font-size:24px}
.ws-article-cta p{margin:0 auto 16px;color:var(--ws-body);max-width:460px}
.ws-post-nav{max-width:720px;margin:26px auto 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ws-post-nav a{background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);padding:13px 18px;font-weight:700;color:var(--ws-ink);max-width:48%}
.ws-post-nav a:hover{border-color:var(--ws-primary);color:var(--ws-primary)}
.ws-post-nav a.ws-next{margin-left:auto;text-align:right}
.ws-post-nav small{display:block;color:var(--ws-muted);font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.ws-related{margin-top:48px}

/* ============================================================
   v1.6.2: HEADER DROPDOWN — Primary menu sub-menus on the
   standard wp_nav_menu output (li.menu-item-has-children >
   ul.sub-menu). Pure CSS: opens on :hover and :focus-within,
   so a first tap on touch devices opens it via focus and a
   second tap follows the parent link.
   ============================================================ */
.ws-nav li.menu-item-has-children{position:relative}
.ws-nav li.menu-item-has-children > a{display:inline-flex;align-items:center}
.ws-nav li.menu-item-has-children > a::after{content:"";margin-left:6px;border:5px solid transparent;border-top:6px solid currentColor;border-bottom:0;opacity:.5}
.ws-nav .sub-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:min(268px,calc(100vw - 24px));margin:0;padding:10px;list-style:none;background:var(--ws-card);border:1px solid var(--ws-border);border-radius:var(--ws-radius);box-shadow:0 18px 44px rgba(30,27,75,.16);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.ws-nav .sub-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.ws-nav li.menu-item-has-children:hover > .sub-menu,.ws-nav li.menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ws-nav .sub-menu li{list-style:none}
.ws-nav .sub-menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--ws-body);font-weight:600;font-size:14.5px}
.ws-nav .sub-menu a:hover{background:#eef2ff;color:var(--ws-primary)}
.ws-nav .sub-menu li.current-menu-item a{color:var(--ws-primary);background:#eef2ff}
.ws-nav > li:last-child .sub-menu{left:auto;right:0}
@media(min-width:900px){
.ws-nav .sub-menu{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;width:472px}
}

/* ============================================================
   v1.6.3: FOOTER SOCIAL — circular icon buttons in the footer
   brand column. Inline SVG brand glyphs (no icon fonts, no
   external assets). Links are "#" placeholders until the
   owner supplies the real profile URLs.
   ============================================================ */
.ws-foot-social{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.ws-foot-social-label{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#e2e8f0;margin-right:2px}
.ws-footer a.ws-social-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(99,102,241,.22);color:#fff;transition:background .15s,transform .15s}
.ws-footer a.ws-social-btn svg{width:18px;height:18px;fill:currentColor}
.ws-footer a.ws-social-btn:hover{background:var(--ws-primary);color:#fff;transform:translateY(-2px)}

/* ============================================================
   v1.6.4: FOOTER SEARCH — search box in the footer brand
   column (below the social row), submitting to the standard
   WordPress search results page (search.php). Input styled
   for the dark footer; button in the brand primary.
   ============================================================ */
.ws-foot-search-wrap{margin-top:22px}
.ws-foot-search-wrap .ws-foot-head{margin-bottom:10px}
.ws-foot-search{display:flex;gap:8px}
.ws-foot-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-foot-search input[type="search"]{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:10px 12px;color:#fff;font:inherit;font-size:14px}
.ws-foot-search input[type="search"]::placeholder{color:#94a3b8}
.ws-foot-search input[type="search"]:focus{outline:none;border-color:var(--ws-primary);box-shadow:0 0 0 3px rgba(79,70,229,.35)}
.ws-foot-search button{background:var(--ws-primary);color:#fff;border:none;border-radius:9px;padding:10px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.ws-foot-search button:hover{background:var(--ws-primary-dark)}

/* ============================================================
   v1.6.5: WHEEL MATH FIX (wheel.js) — the winner calculation
   now includes the -90deg top-pointer offset, so the announced
   winner always matches the slice under the pointer (it was
   previously computed from angle 0 and disagreed on most
   spins). Also fixed saveList(), which recursed into itself
   and silently broke list saving, shuffle/preset rebuilds and
   the spin button re-enable on shared-list pages.
   ============================================================ */

/* ============================================================
   v1.6.6: SINGLE POST HERO — the featured image shows at the
   top of the article column on single posts (it already showed
   on blog cards). Same width as the article, theme radius.
   ============================================================ */
.ws-post-hero{max-width:720px;margin:4px auto 26px}
.ws-post-hero img{width:100%;height:auto;display:block;border-radius:var(--ws-radius);box-shadow:0 14px 34px rgba(30,27,75,.14)}

/* ============================================================
   v1.6.7: CONTENT IMAGES — figures placed inside page content
   (e.g. the two homepage illustrations) get the theme radius,
   full column width and a soft shadow.
   ============================================================ */
.ws-home-article{max-width:720px;margin:44px auto}
figure.ws-content-img{margin:10px 0 28px}
figure.ws-content-img img{width:100%;height:auto;display:block;border-radius:var(--ws-radius);box-shadow:0 14px 34px rgba(30,27,75,.13)}

/* ============ v1.7.3: professional cards (Ali feedback 2026-10-21) ============
   One card system for steps, features and ready-made wheels: soft layered
   shadow, 16px radius, consistent padding, smooth hover lift. Ready-made
   cards get a mini-wheel chip (pure CSS conic gradient), left-aligned text
   and an always-visible CTA (was hover-only, invisible on mobile). */
.ws-presets{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ws-preset{border:1px solid var(--ws-border);border-radius:16px;padding:20px;text-align:left;align-items:flex-start;justify-content:flex-start;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ws-preset::before{content:"";width:38px;height:38px;border-radius:50%;margin-bottom:12px;background:radial-gradient(circle,#fff 0 24%,rgba(255,255,255,0) 25%),conic-gradient(from 20deg,#f59e0b 0 25%,#ef4444 0 50%,#7c3aed 0 75%,#2563eb 0 100%);box-shadow:inset 0 0 0 2px #fff,0 2px 6px rgba(15,23,42,.18)}
.ws-preset small{margin-top:5px;font-size:13.5px;line-height:1.45}
.ws-preset::after{opacity:1;margin-top:auto;padding-top:14px;transition:transform .18s ease}
.ws-preset:hover{transform:translateY(-4px);border-color:rgba(79,70,229,.45);box-shadow:0 4px 8px rgba(15,23,42,.05),0 18px 38px rgba(79,70,229,.14)}
.ws-preset:hover::after{transform:translateX(3px)}
.ws-feats{grid-auto-rows:1fr}
.ws-feat{height:100%;display:flex;flex-direction:column;border-radius:16px;border-top-width:4px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.06);transition:transform .18s ease,box-shadow .18s ease}
.ws-feat:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(15,23,42,.05),0 18px 38px rgba(79,70,229,.12)}
.ws-step{border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.06)}
.ws-step .n{background:var(--ws-grad);width:34px;height:34px;box-shadow:0 4px 10px rgba(79,70,229,.35)}

/* ============================================================
   v1.7.5: MOBILE PASS (Ali feedback 2026-10-22). On phones the
   primary nav and the CTA are hidden below 760px and the
   Discover card below 1100px, so mobile visitors had NO way to
   reach the other tools. The wheel stage was also sized in vw
   inside padded containers, which could push it wider than
   the screen, form controls under 16px trigger iOS auto-zoom,
   and the winner card kept desktop padding. Everything below
   is scoped to small screens or to the new mobile-only menu,
   so the desktop layout is untouched.
   ============================================================ */
.ws-mnav{display:none}
@media(max-width:760px){
  /* mobile menu: hamburger + dropdown panel, pure CSS like the language switcher */
  .ws-mnav{display:block;position:relative}
  .ws-mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--ws-border);border-radius:10px;color:var(--ws-ink);background:#fff}
  .ws-mnav summary::-webkit-details-marker{display:none}
  .ws-mnav-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 24px));max-height:72vh;overflow:auto;background:var(--ws-card);border:1px solid var(--ws-border);border-radius:14px;box-shadow:0 18px 44px rgba(30,27,75,.18);padding:8px;z-index:80}
  .ws-mnav-panel ul{margin:0;padding:0;list-style:none}
  .ws-mnav-panel a{display:block;padding:11px 12px;border-radius:9px;color:var(--ws-body);font-weight:700;font-size:15.5px}
  .ws-mnav-panel a:hover{background:#eef2ff;color:var(--ws-primary)}
  .ws-mnav-panel .sub-menu{margin:2px 0 6px;padding:0 0 0 14px;list-style:none;border-left:2px solid #eef2ff}
  .ws-mnav-panel .sub-menu a{padding:8px 12px;font-size:14.5px;font-weight:600}
  .ws-mnav-panel li.current-menu-item > a{color:var(--ws-primary);background:#eef2ff}
  [dir="rtl"] .ws-mnav-panel{right:auto;left:0}
  /* header fits small screens */
  .ws-header-in{padding:10px 14px;gap:8px}
  .ws-logo{font-size:20px}
  .ws-logo svg{width:27px;height:27px}
  .ws-langs summary{padding:8px 10px;font-size:14px}
  .wrap{padding:0 14px}
  /* tool: the wheel takes the full column and never wider */
  .ws-stage{width:100%;max-width:440px}
  .ws-topbar-tip{display:none}
  .ws-toolbtn{width:40px;height:40px}
  .ws-tab{padding:10px 12px}
  .ws-chip{padding:9px 14px}
  /* form controls at 16px stop the iOS focus zoom */
  .ws-panel .ws-list{font-size:16px}
  .ws-acc-body select{font-size:16px}
  .ws-foot-search input[type="search"]{font-size:16px}
  /* winner card sized for phones */
  .ws-card{padding:22px 18px 18px}
  .ws-wname{font-size:31px}
  .ws-wactions{gap:8px}
  .ws-wactions .ws-btn{flex:1 1 118px;padding:12px 8px}
  /* single post prev/next links stack full width */
  .ws-post-nav{flex-direction:column}
  .ws-post-nav a{max-width:100%}
  .ws-post-nav a.ws-next{margin-left:0;text-align:left}
}

/* ============================================================
   v1.7.6: MOBILE CARD SPACING (Ali feedback 2026-10-22). The
   feature and preset grids use equal-height rows
   (grid-auto-rows:1fr), which looks tidy across a desktop row
   but on a phone, where cards stack one per row, it stretches
   EVERY card to the tallest card's height and leaves big
   empty space inside the short ones. On small screens each
   card sizes to its own content and the spacing tightens up.
   Desktop is untouched.
   ============================================================ */
@media(max-width:760px){
  .ws-feats,.ws-presets{grid-auto-rows:auto;gap:10px}
  .ws-feat{height:auto;padding:16px}
  .ws-preset{padding:16px}
  .ws-home-article{margin:26px auto}
}

/* ============================================================
   v1.7.7: MOBILE MENU PANEL POSITION (Ali feedback 2026-10-22).
   The dropdown panel was anchored to the hamburger button,
   but the button is not at the screen edge (the language pill
   sits to its right), so the 300px panel slid off the LEFT
   edge of the screen by roughly 45-75px on typical phones and
   looked broken. The panel now anchors to the header's right
   hand container, whose edge sits at the screen edge, so the
   panel always opens fully on screen.
   ============================================================ */
@media(max-width:760px){
  .ws-head-right{position:relative}
  .ws-mnav{position:static}
}

/* ============================================================
   v1.7.8: LONGER SITE NAME (Ali, 2026-10-22). The site title is
   now "Wheel Spinner App"; the smaller logo sizing below keeps
   the longer name, the menu button and the language pill on
   one line on phones. Desktop is unchanged.
   ============================================================ */
@media(max-width:760px){
  .ws-logo{font-size:17px}
  .ws-logo svg{width:25px;height:25px}
}
@media(max-width:380px){
  .ws-logo{font-size:15.5px}
}

/* v1.7.9: logo lockup - the wordmark never wraps; header tracks sized to content */
.ws-header-in{grid-template-columns:auto 1fr auto}
.ws-logo{white-space:nowrap;flex:none;font-size:23px;letter-spacing:-.2px;gap:8px}
.ws-logo svg{flex:none}
@media(max-width:1100px){
  .ws-logo{font-size:20px}
  .ws-logo svg{width:27px;height:27px}
}
@media(max-width:760px){
  .ws-header-in{grid-template-columns:auto 1fr}
  .ws-logo{font-size:16.5px}
  .ws-logo svg{width:25px;height:25px}
}
@media(max-width:380px){
  .ws-logo{font-size:15px}
}

/* v1.7.10: SVG logo lockup - one scalable unit, can never wrap or stack */
.ws-logo{gap:0}
.ws-logo .ws-logo-lockup{display:block;width:216px;height:auto}
.ws-logo .ws-logo-wheel{transform-box:fill-box;transform-origin:center;transition:transform .6s ease}
.ws-logo:hover .ws-logo-wheel{transform:rotate(180deg)}
.ws-logo:hover svg{transform:none}
.ws-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){
  .ws-logo .ws-logo-lockup{width:172px}
}
@media(max-width:380px){
  .ws-logo .ws-logo-lockup{width:158px}
}