:root{
      --bg: #070a10;
      --text: #e6edf7;
      --muted: rgba(230,237,247,0.72);
      --line: rgba(230,237,247,0.14);
      --accent: #3b82f6;
      --accent2:#14b8a6;
      --amber: #f59e0b;
      --amber-glow: rgba(245,158,11,0.22);
      --shadow: 0 22px 70px rgba(0,0,0,0.55);
      --radius: 18px;
      --warn-bg: rgba(251, 191, 36, 0.14);
      --warn-line: rgba(251, 191, 36, 0.40);
      --warn-text: rgba(255, 237, 180, 0.98);
      --nav-bg: rgba(10,12,20,0.68);
      --nav-border: rgba(255,255,255,0.10);
      --nav-shadow: 0 18px 60px rgba(0,0,0,.45);
      --card: rgba(255,255,255,0.03);
      --card2: rgba(255,255,255,0.05);
      --highlight-bg: rgba(59,130,246,0.10);
      --highlight-line: rgba(59,130,246,0.32);
      --highlight-glow: 0 0 0 1px rgba(59,130,246,0.18), 0 18px 50px rgba(59,130,246,0.10);
      --focus: rgba(20,184,166,0.35);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      min-height: 100vh;
      padding: 84px 20px 32px;
      color: var(--text);
      background:
        radial-gradient(1200px 800px at 12% 10%, rgba(59,130,246,0.22), transparent 58%),
        radial-gradient(1100px 780px at 88% 18%, rgba(20,184,166,0.20), transparent 60%),
        radial-gradient(1000px 720px at 50% 95%, rgba(96,165,250,0.12), transparent 60%),
        linear-gradient(180deg, rgba(8,10,18,1) 0%, rgba(6,8,14,1) 55%, rgba(5,7,12,1) 100%);
      background-attachment: fixed;
    }
    img, svg, video, canvas { max-width: 100%; height: auto; }
    .container, .modal, .agreement-modal { overflow: visible; }
    .question, .results, .mode-block, .accordion { overflow: visible; }
    .card, .next-highlight { overflow: hidden; }
    @media (max-width: 560px){
      body{ padding: 78px 12px 26px; }
    }
    .progress-bar{
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      width: 0%;
      z-index: 9999;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width 0.25s ease;
      box-shadow: 0 0 18px rgba(59,130,246,0.35);
    }
    .topbar{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2500;
      padding: 10px 12px;
      background: rgba(10,12,20,0.70);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 54px rgba(0,0,0,.45);
    }
    .topbar::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(520px 140px at 50% 50%,
        rgba(59,130,246,.26),
        rgba(20,184,166,.22),
        transparent 68%);
      pointer-events:none;
      opacity: 0.95;
      z-index: 0;
    }
    .topbar-inner{
      max-width: 980px;
      margin: 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      position: relative;
      z-index: 1;
    }
    .home-btn, .menu-btn{
      position: relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:46px;
      height:42px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(255,255,255,0.07);
      color:rgba(230,237,247,0.92);
      cursor:pointer;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
      text-decoration:none;
      flex: 0 0 auto;
      touch-action: manipulation;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }
    .home-btn{ width:42px; }
    .home-btn:hover, .menu-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(20,184,166,0.45);
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
    }
    .topbar-center{
      flex: 1 1 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      min-width:0;
    }
    .brand-gradient{
      font-weight: 900;
      letter-spacing: .02em;
      font-size: 1.5rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 50%, #4c6fff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 4px 16px rgba(76,111,255,0.15);
    }
    .modal-backdrop{
      position: fixed;
      inset: 0;
      z-index: 3500;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }
    .modal-backdrop.show{ display:flex; }
    .modal{
      width: min(740px, 92vw);
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(900px 520px at 20% 10%, rgba(96,165,250,0.16), transparent 58%),
        radial-gradient(900px 520px at 80% 20%, rgba(20,184,166,0.14), transparent 62%),
        linear-gradient(180deg, rgba(9,12,22,0.98), rgba(6,9,16,0.98));
      box-shadow: 0 28px 90px rgba(0,0,0,.72);
      overflow: hidden;
    }
    .modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 16px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .modal-title{
      font-weight: 950;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-size: .98rem;
      color: rgba(230,237,247,0.92);
    }
    .modal-close{
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
      color: rgba(230,237,247,0.9);
      border-radius: 14px;
      padding: 10px 12px;
      cursor: pointer;
      font-weight: 950;
      touch-action: manipulation;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .modal-close:hover{
      transform: translateY(-1px);
      border-color: rgba(20,184,166,0.45);
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
    }
    .modal-body{
      padding: 14px 16px 18px;
    }
    .menu-links{
      display:grid;
      gap: 12px;
    }
    .menu-link{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.90);
      font-weight: 950;
      text-decoration: none;
      cursor:pointer;
      touch-action: manipulation;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
      text-align:left;
      min-width:0;
    }
    .menu-link:visited{ color: rgba(230,237,247,0.90); }
    .menu-link:hover{
      transform: translateY(-1px);
      border-color: rgba(20,184,166,0.45);
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
    }
    .menu-link span:first-child{
      color: rgba(230,237,247,0.92);
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .menu-link span:last-child{
      font-weight: 900;
      color: rgba(230,237,247,0.62);
      letter-spacing: .02em;
      flex: 0 0 auto;
      white-space:nowrap;
    }
    .container{
      max-width: 980px;
      margin: 0 auto;
      border-radius: var(--radius);
      padding: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }
    @media (max-width: 560px){
      .container{ padding: 18px 14px; }
    }
    .top{ text-align:center; padding: 6px 10px 6px; }
    h1{
      font-size: 1.85rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      margin-bottom: 8px;
      font-weight: 900;
      background: linear-gradient(90deg, rgba(230,237,247,1), rgba(96,165,250,0.95), rgba(20,184,166,0.92));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .brand{
      color: var(--amber);
      font-weight: 900;
      font-size: 0.95rem;
      letter-spacing: 0.10em;
      margin-bottom: 10px;
      text-transform: uppercase;
      text-shadow: 0 0 18px var(--amber-glow);
    }
    .subtitle{
      color: var(--muted);
      font-size: 1.02rem;
      margin-bottom: 10px;
      line-height: 1.45;
    }
    .meta{
      color: rgba(230,237,247,0.70);
      font-size: 0.92rem;
      margin-bottom: 10px;
      line-height: 1.5;
    }
    .meta strong{ color: var(--text); }
    .resume-row{
      display:flex;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom: 10px;
    }
    .pill-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.92);
      font-weight: 900;
      font-size: 0.86rem;
      cursor:pointer;
      text-decoration:none;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .pill-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(20,184,166,0.45);
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
    }
    .pill-btn:disabled{
      opacity: .5;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    .lock-note{
      display:none;
      margin: 8px auto 0;
      max-width: 820px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(245,158,11,0.26);
      background: rgba(245,158,11,0.08);
      color: rgba(255,237,180,0.94);
      font-size: 0.88rem;
      line-height: 1.5;
      text-align: center;
    }
    .lock-note.show{ display:block; }
    .atlas-intro{
      margin: 10px auto 0;
      max-width: 820px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.76);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .atlas-intro strong{ color: rgba(230,237,247,0.92); font-weight: 900; }

    .assessment-hook{
      background:
        radial-gradient(520px 180px at 15% 0%, rgba(76,111,255,0.16), transparent 60%),
        radial-gradient(520px 180px at 85% 20%, rgba(0,194,168,0.13), transparent 62%),
        rgba(255,255,255,0.035);
      border-color: rgba(165,180,252,0.22);
      box-shadow: 0 18px 42px rgba(0,0,0,0.22);
      margin-bottom: 14px;
    }
    .assessment-hook strong{
      display:block;
      margin-bottom: 4px;
      letter-spacing:.02em;
    }
    .som-hook{
      border-color: rgba(20,184,166,0.24);
    }
    @media (max-width: 560px){
      .assessment-hook{
        font-size: .89rem;
        padding: 11px 12px;
        line-height: 1.5;
      }
    }
    .instructions{
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.10);
      padding: 18px;
      border-radius: 16px;
      margin: 14px 0 18px;
    }
    .instructions h3{
      font-size: 1.02rem;
      margin-bottom: 10px;
      font-weight: 900;
      letter-spacing: 0.02em;
      color: var(--text);
    }
    .scale-row{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 14px;
      margin-top: 10px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.82);
      font-size: 0.92rem;
      align-items: center;
    }
    .scale-side{
      display:grid;
      grid-template-rows: 24px 38px;
      align-items:center;
      justify-items:center;
      gap: 6px;
      min-height: 62px;
    }
    .scale-num{
      font-weight: 950;
      font-size: 1.05rem;
      color: rgba(230,237,247,0.95);
      line-height: 1;
    }
    .scale-num.nudge-down{ transform: translateY(3px); }
    .scale-label{
      font-weight: 800;
      color: rgba(230,237,247,0.80);
      line-height: 1.1;
      text-align:center;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 38px;
      padding: 0 6px;
    }
    .scale-mid{
      width: 1px;
      height: 44px;
      background: rgba(230,237,247,0.18);
      border-radius: 99px;
      justify-self: center;
    }
    .question{
      margin-bottom: 8px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.035));
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .question:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 40px rgba(0,0,0,0.35);
      border-color: rgba(59,130,246,0.32);
    }
    .question-text{
      font-size: 0.98rem;
      font-weight: 750;
      color: var(--text);
      margin-bottom: 8px;
      line-height: 1.38;
    }
    .question-number{
      color: rgba(96,165,250,0.98);
      font-weight: 900;
      margin-right: 6px;
    }
    .options{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      align-items: stretch;
    }
    @media (max-width: 420px){
      .options{ gap: 8px; }
      .option label{ height: 48px; }
      .option-labels{ gap: 8px; margin-top: 4px; }
      .option-labels .opt-label{ font-size: 0.70rem; }
    }
    .option input[type="radio"]{ display:none; }
    .option label{
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      height: 52px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.92);
      font-weight: 900;
      font-size: 1.05rem;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .option-labels{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-top: 6px;
      padding: 0;
    }
    .option-labels .opt-label{
      font-size: 0.75rem;
      font-weight: 800;
      color: rgba(230,237,247,0.68);
      text-align: center;
      line-height: 1.2;
    }
    .option label:hover{
      border-color: rgba(59,130,246,0.48);
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(59,130,246,0.12);
    }
    .option input[type="radio"]:checked + label{
      background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(20,184,166,0.18));
      border-color: rgba(59,130,246,0.62);
      box-shadow: 0 14px 28px rgba(59,130,246,0.18);
    }
    .agreement{
      margin-top: 14px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.78);
      font-size: 0.92rem;
      line-height: 1.5;
      text-align: center;
    }
    .agreement label{
      display:inline-flex;
      gap: 10px;
      align-items:flex-start;
      cursor:pointer;
      user-select:none;
    }
    .agreement input[type="checkbox"]{
      margin-top: 3px;
      width: 18px;
      height: 18px;
      accent-color: #3b82f6;
      flex: 0 0 auto;
    }
    .agreement a{
      white-space: nowrap;
      color: rgba(165,180,252,.95);
      text-decoration: none;
      border-bottom: 1px dashed rgba(165,180,252,.55);
      font-weight: 900;
    }
    .agreement a:hover{
      color: rgba(52,211,153,.95);
      border-bottom-color: rgba(52,211,153,.55);
    }
    .submit-btn{
      width: 100%;
      padding: 14px 16px;
      border: none;
      border-radius: 999px;
      cursor:pointer;
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: 0.02em;
      color: #ffffff;
      text-shadow: 0 2px 4px rgba(0,0,0,0.30), 0 0 8px rgba(255,255,255,0.20);
      margin-top: 14px;
      background: linear-gradient(135deg, rgba(59,130,246,0.88), rgba(20,184,166,0.92));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.20),
        0 0 24px rgba(59,130,246,0.18),
        0 18px 44px rgba(20,184,166,0.22),
        0 16px 34px rgba(59,130,246,0.18);
      transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
      touch-action: manipulation;
    }
    .submit-btn:hover{
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.25),
        0 0 32px rgba(59,130,246,0.24),
        0 22px 56px rgba(20,184,166,0.28),
        0 20px 44px rgba(59,130,246,0.22);
    }
    .submit-btn:disabled{
      cursor:not-allowed;
      opacity: .55;
      transform:none;
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.12),
        0 0 16px rgba(59,130,246,0.10),
        0 12px 26px rgba(0,0,0,0.28);
    }
    .results{
      display:none;
      margin-top: 18px;
      padding: 20px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
      animation: fadeIn 0.45s ease;
    }
    .results.show{ display:block; }
    @keyframes fadeIn{
      from{ opacity:0; transform: translateY(12px); }
      to{ opacity:1; transform: translateY(0); }
    }
    .result-title{
      font-size: 1.25rem;
      font-weight: 900;
      margin-bottom: 8px;
      color: rgba(230,237,247,0.95);
      text-align:center;
    }
    .primary-type{
      font-weight: 950;
      text-transform: uppercase;
      font-size: clamp(1.55rem, 8.8vw, 2.15rem);
      letter-spacing: clamp(0.06em, 1.0vw, 0.14em);
      line-height: 1.08;
      margin: 10px 0 10px 0;
      text-align: center;
      white-space: normal;
      word-break: normal;
      overflow-wrap: break-word;
      hyphens: none;
      background: linear-gradient(90deg, rgba(96,165,250,1), rgba(20,184,166,0.98));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .mode-label{
      color: rgba(230,237,247,0.70);
      font-size: 0.95rem;
      margin-bottom: 10px;
      text-align:center;
      line-height: 1.4;
    }
    .mode-label strong{ color: rgba(230,237,247,0.92); }
    .mode-block{
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      border-radius: 16px;
      padding: 16px;
      margin-top: 8px;
    }
    .mode-section-title{
      font-size: 1.02rem;
      font-weight: 950;
      color: rgba(230,237,247,0.94);
      margin-bottom: 8px;
    }
    .mode-copy{
      color: rgba(230,237,247,0.84);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .mode-copy-soft{
      margin-top: 10px;
      color: rgba(230,237,247,0.74);
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .mode-divider{
      height: 1px;
      background: rgba(255,255,255,0.10);
      margin: 14px 0;
      border-radius: 99px;
    }
    .accordion{
      margin-top: 10px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      overflow: hidden;
      background: rgba(255,255,255,0.02);
    }
    .acc-btn{
      width: 100%;
      text-align: left;
      padding: 12px 14px;
      border: none;
      cursor: pointer;
      background: rgba(255,255,255,0.02);
      color: rgba(230,237,247,0.92);
      font-weight: 950;
      letter-spacing: 0.02em;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      touch-action: manipulation;
      min-width:0;
    }
    .acc-btn span:first-child{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .acc-btn:hover{ background: rgba(255,255,255,0.04); }
    .acc-panel{ display:none; padding: 12px 14px 14px; }
    .acc-panel.show{ display:block; }
    .bottom-actions{
      margin-top: 14px;
      display: none;
      justify-content: center;
    }
    .bottom-actions.show{ display:flex; }
    .bottom-com-actions{
      margin-top: 12px;
      display:flex;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .bottom-com-actions .pill-btn{
      min-width: min(220px, 100%);
    }
    .pill-btn.danger{
      border-color: rgba(248,113,113,0.30);
      background: rgba(248,113,113,0.08);
      color: rgba(254,226,226,0.94);
    }
    .pill-btn.danger:hover{
      border-color: rgba(248,113,113,0.55);
      box-shadow: 0 14px 34px rgba(127,29,29,.28);
    }
    .confirm-copy{
      color: rgba(230,237,247,0.78);
      font-size: 0.94rem;
      line-height: 1.58;
      margin-bottom: 12px;
    }
    .confirm-actions{
      display:flex;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 12px;
    }
    .danger-confirm-actions{
      align-items:center;
    }
    .danger-check{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(248,113,113,0.28);
      background:rgba(248,113,113,0.06);
      color:rgba(254,226,226,0.88);
      font-size:0.82rem;
      font-weight:900;
      cursor:pointer;
      user-select:none;
    }
    .danger-check input{
      width:16px;
      height:16px;
      accent-color:#ef4444;
      cursor:pointer;
    }
    .pill-btn.danger:disabled{
      opacity:.45;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
      border-color:rgba(248,113,113,0.18);
      background:rgba(248,113,113,0.04);
    }
    .next-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: linear-gradient(135deg, rgba(96,165,250,0.95), rgba(20,184,166,0.95));
      color: #08101f;
      font-weight: 950;
      font-size: 0.98rem;
      letter-spacing: 0.02em;
      text-decoration:none;
      box-shadow: 0 18px 44px rgba(20,184,166,0.16), 0 16px 34px rgba(59,130,246,0.14);
      transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
      touch-action: manipulation;
      min-width: min(360px, 100%);
      text-align:center;
    }
    .next-link:hover{
      transform: translateY(-1px);
      filter: saturate(1.06);
      box-shadow: 0 22px 56px rgba(20,184,166,0.18), 0 20px 44px rgba(59,130,246,0.16);
    }
    .next-highlight{
      background: linear-gradient(180deg, rgba(59,130,246,0.11), rgba(255,255,255,0.03));
      border: 1px solid rgba(59,130,246,0.28);
      box-shadow: var(--highlight-glow);
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      padding: 14px;
      margin-top: 14px;
      text-align: center;
    }
    .next-highlight::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(420px 220px at 18% 10%, rgba(59,130,246,0.18), transparent 60%),
                radial-gradient(420px 220px at 82% 18%, rgba(20,184,166,0.14), transparent 60%);
      pointer-events:none;
      opacity: .85;
    }
    .next-highlight > *{ position:relative; }
    .toast{
      position: fixed;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      width: min(720px, calc(100% - 24px));
      z-index: 4000;
      display:none;
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--warn-bg);
      border: 1px solid var(--warn-line);
      color: var(--warn-text);
      font-size: 0.92rem;
      line-height: 1.35;
      box-shadow: 0 18px 50px rgba(0,0,0,0.45);
      backdrop-filter: blur(10px);
      overflow-wrap: anywhere;
    }
    .toast.show{ display:block; }
    .agreement-modal-backdrop{
      position: fixed;
      inset: 0;
      z-index: 3600;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(10px);
    }
    .agreement-modal-backdrop.show{ display:flex; }
    .agreement-modal{
      width: min(820px, 100%);
      max-height: 90vh;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.12);
      background: linear-gradient(180deg, rgba(12,14,22,0.94), rgba(10,12,18,0.90));
      box-shadow: 0 24px 90px rgba(0,0,0,0.70);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .agreement-modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.02);
    }
    .agreement-modal-title{
      font-weight: 950;
      color: rgba(230,237,247,0.92);
      letter-spacing: .02em;
    }
    .agreement-modal-close{
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.90);
      border-radius: 12px;
      padding: 8px 10px;
      font-weight: 900;
      cursor:pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .agreement-modal-close:hover{
      border-color: rgba(20,184,166,0.45);
      box-shadow: 0 14px 34px rgba(0,0,0,.35);
      transform: translateY(-1px);
    }
    .agreement-modal-body{
      padding: 14px 16px 16px;
      max-height: min(70vh, 640px);
      overflow: auto;
      color: rgba(230,237,247,0.80);
      font-size: 0.94rem;
      line-height: 1.60;
    }
    .agreement-modal-body h4{
      margin-top: 10px;
      margin-bottom: 4px;
      font-size: 1.00rem;
      font-weight: 950;
      color: rgba(230,237,247,0.92);
    }
    .agreement-modal-body p{ margin-bottom: 10px; color: rgba(230,237,247,0.78); }
    .agreement-modal-body ul{
      padding-left: 18px;
      margin: 6px 0 10px;
      color: rgba(230,237,247,0.78);
    }
    .agreement-modal-body li{ margin: 6px 0; }

    .eu-footer{
      margin-top: 22px;
      padding: 18px 12px 16px;
      border-top: 1px solid rgba(148,163,184,.18);
      background: transparent;
    }
    .eu-footer-inner{
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .eu-footer-brand{
      font-weight: 950;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .9rem;
      background: linear-gradient(90deg, #4c6fff, #00c2a8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      text-shadow:
        0 0 18px rgba(76,111,255,.18),
        0 0 18px rgba(0,194,168,.12);
    }
    .eu-footer-links{
      display: flex;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
    }
    .eu-footer-links a{
      font-size: .85rem;
      font-weight: 800;
      color: rgba(165,180,252,.85);
      text-decoration: none;
      border-bottom: 1px dashed rgba(165,180,252,.35);
    }
    .eu-footer-links a:hover{
      color: rgba(52,211,153,.95);
      border-bottom-color: rgba(52,211,153,.45);
    }
    .eu-footer-meta{
      font-size: .78rem;
      color: rgba(229,231,235,.55);
      line-height: 1.4;
    }

    .trait-list{
      margin-top: 10px;
      padding: 20px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.02);
      overflow: hidden;
    }
    .trait-group{ margin-bottom: 28px; }
    .trait-group:last-child{ margin-bottom: 0; }
    .trait-group-header{ margin-bottom: 14px; text-align: center; }
    .trait-group-title{
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(230,237,247,0.32);
    }
    .trait-group-list{ display: grid; gap: 12px; }
    .trait-item{
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 14px 16px;
      text-align: center;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .trait-item:hover{
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.12);
    }
    
    .trait-item-desc{
      color: rgba(230,237,247,0.78);
      font-size: 0.88rem;
      line-height: 1.6;
      text-align: center;
      max-width: 280px;
    }
    .trait-spectrum{display:flex;flex-direction:column;gap:18px;padding:4px 0;}
    .spectrum-row{display:grid;grid-template-columns:130px 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:center;}
    @media(max-width:520px){.spectrum-row{grid-template-columns:100px 1fr;}}
    .spectrum-label{font-size:.78rem;font-weight:700;color:rgba(230,237,247,0.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .spectrum-track{height:7px;border-radius:999px;background:rgba(255,255,255,0.07);overflow:hidden;}
    .spectrum-fill{height:100%;border-radius:999px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:3px;}
    .spectrum-desc{grid-column:1/-1;font-size:.82rem;color:rgba(230,237,247,0.58);line-height:1.55;padding-top:2px;}
    .spectrum-divider{height:1px;background:rgba(255,255,255,0.08);margin:4px 0;}

      .tier-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: 34px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.03);
      color: rgba(230,237,247,0.92);
      font-weight: 950;
      font-size: 0.82rem;
      white-space: nowrap;
    }
    .tier-steady{
      border-color: rgba(20,184,166,0.45);
      background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(59,130,246,0.10));
    }
    .tier-intermittent{
      border-color: rgba(59,130,246,0.50);
      background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(255,255,255,0.02));
    }
    .tier-background{
      border-color: rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.02);
      color: rgba(230,237,247,0.84);
    }
    @media (max-width: 520px){
      .trait-group-header{
        justify-content:center;
        text-align:center;
        flex-direction: column;
        gap: 8px;
      }
      .trait-group-title{ justify-content:center; flex-wrap: wrap; }
      .trait-group-sub{ white-space: normal; text-align:center; }
      .trait-item{ text-align:center; }
      .trait-item-desc{
        max-width: 44ch;
        margin: 0 auto;
      }
    }

    /* Tie-breaker modal: uses existing modal styles; no theme changes */
    .tb-hint{
      color: rgba(230,237,247,0.78);
      font-size: 0.92rem;
      line-height: 1.55;
      margin-bottom: 10px;
    }
    .tb-mini{
      color: rgba(230,237,247,0.62);
      font-size: 0.86rem;
      line-height: 1.45;
      margin-top: 8px;
    }
    .tb-scroll{
      max-height: min(68vh, 540px);
      overflow: auto;
      padding-right: 2px;
      margin-top: 10px;
    }
    .tb-actions{
      display:flex;
      justify-content:center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
  

/* Clean private frontend additions */
.api-status{margin-top:12px;color:rgba(230,237,247,.72);font-weight:800;font-size:.9rem}
.question.loading{opacity:.72}
.error-box{border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.1);color:#fecaca;border-radius:18px;padding:14px;margin:18px 0;font-weight:800;line-height:1.5}
.success-box{border:1px solid rgba(20,184,166,.35);background:rgba(20,184,166,.08);color:rgba(230,237,247,.86);border-radius:18px;padding:14px;margin:18px 0;font-weight:800;line-height:1.5}
.result-meta{margin-top:10px;color:rgba(230,237,247,.62);font-size:.86rem;font-weight:800;text-align:center}
.dim-value{font-size:.78rem;font-weight:950;color:rgba(230,237,247,.64);white-space:nowrap}
.spectrum-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.hidden{display:none!important}
.submit-btn.is-loading{opacity:.72;cursor:wait}
.backend-note{margin-top:14px;color:rgba(230,237,247,.62);font-size:.86rem;line-height:1.5}
.spectrum-fill{background:linear-gradient(90deg,var(--accent),var(--accent2));}

/* Clean SOM frontend additions */
.som-question .question-text{margin-bottom:12px}
.som-options{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
.som-option label{height:auto;min-height:58px;justify-content:flex-start;text-align:left;padding:12px 14px;gap:12px;line-height:1.35}
.som-letter{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-weight:950;flex:0 0 auto;color:rgba(230,237,247,.94)}
.som-option-text{font-size:.94rem;font-weight:800;color:rgba(230,237,247,.84)}
.som-option input[type="radio"]:checked + label .som-letter{border-color:rgba(20,184,166,.55);background:rgba(20,184,166,.15)}
.score-grid{margin-top:6px}
.som-spectrum .spectrum-row{grid-template-columns:150px 1fr}
@media(max-width:560px){.som-spectrum .spectrum-row{grid-template-columns:1fr}.som-option label{align-items:flex-start}.som-letter{margin-top:1px}}

/* ─────────────────────────────────────────────────────────────
   Synthesis page shell. Rendering only; no scoring rules here.
   ───────────────────────────────────────────────────────────── */
.synthesis-shell .state-block{
  display:none;
  margin:18px 0;
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.035);
}
.synthesis-shell .state-block.show{display:block;}
.state-kicker,.result-kicker{
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(94,234,212,.92);
  margin-bottom:8px;
}
.state-block h2,.result-hero-card h2{font-size:1.42rem;margin-bottom:8px;color:rgba(230,237,247,.96);}
.state-body,.modal-copy{color:rgba(230,237,247,.74);line-height:1.65;font-size:.96rem;}
.state-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.cta-primary,.cta-secondary,.rating-submit-btn,.copy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:10px 14px;border-radius:14px;font-weight:950;
  text-decoration:none;border:1px solid rgba(255,255,255,.14);cursor:pointer;
  touch-action:manipulation;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.cta-primary,.copy-btn,.rating-submit-btn{background:linear-gradient(135deg,rgba(59,130,246,.92),rgba(20,184,166,.86));color:white;border-color:rgba(255,255,255,.18);}
.cta-secondary{background:rgba(255,255,255,.04);color:rgba(230,237,247,.90);}
.cta-primary:hover,.cta-secondary:hover,.copy-btn:hover,.rating-submit-btn:hover{transform:translateY(-1px);border-color:rgba(20,184,166,.45);box-shadow:0 14px 34px rgba(0,0,0,.35);}
.cta-primary:disabled,.cta-secondary:disabled,.copy-btn:disabled,.rating-submit-btn:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none;}
.cta-primary.danger{background:linear-gradient(135deg,rgba(239,68,68,.92),rgba(245,158,11,.82));}
.results.synthesis-results{margin-top:18px;}
.result-hero-card,.synthesis-panel,.atlas-wrap{
  margin:16px 0;padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.035));
}
.result-hero-card p{color:rgba(230,237,247,.76);line-height:1.65;}
.profile-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0;}
.profile-card{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);}
.profile-card .card-meta-label{font-size:.75rem;font-weight:950;letter-spacing:.10em;text-transform:uppercase;color:rgba(96,165,250,.95);margin-bottom:8px;}
.profile-card h3{font-size:1.16rem;margin-bottom:8px;color:rgba(230,237,247,.95);}
.profile-card p{font-size:.93rem;line-height:1.62;color:rgba(230,237,247,.70);}
.atlas-jump-callout{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0;padding:14px;border-radius:18px;border:1px solid rgba(94,234,212,.22);background:rgba(20,184,166,.06);}
.atlas-jump-text{color:rgba(230,237,247,.82);line-height:1.55;text-align:center;}
.atlas-jump-text strong{color:rgba(230,237,247,.96);font-weight:950;}
.atlas-jump-or{color:rgba(230,237,247,.45);font-weight:900;}
.atlas-jump-btn{border:1px solid rgba(94,234,212,.28);background:rgba(20,184,166,.08);color:rgba(230,237,247,.92);padding:9px 12px;border-radius:14px;font-weight:950;cursor:pointer;}
.synthesis-panel h3{font-size:1.1rem;margin-bottom:8px;color:rgba(230,237,247,.96);}
.trait-map-intro{color:rgba(230,237,247,.66);font-size:.92rem;line-height:1.6;margin-bottom:16px;}
.trait-bars{display:flex;flex-direction:column;gap:14px;}
.trait-row-wrap{display:flex;flex-direction:column;gap:5px;}
.trait-row{display:grid;grid-template-columns:150px 1fr 64px;align-items:center;gap:10px;}
.trait-label{font-size:.82rem;font-weight:850;color:rgba(230,237,247,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trait-bar-track{height:7px;border-radius:999px;background:rgba(255,255,255,.075);overflow:hidden;}
.trait-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(59,130,246,.86),rgba(20,184,166,.82));}
.trait-val{font-size:.75rem;font-weight:950;text-align:right;color:rgba(230,237,247,.78);}
.trait-desc{font-size:.78rem;color:rgba(230,237,247,.52);line-height:1.48;padding-left:2px;}
.som-grid-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);}
.som-grid-cell{padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);text-align:center;color:rgba(230,237,247,.64);font-size:.78rem;font-weight:900;}
.som-grid-cell.active{border-color:rgba(94,234,212,.42);background:rgba(20,184,166,.10);color:rgba(230,237,247,.95);}
.section-copy{display:grid;gap:12px;}
.section-copy-card{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);}
.section-copy-card h4{font-size:.9rem;margin-bottom:6px;color:rgba(94,234,212,.92);}
.section-copy-card p{font-size:.92rem;color:rgba(230,237,247,.70);line-height:1.62;}
.atlas-copy-row{display:flex;align-items:flex-start;gap:16px;padding-bottom:14px;}
.atlas-copy-left{flex:1;min-width:0;}
.atlas-copy-title{font-size:.95rem;font-weight:950;color:rgba(94,234,212,.92);margin-bottom:4px;}
.atlas-copy-desc{font-size:.90rem;color:rgba(255,255,255,.86);line-height:1.6;}
.atlas-agreement{padding:12px 0;color:rgba(230,237,247,.62);font-size:.82rem;line-height:1.45;border-top:1px solid rgba(255,255,255,.08);}
.atlas-agreement label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.atlas-agreement input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:#14b8a6;flex:0 0 auto;}
.linklike{border:0;background:transparent;color:rgba(165,180,252,.94);font:inherit;font-weight:950;cursor:pointer;padding:0;text-decoration:underline;text-decoration-style:dashed;text-underline-offset:3px;}
.rating-gate{margin:12px 0 14px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);}
.rating-title{font-weight:950;color:rgba(230,237,247,.92);margin-bottom:10px;}
.rating-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;}
.rating-num{width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(230,237,247,.86);font-weight:950;cursor:pointer;}
.rating-num.sel{background:rgba(20,184,166,.18);border-color:rgba(94,234,212,.48);color:white;}
#ratingComment{width:100%;min-height:76px;resize:vertical;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:rgba(230,237,247,.90);padding:11px 12px;font:inherit;line-height:1.45;}
.rating-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.rating-submit-note{font-size:.82rem;color:rgba(230,237,247,.56);}
.rating-thanks{display:none;margin-top:12px;padding:12px;border-radius:14px;background:rgba(20,184,166,.075);border:1px solid rgba(20,184,166,.18);color:rgba(230,237,247,.76);line-height:1.55;}
.rating-thanks.show{display:block;}
.email-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.email-row input{flex:1;min-width:220px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:rgba(230,237,247,.90);padding:10px 12px;font:inherit;}
.email-row button{border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(230,237,247,.90);font-weight:950;padding:10px 12px;cursor:pointer;}
.copy-btn{width:100%;margin-top:8px;}
.copy-btn.copied{background:linear-gradient(135deg,rgba(20,184,166,.92),rgba(34,197,94,.82));}
.copied-note,.atlas-friendly-note{text-align:center;color:rgba(230,237,247,.62);font-size:.84rem;margin-top:10px;line-height:1.5;}
#atlasBox{position:fixed;opacity:0;pointer-events:none;width:1px;height:1px;top:-100px;left:-100px;}
.bottom-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;}
.danger-lead{color:rgba(255,237,180,.96);line-height:1.55;margin-bottom:8px;}
.confirm-check{display:flex;gap:10px;align-items:flex-start;color:rgba(230,237,247,.78);margin:16px 0;line-height:1.45;}
.confirm-check input{margin-top:3px;accent-color:#14b8a6;}
.modal-actions{justify-content:flex-end;}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);z-index:5000;opacity:0;pointer-events:none;max-width:min(560px,92vw);padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(9,12,22,.95);color:rgba(230,237,247,.92);box-shadow:0 18px 60px rgba(0,0,0,.50);transition:opacity .18s ease,transform .18s ease;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:720px){.profile-card-grid{grid-template-columns:1fr}.trait-row{grid-template-columns:112px 1fr 54px}.som-grid-mini{grid-template-columns:1fr}.state-actions,.bottom-actions{justify-content:center}.atlas-copy-row{display:block}.email-row input{min-width:100%;}}


