/* index.php */

    /* ═══════════════════════════════════════════════════════
       TOKENS
    ═══════════════════════════════════════════════════════ */
    body.page-index{
  --navy: #04101F;
  --navy-2: #071828;
  --navy-3: #0B2035;
  --navy-4: #0F2A45;
  --blue: #005EB8;
  --blue-bright: #1A7FE0;
  --blue-glow: rgba(0,94,184,.18);
  --accent: #00C4FF;
  --gold: #FFD200;
  --success: #00D17A;
  --warning: #F59E0B;
  --danger: #FF4B6E;
  --text-1: #EEF4FF;
  --text-2: #8DAABB;
  --text-3: #4E7090;
  --border: rgba(255,255,255,.07);
  --border-2: rgba(0,196,255,.18);
  --card-bg: rgba(11,32,53,.72);
  --card-bg-2: rgba(7,24,40,.9);
  --shadow-card: 0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-glow: 0 0 40px rgba(0,94,184,.25);
  --bg-radial-1: rgba(0,94,184,.22);
  --bg-radial-2: rgba(0,196,255,.06);
  --grid-line: rgba(255,255,255,.018);
  --topbar-bg: rgba(4,16,31,.88);
  --page-surface: #ffffff;
  --page-surface-text: #22354a;
  --page-pre-bg: #f5f7fb;
  --page-pre-border: #dde4ef;
  --page-link-secondary: #27415b;
  --page-muted: #5b6d80;
  --page-code: #0b2540;
  --status-ok: #0a7a20;
  --status-bad: #b00020;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --radius: 14px;
  --radius-lg: 20px;
}

    body.page-index *, body.page-index *::before, body.page-index *::after{box-sizing: border-box; margin: 0; padding: 0;}
    html{height: 100%; scroll-behavior: smooth;}

    body.page-index{font-family: var(--sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-1);
      background: var(--navy);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;}

    /* ── BACKGROUND ── */
    body.page-index::before{content: "";
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-radial-1) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 90% 60%, var(--bg-radial-2) 0%, transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
      pointer-events: none;
      z-index: 0;}

    /* Subtle grid */
    body.page-index::after{content: "";
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;}

    /* ═══════════════════════════════════════════════════════
       TOP BAR
    ═══════════════════════════════════════════════════════ */
    body.page-index .topbar{position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 28px;
      height: 62px;
      background: var(--topbar-bg);
      -webkit-backdrop-filter: saturate(160%) blur(16px);
      backdrop-filter: saturate(160%) blur(16px);
      border-bottom: 1px solid var(--border);}

    body.page-index .topbar-left{display: flex; align-items: center; gap: 20px;}
    body.page-index .topbar-logo{display: flex; align-items: center; gap: 12px;}
    body.page-index .topbar-logo img{height: 30px; filter: brightness(1.05);}
    body.page-index .topbar-divider{width: 1px; height: 22px; background: var(--border);}
    body.page-index .topbar-product{font-size: 13px;
      font-weight: 600;
      color: var(--text-2);
      letter-spacing: .04em;
      text-transform: uppercase;}

    body.page-index .topbar-right{display: flex; align-items: center; gap: 16px;}
    body.page-index .topbar-user{display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: var(--text-2);}
    body.page-index .topbar-avatar{width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #fff;
      flex-shrink: 0;}
    body.page-index .topbar-signout{color: var(--text-2);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      padding: 5px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: all .15s;}
    body.page-index .topbar-signout:hover{color: var(--text-1); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04);}
    body.page-index .profile-menu{position: relative;}
    body.page-index .profile-toggle{display: flex; align-items: center; gap: 10px;
      background: transparent; border: 0; cursor: pointer;
      color: var(--text-2); font-size: 13.5px; font-family: var(--sans);}
    body.page-index .profile-toggle svg{opacity: .8; transition: transform .15s ease;}
    body.page-index .profile-menu.open .profile-toggle svg{transform: rotate(180deg);}
    body.page-index .profile-dropdown{position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
      background: rgba(7,24,40,.98); border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0,0,0,.35); padding: 8px; display: none; z-index: 60;}
    body.page-index .profile-menu.open .profile-dropdown{display: block;}
    body.page-index .profile-dropdown a{display: block; color: var(--text-2); text-decoration: none;
      padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;}
    body.page-index .profile-dropdown a:hover{background: rgba(255,255,255,.05); color: var(--text-1);}

    body.page-index .profile-page-card{padding: 30px 32px;}
    body.page-index .profile-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom: 22px;}
    body.page-index .profile-page-head h2{font-size: 1.5rem; margin: 0 0 6px;}
    body.page-index .profile-page-head p{color: var(--text-2); margin: 0;}
    body.page-index .profile-back-link{text-decoration: none;}
    body.page-index .profile-grid{display: grid; grid-template-columns: 1fr; gap: 18px;}
    body.page-index .profile-section{background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 16px; padding: 20px;}
    body.page-index .profile-section h3{margin: 0 0 12px; font-size: 1.02rem;}
    body.page-index .profile-accordion{padding: 0; overflow: hidden;}
    body.page-index .profile-accordion-summary{list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 18px 20px; cursor: pointer; -webkit-user-select: none; user-select: none;}
    body.page-index .profile-accordion-summary::-webkit-details-marker{display: none;}
    body.page-index .profile-accordion-title{display: inline-flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 700; color: var(--text-1);}
    body.page-index .profile-accordion-title svg{flex-shrink: 0;}
    body.page-index .profile-accordion-chevron{color: var(--text-3); transition: transform .18s ease, color .18s ease;}
    body.page-index .profile-accordion[open] .profile-accordion-chevron{transform: rotate(180deg); color: var(--text-2);}
    body.page-index .profile-accordion-content{padding: 0 20px 20px; border-top: 1px solid var(--border);}
    body.page-index .profile-empty{color: var(--text-3); font-size: .92rem; padding: 10px 0;}
    body.page-index .history-list, body.page-index .saved-report-list{display: grid; gap: 12px;}
    body.page-index .history-item-form{margin: 0;}
    body.page-index .history-item-btn, body.page-index .saved-report-card{width: 100%; text-align: left; background: rgba(4,16,31,.58); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 16px; color: var(--text-1);}
    body.page-index .history-item-btn{cursor: pointer; transition: border-color .15s, transform .15s, background .15s;}
    body.page-index .history-item-btn:hover{border-color: var(--border-2); background: rgba(0,94,184,.08); transform: translateY(-1px);}
    body.page-index .history-title, body.page-index .saved-report-title{font-size: .96rem; font-weight: 700; margin-bottom: 6px;}
    body.page-index .history-meta, body.page-index .saved-report-meta{color: var(--text-2); font-size: .84rem; display:flex; flex-wrap:wrap; gap:10px;}
    body.page-index .saved-report-actions{margin-top: 12px; display:flex; gap:10px; flex-wrap: wrap;}
    body.page-index .saved-report-link{display: inline-flex; align-items:center; gap:8px; padding: 9px 12px; border-radius: 9px;
      text-decoration:none; font-size:.85rem; font-weight:700;
      background: rgba(0,94,184,.18); color: #DDEFFF; border:1px solid rgba(0,94,184,.35);}
    body.page-index .saved-report-link.secondary{background: transparent; color: var(--text-2); border-color: var(--border);}
    body.page-index .saved-report-link:hover{color: #fff;}

    /* Status pill */
    body.page-index .status-pill{display: flex; align-items: center; gap: 6px;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(0,209,122,.1);
      border: 1px solid rgba(0,209,122,.2);
      font-size: 12px; font-weight: 600; color: var(--success);}
    body.page-index .status-dot{width: 6px; height: 6px; border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 2px rgba(0,209,122,.3);
      animation: pulse-dot 2.4s ease-in-out infinite;}
    @keyframes pulse-dot{0%,100%{opacity:1} 50%{opacity:.4}}

    /* ═══════════════════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════════════════ */
    body.page-index .wrap{position: relative;
      z-index: 1;
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
      padding: 48px 24px 64px;
      flex: 1;}

    body.page-index .card{background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      padding: 36px 40px;
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      animation: card-in .35s cubic-bezier(.16,1,.3,1) both;}
    @keyframes card-in{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)}}

    /* ═══════════════════════════════════════════════════════
       STEPS
    ═══════════════════════════════════════════════════════ */
    body.page-index .step{display: none; animation: fade-in .25s ease both;}
    body.page-index .step.active{display: block;}
    @keyframes fade-in{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}

    /* ── STEP 1: WELCOME ── */
    body.page-index .welcome-grid{display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px 24px;
      align-items: center;
      margin-bottom: 28px;}
    body.page-index .welcome-icon{width: 64px; height: 64px;
      background: linear-gradient(135deg, rgba(0,94,184,.3) 0%, rgba(0,196,255,.15) 100%);
      border: 1px solid rgba(0,196,255,.25);
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;}
    body.page-index .welcome-icon img{height: 36px;}
    body.page-index .welcome-text h2{font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--text-1);
      margin: 0 0 6px;}
    body.page-index .welcome-text p{color: var(--text-2);
      font-size: .975rem;
      margin: 0;}

    body.page-index .disclaimer-block{background: rgba(0,94,184,.1);
      border: 1px solid rgba(0,94,184,.25);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 20px;
      font-size: .9rem;
      color: var(--text-2);}
    body.page-index .disclaimer-block strong{color: var(--text-1);}
    body.page-index .disclaimer-block a{color: var(--accent); text-decoration: none; font-weight: 600;}
    body.page-index .disclaimer-block a:hover{text-decoration: underline;}

    body.page-index .agree-row{display: flex; align-items: center; gap: 10px;
      padding: 14px 16px;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      font-size: .9rem;
      color: var(--text-2);
      transition: border-color .15s, background .15s;
      margin-bottom: 20px;}
    body.page-index .agree-row:hover{border-color: var(--border-2); background: rgba(0,196,255,.04); color: var(--text-1);}
    body.page-index .agree-row input[type=checkbox]{display: none;}
    body.page-index .check-box{width: 20px; height: 20px; flex-shrink: 0;
      border: 1.5px solid var(--text-3);
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;}
    body.page-index .agree-row.checked .check-box{background: var(--blue); border-color: var(--blue);}
    body.page-index .agree-row.checked .check-box::after{content: ""; display: block; width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(43deg) translateY(-1px);}

    /* ── BUTTONS ── */
    body.page-index .btn{display: inline-flex; align-items: center; gap: 8px;
      border: 0; border-radius: 10px;
      padding: 11px 22px;
      font-family: var(--sans);
      font-size: 14px; font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;}
    body.page-index .btn:active{transform: translateY(1px);}
    body.page-index .btn-primary{background: var(--blue);
      color: #fff;
      box-shadow: 0 4px 16px rgba(0,94,184,.35);}
    body.page-index .btn-primary:hover{background: var(--blue-bright); box-shadow: 0 6px 20px rgba(0,94,184,.5);}
    body.page-index .btn-primary[disabled]{opacity: .35; cursor: not-allowed; pointer-events: none;}
    body.page-index .btn-outline{background: transparent;
      border: 1px solid var(--border);
      color: var(--text-2);}
    body.page-index .btn-outline:hover{border-color: rgba(255,255,255,.2); color: var(--text-1); background: rgba(255,255,255,.04);}
    body.page-index .btn-ghost{background: transparent;
      color: var(--text-2);
      padding: 11px 16px;}
    body.page-index .btn-ghost:hover{color: var(--text-1);}

    /* ── STEP 2: SOURCE SELECT ── */
    body.page-index .step2-head{display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 20px;}
    body.page-index .step2-head h2{font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
      color: var(--text-1); margin: 0;}

    body.page-index .section-label{font-size: 11px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--text-3);
      margin-bottom: 10px;}

    body.page-index .select-grid{display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;}

    body.page-index .select-btn{position: relative;
      display: block; width: 100%; text-align: left;
      background: rgba(11,32,53,.6);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px 18px 42px;
      cursor: pointer;
      transition: all .2s;
      overflow: hidden;
      color: var(--text-2);
      font-family: var(--sans);
      font-size: .88rem;
      line-height: 1.5;}
    body.page-index .select-btn::before{content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--blue) 0%, var(--accent) 100%);
      opacity: 0;
      transition: opacity .2s;}
    body.page-index .select-btn:hover:not([disabled]){border-color: rgba(0,196,255,.28);
      background: rgba(0,94,184,.12);
      color: var(--text-1);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.3), var(--shadow-glow);}
    body.page-index .select-btn:hover:not([disabled])::before{opacity: 1;}
    body.page-index .select-btn.selected{border-color: var(--blue-bright);
      background: rgba(0,94,184,.18);
      color: var(--text-1);}
    body.page-index .select-btn.selected::before{opacity: 1;}
    body.page-index .select-btn[disabled]{opacity: .35; cursor: not-allowed;}
    body.page-index .select-btn b{display: block;
      font-size: .95rem; font-weight: 700;
      color: var(--text-1);
      margin-bottom: 6px;
      letter-spacing: -.01em;}
    body.page-index .select-btn .source-icon{position: absolute;
      bottom: 14px; right: 16px;
      width: 26px; height: 26px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      opacity: .5;}
    body.page-index .select-btn:hover .source-icon, body.page-index .select-btn.selected .source-icon{opacity: 1;}

    /* tick for multi */
    body.page-index .multi .select-btn.selected::after{content: "";
      position: absolute;
      top: 14px; right: 14px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--success);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath stroke='white' stroke-width='2' fill='none' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      box-shadow: 0 0 0 2.5px var(--card-bg);}

    /* Advanced toggle */
    body.page-index .adv-wrap{display: flex; align-items: center; gap: 10px;}
    body.page-index .adv-wrap label{font-size: 13px; font-weight: 600; color: var(--text-2);}
    body.page-index .adv-state{font-size: 12px; font-weight: 700; min-width: 2ch;}
    body.page-index .adv-state.off{color: var(--text-3);}
    body.page-index .adv-state:not(.off){color: var(--accent);}

    body.page-index .switch{position: relative; width: 44px; height: 24px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center;}
    body.page-index .switch input{display: none;}
    body.page-index .switch .knob{position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .18s ease; z-index: 2;}
    body.page-index .switch .track{position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--border); transition: background .18s;}
    body.page-index .switch input:checked + .knob{transform: translateX(20px);}
    body.page-index .switch input:checked ~ .track{background: linear-gradient(90deg, var(--blue) 0%, var(--accent) 100%); border-color: transparent;}

    /* Advanced continue bar */
    body.page-index .adv-continue{display: none; margin-top: 14px; justify-content: flex-end; align-items: center; gap: 10px;}
    body.page-index .adv-hint{color: var(--text-3); font-size: .88rem;}

    /* Combo desc */
    body.page-index .combo-desc{display: none; margin-top: 14px;
      background: rgba(0,94,184,.08);
      border: 1px solid rgba(0,94,184,.2);
      border-radius: var(--radius);
      padding: 16px 18px;
      color: var(--text-2);
      font-size: .88rem;}
    body.page-index .combo-desc h4{color: var(--accent); font-size: .95rem; margin-bottom: 6px; font-weight: 700;}
    body.page-index .combo-desc p{color: var(--text-2); margin-bottom: 8px;}
    body.page-index .combo-desc .keys{font-family: var(--mono); font-size: .82rem;
      color: var(--text-3);
      background: rgba(0,0,0,.25); border: 1px solid var(--border);
      border-radius: 8px; padding: 8px 12px;}
    body.page-index .combo-desc ul{margin: 8px 0 0 16px;}
    body.page-index .combo-desc li{margin-bottom: 3px;}

    /* ── STEP 3: SUGGESTIONS ── */
    body.page-index .suggestions-block{min-height: 200px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(7,24,40,.6);
      position: relative;
      overflow: hidden;}
    body.page-index .suggestions-title{font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--text-3); padding: 14px 16px 4px;}
    body.page-index .suggestion-list{list-style: none; padding: 0 10px 10px; margin: 0;}
    body.page-index .suggestion-list li{padding: 10px 14px;
      margin: 4px 0;
      border-radius: 10px;
      border: 1px solid transparent;
      cursor: pointer;
      color: var(--text-2);
      font-size: .88rem;
      transition: all .15s;
      line-height: 1.45;}
    body.page-index .suggestion-list li:hover{background: rgba(0,94,184,.12);
      border-color: rgba(0,94,184,.2);
      color: var(--text-1);
      padding-left: 18px;}

    body.page-index .pager{display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 10px;}
    body.page-index .pager .index{font-size: .82rem; color: var(--text-3);}
    body.page-index .pager button{background: rgba(255,255,255,.05); border: 1px solid var(--border);
      color: var(--text-2); border-radius: 7px; padding: 4px 10px;
      cursor: pointer; font-size: .82rem; transition: all .15s;}
    body.page-index .pager button:hover:not([disabled]){background: rgba(255,255,255,.1); color: var(--text-1);}
    body.page-index .pager button[disabled]{opacity: .3; cursor: not-allowed;}

    /* Robot loader */
    body.page-index .robot-wrap{position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      gap: 20px; padding: 24px;}
    body.page-index .robot{width: 80px; height: 80px; flex-shrink: 0;
      border-radius: 18px;
      background: rgba(0,94,184,.12);
      border: 1px solid rgba(0,94,184,.2);
      display: flex; align-items: center; justify-content: center;}
    body.page-index .speech{background: rgba(11,32,53,.8);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      max-width: 440px; flex: 1;}
    body.page-index .speech .line{font-weight: 600; color: var(--accent); font-size: .9rem;}
    body.page-index .bar{height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 12px;}
    body.page-index .bar>.fill{height: 100%; width: 35%; background: linear-gradient(90deg, var(--blue), var(--accent)); animation: load 1.2s infinite ease-in-out;}
    @keyframes load{0%{margin-left:-35%} 50%{margin-left:35%;width:60%} 100%{margin-left:100%;width:35%}}

    /* ── STEP 4: QUERY FORM ── */
    body.page-index .form-label{font-size: 11px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--text-3);
      display: block; margin-bottom: 8px;}

    body.page-index textarea[name="query"]{width: 100%; min-height: 120px; resize: vertical;
      background: rgba(7,24,40,.8);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      font-family: var(--sans);
      font-size: .95rem;
      color: var(--text-1);
      line-height: 1.55;
      transition: border-color .15s;}
    body.page-index textarea[name="query"]:focus{outline: none;
      border-color: var(--blue-bright);
      box-shadow: 0 0 0 3px rgba(0,94,184,.15);}
    body.page-index textarea[name="query"]::placeholder{color: var(--text-3);}

    body.page-index .refine-panel{margin-top: 12px;
      background: rgba(0,94,184,.07);
      border: 1px solid rgba(0,94,184,.18);
      border-radius: var(--radius);
      padding: 14px 16px;}
    body.page-index .refine-panel h4{font-size: .88rem; font-weight: 700; color: var(--text-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px;}
    body.page-index .hint{font-size: .87rem; color: var(--text-3); margin: 4px 0;}
    body.page-index .chip{display: inline-block; margin: 4px 4px 0 0;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(0,94,184,.18);
      border: 1px solid rgba(0,94,184,.3);
      cursor: pointer; font-size: .82rem;
      color: var(--accent);
      transition: all .15s;}
    body.page-index .chip:hover{background: rgba(0,94,184,.3);}

    body.page-index .btn-row{display: flex; gap: 10px; align-items: center;
      justify-content: space-between;
      margin-top: 18px;}

    /* ── STEP HEADER ── */
    body.page-index .step-header{margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);}
    body.page-index .step-header h2{font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
      margin-bottom: 4px; color: var(--text-1);}
    body.page-index .step-header p{color: var(--text-2); font-size: .9rem; margin: 0;}

    /* ── BREADCRUMB ── */
    body.page-index .breadcrumb{display: flex; align-items: center; gap: 6px;
      margin-bottom: 28px; font-size: 12px; color: var(--text-3);}
    body.page-index .breadcrumb .crumb{color: var(--text-3);}
    body.page-index .breadcrumb .crumb.active{color: var(--text-2);}
    body.page-index .breadcrumb svg{opacity: .4;}

    /* ═══════════════════════════════════════════════════════
       MODALS
    ═══════════════════════════════════════════════════════ */
    body.page-index .modal-backdrop{position: fixed; inset: 0;
      background: rgba(0,0,0,.7);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center;
      z-index: 9999;}
    body.page-index .modal{background: var(--card-bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      max-width: 640px; width: 92vw;
      box-shadow: 0 24px 64px rgba(0,0,0,.6);
      padding: 24px 28px;}
    body.page-index .modal h3{font-size: 1.1rem; font-weight: 700; color: var(--danger); margin-bottom: 10px;}
    body.page-index .modal p{color: var(--text-2); font-size: .9rem; margin-bottom: 12px;}
    body.page-index .modal pre{background: rgba(255,75,110,.07);
      border: 1px solid rgba(255,75,110,.15);
      color: #ff9eb0; padding: 12px; border-radius: 10px;
      max-height: 40vh; overflow: auto;
      white-space: pre-wrap; word-break: break-word;
      font-family: var(--mono); font-size: .82rem;}
    body.page-index .modal .actions{display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;}

    /* ── ACCESS OVERLAY ── */
    body.page-index .access-overlay{position: fixed; inset: 0;
      background: rgba(4,16,31,.85);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      display: none; align-items: center; justify-content: center;
      z-index: 10000;}
    body.page-index .access-card{background: var(--card-bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: 0 24px 64px rgba(0,0,0,.6);
      max-width: 480px; width: 92vw;
      padding: 36px;
      text-align: center;}
    body.page-index .access-icon{width: 60px; height: 60px; margin: 0 auto 16px;
      background: rgba(0,94,184,.15);
      border: 1px solid rgba(0,94,184,.25);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;}
    body.page-index .access-card h3{font-size: 1.25rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px;}
    body.page-index .access-card p{color: var(--text-2); font-size: .9rem; margin-bottom: 20px;}
    body.page-index .access-actions{display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
    body.page-index .access-actions a.btn{text-decoration: none;}
    body.page-index .muted-link{color: var(--accent) !important; font-weight: 600; text-decoration: underline !important;}

    /* ── FOOTER ── */
    body.page-index .site-footer{position: relative; z-index: 1;
      border-top: 1px solid var(--border);
      background: rgba(4,16,31,.9);
      padding: 18px 28px;}
    body.page-index .footer-inner{max-width: 900px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;}
    body.page-index .footer-brand{display: flex; align-items: center; gap: 10px;}
    body.page-index .footer-brand img{height: 18px; opacity: .7;}
    body.page-index .footer-brand span{font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em;}
    body.page-index .footer-meta{font-size: 12px; color: var(--text-3); font-family: var(--mono);}
    body.page-index .footer-links a{color: var(--text-3); text-decoration: none; font-size: 12px; font-weight: 600; margin-left: 16px; transition: color .15s;}
    body.page-index .footer-links a:hover{color: var(--text-2);}

    /* ── UTILITIES ── */
    body.page-index .hidden{display: none !important;}
    body.page-index .section{margin-top: 18px;}
    body.page-index .info-tooltip{display: none;}

    @media (max-width: 640px){
      body.page-index .card{padding: 24px 20px;}
      body.page-index .wrap{padding: 24px 16px 48px;}
      body.page-index .welcome-grid{grid-template-columns: 1fr; text-align: center;}
      body.page-index .welcome-icon{margin: 0 auto;}
      body.page-index .topbar{padding: 0 16px;}
      body.page-index .topbar-product{display: none;}
    }
  

/* process.php */

    /* ═══════════════════════════════════════════════
       DESIGN TOKENS — matches StylePattern exactly
    ═══════════════════════════════════════════════ */
    body.page-process{
  --navy: #04101F;
  --navy-2: #071828;
  --navy-3: #0B2035;
  --navy-4: #0F2A45;
  --blue: #005EB8;
  --blue-bright: #1A7FE0;
  --blue-glow: rgba(0,94,184,.18);
  --accent: #00C4FF;
  --gold: #FFD200;
  --success: #00D17A;
  --warning: #F59E0B;
  --danger: #FF4B6E;
  --text-1: #EEF4FF;
  --text-2: #8DAABB;
  --text-3: #4E7090;
  --border: rgba(255,255,255,.07);
  --border-2: rgba(0,196,255,.18);
  --card-bg: rgba(11,32,53,.72);
  --card-bg-2: rgba(7,24,40,.9);
  --shadow-card: 0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-glow: 0 0 40px rgba(0,94,184,.25);
  --bg-radial-1: rgba(0,94,184,.22);
  --bg-radial-2: rgba(0,196,255,.06);
  --grid-line: rgba(255,255,255,.018);
  --topbar-bg: rgba(4,16,31,.88);
  --page-surface: #ffffff;
  --page-surface-text: #22354a;
  --page-pre-bg: #f5f7fb;
  --page-pre-border: #dde4ef;
  --page-link-secondary: #27415b;
  --page-muted: #5b6d80;
  --page-code: #0b2540;
  --status-ok: #0a7a20;
  --status-bad: #b00020;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --radius: 14px;
  --radius-lg: 20px;
}

    body.page-process *, body.page-process *::before, body.page-process *::after{box-sizing: border-box; margin: 0; padding: 0;}
    html{height: 100%; scroll-behavior: smooth;}

    body.page-process{font-family: var(--sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--text-1);
      background: var(--navy);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;}

    /* ── BACKGROUND ── */
    body.page-process::before{content: "";
      position: fixed; inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-radial-1) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 90% 60%, var(--bg-radial-2) 0%, transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
      pointer-events: none; z-index: 0;}
    body.page-process::after{content: "";
      position: fixed; inset: 0;
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none; z-index: 0;}

    /* ═══════════════════════════════════════════════
       TOP BAR
    ═══════════════════════════════════════════════ */
    body.page-process .topbar{position: sticky; top: 0; z-index: 50;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0 28px; height: 62px;
      background: var(--topbar-bg);
      -webkit-backdrop-filter: saturate(160%) blur(16px);
      backdrop-filter: saturate(160%) blur(16px);
      border-bottom: 1px solid var(--border);}
    body.page-process .topbar-left{display: flex; align-items: center; gap: 20px;}
    body.page-process .topbar-back{display: flex; align-items: center; gap: 8px;
      color: var(--text-2); text-decoration: none;
      font-size: 13px; font-weight: 600;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: all .15s;}
    body.page-process .topbar-back:hover{color: var(--text-1); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04);}
    body.page-process .topbar-divider{width: 1px; height: 22px; background: var(--border);}
    body.page-process .topbar-product{font-size: 13px; font-weight: 600;
      color: var(--text-2);
      letter-spacing: .04em; text-transform: uppercase;}
    body.page-process .topbar-right{display: flex; align-items: center; gap: 16px;}
    body.page-process .topbar-user{display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); min-height: 32px; line-height: 1;}
    body.page-process .topbar-user span{display: block; line-height: 1; margin-top: 1px;}
    body.page-process .topbar-avatar{width: 32px; height: 32px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;}
    body.page-process .topbar-signout{color: var(--text-2); text-decoration: none;
      font-size: 13px; font-weight: 500;
      padding: 5px 12px;
      border: 1px solid var(--border); border-radius: 8px;
      transition: all .15s;}
    body.page-process .topbar-signout:hover{color: var(--text-1); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04);}
    body.page-process .status-pill{display: flex; align-items: center; gap: 6px;
      padding: 4px 12px; border-radius: 999px;
      background: rgba(0,209,122,.1); border: 1px solid rgba(0,209,122,.2);
      font-size: 12px; font-weight: 600; color: var(--success);}
    body.page-process .status-dot{width: 6px; height: 6px; border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 2px rgba(0,209,122,.3);
      animation: pulse-dot 2.4s ease-in-out infinite;}
    @keyframes pulse-dot{0%,100%{opacity:1} 50%{opacity:.4}}

    /* ═══════════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════════ */
    body.page-process .wrap{position: relative; z-index: 1;
      max-width: 1060px; width: 100%;
      margin: 0 auto;
      padding: 36px 24px 64px;
      flex: 1;}

    /* Page title row */
    body.page-process .page-header{display: flex; align-items: center; justify-content: space-between;
      gap: 16px; margin-bottom: 28px;
      animation: card-in .3s cubic-bezier(.16,1,.3,1) both;}
    body.page-process .page-title-block h1{font-size: 1.5rem; font-weight: 700;
      letter-spacing: -.025em; color: var(--text-1);
      margin-bottom: 4px;}
    body.page-process .page-title-block p{font-size: .875rem; color: var(--text-3); margin: 0; font-family: var(--mono);}
    body.page-process .result-badge{display: flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 999px;
      background: rgba(0,94,184,.12); border: 1px solid rgba(0,94,184,.25);
      font-size: 12px; font-weight: 700;
      color: var(--accent); letter-spacing: .06em; text-transform: uppercase;
      white-space: nowrap;}

    @keyframes card-in{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)}}

    /* ── SECTION CARD ── */
    body.page-process .section-card{background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      margin-bottom: 16px;
      overflow: hidden;
      animation: card-in .35s cubic-bezier(.16,1,.3,1) both;}
    body.page-process .section-card.action-card, body.page-process .section-card.action-card .card-header, body.page-process .section-card.action-card .actions-grid, body.page-process .section-card.action-card .tooltip-wrap{overflow: visible;}
    body.page-process .section-card:nth-child(2){animation-delay: .04s;}
    body.page-process .section-card:nth-child(3){animation-delay: .08s;}
    body.page-process .section-card:nth-child(4){animation-delay: .12s;}
    body.page-process .section-card:nth-child(5){animation-delay: .16s;}
    body.page-process .section-card:nth-child(6){animation-delay: .20s;}

    body.page-process .card-header{display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      background: rgba(0,0,0,.15);}
    body.page-process .card-header-left{display: flex; align-items: center; gap: 12px;}
    body.page-process .card-icon{width: 34px; height: 34px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;}
    body.page-process .card-icon.blue{background: rgba(0,94,184,.18); border: 1px solid rgba(0,94,184,.25);}
    body.page-process .card-icon.teal{background: rgba(0,196,255,.1); border: 1px solid rgba(0,196,255,.2);}
    body.page-process .card-icon.green{background: rgba(0,209,122,.1); border: 1px solid rgba(0,209,122,.2);}
    body.page-process .card-icon.gold{background: rgba(255,210,0,.1); border: 1px solid rgba(255,210,0,.2);}
    body.page-process .card-icon.purple{background: rgba(139,92,246,.1);border: 1px solid rgba(139,92,246,.2);}

    body.page-process .card-title{font-size: .875rem; font-weight: 700; color: var(--text-1); letter-spacing: -.01em;}
    body.page-process .card-subtitle{font-size: .78rem; color: var(--text-3); margin-top: 1px; font-family: var(--mono);}
    body.page-process .card-body{padding: 20px;}

    /* ── QUERY / SQL DISPLAY ── */
    body.page-process .query-text{font-family: var(--sans);
      font-size: .95rem;
      color: var(--text-1);
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;}
    body.page-process .sql-block{background: rgba(4,16,31,.7);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      font-family: var(--mono);
      font-size: .85rem;
      color: #7DD3FC;
      white-space: pre-wrap;
      word-break: break-word;
      overflow-x: auto;
      line-height: 1.65;
      position: relative;}
    body.page-process .sql-block .kw{color: #C084FC;}
    body.page-process .sql-keyword{color: #C084FC;}

    /* Collapse toggle */
    body.page-process .collapse-btn{display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 5px 12px;
      font-size: .78rem; font-weight: 600;
      color: var(--text-3);
      cursor: pointer;
      font-family: var(--sans);
      transition: all .15s;
      white-space: nowrap;}
    body.page-process .collapse-btn:hover{color: var(--text-2); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07);}
    body.page-process .collapse-btn svg{transition: transform .2s;}
    body.page-process .collapse-btn.open svg{transform: rotate(180deg);}
    body.page-process .collapsible{display: none;}
    body.page-process .collapsible.open{display: block;}

    /* ── SAMPLE RESULTS TABLE ── */
    body.page-process .table-scroll{overflow: auto;
      max-height: 62vh;
      border-radius: 10px;
      border: 1px solid var(--border);}
    body.page-process .data-table{width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: .875rem;
      color: var(--text-1);}
    body.page-process .data-table thead th{position: sticky; top: 0; z-index: 2;
      background: rgba(7,24,40,.98);
      color: var(--text-2);
      text-align: left;
      font-weight: 700;
      font-size: .75rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: 11px 14px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      border-right: 1px solid var(--border);
      white-space: nowrap;}
    body.page-process .data-table thead th:last-child{border-right: 0;}
    body.page-process .data-table tbody td{padding: 9px 14px;
      border-bottom: 1px solid rgba(255,255,255,.04);
      border-right: 1px solid rgba(255,255,255,.03);
      white-space: nowrap;
      vertical-align: middle;
      font-family: var(--mono);
      font-size: .82rem;
      color: var(--text-2);}
    body.page-process .data-table tbody td:first-child{color: var(--text-1); font-family: var(--sans); font-weight: 500;}
    body.page-process .data-table tbody td:last-child{border-right: 0;}
    body.page-process .data-table tbody tr:hover td{background: rgba(0,94,184,.07);}
    body.page-process .data-table tbody tr:nth-child(even) td{background: rgba(255,255,255,.015);}
    body.page-process .data-table tbody tr:hover td{background: rgba(0,94,184,.1) !important;}
    body.page-process .num{text-align: right; font-variant-numeric: tabular-nums;}
    body.page-process .table-note{font-size: .82rem; color: var(--text-3); text-align: center; padding: .6rem;}
    body.page-process .table-note-row td{background: transparent !important; border: 0;}
    body.page-process .no-data{padding: 40px; text-align: center; color: var(--text-3); font-size: .9rem;}

    /* Row count pill */
    body.page-process .row-count-pill{display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 999px;
      background: rgba(0,196,255,.07); border: 1px solid rgba(0,196,255,.15);
      font-size: .75rem; font-weight: 600; font-family: var(--mono);
      color: var(--accent);}

    /* ── ACTION BUTTONS ── */
    body.page-process .actions-grid{display: flex; gap: 10px; flex-wrap: wrap;
      padding: 20px;
      position: relative;
      overflow: visible;}
    body.page-process .btn{display: inline-flex; align-items: center; gap: 8px;
      border: 0; border-radius: 10px;
      padding: 10px 18px;
      font-family: var(--sans);
      font-size: .875rem; font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      text-decoration: none;}
    body.page-process .btn:active{transform: translateY(1px);}
    body.page-process .btn-primary{background: var(--blue); color: #fff;
      box-shadow: 0 4px 16px rgba(0,94,184,.35);}
    body.page-process .btn-primary:hover{background: var(--blue-bright); box-shadow: 0 6px 20px rgba(0,94,184,.5);}
    body.page-process .btn-outline{background: transparent;
      border: 1px solid var(--border);
      color: var(--text-2);}
    body.page-process .btn-outline:hover{border-color: rgba(255,255,255,.2); color: var(--text-1); background: rgba(255,255,255,.04);}
    body.page-process .btn-gold{background: var(--gold); color: #1a1200;
      box-shadow: 0 4px 16px rgba(255,210,0,.2);}
    body.page-process .btn-gold:hover{background: #ffe033; box-shadow: 0 6px 20px rgba(255,210,0,.35);}

    /* Tooltip */
    body.page-process .tooltip-wrap{position: relative;
      display: inline-flex;
      overflow: visible;
      z-index: 6;}
    body.page-process .tooltip-box{position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translateX(-50%);
      background: rgba(7,24,40,.98);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      font-size: .82rem;
      color: var(--text-2);
      min-width: 260px;
      max-width: min(380px, calc(100vw - 32px));
      width: max-content;
      white-space: normal;
      overflow-wrap: break-word;
      line-height: 1.5;
      box-shadow: 0 12px 32px rgba(0,0,0,.5);
      z-index: 200;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s, visibility .15s;}
    body.page-process .tooltip-wrap.tooltip-left .tooltip-box{left: 0;
      transform: none;}
    body.page-process .tooltip-wrap.tooltip-left .tooltip-arrow{left: 24px;
      transform: none;}
    body.page-process .tooltip-wrap.tooltip-right .tooltip-box{left: auto;
      right: 0;
      transform: none;}
    body.page-process .tooltip-wrap.tooltip-right .tooltip-arrow{left: auto;
      right: 24px;
      transform: none;}
    body.page-process .tooltip-box a{color: var(--accent); font-weight: 600;}
    body.page-process .tooltip-wrap:hover .tooltip-box, body.page-process .tooltip-wrap.open .tooltip-box{visibility: visible; opacity: 1; pointer-events: auto;}
    body.page-process .tooltip-arrow{position: absolute; left: 50%; bottom: -5px;
      transform: translateX(-50%);
      width: 10px; height: 10px;
      background: rgba(7,24,40,.98);
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      clip-path: polygon(0 0, 100% 100%, 0 100%);}
    body.page-process .section-card.action-card, body.page-process .section-card.action-card .card-header, body.page-process .section-card.action-card .actions-grid, body.page-process .section-card.action-card form, body.page-process .section-card.action-card .tooltip-wrap{overflow: visible;}
    body.page-process .tooltip-wrap.tooltip-left .tooltip-box{left: 0;
      right: auto;
      transform: none;}
    body.page-process .tooltip-wrap.tooltip-left .tooltip-arrow{left: 24px;
      right: auto;
      transform: none;}
    body.page-process .tooltip-wrap.tooltip-right .tooltip-box{left: auto;
      right: 0;
      transform: none;}
    body.page-process .tooltip-wrap.tooltip-right .tooltip-arrow{left: auto;
      right: 24px;
      transform: none;}

    /* ── CHART SPEC KV CARD ── */
    body.page-process .kv-grid{display: grid;
      grid-template-columns: 180px 1fr;
      column-gap: 16px;
      row-gap: 10px;
      align-items: start;}
    body.page-process .kv-label{font-size: .78rem; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--text-3);
      padding-top: 2px;}
    body.page-process .kv-value{font-size: .88rem; color: var(--text-1);
      font-family: var(--mono);}
    body.page-process .kv-value .pill{display: inline-block;
      padding: 2px 9px; border-radius: 999px;
      background: rgba(0,94,184,.18);
      border: 1px solid rgba(0,94,184,.3);
      color: var(--accent);
      font-size: .78rem; font-weight: 600;
      font-family: var(--sans);}

    /* ── DEBUG SQL DETAILS ── */
    body.page-process details.debug-block{margin-top: 12px;}
    body.page-process details.debug-block summary{cursor: pointer; font-size: .8rem;
      color: var(--text-3); padding: 6px 0;
      list-style: none;
      display: flex; align-items: center; gap: 6px;
      transition: color .15s;}
    body.page-process details.debug-block summary:hover{color: var(--text-2);}
    body.page-process details.debug-block summary::marker{display: none;}
    body.page-process .debug-pre{margin-top: 8px;
      background: rgba(4,16,31,.8);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      font-family: var(--mono);
      font-size: .78rem;
      color: var(--text-3);
      white-space: pre;
      overflow: auto;
      max-height: 300px;}


    body.page-process .card-header{position: relative;}
    body.page-process .card-header-right{display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      position: relative;
      z-index: 2;}
    body.page-process .card-header-badge{position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      pointer-events: none;}
    body.page-process .validation-pill{display: inline-flex;
      align-items: stretch;
      overflow: hidden;
      border-radius: 8px;
      border: 2px solid transparent;
      min-height: 34px;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      background: rgba(7,24,40,.95);}
    body.page-process .validation-pill__icon{width: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 40px;}
    body.page-process .validation-pill__label{display: inline-flex;
      align-items: center;
      padding: 0 16px;
      font-size: .95rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      font-family: var(--sans);}
    body.page-process .validation-pill--sql-verified{border-color:#22d3ee;
      background:rgba(4,33,47,.96);
      color:#22d3ee;}
    body.page-process .validation-pill--sql-verified .validation-pill__icon{background:#26cfea;
      color:#ffffff;}
    body.page-process .validation-pill--result-verified{border-color:#10b981;
      background:rgba(5,43,30,.96);
      color:#34d399;}
    body.page-process .validation-pill--result-verified .validation-pill__icon{background:#10b981;
      color:#ffffff;}
    body.page-process .validation-pill--sql-failed, body.page-process .validation-pill--result-failed{border-color:#f87171;
      background:rgba(60,18,24,.96);
      color:#f87171;}
    body.page-process .validation-pill--sql-failed .validation-pill__icon, body.page-process .validation-pill--result-failed .validation-pill__icon{background:#f87171;
      color:#ffffff;}
    body.page-process .thumb-btn{border:1px solid rgba(0,196,255,.2);
      background: rgba(255,255,255,.03);
      color: var(--accent);
      border-radius:999px;
      width:36px;
      height:36px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
      box-shadow: 0 4px 16px rgba(0,0,0,.12);}
    body.page-process .thumb-btn:hover{transform:translateY(-1px);
      border-color:rgba(0,196,255,.4);
      background: rgba(0,196,255,.08);
      box-shadow:0 8px 20px rgba(0,94,184,.16);
      color:#67e8f9;}
    body.page-process .thumb-btn:disabled{cursor:default;
      opacity:.7;
      transform:none;}

    /* ── SUCCESS BANNER ── */
    body.page-process .success-banner{display: flex; align-items: center; gap: 12px;
      padding: 14px 18px;
      background: rgba(0,209,122,.08);
      border: 1px solid rgba(0,209,122,.2);
      border-radius: 12px;
      margin: 0 20px 20px;
      font-size: .875rem; color: var(--success);
      font-weight: 500;}
    body.page-process .success-banner svg{flex-shrink: 0;}

    /* ── FEEDBACK ── */
    body.page-process .feedback-section{padding: 20px;}
    body.page-process .feedback-q{font-size: .9rem; font-weight: 700;
      color: var(--text-1); margin-bottom: 14px;}
    body.page-process .yesno-row{display: flex; gap: 10px; margin-bottom: 16px;}
    body.page-process .yesno-btn{display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 20px; border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: var(--text-2);
      font-family: var(--sans);
      font-size: .875rem; font-weight: 600;
      cursor: pointer;
      transition: all .15s;}
    body.page-process .yesno-btn:hover{border-color: rgba(255,255,255,.15); color: var(--text-1); background: rgba(255,255,255,.06);}
    body.page-process .yesno-btn.selected-yes{background: rgba(0,209,122,.12);
      border-color: rgba(0,209,122,.35);
      color: var(--success);}
    body.page-process .yesno-btn.selected-no{background: rgba(255,75,110,.1);
      border-color: rgba(255,75,110,.3);
      color: var(--danger);}

    body.page-process .feedback-inner{display: none;}
    body.page-process .feedback-inner.show{display: block; animation: card-in .2s ease both;}

    body.page-process .field-label{display: block;
      font-size: .75rem; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 8px;}
    body.page-process .feedback-txt{width: 100%; min-height: 80px; resize: vertical;
      background: rgba(4,16,31,.7);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      font-family: var(--sans);
      font-size: .875rem;
      color: var(--text-1);
      line-height: 1.5;
      transition: border-color .15s;
      margin-bottom: 14px;}
    body.page-process .feedback-txt:focus{outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(0,94,184,.15);}
    body.page-process .feedback-txt::placeholder{color: var(--text-3);}
    body.page-process .feedback-status{font-size: .825rem; color: var(--success);
      font-weight: 600; margin-left: 12px;}

    /* ── SECTION DIVIDER LABEL ── */
    body.page-process .section-label{font-size: .7rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--text-3); margin-bottom: 10px;}

    /* ── MODAL ── */
    body.page-process .modal-backdrop{position: fixed; inset: 0;
      background: rgba(0,0,0,.7);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center;
      z-index: 9999;}
    body.page-process .modal{background: var(--card-bg-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      max-width: 760px; width: 92vw;
      max-height: 90vh;
      box-shadow: 0 24px 64px rgba(0,0,0,.6);
      display: flex; flex-direction: column;}
    body.page-process .modal header{display: flex; justify-content: space-between; align-items: center;
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);}
    body.page-process .modal header h3{font-size: 1rem; font-weight: 700; color: var(--text-1); margin: 0;}
    body.page-process .modal header button{background: rgba(255,255,255,.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 5px 10px;
      color: var(--text-2);
      cursor: pointer;
      font-family: var(--sans);
      font-size: .82rem;
      transition: all .15s;}
    body.page-process .modal header button:hover{background: rgba(255,255,255,.1); color: var(--text-1);}
    body.page-process .modal .content{padding: 20px; overflow: auto; flex: 1;}

    body.page-process .choice-grid{display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;}
    body.page-process .choice-card{flex: 1 1 240px;
      background: rgba(11,32,53,.6);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      transition: all .2s;}
    body.page-process .choice-card:hover{border-color: rgba(0,196,255,.25); background: rgba(0,94,184,.1);}
    body.page-process .choice-card h4{font-size: .9rem; font-weight: 700; color: var(--text-1); margin: 0 0 6px;}
    body.page-process .choice-card p{font-size: .82rem; color: var(--text-2); margin: 0 0 14px; line-height: 1.5;}
    body.page-process .choice-card button{background: var(--blue); color: #fff;
      border: 0; border-radius: 8px;
      padding: 8px 16px;
      font-family: var(--sans);
      font-size: .825rem; font-weight: 600;
      cursor: pointer;
      transition: background .15s;}
    body.page-process .choice-card button:hover{background: var(--blue-bright);}
    body.page-process .semantic-iframe{width: 100%; height: 55vh; border: none; display: none; border-radius: 10px;}
    body.page-process .modal-muted{font-size: .82rem; color: var(--text-3); margin: 0 0 10px;}

    /* ── FOOTER ── */
    body.page-process .site-footer{position: relative; z-index: 1;
      border-top: 1px solid var(--border);
      background: rgba(4,16,31,.9);
      padding: 18px 28px;}
    body.page-process .footer-inner{max-width: 1060px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;}
    body.page-process .footer-brand{display: flex; align-items: center; gap: 10px;}
    body.page-process .footer-brand img{height: 18px; opacity: .7;}
    body.page-process .footer-brand span{font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em;}
    body.page-process .footer-meta{font-size: 12px; color: var(--text-3); font-family: var(--mono);}

    /* hidden */
    body.page-process .hidden{display: none !important;}

    @media (max-width: 640px){
      body.page-process .wrap{padding: 20px 14px 48px;}
      body.page-process .topbar{padding: 0 16px;}
      body.page-process .topbar-product{display: none;}
      body.page-process .actions-grid{padding: 16px;}
      body.page-process .tooltip-wrap.tooltip-left .tooltip-box, body.page-process .tooltip-wrap.tooltip-right .tooltip-box{left: 16px;
        right: 16px;
        bottom: calc(100% + 10px);
        width: auto;
        max-width: none;
        transform: none;}
      body.page-process .tooltip-wrap .tooltip-arrow, body.page-process .tooltip-wrap.tooltip-left .tooltip-arrow, body.page-process .tooltip-wrap.tooltip-right .tooltip-arrow{left: 28px;
        right: auto;
        transform: none;}
      body.page-process .kv-grid{grid-template-columns: 1fr;}
      body.page-process .card-header-badge{position: static;
        transform: none;
        margin: 10px auto 0;
        pointer-events: auto;}
      body.page-process .card-header{flex-wrap: wrap;
        gap: 10px;}
      body.page-process .card-header-right{margin-left: 0;
        width: 100%;
        justify-content: flex-end;}
    }
  

/* training.php */

    body.page-training{
  --navy: #04101F;
  --navy-2: #071828;
  --navy-3: #0B2035;
  --navy-4: #0F2A45;
  --blue: #005EB8;
  --blue-bright: #1A7FE0;
  --blue-glow: rgba(0,94,184,.18);
  --accent: #00C4FF;
  --gold: #FFD200;
  --success: #00D17A;
  --warning: #F59E0B;
  --danger: #FF4B6E;
  --text-1: #EEF4FF;
  --text-2: #8DAABB;
  --text-3: #4E7090;
  --border: rgba(255,255,255,.07);
  --border-2: rgba(0,196,255,.18);
  --card-bg: rgba(11,32,53,.72);
  --card-bg-2: rgba(7,24,40,.9);
  --shadow-card: 0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-glow: 0 0 40px rgba(0,94,184,.25);
  --bg-radial-1: rgba(0,94,184,.22);
  --bg-radial-2: rgba(0,196,255,.06);
  --grid-line: rgba(255,255,255,.018);
  --topbar-bg: rgba(4,16,31,.88);
  --page-surface: #ffffff;
  --page-surface-text: #22354a;
  --page-pre-bg: #f5f7fb;
  --page-pre-border: #dde4ef;
  --page-link-secondary: #27415b;
  --page-muted: #5b6d80;
  --page-code: #0b2540;
  --status-ok: #0a7a20;
  --status-bad: #b00020;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --radius: 14px;
  --radius-lg: 20px;
}
    body.page-training *{box-sizing:border-box;margin:0;padding:0}
    html{height:100%;scroll-behavior:smooth}
    body.page-training{font-family:var(--sans);
      background:var(--navy);
      color:var(--text-1);
      min-height:100vh;
      display:flex;
      flex-direction:column;
      overflow-x:hidden;}
    body.page-training::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-radial-1) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 90% 60%, var(--bg-radial-2) 0%, transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);}
    body.page-training::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size:48px 48px;}
    body.page-training .topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
      height:62px;padding:0 28px;background:var(--topbar-bg);border-bottom:1px solid var(--border);
      -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);}
    body.page-training .topbar-left, body.page-training .topbar-right{display:flex;align-items:center;gap:16px}
    body.page-training .topbar-logo img{height:30px}
    body.page-training .topbar-divider{width:1px;height:22px;background:var(--border)}
    body.page-training .topbar-product{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}
    body.page-training .topbar-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--accent) 100%);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
    body.page-training .topbar-user{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13.5px}
    body.page-training .topbar-link{color:var(--text-2);text-decoration:none;padding:6px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;transition:all .15s}
    body.page-training .topbar-link:hover{color:var(--text-1);border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04)}
    body.page-training .wrap{position:relative;z-index:1;width:100%;padding:28px 24px 56px;flex:1}
    body.page-training .card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:24px 24px 20px}
    body.page-training .page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border)}
    body.page-training .page-head h1{font-size:1.5rem;margin:0 0 6px;letter-spacing:-.02em}
    body.page-training .page-head p{color:var(--text-2);max-width:880px;font-size:.9rem}
    body.page-training .status-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    body.page-training .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
    body.page-training .pill.live{background:rgba(0,209,122,.1);border:1px solid rgba(0,209,122,.22);color:var(--success)}
    body.page-training .pill.info{background:rgba(0,196,255,.08);border:1px solid rgba(0,196,255,.2);color:var(--accent)}
    body.page-training .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
    body.page-training .toolbar-left{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    body.page-training .toolbar-right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    body.page-training .btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 16px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;text-decoration:none}
    body.page-training .btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 16px rgba(0,94,184,.35)}
    body.page-training .btn-primary:hover{background:var(--blue-bright)}
    body.page-training .btn-outline{background:transparent;color:var(--text-2);border:1px solid var(--border)}
    body.page-training .btn-outline:hover{background:rgba(255,255,255,.04);color:var(--text-1);border-color:rgba(255,255,255,.18)}
    body.page-training .btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
    body.page-training .note{font-size:.85rem;color:var(--text-2)}
    body.page-training .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 14px}
    body.page-training .summary-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
    body.page-training .summary-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
    body.page-training .summary-value{font-size:1.1rem;font-weight:700}
    body.page-training .legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;color:var(--text-2);font-size:.82rem}
    body.page-training .legend-swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}

    /* ── Table: fits exactly within the card, no horizontal scroll ── */
    body.page-training .table-wrap{width:100%;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(4,16,31,.5);}
    body.page-training table{width:100%;
      table-layout:fixed;
      border-collapse:separate;
      border-spacing:0;}

    /* Column widths that sum to 100% */
    body.page-training col.col-validate{width:7%;}
    body.page-training col.col-question{width:28%;}
    body.page-training col.col-source{width:9%;}
    body.page-training col.col-user{width:12%;}
    body.page-training col.col-count{width:5%;}
    body.page-training col.col-created{width:10%;}
    body.page-training col.col-lasked{width:10%;}
    body.page-training col.col-sql{width:13%;}
    body.page-training col.col-result{width:6%;}

    body.page-training thead th{position:sticky;top:0;z-index:2;
      background:rgba(7,24,40,.98);
      color:var(--text-2);
      font-size:.72rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      padding:10px 10px;
      text-align:left;
      border-bottom:1px solid rgba(255,255,255,.1);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;}
    body.page-training tbody td{padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.05);
      vertical-align:top;
      font-size:.85rem;
      overflow:hidden;}
    body.page-training tbody tr:last-child td{border-bottom:none;}
    body.page-training tbody tr:hover td{background:rgba(0,94,184,.08)}

    /* Question cell — truncate with expand on hover */
    body.page-training .q-text{font-weight:600;
      line-height:1.4;
      color:var(--text-1);
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      word-break:break-word;}
    body.page-training tbody tr:hover .q-text{-webkit-line-clamp:unset;
      overflow:visible;}
    body.page-training .meta-small{font-size:.72rem;color:var(--text-3);margin-top:3px;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    body.page-training .mono{font-family:var(--mono);font-size:.82rem}
    body.page-training .tag{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);font-size:.72rem;font-weight:700;color:var(--text-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
    body.page-training .tag.valid{background:rgba(0,209,122,.1);border-color:rgba(0,209,122,.25);color:var(--success)}
    body.page-training .tag.group{color:#fff}

    /* SQL snippet truncation */
    body.page-training .sql-snippet{font-family:var(--mono);
      font-size:.72rem;
      color:var(--text-2);
      line-height:1.4;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
      word-break:break-all;}
    body.page-training tbody tr:hover .sql-snippet{-webkit-line-clamp:unset; overflow:visible;}

    body.page-training .group-panel{display:none;margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
    body.page-training .group-panel.show{display:block}
    body.page-training .group-panel h3{font-size:.95rem;margin-bottom:6px}
    body.page-training .group-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    body.page-training .group-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.18)}
    body.page-training .sql-check{width:16px;height:16px;accent-color:#00d17a;cursor:pointer;flex-shrink:0}
    body.page-training .sql-check[disabled]{cursor:not-allowed;opacity:.7}
    body.page-training .state-loading{display:none;color:var(--accent);font-weight:700}
    body.page-training .state-loading.show{display:inline-flex}
    body.page-training .access-card{max-width:620px;margin:80px auto;background:var(--card-bg-2);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-card);padding:36px;text-align:center;position:relative;z-index:1}
    body.page-training .access-card h1{font-size:1.5rem;margin-bottom:10px}
    body.page-training .access-card p{color:var(--text-2);margin-bottom:18px}
    body.page-training .empty{padding:26px;color:var(--text-3)}
    @media (max-width: 768px){
      body.page-training .wrap{padding:16px 12px 42px}
      body.page-training .topbar{padding:0 14px}
      body.page-training .topbar-product{display:none}
      body.page-training .card{padding:14px}
      body.page-training .page-head{flex-direction:column}
      body.page-training .table-wrap{overflow-x:auto}
      body.page-training table{table-layout:auto;min-width:900px}
    }
  

/* create_semantic.php */

body.page-create-semantic {
  --navy: #04101F;
  --navy-2: #071828;
  --blue: #005EB8;
  --blue-bright: #1A7FE0;
  --accent: #00C4FF;
  --text-1: #22354a;
  --text-2: #5b6d80;
  --border: #dde4ef;
  --card-bg: #ffffff;
  --shadow-card: 0 18px 48px rgba(0,0,0,.25);
  --page-surface: #ffffff;
  --page-surface-text: #22354a;
  --page-pre-bg: #f5f7fb;
  --page-pre-border: #dde4ef;
  --page-link-secondary: #27415b;
  --page-muted: #5b6d80;
  --page-code: #0b2540;
  --status-ok: #0a7a20;
  --status-bad: #b00020;
}
body.page-create-semantic{font-family:Arial,sans-serif;margin:0;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--page-surface-text)}
body.page-create-semantic .page{padding:24px}
body.page-create-semantic .card{background:var(--page-surface);border-radius:16px;box-shadow:var(--shadow-card);padding:28px;max-width:980px;margin:18px auto}
body.page-create-semantic h1{margin:0 0 18px;font-size:1.1rem;color:var(--page-code)}
body.page-create-semantic .status-ok{color:var(--status-ok);font-weight:700}
body.page-create-semantic .status-bad{color:var(--status-bad);font-weight:700}
body.page-create-semantic .section{margin:16px 0}
body.page-create-semantic pre{background:var(--page-pre-bg);border:1px solid var(--page-pre-border);border-radius:10px;padding:14px;white-space:pre-wrap;overflow:auto;font-family:Consolas,monospace;font-size:13px;line-height:1.55}
body.page-create-semantic a.primary{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;margin-right:10px}
body.page-create-semantic a.primary:hover{background:var(--blue-bright)}
body.page-create-semantic a.secondary{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--page-pre-border);color:var(--page-link-secondary);text-decoration:none;font-weight:700}
body.page-create-semantic .muted{color:var(--page-muted)}
body.page-create-semantic code{font-family:Consolas,monospace;color:var(--page-code)}