/* ITX Tools / Password Generator - isolated styles */
.itx-pg {
      --bg: #07101c;
      --bg-2: #0a1423;
      --card: #101d2e;
      --card-2: #112237;
      --line: rgba(145, 181, 221, .16);
      --line-strong: rgba(145, 181, 221, .25);
      --text: #f1f7ff;
      --muted: #94a8c2;
      --subtle: #6f859f;
      --cyan: #4de1f0;
      --blue: #3b8cff;
      --green: #5de3ad;
      --amber: #f0bf70;
      --red: #ff858e;
      --radius: 22px;
      --shadow: 0 24px 90px rgba(0, 0, 0, .29);
    }
.itx-pg, .itx-pg * { box-sizing: border-box; }
.itx-pg { scroll-behavior: smooth; }
.itx-pg {
      margin: 0;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(ellipse 670px 460px at 89% 8%, rgba(40, 106, 186, .18), transparent 74%),
        radial-gradient(ellipse 600px 330px at 4% 30%, rgba(8, 196, 210, .075), transparent 78%),
        linear-gradient(180deg, #081321 0%, #07101c 62%, #090f19 100%);
      min-height: 100vh;
      line-height: 1.55;
    }
.itx-pg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 840px;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(100,170,231,.032) 1px, transparent 1px),
        linear-gradient(90deg,rgba(100,170,231,.032) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(#000, transparent 92%);
    }
.itx-pg a { color: inherit; }
.itx-pg button, .itx-pg input { font: inherit; }
.itx-pg button { cursor: pointer; }
.itx-pg button:focus-visible, .itx-pg a:focus-visible, .itx-pg input:focus-visible, .itx-pg summary:focus-visible {
      outline: 3px solid var(--cyan);
      outline-offset: 4px;
    }
.itx-pg .wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.itx-pg .topbar { height: 80px; border-bottom: 1px solid rgba(149,186,223,.09); }
.itx-pg .topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.itx-pg .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.itx-pg .brand-mark {
      width: 40px; height: 40px; border: 1px solid rgba(90,200,245,.42);
      border-radius: 12px; display: grid; place-items: center;
      background: linear-gradient(150deg, rgba(35,159,243,.25),rgba(16,58,94,.42));
      box-shadow: inset 0 0 18px rgba(21,181,225,.13);
    }
.itx-pg .brand-mark svg { height: 25px; width: 25px; }
.itx-pg .brand-name { font-weight: 900; font-size: 24px; letter-spacing: -.055em; line-height: 1; }
.itx-pg .brand-name span { color: #70dff5; }
.itx-pg .brand-caption { font-size: 10px; color: #8aa4be; text-transform: uppercase; letter-spacing: .27em; margin-top: 4px; }
.itx-pg .top-nav { display: flex; align-items: center; gap: 32px; }
.itx-pg .top-nav a { color: #9cafc7; font-size: 13px; font-weight: 650; text-decoration: none; transition: color .2s; }
.itx-pg .top-nav a:hover { color: #f5fbff; }
.itx-pg .site-link { border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 14px; color: #dfebfa !important; }
.itx-pg .site-link:hover { border-color: rgba(77,225,240,.6); }
.itx-pg .hero { padding: 61px 0 44px; position: relative; }
.itx-pg .hero-grid { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.itx-pg .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      color: #69d8f0; font-size: 10px; font-weight: 800; letter-spacing: .17em;
      text-transform: uppercase; margin-bottom: 14px;
    }
.itx-pg .eyebrow::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: #58d9e9; box-shadow: 0 0 13px rgba(77,225,240,.65); }
.itx-pg h1 { font-size: clamp(38px, 5vw, 57px); line-height: 1.08; letter-spacing: -.055em; margin: 0 0 16px; font-weight: 850; }
.itx-pg .hero h2 .grad { background: linear-gradient(91deg, #68dafa, #77a5ff); color: transparent; background-clip: text; -webkit-background-clip: text; }
.itx-pg .hero-desc { margin: 0; max-width: 720px; color: #9bb0c8; line-height: 1.75; font-size: 15px; }
.itx-pg .hero-symbol { width: 134px; height: 134px; flex: 0 0 134px; display: grid; place-items: center; position: relative; }
.itx-pg .hero-symbol::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(66,202,247,.2); border-radius: 30px; transform: rotate(18deg); background: linear-gradient(135deg,rgba(15,91,137,.18),rgba(20,34,60,.15)); }
.itx-pg .hero-symbol::after { content: ""; position: absolute; inset: 22px; filter: blur(32px); background: rgba(42,173,249,.22); }
.itx-pg .hero-symbol svg { z-index: 1; filter: drop-shadow(0 3px 12px rgba(25,193,245,.25)); }
.itx-pg .tool-layout { display: grid; grid-template-columns: minmax(0,1.64fr) minmax(290px,1fr); gap: 20px; align-items: start; }
.itx-pg .tool-card, .itx-pg .info-card, .itx-pg .tip-card, .itx-pg .feature-card { border: 1px solid var(--line); background: linear-gradient(155deg,rgba(19,35,54,.97),rgba(13,24,40,.97)); box-shadow: var(--shadow); border-radius: var(--radius); }
.itx-pg .tool-card { overflow: hidden; }
.itx-pg .tool-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 25px 29px 20px; }
.itx-pg .section-label { margin: 0; font-weight: 770; font-size: 17px; letter-spacing: -.015em; }
.itx-pg .status-pill { display: inline-flex; align-items: center; gap: 7px; color: #9bdccb; font-size: 11px; white-space: nowrap; }
.itx-pg .status-pill svg { width: 15px; height: 15px; }
.itx-pg .password-zone { padding: 0 29px; }
.itx-pg .password-box { display: flex; align-items: center; border: 1px solid rgba(72,163,235,.42); border-radius: 14px; background: #081625; min-height: 88px; padding: 9px 9px 9px 18px; box-shadow: inset 0 0 0 1px rgba(19,119,202,.08), 0 0 30px rgba(23,98,176,.085); }
.itx-pg .password-box input { color: #e7f9ff; font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-weight: 650; font-size: clamp(16px, 2vw, 25px); min-width: 0; width: 100%; letter-spacing: .045em; background: transparent; border: none; outline: 0; padding: 8px 3px; cursor: text; text-overflow: clip; }
.itx-pg .copy-btn { height: 44px; width: 46px; flex: 0 0 46px; border: 1px solid rgba(92,151,198,.21); border-radius: 10px; display: grid; place-items: center; color: #b6c8e2; background: rgba(43,70,102,.43); transition: background .15s, color .15s; }
.itx-pg .copy-btn:hover:not(:disabled) { color: #fff; background: rgba(49,109,158,.55); }
.itx-pg .copy-btn:disabled { opacity: .4; cursor: not-allowed; }
.itx-pg .copy-btn svg { width: 19px; height: 19px; }
.itx-pg .strength { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; }
.itx-pg .strength .left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.itx-pg .meter { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; width: 118px; flex: 0 0 118px; }
.itx-pg .meter span { height: 6px; border-radius: 3px; background: #2a3b4d; transition: background .2s; }
.itx-pg .meter[data-level="1"] span:nth-child(-n/**/+1) { background: var(--red); }
.itx-pg .meter[data-level="2"] span:nth-child(-n/**/+2) { background: var(--amber); }
.itx-pg .meter[data-level="3"] span:nth-child(-n/**/+3) { background: #9edca3; }
.itx-pg .meter[data-level="4"] span:nth-child(-n/**/+4) { background: var(--green); }
.itx-pg .strength-title { font-size: 12px; color: #c6d7e8; font-weight: 650; white-space: nowrap; }
.itx-pg .strength-hint { color: #7895ac; font-size: 11px; white-space: nowrap; }
.itx-pg .rule { height: 1px; background: var(--line); margin: 27px 0 23px; }
.itx-pg .settings { padding: 0 29px 28px; }
.itx-pg .settings-title { font-size: 16px; font-weight: 750; margin: 0 0 19px; }
.itx-pg .len-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.itx-pg .len-head label { font-size: 13px; color: #c8d8e9; font-weight: 600; }
.itx-pg .len-current { font-size: 13px; font-weight: 700; color: #67ddec; }
.itx-pg .range { width: 100%; margin: 0; height: 20px; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; }
.itx-pg .range::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: linear-gradient(90deg,var(--cyan) 0%,#459bff var(--range-progress, 21.4%), #27394c var(--range-progress, 21.4%)); }
.itx-pg .range::-moz-range-track { height: 6px; border-radius: 8px; background: #27394c; }
.itx-pg .range::-moz-range-progress { background: var(--cyan); height: 6px; border-radius: 8px; }
.itx-pg .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 19px; width: 19px; margin-top: -6.5px; border-radius: 50%; background: white; border: 4px solid #4dbaf2; box-shadow: 0 0 0 4px rgba(43,184,242,.13); }
.itx-pg .range::-moz-range-thumb { height: 12px; width: 12px; border-radius: 50%; border: 4px solid #4dbaf2; background: white; }
.itx-pg .len-limits { display: flex; justify-content: space-between; color: var(--subtle); font-size: 11px; margin-top: 1px; }
.itx-pg .choices-title { font-size: 13px; color: #c8d8e9; font-weight: 650; margin: 25px 0 13px; }
.itx-pg .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.itx-pg .choice { display: flex; align-items: center; gap: 11px; min-height: 63px; background: rgba(12,29,47,.8); border: 1px solid rgba(130,168,205,.13); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.itx-pg .choice:hover { border-color: rgba(78,179,225,.55); background: rgba(20,49,74,.65); }
.itx-pg .choice input { position: absolute; opacity: 0; height: 1px; width: 1px; }
.itx-pg .choice:focus-within { outline: 2px solid rgba(94,216,243,.9); outline-offset: 2px; }
.itx-pg .check-ui { width: 21px; height: 21px; border-radius: 6px; flex: 0 0 21px; display: grid; place-items: center; background: #12283c; border: 1px solid #52667e; color: #021827; }
.itx-pg .choice input:checked + .check-ui { background: linear-gradient(135deg,#55def1,#3d95ff); border-color: transparent; }
.itx-pg .check-ui svg { width: 15px; height: 15px; opacity: 0; }
.itx-pg .choice input:checked + .check-ui svg { opacity: 1; }
.itx-pg .choice-label { display: block; color: #edf5ff; font-size: 12px; font-weight: 700; }
.itx-pg .choice-note { display: block; color: #7e95ad; font-size: 11px; margin-top: 1px; }
.itx-pg .extra-choice { margin-top: 12px; display: flex; align-items: center; gap: 9px; color: #a8bed3; font-size: 12px; cursor: pointer; }
.itx-pg .extra-choice input { accent-color: #50c7f4; width: 15px; height: 15px; margin: 0; cursor: pointer; }
.itx-pg .generate { border: 0; margin-top: 25px; width: 100%; height: 54px; border-radius: 12px; background: linear-gradient(105deg,#3e98ff,#4fcfef); color: #051523; font-weight: 850; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 11px; box-shadow: 0 12px 30px rgba(35,129,215,.18); transition: transform .12s, filter .12s; }
.itx-pg .generate:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.075); }
.itx-pg .generate:active:not(:disabled) { transform: translateY(0); }
.itx-pg .generate:disabled { opacity: .45; cursor: not-allowed; }
.itx-pg .generate svg { width: 18px; height: 18px; }
.itx-pg .generator-status { min-height: 18px; color: #8dc6d2; text-align: center; font-size: 11px; margin-top: 12px; }
.itx-pg .generator-status.error { color: #ff9ca4; }
.itx-pg .side { display: grid; gap: 18px; }
.itx-pg .info-card { padding: 28px; background: radial-gradient(ellipse 220px 180px at 90% 0%,rgba(28,115,150,.17),transparent 80%), linear-gradient(150deg,#102439,#112034); }
.itx-pg .icon-round { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #6bdaec; border: 1px solid rgba(70,205,231,.26); background: rgba(34,140,163,.15); margin-bottom: 19px; }
.itx-pg .icon-round svg { width: 23px; height: 23px; }
.itx-pg .info-card h2, .itx-pg .tip-card h2 { margin: 0 0 11px; font-size: 19px; letter-spacing: -.025em; line-height: 1.33; }
.itx-pg .info-card p { margin: 0; color: #a4b9cd; font-size: 12.5px; line-height: 1.8; }
.itx-pg .facts { margin-top: 22px; border-top: 1px solid rgba(138,177,214,.13); }
.itx-pg .fact { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid rgba(138,177,214,.1); padding: 12px 0; font-size: 11.5px; }
.itx-pg .fact span { color: #90a8c0; }
.itx-pg .fact strong { display: flex; gap: 5px; align-items: center; font-weight: 700; color: #dff6ee; text-align: right; }
.itx-pg .fact strong svg { width: 13px; height: 13px; color: var(--green); }
.itx-pg .tip-card { padding: 25px 27px; box-shadow: none; background: rgba(15,27,43,.87); }
.itx-pg .tip-card h2 { font-size: 16px; margin-bottom: 16px; }
.itx-pg .tip { display: flex; gap: 11px; margin: 0 0 17px; }
.itx-pg .tip:last-child { margin-bottom: 0; }
.itx-pg .tip-num { display: grid; place-items: center; color: #7ed9ec; border-radius: 9px; background: #132d41; width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; font-weight: 800; }
.itx-pg .tip strong { display: block; font-size: 12px; color: #dceafa; margin-bottom: 3px; }
.itx-pg .tip p { font-size: 11.5px; color: #91a6be; line-height: 1.55; margin: 0; }
.itx-pg .features { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 24px 0 65px; }
.itx-pg .feature-card { padding: 19px 20px; box-shadow: none; background: rgba(13,26,43,.76); border-radius: 15px; display: flex; align-items: center; gap: 14px; }
.itx-pg .feature-card svg { flex: 0 0 23px; height: 23px; width: 23px; color: #5bbedd; }
.itx-pg .feature-card strong { font-size: 12px; display: block; line-height: 1.3; }
.itx-pg .feature-card span { display: block; color: #8095ad; font-size: 11px; margin-top: 4px; }
.itx-pg .faq { max-width: 890px; margin: 0 auto 75px; }
.itx-pg .faq-label { text-align: center; text-transform: uppercase; color: #69d3ed; letter-spacing: .17em; font-size: 10px; font-weight: 850; }
.itx-pg .faq h2 { font-size: 30px; text-align: center; letter-spacing: -.045em; margin: 8px 0 29px; }
.itx-pg .faq details { border-bottom: 1px solid var(--line); padding: 15px 0; }
.itx-pg .faq summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; padding: 2px 30px 2px 0; position: relative; }
.itx-pg .faq summary::-webkit-details-marker { display: none; }
.itx-pg .faq summary::after { content: "+"; font-size: 23px; font-weight: 400; position: absolute; right: 2px; top: -3px; color: #6fcbe5; }
.itx-pg .faq details[open] summary::after { content: "−"; }
.itx-pg .faq details p { font-size: 13px; color: #9db1c7; line-height: 1.75; margin: 12px 36px 7px 0; }
.itx-pg .footer { border-top: 1px solid rgba(146,180,223,.12); color: #6c859d; font-size: 11px; padding: 24px 0 32px; }
.itx-pg .footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.itx-pg .footer strong { color: #bad5ec; }
.itx-pg .footer a { color: #8faec7; text-decoration: none; }
@media (max-width: 950px){
.itx-pg .hero-symbol { display: none; }
.itx-pg .tool-layout { grid-template-columns: minmax(0,1fr); }
.itx-pg .side { grid-template-columns: 1fr 1fr; }
.itx-pg .features { margin-bottom: 50px; }
}
@media (max-width: 650px){
.itx-pg .wrap { width: min(100% - 28px, 1160px); }
.itx-pg .topbar { height: 70px; }
.itx-pg .top-nav { gap: 14px; }
.itx-pg .top-nav a:not(.site-link) { display: none; }
.itx-pg .site-link { font-size: 11px !important; padding: 8px 10px; }
.itx-pg .hero { padding: 39px 0 30px; }
.itx-pg h1 { font-size: 38px; }
.itx-pg .hero-desc { font-size: 13px; }
.itx-pg .tool-card { border-radius: 16px; }
.itx-pg .tool-top { padding: 22px 17px 18px; }
.itx-pg .section-label { font-size: 15px; }
.itx-pg .status-pill { font-size: 0; }
.itx-pg .password-zone { padding: 0 16px; }
.itx-pg .password-box { min-height: 70px; padding-left: 11px; }
.itx-pg .password-box input { font-size: 17px; }
.itx-pg .strength { align-items: flex-start; }
.itx-pg .strength .left { flex-wrap: wrap; gap: 5px 10px; }
.itx-pg .strength-hint { font-size: 10px; }
.itx-pg .settings { padding: 0 16px 22px; }
.itx-pg .rule { margin: 21px 0; }
.itx-pg .choice-grid { gap: 8px; }
.itx-pg .choice { padding: 10px 8px; gap: 8px; }
.itx-pg .choice-label { font-size: 11px; }
.itx-pg .choice-note { font-size: 10px; }
.itx-pg .side { grid-template-columns: 1fr; }
.itx-pg .features { grid-template-columns: 1fr; gap: 9px; }
.itx-pg .feature-card { padding: 15px 18px; }
.itx-pg .faq h2 { font-size: 26px; }
.itx-pg .footer .wrap { display: block; }
.itx-pg .footer span { display: block; margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce){
.itx-pg, .itx-pg *, .itx-pg::before, .itx-pg *::before, .itx-pg::after, .itx-pg *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Isolated Gutenberg shortcode container; does not change site headers or other pages. */
.itx-pg {
  width: min(1160px, calc(100vw - 28px)); max-width: none !important;
  margin: 24px 0 52px; padding: 0 28px 20px;
  position: relative; left: 50%; transform: translateX(-50%);
  isolation: isolate; overflow: hidden; border-radius: 22px;
  border: 1px solid rgba(145,181,221,.16);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 18px 70px rgba(0,0,0,.12);
}
.itx-pg .wrap { width: 100%; max-width: 100%; margin: 0 auto; }
.itx-pg .hero h2 { font-size: clamp(38px, 5vw, 57px); line-height: 1.08; letter-spacing: -.055em; margin: 0 0 16px; font-weight: 850; color: var(--text); }
.itx-pg :is(h2,h3,p) { text-transform: none; }
.itx-pg svg { display: inline-block; flex-shrink: 0; max-width: none; }
.itx-pg .hero-symbol svg { width:82px; height:82px; }
.itx-pg button, .itx-pg input { font-family: inherit; }
.itx-pg .password-box input { box-shadow:none; border:0; background:transparent; }
.itx-pg input.range {border:0 !important; outline:0; border-radius:0; padding:0; box-shadow:none !important; }
.itx-pg .choice input[type=checkbox] { appearance: none; }
.itx-pg .generate { text-decoration:none; }
.itx-pg .copy-btn { padding: 0; }
.itx-pg .faq details summary { display:list-item; }
@media(max-width:650px) {
  .itx-pg { width: calc(100vw - 20px); padding: 0 14px 14px; border-radius: 16px; margin-top: 12px; }
  .itx-pg .hero h2 { font-size: 38px; }
  .itx-pg .hero { padding-top: 32px; }
}