/* ─────────────────────────────────────────────────────────────
   Static pages: home, guide, about. No engine logic.
   ───────────────────────────────────────────────────────────── */
.static-shell{display:flex;flex-direction:column;gap:20px;}
.hero-panel{text-align:center;padding:28px 14px 24px;}
.compact-hero{padding-bottom:12px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.30);font-size:.74rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,191,36,.95);margin-bottom:18px;}
.hero-eyebrow span{width:7px;height:7px;border-radius:999px;background:rgba(251,191,36,.92);box-shadow:0 0 12px rgba(245,158,11,.55);}
.hero-panel h1{font-size:clamp(2rem,5.8vw,3.65rem);letter-spacing:-.035em;text-transform:none;line-height:1.08;max-width:780px;margin:0 auto 18px;background:linear-gradient(135deg,#fff 0%,rgba(230,237,247,.92) 44%,#60a5fa 74%,#34d399 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{font-size:1.05rem;color:rgba(230,237,247,.72);line-height:1.68;max-width:620px;margin:0 auto 20px;}
.trust-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:14px 0 22px;}
.trust-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:.78rem;font-weight:900;color:rgba(230,237,247,.68);}
.hero-cta{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:16px;text-decoration:none;color:#fff;font-weight:950;background:linear-gradient(135deg,rgba(59,130,246,.94),rgba(20,184,166,.88));border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 48px rgba(0,0,0,.34),0 0 34px rgba(59,130,246,.18);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.hero-cta:hover{transform:translateY(-1px);border-color:rgba(94,234,212,.42);box-shadow:0 22px 58px rgba(0,0,0,.42),0 0 42px rgba(20,184,166,.20);}
.time-callout{margin:16px auto 0;max-width:620px;color:rgba(230,237,247,.58);font-size:.88rem;font-weight:800;line-height:1.5;}
.static-section{padding:24px;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.028));}
.section-label{font-size:.76rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:rgba(94,234,212,.86);margin-bottom:8px;}
.section-title{font-size:1.48rem;font-weight:950;letter-spacing:-.02em;color:rgba(230,237,247,.96);margin-bottom:8px;}
.section-sub{color:rgba(230,237,247,.70);line-height:1.68;font-size:.96rem;margin-bottom:18px;}
.steps-grid,.feature-grid,.architecture-grid,.selector-grid,.type-preview-grid{display:grid;gap:14px;}
.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.feature-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr));}
.architecture-grid,.selector-grid,.type-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.step-card,.feature-card,.type-preview-card{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);}
.step-card{text-align:center;}
.step-num{font-size:.72rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:rgba(230,237,247,.46);margin-bottom:10px;}
.step-name{font-size:1.24rem;font-weight:950;margin-bottom:8px;display:inline-block;-webkit-background-clip:text;background-clip:text;color:transparent;}
.step-name.com{background:linear-gradient(135deg,#60a5fa,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.step-name.som{background:linear-gradient(135deg,#34d399,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.step-name.synth{background:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent;}
.step-desc,.feature-card p,.type-preview-card p{font-size:.92rem;line-height:1.62;color:rgba(230,237,247,.68);}
.feature-card h3,.type-preview-card h3{font-size:1.08rem;font-weight:950;color:rgba(230,237,247,.94);margin-bottom:8px;}
.feature-card.large{padding:22px;}
.mini-tag{display:inline-flex;margin-top:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(94,234,212,.24);background:rgba(20,184,166,.06);font-size:.76rem;font-weight:950;color:rgba(94,234,212,.88);}
.explain-callout,.atlas-section,.saved-results-card,.contact-card{border-color:rgba(94,234,212,.18);background:linear-gradient(180deg,rgba(20,184,166,.07),rgba(59,130,246,.035));}
.explain-callout{padding:16px;border-radius:16px;color:rgba(230,237,247,.76);line-height:1.65;margin-top:14px;}
.explain-callout strong{color:rgba(230,237,247,.96);}
.center-actions{justify-content:center;text-align:center;}
.saved-results-card .pill-btn{margin:14px auto 0;display:flex;}
.select-label{display:grid;gap:8px;color:rgba(230,237,247,.72);font-size:.86rem;font-weight:950;}
.select-label select{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);color:rgba(230,237,247,.92);padding:12px;font:inherit;font-weight:850;}
.type-preview-grid{margin-top:16px;}
.type-preview-card{display:block;}
.soft-text{margin-top:10px;color:rgba(230,237,247,.60)!important;}
.contact-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:14px;border:1px solid rgba(94,234,212,.24);background:rgba(20,184,166,.07);color:rgba(230,237,247,.94);font-weight:950;text-decoration:none;margin:0 auto 16px;}
.about-shell .contact-card{text-align:center;}
.static-shell .modal-actions{justify-content:flex-end;}
@media(max-width:760px){.steps-grid,.feature-grid,.feature-grid.two-col,.architecture-grid,.selector-grid,.type-preview-grid{grid-template-columns:1fr}.static-section{padding:18px}.hero-panel{padding:22px 4px 18px}.hero-panel h1{font-size:2.08rem}.section-title{font-size:1.28rem}}


