.sir-page{
  --b:#1468e8;
  --b2:#6c4cff;
  --r:#ef334e;
  --ink:#13213a;
  --muted:#697386;
  --line:#e4e9f2;
  max-width:1180px;
  margin:auto;
  padding:28px 16px 64px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 5%,rgba(20,104,232,.10),transparent 28%),
    radial-gradient(circle at 95% 10%,rgba(239,51,78,.08),transparent 25%),
    linear-gradient(180deg,#f8fbff 0%,#ffffff 45%,#f7f9fd 100%);
  border-radius:30px
}

.sir-hero{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:32px;
  align-items:center;
  padding:48px;
  border:1px solid rgba(20,104,232,.13);
  border-radius:30px;
  background:
    linear-gradient(135deg,rgba(20,104,232,.10),rgba(255,255,255,.96) 50%,rgba(239,51,78,.08));
  box-shadow:0 22px 60px rgba(35,65,120,.10);
  overflow:hidden
}
.sir-badge{
  display:inline-block;
  padding:8px 13px;
  border-radius:999px;
  background:linear-gradient(135deg,#eaf2ff,#f2efff);
  color:var(--b);
  font-size:12px;
  font-weight:900;
  letter-spacing:.55px
}
.sir-hero h1{
  font-size:clamp(40px,6vw,70px);
  line-height:1.02;
  margin:15px 0;
  letter-spacing:-1.5px
}
.sir-hero p{
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  max-width:760px
}
.sir-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.sir-points span{
  background:rgba(255,255,255,.9);
  border:1px solid #dfe6ef;
  border-radius:13px;
  padding:10px 13px;
  font-weight:800;
  font-size:14px;
  box-shadow:0 5px 16px rgba(31,62,113,.05)
}
.sir-art{
  width:265px;
  height:265px;
  margin:auto;
  background:linear-gradient(145deg,#ffffff,#f4f8ff);
  border:1px solid #e1e7f0;
  border-radius:30px;
  box-shadow:0 22px 50px rgba(20,55,120,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:transform .28s ease,box-shadow .28s ease
}
.sir-art:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 28px 65px rgba(20,55,120,.18)}
.sir-art div{font-size:74px}
.sir-art strong{font-size:21px;margin-top:10px}

.sir-tool{
  margin-top:30px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:26px;
  padding:26px;
  box-shadow:0 16px 50px rgba(23,51,97,.09)
}
.sir-drop{
  min-height:245px;
  border:2px dashed #4382e7;
  border-radius:20px;
  background:linear-gradient(180deg,#fbfdff,#f5f9ff);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px;
  cursor:pointer;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease
}
.sir-drop:hover{
  transform:translateY(-3px);
  border-color:var(--b);
  background:#f0f6ff;
  box-shadow:0 14px 30px rgba(20,104,232,.09)
}
.sir-icon{font-size:58px}
.sir-drop h2{margin:9px 0 4px}
.sir-drop p{color:var(--muted);margin-bottom:16px}

.sir-btn{
  border:0;
  border-radius:13px;
  padding:14px 20px;
  font-weight:900;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease
}
.sir-btn:hover:not(:disabled){
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(23,51,97,.18);
  filter:brightness(1.03)
}
.sir-btn:active:not(:disabled){transform:translateY(-1px)}
.sir-btn:disabled{opacity:.55;cursor:not-allowed}
.sir-blue{background:linear-gradient(135deg,#0f6de8,#5549e8);color:#fff}
.sir-red{background:linear-gradient(135deg,#ef334e,#d91f6d);color:#fff}
.sir-light{background:#edf4ff;color:var(--b);border:1px solid #dbe7fb}

.sir-previewbox{
  margin-top:20px;
  text-align:center;
  background:#f8fafc;
  border:1px solid #e4e9f1;
  border-radius:17px;
  padding:15px;
  transition:transform .25s ease,box-shadow .25s ease
}
.sir-previewbox:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,51,97,.08)}
.sir-preview{max-width:100%;max-height:390px;object-fit:contain;border-radius:11px}
.sir-meta{margin-top:9px;color:var(--muted);font-size:13px;font-weight:700}

.sir-sizebox{
  margin-top:20px;
  border:1px solid #dfe6ef;
  border-radius:18px;
  padding:21px;
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
.sir-sizebox:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(23,51,97,.08);border-color:#cfdcf0}
.sir-sizehead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sir-sizehead strong{font-size:18px}
.sir-size{
  font-size:28px;
  font-weight:950;
  color:var(--b);
  background:#edf4ff;
  border:1px solid #d5e4fb;
  padding:7px 12px;
  border-radius:12px;
  min-width:108px;
  text-align:center
}
.sir-slider{
  width:100%;
  margin:22px 0 10px;
  accent-color:var(--b);
  height:8px
}
.sir-labels{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#34435d;
  font-size:13px;
  font-weight:900;
  margin-top:2px
}
.sir-labels span{
  display:inline-block;
  background:#f2f5f9;
  border:1px solid #e0e6ef;
  border-radius:9px;
  padding:5px 9px
}
.sir-quick{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  margin-top:16px
}
.sir-quick button{
  padding:11px 6px;
  border:1px solid #dfe5ed;
  background:#f5f7fb;
  border-radius:11px;
  font-weight:900;
  cursor:pointer;
  color:#1e2b43;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease
}
.sir-quick button:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg,#1468e8,#5549e8);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(20,104,232,.18)
}

.sir-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.sir-actions .sir-btn{flex:1;min-height:50px}
.sir-status{
  margin-top:15px;
  padding:14px;
  border-radius:12px;
  background:#effaf3;
  border:1px solid #caead5;
  color:#176b3a;
  font-weight:700
}

.sir-content,.sir-how,.sir-faq{padding-top:58px}
.sir-title{text-align:center;max-width:820px;margin:0 auto 30px}
.sir-title span{color:var(--b);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.7px}
.sir-title h2{font-size:clamp(29px,4vw,43px);margin:9px 0 10px;letter-spacing:-.5px}
.sir-title p{color:var(--muted);line-height:1.75}

.sir-grid,.sir-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.sir-grid article,.sir-steps>div{
  background:linear-gradient(180deg,#fff,#fbfcff);
  border:1px solid #e3e8ef;
  border-radius:19px;
  padding:23px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
.sir-grid article:hover,.sir-steps>div:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 38px rgba(23,51,97,.12);
  border-color:#cbd9ef
}
.sir-grid article>div{font-size:36px}
.sir-grid h3,.sir-steps h3{margin:11px 0 7px}
.sir-grid p,.sir-steps p{color:var(--muted);line-height:1.65;margin-bottom:0}
.sir-steps{text-align:center}
.sir-steps b{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#1468e8,#5549e8);
  color:#fff;
  box-shadow:0 8px 20px rgba(20,104,232,.18)
}

.sir-note{
  margin-top:50px;
  padding:30px;
  border-radius:21px;
  background:linear-gradient(135deg,#fff9e8,#fffdf7);
  border:1px solid #eedca8;
  transition:transform .25s ease,box-shadow .25s ease
}
.sir-note:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(130,96,24,.10)}
.sir-note p{color:#6d5a27;line-height:1.75;margin-bottom:0}

.sir-faq details{
  background:#fff;
  border:1px solid #e3e8ef;
  border-radius:15px;
  margin:11px 0;
  padding:17px 19px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.sir-faq details:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,51,97,.08);border-color:#cfdcf0}
.sir-faq summary{font-weight:900;cursor:pointer}
.sir-faq p{color:var(--muted);line-height:1.65}

@media(max-width:850px){
  .sir-hero{grid-template-columns:1fr;padding:28px}
  .sir-art{display:none}
  .sir-grid,.sir-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .sir-page{padding:12px 10px 42px;border-radius:18px}
  .sir-hero{padding:24px 18px;border-radius:22px}
  .sir-hero p{font-size:16px}
  .sir-tool{padding:14px;border-radius:20px}
  .sir-sizehead{align-items:flex-start}
  .sir-size{font-size:23px;min-width:96px}
  .sir-labels{font-size:12px}
  .sir-quick{grid-template-columns:repeat(3,1fr)}
  .sir-actions{flex-direction:column}
  .sir-actions .sir-btn{width:100%}
  .sir-grid,.sir-steps{grid-template-columns:1fr}
}


/* v1.2 — stronger contrast for white WordPress themes */
.sir-page{
  background:
    radial-gradient(circle at 8% 4%,rgba(20,104,232,.14),transparent 27%),
    radial-gradient(circle at 94% 7%,rgba(239,51,78,.11),transparent 24%),
    linear-gradient(180deg,#edf4ff 0%,#f6f8fc 42%,#eef2f8 100%);
  border:1px solid #d8e1ee;
}
.sir-hero{
  background:linear-gradient(135deg,#e5f0ff 0%,#ffffff 52%,#ffe9ee 100%);
  border-color:#cbd9ec;
}
.sir-tool{
  background:#ffffff;
  border:1px solid #cfd9e8;
  box-shadow:0 18px 48px rgba(26,55,100,.14);
}
.sir-drop{
  background:linear-gradient(180deg,#eef6ff,#f8fbff);
  border-color:#397ce0;
}
.sir-sizebox{
  background:#f3f7fd;
  border-color:#cbd8e9;
}
.sir-previewbox{
  background:#eef3f9;
  border-color:#ccd8e6;
}
.sir-grid article{
  background:linear-gradient(180deg,#ffffff,#eef5ff);
  border-color:#ccd9ea;
  box-shadow:0 8px 22px rgba(30,58,105,.07);
}
.sir-steps>div{
  background:linear-gradient(180deg,#f4f8ff,#eaf2ff);
  border-color:#c7d7ed;
  box-shadow:0 8px 22px rgba(30,58,105,.07);
}
.sir-faq details{
  background:#f7f9fd;
  border-color:#ccd7e5;
}
.sir-title h2,.sir-grid h3,.sir-steps h3,.sir-faq summary{color:#14233d}
.sir-title p,.sir-grid p,.sir-steps p,.sir-faq p{color:#56657a}
.sir-note{
  background:linear-gradient(135deg,#fff3cf,#fffaf0);
  border-color:#e5c96f;
}

/* v1.3 — Navy Blue + White + Gold Theme */
.sir-page{
  --navy:#071b4b;--navy2:#0c2d72;--gold:#f4c542;--gold2:#ffd86b;--white:#fff;
  max-width:1180px;margin:auto;padding:28px 16px 64px;color:#fff;
  background:
    radial-gradient(circle at 18% 0%,rgba(39,87,170,.35),transparent 30%),
    radial-gradient(circle at 88% 8%,rgba(244,197,66,.10),transparent 24%),
    linear-gradient(145deg,#061537 0%,#08245d 48%,#071b4b 100%);
  border:1px solid rgba(255,255,255,.07);border-radius:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.18)
}
.sir-hero{
  background:radial-gradient(circle at 78% 20%,rgba(255,216,107,.12),transparent 28%),
             linear-gradient(135deg,#0a2866 0%,#0b1e4b 58%,#07173c 100%);
  border-color:rgba(255,216,107,.24);box-shadow:0 24px 65px rgba(0,0,0,.22)
}
.sir-badge{background:rgba(244,197,66,.12);color:var(--gold2);border:1px solid rgba(255,216,107,.30)}
.sir-hero h1{color:#fff}.sir-hero p{color:#d8e4fa}
.sir-points span{background:rgba(255,255,255,.06);color:#f8fbff;border-color:rgba(255,255,255,.13);box-shadow:none}
.sir-art{background:linear-gradient(150deg,#0e347f,#081c49);border-color:rgba(255,216,107,.30);color:#fff;box-shadow:0 22px 55px rgba(0,0,0,.28)}
.sir-art strong{color:var(--gold2)}.sir-art:hover{box-shadow:0 28px 70px rgba(0,0,0,.34)}

.sir-tool{background:linear-gradient(180deg,rgba(11,42,103,.96),rgba(7,28,73,.98));border-color:rgba(255,216,107,.25);box-shadow:0 18px 50px rgba(0,0,0,.24)}
.sir-drop{background:linear-gradient(180deg,rgba(19,61,145,.55),rgba(8,33,84,.70));border-color:rgba(255,216,107,.52)}
.sir-drop:hover{background:linear-gradient(180deg,rgba(25,75,175,.62),rgba(10,40,102,.80));border-color:var(--gold2);box-shadow:0 14px 30px rgba(0,0,0,.20)}
.sir-drop h2{color:#fff}.sir-drop p{color:#d4e1f8}

.sir-blue{background:linear-gradient(135deg,#0e58d0,#143d92);color:#fff;border:1px solid rgba(255,216,107,.18)}
.sir-red{background:linear-gradient(135deg,#d7a91d,#f4c542);color:#081b45;border:1px solid #ffe28a}
.sir-light{background:rgba(255,255,255,.08);color:var(--gold2);border:1px solid rgba(255,216,107,.32)}
.sir-btn:hover:not(:disabled){box-shadow:0 12px 28px rgba(244,197,66,.20);filter:brightness(1.08)}

.sir-previewbox{background:rgba(255,255,255,.06);border-color:rgba(255,216,107,.20)}
.sir-meta{color:#d4e1f8}
.sir-sizebox{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border-color:rgba(255,216,107,.22)}
.sir-sizehead strong{color:#fff}
.sir-size{color:#08204f;background:linear-gradient(135deg,#f4c542,#ffe58c);border-color:#ffe9a2;box-shadow:0 8px 24px rgba(244,197,66,.16)}
.sir-slider{accent-color:var(--gold)}
.sir-labels{color:#eef4ff}
.sir-labels span{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,216,107,.18)}
.sir-quick button{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.14)}
.sir-quick button:hover{background:linear-gradient(135deg,#f4c542,#ffd86b);color:#071b4b;box-shadow:0 10px 22px rgba(244,197,66,.22)}
.sir-status{background:rgba(29,145,80,.16);color:#e8fff1;border-color:rgba(86,214,137,.28)}

.sir-title span{color:var(--gold2)}.sir-title h2{color:#fff}.sir-title p{color:#cdd9ee}
.sir-grid article,.sir-steps>div{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-color:rgba(255,216,107,.18);box-shadow:0 10px 26px rgba(0,0,0,.14)
}
.sir-grid article:hover,.sir-steps>div:hover{
  border-color:rgba(255,216,107,.48);
  box-shadow:0 18px 38px rgba(0,0,0,.25),0 0 0 1px rgba(244,197,66,.08)
}
.sir-grid h3,.sir-steps h3{color:#fff}.sir-grid p,.sir-steps p{color:#cbd8ee}
.sir-steps b{background:linear-gradient(135deg,#f4c542,#ffd86b);color:#071b4b;box-shadow:0 8px 20px rgba(244,197,66,.20)}

.sir-note{background:linear-gradient(135deg,rgba(244,197,66,.16),rgba(255,255,255,.05));border-color:rgba(255,216,107,.40)}
.sir-note h2{color:var(--gold2)}.sir-note p{color:#fff1bf}

.sir-faq details{background:rgba(255,255,255,.06);border-color:rgba(255,216,107,.18)}
.sir-faq details:hover{border-color:rgba(255,216,107,.42);box-shadow:0 12px 28px rgba(0,0,0,.20)}
.sir-faq summary{color:#fff}.sir-faq p{color:#cad7ed}
@media(max-width:600px){.sir-page{border-radius:18px}}


/* v1.4 selected KB + clearer status */
.sir-quick button.sir-selected{
  position:relative;
  background:linear-gradient(135deg,#f4c542,#ffd86b)!important;
  color:#071b4b!important;
  border-color:#ffe69b!important;
  box-shadow:0 10px 24px rgba(244,197,66,.28)!important;
  transform:translateY(-2px);
}
.sir-quick button.sir-selected::after{
  content:" ✓";
  font-weight:1000;
}
.sir-status.sir-error{
  background:rgba(239,51,78,.14)!important;
  border-color:rgba(255,120,140,.40)!important;
  color:#ffe8ec!important;
}


/* v1.5 cross-browser + mobile/laptop compatibility */
.sir-page,.sir-page *{
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
.sir-page{
  width:100%;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.sir-btn,.sir-quick button,.sir-drop{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.sir-slider{
  display:block;
  width:100%;
  max-width:100%;
  cursor:pointer;
  touch-action:pan-y;
  -webkit-appearance:none;
  appearance:none;
  height:28px;
  background:transparent;
}
.sir-slider::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(244,197,66,.92),rgba(255,255,255,.35));
}
.sir-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:24px;
  margin-top:-9px;
  border-radius:50%;
  background:#f4c542;
  border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.sir-slider::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
}
.sir-slider::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:#f4c542;
}
.sir-slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#f4c542;
  border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.sir-dragging{
  border-color:#ffd86b!important;
  box-shadow:0 0 0 4px rgba(244,197,66,.15)!important;
}
.sir-preview{
  display:block;
  margin-left:auto;
  margin-right:auto;
  height:auto;
}
.sir-actions,.sir-quick,.sir-grid,.sir-steps{
  min-width:0;
}
.sir-actions .sir-btn,.sir-quick button{
  white-space:normal;
}
@media(max-width:768px){
  .sir-page{padding-left:10px;padding-right:10px}
  .sir-hero,.sir-tool,.sir-sizebox,.sir-previewbox{width:100%;max-width:100%}
  .sir-sizehead{flex-wrap:wrap}
  .sir-size{margin-left:auto}
  .sir-quick{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sir-actions{display:grid;grid-template-columns:1fr}
  .sir-actions .sir-btn{width:100%;min-width:0}
}
@media(max-width:380px){
  .sir-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sir-sizehead{display:block}
  .sir-size{display:inline-block;margin-top:10px;margin-left:0}
}

/* v1.6 cache-proof fixes */
.sir-quick button.sir-selected{
  background:linear-gradient(135deg,#f4c542,#ffe08a)!important;
  color:#071b4b!important;
  border:2px solid #fff0ad!important;
  box-shadow:0 10px 24px rgba(244,197,66,.32)!important;
  transform:translateY(-2px)!important;
}
.sir-quick button.sir-selected::after{
  content:" ✓";
  font-weight:900;
}
.sir-status.sir-error{
  display:block!important;
  background:rgba(239,51,78,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,180,190,.45)!important;
  font-weight:800;
}

/* v1.7 quality-first result */
.sir-status:not(.sir-error){
  text-align:center;
  font-size:16px;
  font-weight:900;
  background:rgba(29,145,80,.18)!important;
  border-color:rgba(113,232,159,.38)!important;
  color:#effff4!important;
}


/* v1.11 Green Success Popup */
.sir-success-popup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.58);
  z-index:999999;
  padding:20px;
}
.sir-success-popup.is-open{display:flex;}
.sir-success-box{
  width:min(92vw,420px);
  background:#168a3f;
  color:#fff;
  border:2px solid rgba(255,255,255,.28);
  border-radius:18px;
  padding:28px 24px 22px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.sir-success-icon{
  width:62px;
  height:62px;
  border-radius:50%;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#168a3f;
  font-size:34px;
  font-weight:900;
}
.sir-success-title{
  font-size:22px;
  font-weight:900;
  margin:0 0 8px;
}
.sir-success-text{
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  margin:0 0 18px;
}
.sir-success-ok{
  min-width:120px;
  border:0;
  border-radius:10px;
  background:#fff;
  color:#137437;
  font-size:16px;
  font-weight:900;
  padding:11px 24px;
  cursor:pointer;
}
.sir-success-ok:hover{transform:translateY(-1px);}