/* ─────────────────────────────────────────────────────────────
   Phase 6E UI hotfix
   Restores readable trait bars and prevents clipped title text.
   No scoring, engine, threshold, or mapping logic is contained here.
   ───────────────────────────────────────────────────────────── */
.container,
.results,
.mode-block,
.accordion,
.acc-panel,
.trait-list,
.synthesis-panel,
.result-hero-card,
.profile-card,
.hero-panel{
  max-width: 100%;
}

h1,
.hero-panel h1,
.primary-type,
.result-title,
.section-title,
.card-title,
.type-preview-title{
  max-width: 100%;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.14;
  padding-top: 0.04em;
  padding-bottom: 0.08em;
}

.primary-type{
  font-size: clamp(1.45rem, 6.2vw, 2.08rem);
  letter-spacing: clamp(0.035em, .7vw, 0.105em);
}

.hero-panel h1{
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.12;
}

.trait-list{
  overflow: visible;
  padding: 18px;
}

.trait-spectrum{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

.spectrum-row{
  display: grid;
  grid-template-columns: minmax(128px, 190px) minmax(180px, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  align-items: center;
}

.spectrum-label{
  min-width: 0;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(230,237,247,.76);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.spectrum-track{
  width: 100%;
  min-width: 0;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  overflow: hidden;
}

.spectrum-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59,130,246,.86), rgba(20,184,166,.82));
  min-width: 3px;
}

.spectrum-desc{
  grid-column: 1 / -1;
  font-size: .82rem;
  color: rgba(230,237,247,.60);
  line-height: 1.55;
  padding-top: 1px;
}

.trait-bars{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trait-row-wrap{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trait-row{
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(180px, 1fr) 58px;
  align-items: center;
  gap: 10px;
}

.trait-label{
  min-width: 0;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(230,237,247,.76);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.trait-val{
  font-size: .75rem;
  font-weight: 950;
  text-align: right;
  color: rgba(230,237,247,.76);
  white-space: nowrap;
}

.trait-desc{
  font-size: .80rem;
  color: rgba(230,237,247,.56);
  line-height: 1.5;
  padding-left: 0;
}

@media (max-width: 720px){
  .spectrum-row{
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .trait-row{
    grid-template-columns: 1fr 54px;
    gap: 8px;
  }
  .trait-label{
    grid-column: 1 / -1;
  }
  .trait-bar-track{
    grid-column: 1 / 2;
  }
  .trait-val{
    grid-column: 2 / 3;
  }
}

@media (max-width: 480px){
  body{ padding-left: 10px; padding-right: 10px; }
  .container{ padding-left: 12px; padding-right: 12px; }
  .trait-list{ padding: 14px; }
  .primary-type{ font-size: 1.42rem; letter-spacing: .035em; }
}


/* Phase 6f: restore fuller old-result readability while keeping engine private. */
.mode-copy p,
.mode-copy-soft,
.section-copy-card p,
.profile-card p,
.result-hero-card p{
  font-size: .97rem;
  line-height: 1.74;
  color: rgba(230,237,247,.76);
}
.mode-copy p + p{ margin-top: 16px; }
.mode-copy-soft{
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(20,184,166,.20);
  border-radius: 16px;
  background: rgba(20,184,166,.055);
}
.results{ max-width: 980px; margin-left:auto; margin-right:auto; }
.mode-block,
.synthesis-panel,
.result-hero-card,
.atlas-wrap{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.trait-list{ padding: 8px 2px 2px; }
.trait-spectrum{ gap: 18px; }
.spectrum-row{
  display:grid;
  grid-template-columns: minmax(170px, 240px) minmax(220px, 1fr) minmax(64px, auto);
  grid-template-rows:auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items:center;
  padding: 2px 0 8px;
}
.spectrum-label-row{ display:contents; }
.spectrum-label{
  font-size:.86rem;
  font-weight:900;
  color:rgba(230,237,247,.82);
  line-height:1.25;
}
.dim-value{
  grid-column:3/4;
  grid-row:1/2;
  text-align:right;
  font-size:.80rem;
  font-weight:900;
  color:rgba(230,237,247,.70);
}
.spectrum-track{ grid-column:2/3; height:9px; }
.spectrum-desc{ grid-column:1/-1; font-size:.84rem; color:rgba(230,237,247,.62); }
.profile-card-grid{ gap: 16px; }
.profile-card{ background: rgba(255,255,255,.04); }
.section-copy-card{
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  margin-bottom: 12px;
}
.section-copy-card h4{
  font-size:.80rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:rgba(96,165,250,.95);
  margin-bottom: 8px;
}
.trait-row{ grid-template-columns:minmax(170px,240px) minmax(220px,1fr) 70px; }
.trait-bar-track{ min-width:0; }
.som-grid-mini{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:18px 0;
}
.som-grid-cell{
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(230,237,247,.74);
  font-weight:850;
  text-align:center;
}
.som-grid-cell.active{
  border-color:rgba(20,184,166,.52);
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(20,184,166,.14));
  color:rgba(230,237,247,.96);
  box-shadow:0 18px 50px rgba(20,184,166,.08);
}
.som-grid-cell small{ color:rgba(230,237,247,.50); font-weight:750; }
@media(max-width:720px){
  .spectrum-row{ grid-template-columns:1fr; gap:7px; }
  .spectrum-label-row{ display:flex; }
  .dim-value{ grid-column:1/-1; text-align:left; }
  .spectrum-track{ grid-column:1/-1; }
  .trait-row{ grid-template-columns:1fr 64px; }
  .trait-label{ grid-column:1/-1; }
  .som-grid-mini{ grid-template-columns:1fr; }
}


/* Phase 6g restoration polish: closer to original finished pages while keeping engine out of frontend */
.saved-result-btn{
  border-color: rgba(20,184,166,0.44) !important;
  background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(59,130,246,0.12)) !important;
  color: rgba(230,237,247,0.96) !important;
  box-shadow: 0 12px 32px rgba(20,184,166,0.08);
}
.result-title,.mode-section-title{
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mode-copy p{
  margin:0 0 14px;
  color: rgba(230,237,247,0.82);
  line-height:1.68;
  font-size:.98rem;
}
.mode-copy p:first-child{
  color: rgba(230,237,247,0.88);
}
.primary-type{
  word-break: normal;
  overflow-wrap: anywhere;
}
.trait-spectrum{
  display:grid;
  gap:14px;
}
.spectrum-row{
  padding:14px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.09);
}
.spectrum-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.spectrum-label{
  font-weight:950;
  color:rgba(230,237,247,0.90);
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.spectrum-track{
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,0.18);
  overflow:hidden;
  margin:8px 0 9px;
}
.spectrum-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#3b82f6,#14b8a6);
  box-shadow:0 0 18px rgba(20,184,166,0.18);
}
.spectrum-desc{
  color:rgba(230,237,247,0.66);
  line-height:1.48;
  font-size:.91rem;
}
.synthesis-shell{
  max-width:820px;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  padding:0;
}
.synthesis-results.results{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  margin-top:0;
}
.result-hero-card{
  position:relative;
  overflow:hidden;
  padding:28px 24px;
  border-radius:24px;
  background:radial-gradient(760px 380px at 20% 0%,rgba(59,130,246,.19),transparent 60%),radial-gradient(700px 360px at 85% 10%,rgba(20,184,166,.17),transparent 62%),linear-gradient(160deg,rgba(255,255,255,0.072),rgba(255,255,255,0.032));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  margin-bottom:16px;
  text-align:center;
}
.result-hero-card h2{
  font-size:clamp(2rem,6vw,3.6rem);
  line-height:.96;
  letter-spacing:-.05em;
  margin:8px 0 12px;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.86) 40%,#4c6fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.result-kicker,.card-meta-label{
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(230,237,247,.62);
}
#profileSummary{
  max-width:680px;
  margin:0 auto;
  color:rgba(230,237,247,.76);
  line-height:1.66;
}
.profile-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:16px 0;
}
@media(max-width:680px){.profile-card-grid{grid-template-columns:1fr;}}
.profile-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  padding:24px;
  background:linear-gradient(160deg,rgba(255,255,255,0.058) 0%,rgba(255,255,255,0.025) 100%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 2px 0 rgba(255,255,255,0.05) inset,0 20px 60px rgba(0,0,0,0.28);
}
.profile-card h3{
  font-size:1.85rem;
  line-height:1.05;
  margin:6px 0 12px;
  background:linear-gradient(135deg,#e6edf7,#60a5fa,#14b8a6);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.profile-card p{
  color:rgba(230,237,247,.74);
  line-height:1.62;
  font-size:.94rem;
}
.atlas-jump-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  margin:18px 0;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(59,130,246,.11),rgba(20,184,166,.08));
  border:1px solid rgba(59,130,246,.24);
}
@media(max-width:560px){.atlas-jump-callout{flex-direction:column;align-items:stretch;text-align:center;}.atlas-jump-or{display:none;}}
.atlas-jump-text{color:rgba(230,237,247,.78);line-height:1.45;}
.atlas-jump-btn,.copy-btn{
  border-radius:14px;
  border:1px solid rgba(20,184,166,.42);
  background:linear-gradient(135deg,rgba(59,130,246,.78),rgba(20,184,166,.72));
  color:white;
  font-weight:950;
  box-shadow:0 16px 40px rgba(20,184,166,.12);
}
.synthesis-panel,.atlas-wrap{
  border-radius:22px;
  padding:22px;
  margin:16px 0;
  background:linear-gradient(180deg,rgba(255,255,255,0.058),rgba(255,255,255,0.032));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 58px rgba(0,0,0,.28);
}
.synthesis-panel h3,.atlas-copy-title{
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(230,237,247,.92);
  margin-bottom:10px;
}
.trait-map-intro,.atlas-copy-desc,.atlas-friendly-note{
  color:rgba(230,237,247,.70);
  line-height:1.6;
}
.section-copy{
  display:grid;
  gap:12px;
}
.section-copy-card{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
}
.section-copy-card h4{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(94,234,212,.86);
  margin-bottom:8px;
}
.section-copy-card p{
  color:rgba(230,237,247,.76);
  line-height:1.65;
}
.trait-row-wrap{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.trait-row-wrap:last-child{border-bottom:0;}
.trait-row{
  display:grid;
  grid-template-columns:minmax(150px,220px) 1fr auto;
  gap:12px;
  align-items:center;
}
@media(max-width:620px){.trait-row{grid-template-columns:1fr;gap:7px;}.trait-val{justify-self:start;}}
.trait-label{font-weight:900;color:rgba(230,237,247,.88);white-space:normal;overflow:visible;text-overflow:clip;}
.trait-val{font-weight:950;color:rgba(230,237,247,.76);}
.trait-bar-track{height:8px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;}
.trait-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#14b8a6);}
.trait-desc{margin-top:7px;color:rgba(230,237,247,.58);font-size:.88rem;line-height:1.45;}
.som-grid-mini{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:18px 0;
}
@media(max-width:520px){.som-grid-mini{grid-template-columns:1fr;}}
.som-grid-cell{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:rgba(230,237,247,.62);
  font-weight:850;
  text-align:center;
}
.som-grid-cell.active{
  border-color:rgba(20,184,166,.48);
  color:rgba(230,237,247,.94);
  background:linear-gradient(135deg,rgba(59,130,246,.17),rgba(20,184,166,.13));
  box-shadow:0 16px 38px rgba(20,184,166,.09);
}
.som-grid-cell small{color:rgba(230,237,247,.44);font-weight:800;}


/* Phase 6h result fidelity and accessibility polish */
:root{ --type-grad: linear-gradient(135deg,#818cf8 0%,#06b6d4 100%); --card-grad: var(--type-grad); }
.primary-type,.result-hero-card h2,.profile-card h3{
  background: var(--type-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.result-hero-card,.results .result-card,.atlas-priority{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.32), 0 0 46px rgba(59,130,246,.10);
}
.results .result-hero-card::before,.synthesis-results .result-hero-card::before{
  content:"";
  display:block;
  height:4px;
  border-radius:999px;
  background:var(--type-grad);
  margin-bottom:18px;
  opacity:.95;
}
.spectrum-row.accessible-trait,.som-signal-row.accessible-trait{
  grid-template-columns: 1fr;
  gap:8px;
  padding:14px 0;
}
.spectrum-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.signal-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:rgba(230,237,247,.78);
  font-size:.72rem;font-weight:850;white-space:nowrap;
}
.spectrum-label{font-size:.9rem;white-space:normal;overflow:visible;text-overflow:clip;}
.spectrum-desc{font-size:.9rem;line-height:1.6;color:rgba(230,237,247,.68);}
.spectrum-fill,.trait-bar-fill{background:var(--type-grad) !important;}
.typed-card{position:relative;overflow:hidden;}
.typed-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--card-grad);opacity:.95;}
.typed-card h3{font-size:1.45rem;letter-spacing:.08em;background:var(--card-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.card-type-name{font-size:.8rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:rgba(230,237,247,.55);margin-top:-3px;margin-bottom:10px;}
.atlas-priority{margin-top:18px;margin-bottom:18px;background:radial-gradient(700px 260px at 20% 0%,rgba(20,184,166,.13),transparent 65%),linear-gradient(180deg,rgba(255,255,255,.064),rgba(255,255,255,.033));}
.atlas-copy-title{font-size:1.08rem;color:rgba(94,234,212,.96);}
.atlas-copy-desc{font-size:.96rem;color:rgba(230,237,247,.88);}
.optional-interaction-panel details{border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.025);padding:0;overflow:hidden;}
.optional-interaction-panel summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:950;color:rgba(230,237,247,.88);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.optional-interaction-panel summary::after{content:"Open";font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(94,234,212,.85);border:1px solid rgba(94,234,212,.20);padding:5px 8px;border-radius:999px;}
.optional-interaction-panel details[open] summary::after{content:"Close";}
.optional-interaction-panel .section-copy{padding:0 18px 18px;}
.trait-row.no-value{grid-template-columns:minmax(120px,180px) 1fr auto;}
.trait-row.no-value .signal-pill{font-size:.68rem;}
.trait-desc{font-size:.9rem;line-height:1.6;color:rgba(230,237,247,.68);}
@media(max-width:720px){
  .trait-row.no-value{grid-template-columns:1fr;gap:8px;}
  .trait-row.no-value .signal-pill{justify-self:start;}
  .profile-card-grid{grid-template-columns:1fr;}
}


/* Phase 6i: functionality + visual polish without re-exposing engine logic */
:root{
  --profile-grad: linear-gradient(135deg,#818cf8 0%,#06b6d4 48%,#14b8a6 100%);
}
.results .result-hero-card::before,
.synthesis-results .result-hero-card::before{
  display:none !important;
  content:none !important;
}
.result-hero-card{
  border-color:rgba(255,255,255,.13) !important;
  background:
    radial-gradient(800px 360px at 18% 0%,rgba(59,130,246,.20),transparent 62%),
    radial-gradient(780px 360px at 88% 8%,rgba(20,184,166,.18),transparent 64%),
    linear-gradient(160deg,rgba(255,255,255,.076),rgba(255,255,255,.032)) !important;
}
.synthesis-results .result-hero-card h2{
  background:var(--profile-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.atlas-priority{
  margin:18px 0 18px !important;
  border-color:rgba(94,234,212,.24) !important;
  background:
    radial-gradient(700px 260px at 14% 0%,rgba(20,184,166,.16),transparent 65%),
    radial-gradient(700px 260px at 88% 0%,rgba(59,130,246,.13),transparent 65%),
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.035)) !important;
  box-shadow:0 20px 64px rgba(0,0,0,.32),0 0 44px rgba(20,184,166,.08) !important;
}
.atlas-copy-row{
  padding:0 0 14px !important;
  align-items:center !important;
}
.atlas-copy-title{
  font-size:clamp(1.05rem,2vw,1.25rem) !important;
  letter-spacing:.03em !important;
  text-transform:none !important;
  color:rgba(230,237,247,.96) !important;
}
.atlas-copy-desc{
  font-size:.96rem !important;
  color:rgba(230,237,247,.82) !important;
  max-width:760px;
}
.atlas-agreement{
  border-top:0 !important;
  padding:8px 0 12px !important;
  color:rgba(230,237,247,.60) !important;
}
.linklike{
  text-decoration:none !important;
  border-bottom:0 !important;
  color:rgba(165,180,252,.95) !important;
}
.linklike:hover{ color:rgba(94,234,212,.95) !important; }
.copy-btn{
  min-height:50px !important;
  font-size:1rem !important;
  margin-top:10px !important;
}
.profile-card-grid{
  gap:16px !important;
  align-items:stretch;
}
.profile-card{
  padding:22px !important;
  display:flex;
  flex-direction:column;
}
.typed-card::before{
  height:5px !important;
  opacity:1 !important;
}
.typed-card h3{
  font-size:clamp(1.45rem,3.6vw,2rem) !important;
  letter-spacing:.08em !important;
  margin-bottom:8px !important;
}
.profile-card .card-meta-label{
  color:rgba(230,237,247,.62) !important;
}
.profile-card p,
.profile-card .card-paragraph{
  color:rgba(230,237,247,.76) !important;
  line-height:1.65 !important;
  font-size:.94rem !important;
}
.profile-card .card-paragraph + .card-paragraph{ margin-top:10px; }
.card-headline{
  font-weight:900;
  line-height:1.35;
  color:rgba(230,237,247,.92);
  margin:2px 0 10px;
}
.copy-section-list{
  display:grid;
  gap:12px;
}
.copy-section-card{
  padding:14px 15px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.028);
}
.copy-section-card p{
  margin:0;
  color:rgba(230,237,247,.78);
  line-height:1.68;
}
.mode-copy p + p{ margin-top:10px; }
.error-box .retry-inline-btn,
.retry-inline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  padding:8px 11px;
  border-radius:12px;
  border:1px solid rgba(94,234,212,.28);
  background:rgba(20,184,166,.08);
  color:rgba(230,237,247,.92);
  font-weight:900;
  cursor:pointer;
}
.saved-result-btn:not([disabled]){
  border-color:rgba(94,234,212,.34) !important;
  background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(20,184,166,.10)) !important;
}
.optional-interaction-panel{ margin-top:16px !important; }
.optional-interaction-panel summary{
  min-height:52px;
}
.trait-map-intro{max-width:760px;}
.synthesis-panel{
  border-color:rgba(255,255,255,.10) !important;
}
@media(max-width:720px){
  .atlas-priority{padding:18px 16px !important;}
  .profile-card{padding:20px 16px !important;}
  .copy-btn{width:100%;}
  .synthesis-shell .top h1{font-size:clamp(1.65rem,9vw,2.6rem);}
}
@media(max-width:480px){
  .container{padding-left:14px !important;padding-right:14px !important;}
  .result-hero-card{padding:22px 16px !important;}
  .atlas-copy-title{font-size:1.05rem !important;}
  .atlas-copy-desc{font-size:.91rem !important;}
}

/* Phase 6J: result functionality and visual restore polish */
:root{
  --com-grad: var(--type-grad);
  --som-grad: linear-gradient(135deg,#60a5fa 0%,#14b8a6 100%);
}
.topbar,
.topbar-inner{
  min-height:64px;
}
.home-btn,.menu-btn{
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(230,237,247,.92) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
}
.home-btn:hover,.menu-btn:hover{
  border-color:rgba(94,234,212,.35) !important;
  background:rgba(20,184,166,.075) !important;
}
.results .result-hero-card::before,
.synthesis-results .result-hero-card::before,
.result-hero-card::before{
  display:none !important;
  content:none !important;
  height:0 !important;
  margin:0 !important;
}
.result-hero-card{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,4vw,36px) !important;
  border-radius:28px !important;
  background:
    radial-gradient(820px 400px at 18% 0%,rgba(59,130,246,.18),transparent 62%),
    radial-gradient(820px 400px at 92% 8%,rgba(20,184,166,.16),transparent 65%),
    linear-gradient(160deg,rgba(255,255,255,.072),rgba(255,255,255,.028)) !important;
}
.result-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:var(--profile-grad);
  opacity:.28;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.primary-type,
.result-hero-card h2{
  background:var(--type-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.synthesis-results .result-hero-card h2{
  background:var(--profile-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.profile-card-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  margin:20px 0 !important;
}
.profile-card.typed-card{
  border-radius:24px !important;
  padding:24px !important;
  background:
    radial-gradient(520px 260px at 20% 0%,rgba(255,255,255,.06),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.024)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 22px 62px rgba(0,0,0,.26) !important;
}
.profile-card.typed-card::before{
  height:6px !important;
  background:var(--card-grad) !important;
}
.profile-card.typed-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(560px 220px at 20% 0%,color-mix(in srgb, #ffffff 8%, transparent),transparent 64%);
  opacity:.45;
}
.profile-card.typed-card > *{position:relative;z-index:1;}
.profile-card.typed-card h3{
  background:var(--card-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  font-size:clamp(1.65rem,4vw,2.35rem) !important;
  letter-spacing:.14em !important;
  margin:0 0 4px !important;
}
.card-type-name{
  margin:0 0 14px !important;
  color:rgba(230,237,247,.58) !important;
  letter-spacing:.16em !important;
}
.card-headline{
  font-size:1rem !important;
  line-height:1.45 !important;
  margin:0 0 14px !important;
  color:rgba(230,237,247,.92) !important;
}
.profile-card .card-paragraph{
  font-size:.96rem !important;
  line-height:1.72 !important;
  color:rgba(230,237,247,.76) !important;
  margin:0 !important;
}
.profile-card .card-paragraph + .card-paragraph{
  margin-top:12px !important;
}
.com-profile-card .card-paragraph,
.som-profile-card .card-paragraph{
  max-width:68ch;
}
.atlas-priority,.atlas-secondary{
  border-radius:24px !important;
  border:1px solid rgba(94,234,212,.22) !important;
  background:
    radial-gradient(720px 260px at 12% 0%,rgba(20,184,166,.16),transparent 65%),
    radial-gradient(720px 260px at 92% 0%,rgba(59,130,246,.13),transparent 65%),
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03)) !important;
  box-shadow:0 20px 66px rgba(0,0,0,.30),0 0 45px rgba(20,184,166,.07) !important;
}
.atlas-priority{margin:18px 0 22px !important;}
.atlas-secondary{margin:22px 0 0 !important;}
.atlas-copy-row{align-items:center !important;gap:18px !important;}
.atlas-copy-title{
  font-size:clamp(1.15rem,2.2vw,1.42rem) !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  color:rgba(230,237,247,.97) !important;
}
.atlas-copy-desc{
  max-width:860px !important;
  color:rgba(230,237,247,.82) !important;
  font-size:clamp(.94rem,1.6vw,1.02rem) !important;
  line-height:1.65 !important;
}
.atlas-agreement,
.agreement{
  border-top:0 !important;
}
.atlas-agreement .linklike,
.linklike,
.agreement a,
.agreement button,
.agreement .linklike{
  text-decoration:none !important;
  text-decoration-style:solid !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}
.copy-btn{
  border-radius:16px !important;
  min-height:52px !important;
  background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(20,184,166,.90)) !important;
  color:#fff !important;
  box-shadow:0 18px 46px rgba(0,0,0,.32),0 0 30px rgba(20,184,166,.12) !important;
}
.copy-btn:disabled{
  opacity:.45 !important;
  box-shadow:none !important;
}
.synthesis-panel{
  border-radius:24px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.026)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.22) !important;
}
.optional-interaction-panel details{
  border:0 !important;
  background:transparent !important;
}
.optional-interaction-panel summary{
  border-radius:18px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.trait-row-wrap{
  padding:14px 0 !important;
}
.trait-row.no-value,
.trait-row{
  grid-template-columns:minmax(155px,230px) 1fr auto !important;
}
.trait-label{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.25 !important;
}
.trait-desc{
  color:rgba(230,237,247,.66) !important;
  font-size:.9rem !important;
  line-height:1.6 !important;
}
.error-box.backend-score-error{display:none !important;}
@media(max-width:880px){
  .profile-card-grid{grid-template-columns:1fr !important;}
}
@media(max-width:720px){
  .result-hero-card{border-radius:22px !important;}
  .profile-card.typed-card{padding:20px 16px !important;border-radius:20px !important;}
  .atlas-copy-row{display:block !important;}
  .trait-row.no-value,.trait-row{grid-template-columns:1fr !important;gap:8px !important;}
  .signal-pill{justify-self:start !important;}
  .synthesis-panel,.atlas-priority,.atlas-secondary{border-radius:20px !important;padding:18px 16px !important;}
}


/* Phase 6K: combo-gradient, balanced profile cards, and COM fallback display polish */
.synthesis-results .result-hero-card{
  background:
    radial-gradient(900px 420px at 15% 0%, color-mix(in srgb, #d4a574 16%, transparent), transparent 62%),
    radial-gradient(900px 420px at 92% 5%, color-mix(in srgb, #4ade80 14%, transparent), transparent 64%),
    linear-gradient(160deg, rgba(255,255,255,.074), rgba(255,255,255,.028)) !important;
}
.synthesis-results .result-hero-card::after{
  background:var(--profile-grad) !important;
  opacity:.38 !important;
}
.synthesis-results .result-hero-card h2,
#profileTitle{
  background:var(--profile-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
.profile-card-grid{
  align-items:stretch !important;
}
.profile-card.typed-card{
  min-height:100% !important;
}
.profile-card .card-headline{
  min-height:auto !important;
  margin-bottom:12px !important;
}
.profile-card .card-paragraph{
  max-width:72ch !important;
  font-size:.95rem !important;
  line-height:1.66 !important;
}
.profile-card .card-paragraph + .card-paragraph{margin-top:10px !important;}
.section-copy-card h4{letter-spacing:.04em !important;}
.section-copy-card p{line-height:1.68 !important;}
.copy-section-card{background:rgba(255,255,255,.035) !important;}
#assessmentForm .question.loading{display:block;}
@media(max-width:920px){
  .profile-card-grid{grid-template-columns:1fr !important;}
  .profile-card .card-paragraph{max-width:none !important;}
}


/* Phase 6L: functional COM visibility + synthesis visual consistency */
#assessmentForm{display:block;min-height:120px;}
#assessmentForm .question{display:block;}
.primary-type,#profileTitle,.card-code-gradient{background:var(--type-grad,linear-gradient(135deg,#60a5fa,#14b8a6));-webkit-background-clip:text;background-clip:text;color:transparent;}
.result-hero-card{position:relative;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 24px 80px rgba(0,0,0,.38);}
.result-hero-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--profile-grad,var(--type-grad,linear-gradient(135deg,#60a5fa,#14b8a6)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.72;}
.ai-profile-reminder{max-width:1024px;margin:0 auto 16px;padding:16px 18px;border-radius:18px;border:1px solid rgba(94,234,212,.20);background:linear-gradient(135deg,rgba(20,184,166,.10),rgba(59,130,246,.06));color:rgba(230,237,247,.82);line-height:1.55;box-shadow:0 18px 54px rgba(0,0,0,.28);}
.ai-reminder-kicker{font-size:.72rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:rgba(94,234,212,.92);margin-bottom:4px;}
.profile-card.typed-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));}
.profile-card.typed-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--card-grad,linear-gradient(135deg,#60a5fa,#14b8a6));opacity:.95;}
.profile-card h3{background:var(--card-grad,linear-gradient(135deg,#60a5fa,#14b8a6));-webkit-background-clip:text;background-clip:text;color:transparent;}
.profile-card-grid{align-items:stretch;}
.profile-card .card-paragraph{font-size:1rem;line-height:1.72;max-width:68ch;}
.section-copy-card p{white-space:pre-wrap;line-height:1.72;}
.atlas-secondary .copy-btn{opacity:1;cursor:pointer;}
.atlas-secondary .copy-btn:disabled{opacity:1;cursor:pointer;}
.atlas-agreement .linklike{text-decoration:none!important;border-bottom:0!important;box-shadow:none!important;}
.linklike{text-decoration:none!important;border-bottom:0!important;}
@media(max-width:760px){.profile-card-grid{grid-template-columns:1fr}.profile-card .card-paragraph{font-size:.96rem}.ai-profile-reminder{padding:14px}.result-hero-card h2{font-size:clamp(2.1rem,12vw,3.4rem)}}

/* Phase 6M: functionality + visual cleanup */
.option{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  user-select:none !important;
  min-height:52px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.03) !important;
  color:rgba(230,237,247,0.92) !important;
  font-weight:900 !important;
  font-size:1.05rem !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease !important;
}
.option:hover{border-color:rgba(59,130,246,.48) !important;transform:translateY(-1px);box-shadow:0 12px 26px rgba(59,130,246,.12) !important;}
.option input[type="radio"]{display:none !important;}
.option input[type="radio"]:checked + span{background:linear-gradient(135deg,rgba(59,130,246,.28),rgba(20,184,166,.20));border-color:rgba(59,130,246,.62);box-shadow:0 14px 28px rgba(59,130,246,.18);}
.option span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:52px;border-radius:14px;border:1px solid transparent;}
.option input[type="radio"]:disabled + span{opacity:.55;cursor:not-allowed;}
#assessmentForm{display:block !important;min-height:120px !important;}
#assessmentForm .question{display:block !important;}

.synthesis-results .ai-profile-reminder{margin-bottom:18px !important;}
.synthesis-results .result-hero-card{margin-bottom:18px !important;}
.profile-card-grid{margin:18px auto 18px !important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;max-width:1028px;}
.profile-card.typed-card{min-height:0 !important;display:flex;flex-direction:column;}
.profile-card .card-headline{font-size:.98rem;line-height:1.55;color:rgba(230,237,247,.92);font-weight:780;margin:8px 0 10px;}
.profile-card .card-paragraph{font-size:.94rem !important;line-height:1.64 !important;color:rgba(230,237,247,.72) !important;max-width:68ch !important;}
.profile-card .card-paragraph + .card-paragraph{margin-top:10px !important;}
.atlas-priority{margin-top:18px !important;margin-bottom:18px !important;}
#profileTitle{display:flex !important;align-items:center;justify-content:center;gap:.22em;flex-wrap:wrap;line-height:1.02;background:none !important;color:inherit !important;-webkit-text-fill-color:initial !important;}
.profile-com-word,.profile-som-word{display:inline-block;}
.profile-plus{display:inline-flex;align-items:center;justify-content:center;min-width:.92em;color:rgba(230,237,247,.46);font-weight:850;text-shadow:0 0 24px rgba(148,163,184,.22);}
.result-hero-card::before{display:none !important;}
.result-hero-card::after{opacity:.46 !important;}

.trait-subhead{font-size:.78rem;font-weight:950;letter-spacing:.10em;text-transform:uppercase;color:rgba(94,234,212,.86);margin:4px 0 12px;}
.trait-subhead.som-subhead{margin-top:20px;}
.trait-row.no-value{grid-template-columns:minmax(150px,230px) minmax(180px,1fr) auto !important;align-items:center !important;gap:12px !important;}
.trait-label{font-size:.86rem !important;font-weight:850 !important;color:rgba(230,237,247,.84) !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.25 !important;}
.trait-bar-track{height:9px !important;background:rgba(255,255,255,.10) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);}
.trait-bar-fill{height:100% !important;min-width:8px;background:var(--profile-grad,linear-gradient(90deg,#3b82f6,#14b8a6)) !important;box-shadow:0 0 14px rgba(20,184,166,.18);}
.signal-pill{white-space:nowrap !important;}
.trait-desc{font-size:.87rem !important;line-height:1.58 !important;color:rgba(230,237,247,.64) !important;}
.som-signal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.som-signal-card{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.025));padding:14px 14px 13px;overflow:hidden;}
.som-signal-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--som-grad,linear-gradient(135deg,#22c55e,#0284c7));opacity:.92;}
.som-signal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.som-signal-name{font-size:.9rem;font-weight:900;color:rgba(230,237,247,.88);}
.som-signal-meter{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin-bottom:9px;}
.som-signal-meter>div{height:100%;border-radius:999px;background:var(--som-grad,linear-gradient(90deg,#22c55e,#0284c7));min-width:8px;box-shadow:0 0 16px rgba(20,184,166,.16);}
.som-signal-card p{font-size:.84rem;line-height:1.52;color:rgba(230,237,247,.62);margin:0;}
.atlas-agreement .linklike,.linklike{text-decoration:none !important;border-bottom:0 !important;box-shadow:none !important;}
@media(max-width:860px){
  .profile-card-grid,.som-signal-list{grid-template-columns:1fr !important;}
  .trait-row.no-value{grid-template-columns:1fr !important;gap:8px !important;}
  .trait-row.no-value .signal-pill{justify-self:start;}
  #profileTitle{font-size:clamp(2.2rem,11vw,4.2rem) !important;}
}

/* Phase 6N: restore original COM question truth-scale layout */
#assessmentForm .question{
  display:block !important;
  margin-bottom:8px !important;
  padding:16px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.035)) !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}
#assessmentForm .question:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 18px 40px rgba(0,0,0,0.35) !important;
  border-color:rgba(59,130,246,0.32) !important;
}
#assessmentForm .question-text{
  font-size:.98rem !important;
  font-weight:750 !important;
  color:var(--text) !important;
  margin-bottom:8px !important;
  line-height:1.38 !important;
}
#assessmentForm .question-number{
  display:inline !important;
  color:rgba(96,165,250,0.98) !important;
  font-weight:900 !important;
  margin-right:6px !important;
}
#assessmentForm .options{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}
#assessmentForm .option{
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  transform:none !important;
  cursor:default !important;
}
#assessmentForm .option:hover{
  border-color:transparent !important;
  transform:none !important;
  box-shadow:none !important;
}
#assessmentForm .option input[type="radio"]{display:none !important;}
#assessmentForm .option label{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  user-select:none !important;
  height:52px !important;
  min-height:52px !important;
  width:100% !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.03) !important;
  color:rgba(230,237,247,0.92) !important;
  font-weight:900 !important;
  font-size:1.05rem !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
}
#assessmentForm .option label:hover{
  border-color:rgba(59,130,246,0.48) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px rgba(59,130,246,0.12) !important;
}
#assessmentForm .option input[type="radio"]:checked + label{
  background:linear-gradient(135deg,rgba(59,130,246,0.22),rgba(20,184,166,0.18)) !important;
  border-color:rgba(59,130,246,0.62) !important;
  box-shadow:0 14px 28px rgba(59,130,246,0.18) !important;
}
#assessmentForm .option input[type="radio"]:disabled + label{
  opacity:.55 !important;
  cursor:not-allowed !important;
}
#assessmentForm .option-labels{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:10px !important;
  margin-top:6px !important;
  padding:0 !important;
}
#assessmentForm .option-labels .opt-label{
  font-size:.75rem !important;
  font-weight:800 !important;
  color:rgba(230,237,247,0.68) !important;
  text-align:center !important;
  line-height:1.2 !important;
}
@media(max-width:420px){
  #assessmentForm .options{gap:8px !important;}
  #assessmentForm .option label{height:48px !important;min-height:48px !important;}
  #assessmentForm .option-labels{gap:8px !important;margin-top:4px !important;}
  #assessmentForm .option-labels .opt-label{font-size:.70rem !important;}
}

/* Phase 6O: restore SOM question layout only. COM layout remains from Phase 6N. */
#somForm .question.som-question{
  margin-bottom:18px !important;
  padding:16px 14px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(55,65,81,.9) !important;
  background:radial-gradient(circle at top left,#020617,#020617) !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease !important;
}
#somForm .question.som-question:hover{
  border-color:rgba(129,140,248,.95) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.95) !important;
  background:radial-gradient(circle at top left,#0b1120,#020617) !important;
  transform:translateY(-1px) !important;
}
#somForm .question.som-question.active{
  border-color:rgba(76,111,255,.95) !important;
  box-shadow:0 0 0 1px rgba(76,111,255,.45),0 18px 36px rgba(15,23,42,.90) !important;
  background:radial-gradient(circle at top left,rgba(76,111,255,.10),#020617) !important;
}
#somForm .question-text{
  font-size:.96rem !important;
  margin-bottom:8px !important;
  line-height:1.4 !important;
  color:var(--text-main,var(--text)) !important;
  font-weight:700 !important;
}
#somForm .question-number{
  font-weight:900 !important;
  color:var(--primary,#4c6fff) !important;
  margin-right:6px !important;
}
#somForm .som-options{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  margin-top:4px !important;
}
#somForm .som-option.option{
  display:block !important;
  align-items:initial !important;
  justify-content:initial !important;
  cursor:default !important;
  min-height:0 !important;
  border-radius:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  padding:0 !important;
  color:inherit !important;
  font-weight:inherit !important;
  font-size:inherit !important;
}
#somForm .som-option.option:hover{
  border-color:transparent !important;
  transform:none !important;
  box-shadow:none !important;
}
#somForm .som-option input[type="radio"]{display:none !important;}
#somForm .som-option label{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
  min-height:44px !important;
  height:auto !important;
  cursor:pointer !important;
  border-radius:10px !important;
  border:1px solid rgba(55,65,81,.9) !important;
  padding:9px 10px !important;
  background:linear-gradient(135deg,rgba(15,23,42,.95),#020617) !important;
  color:rgba(229,231,235,.90) !important;
  transition:all .2s ease !important;
  line-height:1.35 !important;
  text-align:left !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
#somForm .som-option label:hover{
  border-color:rgba(129,140,248,.9) !important;
  background:radial-gradient(circle at top left,#111827,#020617) !important;
  transform:none !important;
  box-shadow:none !important;
}
#somForm .som-option input[type="radio"]:checked + label{
  border-color:rgba(76,111,255,.95) !important;
  background:radial-gradient(circle at top left,rgba(0,194,168,.10),#020617) !important;
  box-shadow:0 0 0 1px rgba(76,111,255,.45),0 16px 32px rgba(15,23,42,.98) !important;
}
#somForm .som-option input[type="radio"]:disabled + label{opacity:.58 !important;cursor:not-allowed !important;}
#somForm .som-option span{
  display:inline-flex !important;
  min-height:0 !important;
  height:auto !important;
  width:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
#somForm .som-option label .som-letter{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:999px !important;
  border:1px solid rgba(156,163,175,.8) !important;
  font-size:.75rem !important;
  margin-right:2px !important;
  color:var(--text-muted,#9ca3af) !important;
  font-weight:950 !important;
  background:rgba(255,255,255,.03) !important;
  flex:0 0 auto !important;
}
#somForm .som-option input[type="radio"]:checked + label .som-letter{
  border-color:transparent !important;
  background:var(--sig-grad,linear-gradient(135deg,#4c6fff,#00c2a8)) !important;
  color:#0b1120 !important;
}
#somForm .som-option label .som-option-text{
  display:inline !important;
  width:auto !important;
  min-height:0 !important;
  border:0 !important;
  background:transparent !important;
  color:rgba(229,231,235,.86) !important;
  font-size:.9rem !important;
  font-weight:760 !important;
  line-height:1.4 !important;
  text-align:left !important;
}
@media(max-width:560px){
  #somForm .som-option label{padding:10px 10px !important;gap:9px !important;}
  #somForm .som-option label .som-option-text{font-size:.88rem !important;}
}


/* Phase 6Q: SOM original-style forced-choice layout restore.
   This deliberately avoids .option classes so COM scale CSS cannot bleed into SOM. */
#somForm{
  display:block;
  margin-top:0;
}
#somForm .som-question-card{
  margin-bottom:18px !important;
  padding:16px 14px 12px !important;
  border-radius:14px !important;
  border:1px solid rgba(55,65,81,.9) !important;
  background:radial-gradient(circle at top left,#020617,#020617) !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease !important;
  overflow:visible !important;
}
#somForm .som-question-card:hover{
  border-color:rgba(129,140,248,.95) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.95) !important;
  background:radial-gradient(circle at top left,#0b1120,#020617) !important;
  transform:translateY(-1px) !important;
}
#somForm .som-question-text{
  font-size:.96rem !important;
  margin-bottom:8px !important;
  line-height:1.4 !important;
  color:var(--text-main,#e5e7eb) !important;
  font-weight:700 !important;
  overflow-wrap:anywhere !important;
}
#somForm .som-question-number{
  font-weight:900 !important;
  color:var(--primary,#4c6fff) !important;
  margin-right:6px !important;
}
#somForm .som-choice-list{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  margin-top:4px !important;
  width:100% !important;
}
#somForm .som-choice{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
#somForm .som-choice input[type="radio"]{
  display:none !important;
}
#somForm .som-choice-label{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:100% !important;
  min-height:44px !important;
  height:auto !important;
  cursor:pointer !important;
  border-radius:10px !important;
  border:1px solid rgba(55,65,81,.9) !important;
  padding:9px 10px !important;
  background:linear-gradient(135deg, rgba(15,23,42,.95), #020617) !important;
  color:rgba(229,231,235,.90) !important;
  transition:all .2s ease !important;
  line-height:1.35 !important;
  text-align:left !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
  white-space:normal !important;
}
#somForm .som-choice-label:hover{
  border-color:rgba(129,140,248,.9) !important;
  background:radial-gradient(circle at top left,#111827,#020617) !important;
}
#somForm .som-choice input[type="radio"]:checked + .som-choice-label{
  border-color:rgba(76,111,255,.95) !important;
  background:radial-gradient(circle at top left, rgba(0,194,168,.10), #020617) !important;
  box-shadow:0 0 0 1px rgba(76,111,255,.45), 0 16px 32px rgba(15,23,42,.98) !important;
}
#somForm .som-choice input[type="radio"]:disabled + .som-choice-label{
  opacity:.58 !important;
  cursor:not-allowed !important;
}
#somForm .som-choice-letter{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:999px !important;
  border:1px solid rgba(156,163,175,.8) !important;
  font-size:.75rem !important;
  color:var(--text-muted,#9ca3af) !important;
  font-weight:950 !important;
  background:rgba(255,255,255,.03) !important;
  flex:0 0 auto !important;
  margin-top:1px !important;
}
#somForm .som-choice input[type="radio"]:checked + .som-choice-label .som-choice-letter{
  border-color:transparent !important;
  background:var(--sig-grad, linear-gradient(135deg,#4c6fff,#00c2a8)) !important;
  color:#0b1120 !important;
}
#somForm .som-choice-text{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  color:rgba(229,231,235,.86) !important;
  font-size:.9rem !important;
  font-weight:760 !important;
  line-height:1.4 !important;
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}
#somForm .question,
#somForm .option,
#somForm .som-option{
  max-width:none !important;
}
#somForm.loading::before{
  content:"Loading SOM questions...";
  display:block;
  padding:16px 14px;
  border-radius:14px;
  border:1px solid rgba(55,65,81,.9);
  color:rgba(229,231,235,.82);
}
body:has(#somForm) .agreement a,
body:has(#somForm) .eu-footer-links a{
  border-bottom:0 !important;
  text-decoration:none !important;
}
@media(max-width:560px){
  #somForm .som-question-card{padding:13px 11px 10px !important;margin-bottom:14px !important;}
  #somForm .som-choice-label{padding:10px 10px !important;gap:9px !important;}
  #somForm .som-choice-text{font-size:.88rem !important;}
}


/* Phase 6S: signal pill colors, Atlas CTA polish, and responsive balance. */
.ai-profile-reminder{
  border-color:rgba(94,234,212,.28) !important;
  background:
    radial-gradient(620px 220px at 10% 0%,rgba(59,130,246,.16),transparent 58%),
    radial-gradient(520px 220px at 90% 0%,rgba(20,184,166,.15),transparent 60%),
    rgba(255,255,255,.035) !important;
}
.ai-reminder-kicker{
  color:rgba(94,234,212,.96) !important;
  letter-spacing:.10em !important;
}
.atlas-copy-title{
  color:rgba(94,234,212,.96) !important;
  letter-spacing:.10em !important;
}
.atlas-priority{
  border-color:rgba(94,234,212,.24) !important;
  background:
    radial-gradient(760px 260px at 8% 0%,rgba(59,130,246,.14),transparent 58%),
    radial-gradient(720px 260px at 92% 0%,rgba(20,184,166,.14),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022)) !important;
}
.atlas-secondary .copy-btn,
#copyBtnBottom{
  opacity:1 !important;
  cursor:pointer !important;
  background:linear-gradient(135deg,rgba(59,130,246,.88),rgba(20,184,166,.82)) !important;
  color:#fff !important;
}
#copyBtnBottom:disabled{
  opacity:1 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.signal-pill{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  border-radius:999px !important;
  padding:5px 9px !important;
  font-weight:950 !important;
  letter-spacing:.01em;
}
.signal-pill::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 12px currentColor;
}
.signal-pill.signal-strong{
  color:rgba(255,237,180,.98) !important;
  border-color:rgba(245,158,11,.58) !important;
  background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(245,158,11,.08)) !important;
}
.signal-pill.signal-strong::before{background:#f59e0b;}
.signal-pill.signal-present{
  color:rgba(191,219,254,.98) !important;
  border-color:rgba(96,165,250,.52) !important;
  background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(20,184,166,.08)) !important;
}
.signal-pill.signal-present::before{background:#60a5fa;}
.signal-pill.signal-quiet{
  color:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.30) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.045)) !important;
}
.signal-pill.signal-quiet::before{background:#f8fafc;}
.trait-row-wrap,.som-signal-card,.spectrum-row.accessible-trait{
  background:linear-gradient(135deg,rgba(255,255,255,.052),rgba(255,255,255,.022)) !important;
  border:1px solid rgba(255,255,255,.105) !important;
  border-radius:16px !important;
  padding:13px 14px !important;
}
.trait-bars{gap:12px !important;}
.trait-row.no-value{grid-template-columns:minmax(150px,240px) minmax(180px,1fr) auto !important;}
.trait-desc{color:rgba(230,237,247,.70) !important;}
.som-signal-meter,.spectrum-track{height:9px !important;background:rgba(255,255,255,.12) !important;border-radius:999px !important;overflow:hidden;}
.som-signal-meter > div,.spectrum-fill{background:var(--som-grad,var(--profile-grad,linear-gradient(90deg,#60a5fa,#14b8a6))) !important;box-shadow:0 0 16px rgba(96,165,250,.22);}
.som-grid-cell small{
  color:rgba(230,237,247,.58) !important;
  font-weight:800 !important;
}
.profile-plus{
  color:rgba(230,237,247,.48) !important;
  margin:0 .08em;
}
.profile-card .card-paragraph{
  max-width:72ch !important;
}
.profile-card.typed-card{
  min-height:100% !important;
}
@media(max-width:760px){
  .trait-row.no-value{grid-template-columns:1fr !important;gap:9px !important;}
  .trait-row.no-value .signal-pill{justify-self:start;}
  .profile-card-grid{grid-template-columns:1fr !important;}
  .ai-profile-reminder,.atlas-wrap,.synthesis-panel,.result-hero-card{border-radius:18px !important;}
}


/* Phase 6V: synthesis CTA copy polish, correct signal pill classes, and mobile-safe spacing. */
.synthesis-shell .top .subtitle{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.synthesis-shell .top .meta{
  color:rgba(230,237,247,.68) !important;
}
.ai-profile-reminder{
  padding:18px 20px !important;
}
.ai-reminder-kicker{
  text-transform:none !important;
  letter-spacing:.02em !important;
  font-size:1.02rem !important;
  font-weight:950 !important;
  color:rgba(230,237,247,.95) !important;
}
.atlas-copy-title{
  text-transform:none !important;
  letter-spacing:.02em !important;
}
.trait-row-wrap,
.som-signal-card{
  background:
    radial-gradient(420px 120px at 0% 0%,rgba(96,165,250,.075),transparent 62%),
    linear-gradient(135deg,rgba(255,255,255,.058),rgba(255,255,255,.024)) !important;
}
.trait-row-wrap:has(.signal-strong),
.som-signal-card:has(.signal-strong){
  border-color:rgba(245,158,11,.28) !important;
  background:
    radial-gradient(440px 130px at 0% 0%,rgba(245,158,11,.16),transparent 64%),
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.024)) !important;
}
.trait-row-wrap:has(.signal-present),
.som-signal-card:has(.signal-present){
  border-color:rgba(96,165,250,.24) !important;
  background:
    radial-gradient(440px 130px at 0% 0%,rgba(59,130,246,.13),transparent 64%),
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.024)) !important;
}
.trait-row-wrap:has(.signal-quiet),
.som-signal-card:has(.signal-quiet){
  border-color:rgba(255,255,255,.16) !important;
  background:
    radial-gradient(440px 130px at 0% 0%,rgba(255,255,255,.07),transparent 64%),
    linear-gradient(135deg,rgba(255,255,255,.044),rgba(255,255,255,.018)) !important;
}
.som-grid-cell small{
  line-height:1.35 !important;
}
.assessment-hook{
  max-width:760px;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:760px){
  .synthesis-shell .top .subtitle{font-size:.98rem !important;line-height:1.48 !important;}
  .synthesis-shell .top .meta{font-size:.88rem !important;line-height:1.45 !important;}
  .ai-profile-reminder{padding:15px 14px !important;line-height:1.48 !important;}
  .ai-reminder-kicker{font-size:.98rem !important;line-height:1.32 !important;}
  .atlas-copy-desc{font-size:.9rem !important;line-height:1.52 !important;}
  .som-grid-cell{padding:12px 10px !important;}
  .som-grid-cell small{font-size:.76rem !important;}
}
@media(max-width:420px){
  .signal-pill{width:max-content;max-width:100%;}
  .trait-label,.som-signal-name{font-size:.92rem !important;}
  .trait-desc,.som-signal-card p{font-size:.84rem !important;line-height:1.45 !important;}
}


/* Phase 6Y: term clarity and result alias cleanup */
.type-alias{display:none !important;}
@media (max-width:560px){
  .top h1{font-size:1.56rem;letter-spacing:.085em;line-height:1.18;}
  .subtitle{font-size:.96rem;line-height:1.45;}
}


/* Phase 6AA: synthesis interaction spacing polish */
.optional-interaction-panel details[open] summary{
  margin-bottom:14px !important;
}
.optional-interaction-panel .section-copy{
  padding:0 22px 22px !important;
  display:grid !important;
  gap:14px !important;
}
.optional-interaction-panel .section-copy-card{
  margin:0 !important;
  border-radius:18px !important;
}
.optional-interaction-panel summary + .section-copy{
  border-top:0 !important;
}
@media(max-width:720px){
  .optional-interaction-panel details[open] summary{margin-bottom:12px !important;}
  .optional-interaction-panel .section-copy{padding:0 14px 16px !important;gap:12px !important;}
}

/* === UTF VISUAL-ONLY GRADIENT CONSISTENCY FIX ===
   Final visual layer only. Do not use background-position !important here.
   Bars and text use cyclic gradients from page JS to avoid hard vertical seams.
*/
:root{
  --utf-flow-speed: 14.5s;
  --utf-flow-size: 200% 100%;
  --utf-page-title-grad: linear-gradient(135deg,#60a5fa 0%,#34d399 60%,#60a5fa 100%);
  --utf-architecture-grad: linear-gradient(90deg,#fff8db 0%,#fde68a 18%,#fbbf24 34%,#d97706 50%,#fbbf24 66%,#fde68a 82%,#fff8db 100%);
}
@keyframes utfAmbientGradientFlow{0%{background-position:0% 50%;}100%{background-position:100% 50%;}}
.type-gradient-text,
.utf-type-gradient-text,
.type-gradient-line,
.primary-type > span,
#primaryType > span,
.profile-com-word,
.profile-som-word,
.profile-card h3.type-gradient-text,
.profile-card .card-type-name,
.card-code-gradient,
.type-card .type-title,
.type-card .type-code,
.type-title,
.type-code,
[class^="type-title-"],
[class*=" type-title-"]{
  display:inline-block;
  max-width:100%;
  padding:0 .035em .08em;
  line-height:1.12;
  background-image:var(--type-grad, var(--profile-grad, linear-gradient(90deg,#60a5fa,#34d399,#60a5fa)));
  background-size:var(--utf-flow-size) !important;
  background-repeat:repeat-x !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
  will-change:background-position;
}
.primary-type,
#primaryType{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  overflow:visible !important;
  background:none !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}
#profileTitle{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.28em !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
  background:none !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}
.profile-com-word{background-image:var(--com-grad,var(--type-grad)) !important;}
.profile-som-word{background-image:var(--som-grad,var(--type-grad)) !important;}
.profile-card h3.type-gradient-text,
.profile-card .card-type-name,
.card-code-gradient{background-image:var(--card-grad,var(--type-grad)) !important;}
.trait-bar-fill,
.com-trait-bars .trait-bar-fill,
#dimCards .trait-bar-fill,
#traitMapHost .com-trait-bars .trait-bar-fill{
  background-image:var(--com-grad,var(--profile-grad,var(--type-grad,linear-gradient(90deg,#60a5fa,#34d399,#60a5fa)))) !important;
  background-size:var(--utf-flow-size) !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
  will-change:background-position;
}
.som-signal-meter > div,
.som-spectrum .spectrum-fill,
.som-signal-row .spectrum-fill,
#scoreGrid .spectrum-fill,
#traitMapHost .som-signal-meter > div,
#traitMapHost .som-signal-list .som-signal-meter > div{
  min-width:8px;
  background-image:var(--som-grad,var(--type-grad,linear-gradient(90deg,#f472b6,#a78bfa,#60a5fa,#f472b6))) !important;
  background-size:var(--utf-flow-size) !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
  will-change:background-position;
}
.type-gradient-bar,
.gradient-preview-bar,
.profile-card.typed-card::before,
.result-hero-card::before,
.results .result-hero-card::before,
.synthesis-results .result-hero-card::before{
  background-image:var(--card-grad,var(--profile-grad,var(--type-grad,linear-gradient(90deg,#60a5fa,#34d399,#60a5fa)))) !important;
  background-size:var(--utf-flow-size) !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
  will-change:background-position;
}
.cta-primary,.copy-btn,.rating-submit-btn,.submit-btn,.hero-cta,.hero-cta-primary{
  background-size:var(--utf-flow-size) !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
  will-change:background-position;
}
.topbar .brand-gradient{animation:none !important;}
#profileSummary{display:none !important;}
@media (prefers-reduced-motion: reduce){
  .type-gradient-text,.utf-type-gradient-text,.type-gradient-line,.profile-com-word,.profile-som-word,.card-code-gradient,.card-type-name,.trait-bar-fill,.som-signal-meter > div,.spectrum-fill,.type-gradient-bar,.gradient-preview-bar,.cta-primary,.copy-btn,.rating-submit-btn,.submit-btn,.hero-cta,.hero-cta-primary{animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;}
  .topbar .brand-gradient{animation:none !important;}
}
/* === END UTF VISUAL-ONLY GRADIENT CONSISTENCY FIX === */

/* === UTF FINAL MICRO FLOW SPACING FIX ===
   Visual-only: removes hard reset and spreads text gradients without changing data or logic.
*/
:root{
  --utf-flow-size:200% 100%;
  --utf-flow-speed:14.5s;
  --utf-architecture-grad:linear-gradient(90deg,#fffbe8 0%,#fef3c7 16%,#fde68a 30%,#fbbf24 44%,#d97706 58%,#fbbf24 72%,#fde68a 86%,#fffbe8 100%);
}
.type-gradient-text,
.utf-type-gradient-text,
.type-gradient-line,
.primary-type > span,
#primaryType > span,
.profile-com-word,
.profile-som-word,
.profile-card h3.type-gradient-text,
.profile-card .card-type-name,
.card-code-gradient,
.type-card .type-title,
.type-card .type-code,
.type-title,
.type-code,
[class^="type-title-"],
[class*=" type-title-"]{
  background-size:200% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
}
.trait-bar-fill,
.som-signal-meter > div,
.som-spectrum .spectrum-fill,
.som-signal-row .spectrum-fill,
#scoreGrid .spectrum-fill,
.type-gradient-bar,
.gradient-preview-bar,
.profile-card.typed-card::before,
.result-hero-card::before,
.results .result-hero-card::before,
.synthesis-results .result-hero-card::before{
  background-size:200% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed) linear infinite !important;
}
.architecture-title{
  background-image:var(--utf-architecture-grad) !important;
  background-size:200% 100% !important;
  animation:utfAmbientGradientFlow 13s linear infinite !important;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* === END UTF FINAL MICRO FLOW SPACING FIX === */


/* === UTF FINAL TWO-ISSUE VISUAL FIX ===
   Visual-only: widen synthesis profile gradient flow and keep the loop seamless.
*/
@keyframes utfWideSeamlessGradientFlow{
  0%{background-position:0% 50%;}
  100%{background-position:66.666% 50%;}
}
#profileTitle .profile-com-word,
#profileTitle .profile-som-word,
.synthesis-shell .profile-com-word,
.synthesis-shell .profile-som-word{
  background-size:400% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfWideSeamlessGradientFlow 18s linear infinite !important;
  will-change:background-position;
}
.synthesis-shell .type-gradient-bar,
.synthesis-shell .gradient-preview-bar,
.synthesis-shell .result-hero-card::before,
.synthesis-results .result-hero-card::before{
  background-size:400% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfWideSeamlessGradientFlow 18s linear infinite !important;
  will-change:background-position;
}
/* === END UTF FINAL TWO-ISSUE VISUAL FIX === */

/* === UTF SYNTH BAR END-COLOR FIX ===
   Visual-only: synthesis bars use a wider slice of the seamless gradient so the two visible ends do not land on the same color.
*/
.synthesis-shell #traitMapHost .trait-bar-fill,
.synthesis-shell #traitMapHost .som-signal-meter > div,
.synthesis-shell #traitMapHost .som-signal-list .som-signal-meter > div,
.synthesis-shell .com-trait-bars .trait-bar-fill,
.synthesis-shell .som-signal-meter > div,
.synthesis-shell .som-spectrum .spectrum-fill,
.synthesis-shell .som-signal-row .spectrum-fill,
.synthesis-shell #scoreGrid .spectrum-fill,
.synthesis-results #traitMapHost .trait-bar-fill,
.synthesis-results #traitMapHost .som-signal-meter > div,
.synthesis-results .som-signal-meter > div,
.synthesis-results .spectrum-fill{
  background-size:400% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfWideSeamlessGradientFlow 18s linear infinite !important;
  will-change:background-position;
}
/* === END UTF SYNTH BAR END-COLOR FIX === */

/* === UTF MOBILE FINAL COSMETIC TWEAKS ===
   Visual/UI only: COM/SOM page bar spacing, clickable unfinished-submit scroll behavior support,
   and mobile UTF profile title wrapping.
*/
.com-page #dimCards .trait-bar-fill,
.com-page .com-trait-item .trait-bar-fill{
  background-image:var(--com-flow-grad,var(--com-grad,var(--type-flow-grad,var(--type-grad)))) !important;
  background-size:360% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed,11.5s) linear infinite !important;
}
.som-page #scoreGrid .spectrum-fill,
.som-page .som-spectrum .spectrum-fill,
.som-page .som-signal-row .spectrum-fill{
  background-image:var(--som-flow-grad,var(--som-grad,var(--type-flow-grad,var(--type-grad)))) !important;
  background-size:360% 100% !important;
  background-repeat:repeat-x !important;
  animation:utfAmbientGradientFlow var(--utf-flow-speed,11.5s) linear infinite !important;
}
@media(max-width:600px){
  #profileTitle{
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    gap:.13em !important;
    font-size:clamp(1.55rem,8vw,2.65rem) !important;
    line-height:1.02 !important;
  }
  #profileTitle .profile-com-word,
  #profileTitle .profile-som-word,
  #profileTitle .profile-plus{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
  #profileTitle .profile-plus{
    min-width:.48em !important;
    margin:0 .015em !important;
  }
}
@media(max-width:390px){
  #profileTitle{
    font-size:clamp(1.32rem,7.45vw,2.05rem) !important;
    gap:.09em !important;
  }
  #profileTitle .profile-plus{
    min-width:.42em !important;
  }
}
/* === END UTF MOBILE FINAL COSMETIC TWEAKS === */

/* === UTF MOBILE ACTUAL COSMETIC FIX ===
   Frontend visual/UI only.
   - COM/SOM result page bars use non-looping bar gradients so the visible ends do not match.
   - COM/SOM unfinished submit buttons remain clickable from JS and can scroll to the first unanswered item.
   - Mobile synthesis profile title keeps COM + SOM on one line.
*/
@keyframes utfAssessmentBarDriftNoSameEnds{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
#dimCards .trait-bar-fill,
.com-page #dimCards .trait-bar-fill,
.com-page .com-trait-item .trait-bar-fill{
  background-image:var(--com-bar-grad,var(--com-grad,var(--type-grad,linear-gradient(90deg,#60a5fa 0%,#34d399 100%)))) !important;
  background-size:245% 100% !important;
  background-repeat:no-repeat !important;
  animation:utfAssessmentBarDriftNoSameEnds 14s ease-in-out infinite !important;
  will-change:background-position;
}
#scoreGrid .spectrum-fill,
.som-page #scoreGrid .spectrum-fill,
.som-page .som-spectrum .spectrum-fill,
.som-page .som-signal-row .spectrum-fill{
  background-image:var(--som-bar-grad,var(--som-grad,var(--type-grad,linear-gradient(90deg,#34d399 0%,#60a5fa 100%)))) !important;
  background-size:245% 100% !important;
  background-repeat:no-repeat !important;
  animation:utfAssessmentBarDriftNoSameEnds 14s ease-in-out infinite !important;
  will-change:background-position;
}
@media(max-width:700px){
  #profileTitle{
    display:flex !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:.12em !important;
    font-size:clamp(1.35rem,6.15vw,2.05rem) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  #profileTitle .profile-com-word,
  #profileTitle .profile-som-word,
  #profileTitle .profile-plus{
    display:inline-block !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    max-width:none !important;
    min-width:0 !important;
  }
  #profileTitle .profile-plus{
    margin:0 .01em !important;
    padding:0 !important;
    letter-spacing:-.08em !important;
  }
}
@media(max-width:390px){
  #profileTitle{
    font-size:clamp(1.12rem,5.55vw,1.55rem) !important;
    gap:.075em !important;
    letter-spacing:-.055em !important;
  }
}
/* === END UTF MOBILE ACTUAL COSMETIC FIX === */