.itc-h9x-wrapper {
      --itc-bg: rgba(255, 255, 255, 0.96);
      --itc-border: #e2e8f0;
      --itc-matte-text: #475569;
      --itc-matte-black: #0f172a;
      --itc-matte-title: #334155;
      --itc-matte-hover-bg: #f1f5f9;
      --itc-btn-matte: #18181b;
      --itc-btn-hover: #27272a;
      --itc-speed: 0.22s;
      --itc-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.08);
  }

  .itc-h9x-wrapper,
  .itc-h9x-wrapper * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
  }

  .itc-h9x-wrapper {
      position: sticky;
      top: 0;
      right: 0;
      width: 100%;
      height: 70px;
      z-index: 999999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5%;
      background: var(--itc-bg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--itc-border);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Cairo", "Noto Sans Arabic", sans-serif;
      direction: rtl;
  }

  .itc-h9x-brand-box {
      display: flex;
      align-items: center;
      height: 100%;
  }

  .itc-h9x-brand-link {
      display: flex;
      align-items: center;
      text-decoration: none;
  }

  .itc-h9x-brand-img {
      display: block;
      height: 42px;
      width: auto;
      object-fit: contain;
  }

  .itc-h9x-nav-list {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 1.6rem;
      list-style: none !important;
  }

  .itc-h9x-nav-item {
      display: flex;
      align-items: center;
      height: 100%;
      position: relative;
      list-style: none !important;
  }

  .itc-h9x-nav-link {
      text-decoration: none !important;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--itc-matte-text);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0.45rem 0.75rem;
      border-radius: 6px;
      transition: all var(--itc-speed) ease;
      cursor: pointer;
  }

  .itc-h9x-nav-link:hover {
      color: var(--itc-matte-black);
      background: var(--itc-matte-hover-bg);
  }

  .itc-h9x-arrow {
      font-size: 0.6rem;
      color: #94a3b8;
      transition: transform var(--itc-speed) ease, color var(--itc-speed) ease;
  }

  .itc-h9x-btn-highlight {
      background: var(--itc-btn-matte) !important;
      color: #ffffff !important;
      padding: 0.55rem 1.25rem !important;
      border-radius: 6px;
      font-weight: 600;
      transition: all var(--itc-speed) ease;
  }

  .itc-h9x-btn-highlight:hover {
      background: var(--itc-btn-hover) !important;
      color: #ffffff !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(24, 24, 27, 0.15);
  }

  .itc-h9x-megamenu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      width: 880px;
      background: #ffffff;
      border: 1px solid var(--itc-border);
      border-radius: 12px;
      box-shadow: var(--itc-shadow);
      padding: 1.5rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--itc-speed) ease, transform var(--itc-speed) ease;
      text-align: right;
  }

  .itc-h9x-megamenu::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 0;
      width: 100%;
      height: 20px;
      background: transparent;
  }

  .itc-h9x-nav-item.itc-h9x-has-dropdown:hover .itc-h9x-megamenu,
  .itc-h9x-nav-item.itc-h9x-has-dropdown.itc-h9x-desktop-active .itc-h9x-megamenu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
  }

  .itc-h9x-nav-item.itc-h9x-has-dropdown:hover .itc-h9x-arrow,
  .itc-h9x-nav-item.itc-h9x-has-dropdown.itc-h9x-desktop-active .itc-h9x-arrow {
      transform: rotate(180deg);
      color: var(--itc-matte-black);
  }

  .itc-h9x-col-title {
      font-size: 0.8rem;
      letter-spacing: normal;
      font-weight: 700;
      color: var(--itc-matte-title);
      margin-bottom: 0.6rem;
      padding-bottom: 0.35rem;
      border-bottom: 1px solid #f1f5f9;
  }

  .itc-h9x-sublist {
      list-style: none !important;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
  }

  .itc-h9x-sublink {
      text-decoration: none !important;
      font-size: 0.86rem;
      color: #475569;
      font-weight: 500;
      padding: 0.45rem 0.6rem;
      border-radius: 6px;
      display: block;
      transition: all var(--itc-speed) ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .itc-h9x-sublink:hover {
      color: var(--itc-matte-black);
      background: var(--itc-matte-hover-bg);
      padding-right: 0.85rem;
      padding-left: 0.6rem;
  }

  .itc-h9x-toggle-btn {
      display: none;
      font-size: 1.6rem;
      cursor: pointer;
      color: var(--itc-matte-black);
      user-select: none;
      padding: 0.3rem 0.5rem;
      border-radius: 6px;
      transition: background var(--itc-speed) ease;
  }

  .itc-h9x-toggle-btn:hover {
      background: var(--itc-matte-hover-bg);
  }

  @media screen and (max-width: 1024px) {
      .itc-h9x-toggle-btn {
          display: block;
      }

      .itc-h9x-navbar {
          position: absolute;
          top: 70px;
          right: 0;
          left: 0;
          width: 100%;
          background: #ffffff;
          border-bottom: 1px solid var(--itc-border);
          box-shadow: 0 20px 30px rgba(0,0,0,0.06);
          max-height: calc(100vh - 70px);
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-8px);
          transition: all var(--itc-speed) ease;
      }

      .itc-h9x-navbar.itc-h9x-is-open {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
      }

      .itc-h9x-nav-list {
          flex-direction: column;
          align-items: stretch;
          height: auto;
          padding: 1.2rem;
          gap: 0.4rem;
      }

      .itc-h9x-nav-item {
          flex-direction: column;
          align-items: stretch;
          height: auto;
      }

      .itc-h9x-nav-link {
          justify-content: space-between;
          width: 100%;
          padding: 0.85rem 0.6rem;
          font-size: 1rem;
          border-bottom: 1px solid #f8fafc;
      }

      .itc-h9x-megamenu {
          position: static;
          transform: none !important;
          width: 100%;
          box-shadow: none;
          border: none;
          border-radius: 8px;
          padding: 1rem;
          background: #f8fafc;
          display: none;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.2rem;
          pointer-events: auto;
          opacity: 1;
          visibility: visible;
      }

      .itc-h9x-megamenu::before {
          display: none;
      }

      .itc-h9x-nav-item.itc-h9x-mobile-active .itc-h9x-megamenu {
          display: grid;
      }

      .itc-h9x-nav-item.itc-h9x-mobile-active .itc-h9x-arrow {
          transform: rotate(180deg);
          color: var(--itc-matte-black);
      }

      .itc-h9x-btn-highlight {
          text-align: center;
          justify-content: center;
          margin-top: 0.6rem;
          padding: 0.8rem !important;
      }
  }

  @media screen and (max-width: 600px) {
      .itc-h9x-megamenu {
          grid-template-columns: 1fr;
          gap: 1rem;
          padding: 0.8rem;
      }

      .itc-h9x-brand-img {
          height: 36px;
      }

      .itc-h9x-wrapper {
          padding: 0 4%;
      }
  }

  :root{
    --chassis-bg:#FFFFFF;
    --chassis-bg-2:#F8FAFC;
    --panel-bg:#FFFFFF;
    --panel-bg-raised:#F1F5F9;
    --panel-bg-sunken:#F8FAFC;
    --panel-border:#E2E8F0;
    --panel-border-soft:#EDF2F7;
    --text-primary:#0F172A;
    --text-secondary:#334155;
    --text-tertiary:#64748B;
    --accent:#0D9488;
    --accent-dim:#CCFBF1;
    --accent-soft:rgba(13,148,136,0.1);
    --coral:#EA580C;
    --coral-dim:#FFEDD5;
    --coral-soft:rgba(234,88,12,0.1);
    --amber:#D97706;
    --led-green:#10B981;
    --led-red:#EF4444;
    --danger:#EF4444;
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --font-display:'Cairo', system-ui, sans-serif;
    --font-body:'Cairo', system-ui, sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --shadow-panel: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --header-h: 70px;
  }

  body{
    background:#FFFFFF;
    color:var(--text-primary);
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    font-family:var(--font-body);
    direction:rtl;
    text-align:right;
  }
  ::selection{ background:var(--accent-soft); color:var(--accent); }

  .tool-shell{
    font-size:14px;
    font-weight:700;
    line-height:1.6;
    direction:rtl;
    text-align:right;
    background:#FFFFFF;
    color:var(--text-primary);
    width:100%;
    overflow-x:clip;
  }

  .tool-hero-box{
    text-align:center;
    padding:44px 16px 20px;
    max-width:960px;
    margin:0 auto;
    box-sizing:border-box;
  }
  .hero-tagline-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:4px 14px;
    border-radius:20px;
    background:var(--accent-dim);
    color:var(--accent);
    font-family:var(--font-display);
    font-size:11.5px;
    font-weight:800;
    margin-bottom:14px;
  }
  .hero-tagline-badge .badge-dot{
    width:6px; height:6px; border-radius:50%; background:var(--accent);
  }
  .tool-hero-title{
    font-family:var(--font-display);
    font-size:clamp(28px, 4.8vw, 48px);
    font-weight:900;
    color:#0F172A;
    line-height:1.25;
    margin-bottom:14px;
  }
  .tool-hero-title .highlight{
    color:var(--accent);
  }
  .tool-hero-sub{
    font-size:clamp(14px, 1.8vw, 17px);
    font-weight:600;
    color:#64748B;
    max-width:760px;
    margin:0 auto 20px;
    line-height:1.7;
  }

  .tool-statusbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:8px;
  }
  .headline-meta{
    font-size:12.5px;
    font-weight:700;
    color:var(--text-tertiary);
    line-height:1.4;
  }
  .headline-meta b{ color:var(--text-primary); font-weight:800; }

  .wrap{
    max-width:1340px;
    margin:0 auto;
    width:100%;
    padding:14px 16px 80px;
    box-sizing:border-box;
    overflow-x:clip;
  }

  .nav-deck-wrap{
    position:sticky; top:var(--header-h); z-index:110;
    background:#FFFFFF; border-bottom:1px solid var(--panel-border);
    box-shadow:0 4px 12px rgba(15,23,42,0.03);
    width:100%;
  }
  .nav-deck-container{
    position:relative; max-width:1340px; margin:0 auto; display:flex; align-items:center;
  }
  .nav-deck-container::before, .nav-deck-container::after{
    content:''; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:4;
    opacity:0; transition:opacity .2s ease;
  }
  .nav-deck-container::before{ right:0; background:linear-gradient(270deg, #FFFFFF, transparent); }
  .nav-deck-container::after{ left:0; background:linear-gradient(90deg, #FFFFFF, transparent); }
  .nav-deck-container.can-scroll-right::before{ opacity:1; }
  .nav-deck-container.can-scroll-left::after{ opacity:1; }

  .nav-deck{
    display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    padding:12px 16px; -webkit-overflow-scrolling:touch; width:100%;
    cursor:grab; user-select:none;
  }
  .nav-deck::-webkit-scrollbar{ display:none; }
  .nav-deck.grabbing{ cursor:grabbing; }

  .nav-tab{
    font-family:var(--font-display); font-size:13px; font-weight:800;
    padding:8px 18px; border-radius:30px; border:1px solid var(--panel-border);
    color:var(--text-secondary); background:var(--panel-bg-raised); cursor:pointer;
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    transition:all .15s ease; flex-shrink:0;
  }
  .nav-tab:hover{ color:var(--text-primary); background:#FFFFFF; border-color:#CBD5E1; }
  .nav-tab.active{
    color:#FFFFFF; background:#0F172A; border-color:#0F172A;
    box-shadow:0 3px 12px rgba(15,23,42,0.18);
  }
  .nav-tab svg{ width:15px; height:15px; flex-shrink:0; }

  .slides-viewport{
    width:100%; overflow:hidden; position:relative; box-sizing:border-box;
  }
  .slides-track{
    display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth;
  }
  .slides-track::-webkit-scrollbar{ display:none; }
  .slide-pane{
    flex:0 0 100%; width:100%; min-width:100%; scroll-snap-align:start;
    box-sizing:border-box; padding:4px 0 20px;
  }

  .slide-pagination{
    display:flex; justify-content:center; gap:6px; margin:8px 0 16px;
  }
  .slide-dot{
    width:7px; height:7px; border-radius:50%; background:var(--panel-border);
    transition:all .2s ease;
  }
  .slide-dot.active{ width:22px; border-radius:10px; background:#0F172A; }

  #dropzone{
    border:2px dashed #CBD5E1;
    border-radius:var(--radius-lg);
    background:var(--panel-bg-sunken);
    padding:clamp(32px, 6vw, 56px) 18px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    margin-bottom:20px;
    width:100%;
    box-sizing:border-box;
  }
  #dropzone.drag{ border-color:var(--accent); background:var(--accent-soft); }
  #dropzone .icon-wrap{
    width:56px; height:56px; border-radius:14px; background:#FFFFFF;
    border:1px solid var(--panel-border); margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
    color:var(--accent); box-shadow:0 4px 14px rgba(15,23,42,0.06);
  }
  #dropzone h2{ font-size:clamp(19px, 3.5vw, 24px); margin:0 0 8px; font-weight:800; color:var(--text-primary); }
  #dropzone p{ color:var(--text-secondary); font-size:14px; font-weight:600; margin:0 0 18px; max-width:620px; margin-left:auto; margin-right:auto; }
  #dropzone .hint{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text-tertiary); margin-top:14px; }
  input[type=file]{ display:none; }

  .btn{
    font-family:var(--font-display); font-weight:800; font-size:13.5px;
    border-radius:var(--radius-sm); border:1px solid var(--panel-border);
    background:#FFFFFF; color:var(--text-primary);
    padding:8px 16px; cursor:pointer; transition:all .12s ease;
    display:inline-flex; align-items:center; gap:7px; user-select:none;
    box-shadow:0 1px 3px rgba(15,23,42,0.04);
  }
  .btn:hover{ border-color:#94A3B8; transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .btn.primary{ background:#0F172A; color:#FFFFFF; border-color:#0F172A; }
  .btn.primary:hover{ background:#1E293B; }
  .btn.ghost{ background:transparent; border-color:#CBD5E1; color:var(--text-secondary); }
  .btn.ghost:hover{ background:var(--panel-bg-raised); color:var(--text-primary); }
  .btn.danger{ border-color:var(--coral); color:var(--coral); background:transparent; }
  .btn.danger:hover{ background:var(--coral-soft); }
  .btn.small{ padding:6px 12px; font-size:12.5px; font-weight:800; }

  #readouts{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:1px;
    background:var(--panel-border);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:16px;
    box-shadow:var(--shadow-panel);
    width:100%;
    box-sizing:border-box;
  }
  .readout-tile{
    background:#FFFFFF;
    padding:14px;
    min-height:86px;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-sizing:border-box;
  }
  .readout-tile .rl-label{
    font-size:11px;
    font-weight:800;
    color:var(--text-tertiary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .readout-tile .rl-value{
    font-weight:900;
    font-size:clamp(16px, 1.8vw, 21px);
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .readout-tile .rl-value.small{ font-size:clamp(13px, 1.3vw, 15.5px); }
  .readout-tile .rl-sub{
    font-size:11px;
    font-weight:700;
    color:var(--text-secondary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .swatch-inline{
    width:13px; height:13px; border-radius:3px;
    display:inline-block; vertical-align:-2px;
    border:1px solid rgba(0,0,0,0.15); margin-left:6px; flex-shrink:0;
  }

  .telemetry-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:12px;
    margin-bottom:16px;
    width:100%;
  }
  .telem-card{
    background:var(--panel-bg-sunken);
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    padding:13px 15px;
    box-sizing:border-box;
  }
  .telem-head{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  }
  .telem-tag{
    font-size:10.5px; font-weight:800;
    color:var(--text-tertiary);
  }
  .telem-val{
    font-family:var(--font-mono); font-size:16px; font-weight:800; color:var(--text-primary);
  }
  .telem-bar{
    height:6px; background:#E2E8F0; border-radius:3px; overflow:hidden; margin-top:8px; display:flex;
  }
  .telem-bar-seg{ height:100%; transition:width 0.4s ease; }
  .telem-sub{
    font-size:11px; font-weight:700; color:var(--text-tertiary); margin-top:6px;
    display:flex; justify-content:space-between;
  }

  .panel{
    background:#FFFFFF; border:1px solid var(--panel-border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-panel);
    padding:clamp(14px, 3vw, 20px); margin-bottom:16px;
    box-sizing:border-box; width:100%;
  }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
  .panel-label{
    font-size:11.5px; font-weight:800;
    color:var(--text-tertiary); display:flex; align-items:center; gap:8px;
  }
  .panel-label .led{ width:7px; height:7px; border-radius:50%; background:#CBD5E1; }
  .panel-label .led.on{ background:var(--led-green); box-shadow:0 0 6px var(--led-green); }
  .panel-title{ font-size:16px; font-weight:800; color:var(--text-primary); }

  .keystone-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:16px; width:100%; }
  .keystone-panel{
    background:#FFFFFF; border:1px solid var(--panel-border);
    border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-panel);
    position:relative; overflow:hidden; box-sizing:border-box;
  }
  .keystone-panel::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; }
  .keystone-panel.structural::before{ background:linear-gradient(90deg, #0D9488, #0284C7); }
  .keystone-panel.accents::before{ background:linear-gradient(90deg, #EA580C, #D97706, #7C3AED); }
  
  .keystone-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .keystone-head .kh-title{ font-size:14px; font-weight:800; display:flex; align-items:center; gap:7px; color:var(--text-primary); }
  .keystone-head .kh-tag{ font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:12px; }
  .structural .kh-tag{ background:var(--accent-dim); color:var(--accent); }
  .accents .kh-tag{ background:var(--coral-dim); color:var(--coral); }

  .keystone-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:9px; }
  .k-swatch-tile{
    background:var(--panel-bg-sunken); border:1px solid var(--panel-border);
    border-radius:var(--radius-md); padding:10px; cursor:pointer;
    transition:transform .12s ease, border-color .12s ease;
    box-sizing:border-box;
  }
  .k-swatch-tile:hover{ transform:translateY(-2px); border-color:#0F172A; }
  .k-swatch-preview{ height:40px; border-radius:6px; margin-bottom:8px; border:1px solid rgba(0,0,0,0.1); }
  .k-swatch-data .k-hex{ font-family:var(--font-mono); font-weight:800; font-size:12px; color:var(--text-primary); direction:ltr; text-align:right; }
  .k-swatch-data .k-name{ font-weight:700; font-size:11px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .k-swatch-data .k-pct{ font-family:var(--font-mono); font-weight:700; font-size:10px; color:var(--text-tertiary); margin-top:2px; display:flex; justify-content:space-between; direction:ltr; }

  #viewerCanvasWrap{
    position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--panel-bg-sunken);
    border:1px solid var(--panel-border); display:flex; justify-content:center; align-items:center;
    min-height:240px; max-height:65vh; width:100%; box-sizing:border-box;
  }
  #viewerCanvas{ display:block; max-width:100%; max-height:65vh; width:auto; height:auto; cursor:crosshair; image-rendering:pixelated; object-fit:contain; }
  #loupe{
    position:fixed; width:120px; height:120px; border-radius:50%;
    border:3px solid #0F172A; box-shadow:0 8px 26px rgba(15,23,42,0.3);
    pointer-events:none; overflow:hidden; display:none; z-index:9999; background:#FFFFFF;
  }
  #loupe canvas{ image-rendering:pixelated; }
  #loupe::after{ content:''; position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border:2px solid #0F172A; border-radius:50%; }

  .inspector{ margin-top:14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px; background:var(--panel-bg-sunken); border:1px solid var(--panel-border); border-radius:var(--radius-md); font-weight:700; }
  .inspector .isw{ width:42px; height:42px; border-radius:8px; border:1px solid rgba(0,0,0,0.15); flex-shrink:0; }
  .inspector .idata{ font-size:12.5px; font-weight:700; color:var(--text-secondary); line-height:1.6; flex:1; min-width:160px; }
  .inspector .idata b{ color:var(--text-primary); font-weight:800; }
  .inspector .iactions{ display:flex; gap:8px; margin-right:auto; margin-left:0; }

  .controls-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; width:100%; }
  .control-row{ margin-bottom:16px; }
  .control-row:last-child{ margin-bottom:0; }
  .control-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
  .control-label span.cl-name{ font-size:13.5px; font-weight:800; color:var(--text-primary); }
  .control-label span.cl-val{ font-family:var(--font-mono); font-size:12px; font-weight:800; color:var(--accent); direction:ltr; }
  .control-desc{ font-size:11.5px; font-weight:600; color:var(--text-tertiary); margin-top:4px; line-height:1.55; }

  .switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .track{ position:absolute; inset:0; background:#E2E8F0; border:1px solid #CBD5E1; border-radius:14px; transition:.15s; cursor:pointer; }
  .switch .knob{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.15); transition:.15s; }
  .switch input:checked + .track{ background:#0F172A; border-color:#0F172A; }
  .switch input:checked + .track .knob{ transform:translateX(-18px); background:#FFFFFF; }

  input[type=range]{ -webkit-appearance:none; width:100%; height:5px; background:#E2E8F0; border-radius:3px; outline:none; margin:6px 0; }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
    background:#0F172A; border:2px solid #FFFFFF; box-shadow:0 2px 5px rgba(0,0,0,0.2); cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#0F172A; border:2px solid #FFFFFF; cursor:pointer; }

  select, .stepper input{
    font-family:var(--font-display); background:#FFFFFF; color:var(--text-primary);
    border:1px solid var(--panel-border); border-radius:var(--radius-sm); padding:7px 10px; font-size:13px; font-weight:700;
  }
  select{ width:100%; cursor:pointer; }
  .stepper{ display:flex; align-items:center; gap:8px; }
  .stepper input{ width:58px; text-align:center; font-family:var(--font-mono); }
  .stepper button{ width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--panel-border); background:#FFFFFF; color:var(--text-primary); cursor:pointer; font-size:16px; font-weight:800; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
  .chip{
    display:flex; align-items:center; gap:6px; background:var(--coral-dim); border:1px solid rgba(234,88,12,0.3);
    color:var(--coral); font-family:var(--font-mono); font-size:12px; font-weight:800; padding:4px 9px 4px 7px; border-radius:20px;
    direction:ltr;
  }
  .chip .csw{ width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,0.15); }
  .chip button{ background:none; border:none; color:var(--coral); cursor:pointer; font-size:14px; font-weight:800; line-height:1; }
  .quickadd{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-top:9px; }
  input[type=color]{ width:34px; height:34px; border:1px solid var(--panel-border); border-radius:7px; background:#FFFFFF; padding:2px; cursor:pointer; }

  .results-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; width:100%; }
  .results-toolbar input[type=search]{
    font-family:var(--font-display); background:#FFFFFF; border:1px solid var(--panel-border);
    color:var(--text-primary); border-radius:var(--radius-sm); padding:8px 14px; font-size:13px; font-weight:700; flex:1; min-width:170px;
  }

  .color-row{
    border:1px solid var(--panel-border); border-radius:var(--radius-md);
    margin-bottom:8px; background:var(--panel-bg-sunken); overflow:hidden;
    width:100%; box-sizing:border-box;
  }
  .color-row-main{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    width:100%;
    box-sizing:border-box;
  }
  .rank{
    font-family:var(--font-mono); font-size:12px; font-weight:800;
    color:var(--text-tertiary); text-align:center; min-width:22px; flex-shrink:0;
  }
  .rank.r1{ color:var(--amber); }
  .swatch-lg{
    width:42px; height:42px; border-radius:10px;
    border:1px solid rgba(0,0,0,0.12); flex-shrink:0; cursor:pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .cinfo{
    flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
  }
  .cinfo .cname{
    font-weight:800; font-size:14px; color:var(--text-primary);
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cinfo .ccodes{
    font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-secondary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:right;
  }
  .cbar-wrap{
    width:120px; flex-shrink:0; display:flex; flex-direction:column; gap:4px;
  }
  .cbar-track{ height:8px; border-radius:4px; background:#E2E8F0; overflow:hidden; }
  .cbar-fill{ height:100%; border-radius:4px; transition:width .4s ease; }
  .cpct{
    font-family:var(--font-mono); font-weight:800; font-size:14px;
    text-align:left; color:var(--text-primary); min-width:70px; flex-shrink:0; direction:ltr;
  }
  .cpct .px{ display:block; font-size:9.5px; font-weight:600; color:var(--text-tertiary); }
  .expand-btn{
    background:none; border:1px solid var(--panel-border); border-radius:6px;
    width:30px; height:30px; color:var(--text-secondary); cursor:pointer;
    font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
    transition:all 0.15s ease; flex-shrink:0;
  }
  .expand-btn[aria-expanded=true]{ transform:rotate(180deg); color:var(--text-primary); border-color:#0F172A; }

  .sub-colors{ display:none; padding:14px 16px; border-top:1px solid var(--panel-border); background:#FFFFFF; }
  .sub-colors.open{ display:block; }
  .color-deep-matrix{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; margin-bottom:12px;
  }
  .cdm-tile{
    background:var(--panel-bg-sunken); border:1px solid var(--panel-border);
    border-radius:var(--radius-sm); padding:8px 10px; font-family:var(--font-mono);
  }
  .cdm-lbl{ font-size:10px; color:var(--text-tertiary); font-weight:800; margin-bottom:2px; font-family:var(--font-display); }
  .cdm-val{ font-size:11.5px; color:var(--text-primary); font-weight:800; display:flex; justify-content:space-between; align-items:center; direction:ltr; }
  .cdm-val button{ background:none; border:none; cursor:pointer; color:var(--accent); font-size:11px; padding:0 2px; font-family:var(--font-display); }
  
  .cdm-wcag-row{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:11.5px; font-weight:700;
    margin-top:8px; padding-top:8px; border-top:1px dashed var(--panel-border);
  }
  .badge-wcag{ padding:2px 7px; border-radius:4px; font-size:10px; font-weight:800; }
  .badge-wcag.pass{ background:#DCFCE7; color:#166534; }
  .badge-wcag.fail{ background:#FEE2E2; color:#991B1B; }

  .sub-row{ display:grid; grid-template-columns:18px 1fr auto; gap:9px; align-items:center; padding:6px 0; font-size:12px; font-weight:700; }
  .sub-row .ssw{ width:16px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,0.12); }
  .sub-row .shex{ font-family:var(--font-mono); font-weight:800; color:var(--text-secondary); direction:ltr; text-align:right; }
  .sub-row .spct{ font-family:var(--font-mono); font-weight:700; color:var(--text-tertiary); direction:ltr; }
  .sub-note{ font-size:11.5px; font-weight:700; color:var(--text-tertiary); margin-top:8px; }
  .copy-btn{ background:none; border:none; color:var(--text-tertiary); cursor:pointer; font-size:12px; padding:2px; display:inline-flex; align-items:center; }
  .copy-btn:hover{ color:var(--text-primary); }
  .badge-dominant{ font-size:10px; font-weight:800; background:#FEF3C7; color:#92400E; padding:2px 6px; border-radius:4px; margin-right:4px; flex-shrink:0; }

  .modules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; width:100%; }
  #histCanvas{ width:100%; height:140px; display:block; }
  .hist-legend{ display:flex; gap:14px; margin-top:10px; font-size:12px; font-weight:800; }
  .hist-legend span{ display:flex; align-items:center; gap:5px; color:var(--text-secondary); }
  .hist-legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }

  .contrast-row{ display:flex; gap:14px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
  .cslot{ display:flex; align-items:center; gap:7px; }
  .cslot label{ font-size:12px; font-weight:800; color:var(--text-tertiary); }
  .contrast-preview{ border-radius:var(--radius-md); padding:18px; text-align:center; font-weight:800; font-size:15px; border:1px solid var(--panel-border); margin-bottom:12px; }
  .contrast-ratio{ font-family:var(--font-mono); font-size:28px; font-weight:800; color:var(--text-primary); text-align:center; direction:ltr; }
  .wcag-badges{ display:flex; gap:7px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
  .wbadge{ font-size:11px; font-weight:800; padding:4px 9px; border-radius:6px; border:1px solid var(--panel-border); color:var(--text-tertiary); }
  .wbadge.pass{ color:#065F46; border-color:#A7F3D0; background:#ECFDF5; }
  .wbadge.fail{ color:#991B1B; border-color:#FECACA; background:#FEF2F2; }

  .cb-buttons{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
  .cb-buttons button.active{ background:#0F172A; color:#FFFFFF; border-color:#0F172A; font-weight:800; }
  #cbCanvasWrap{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--panel-border); background:var(--panel-bg-sunken); width:100%; }
  #cbCanvas{ width:100%; height:auto; display:block; max-height:380px; object-fit:contain; }

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
    background:#0F172A; border:1px solid #1E293B; color:#FFFFFF;
    padding:10px 20px; border-radius:var(--radius-md); font-size:13px; font-weight:800;
    transition:all .2s ease; pointer-events:none; z-index:10000; box-shadow:0 10px 30px rgba(0,0,0,0.25);
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  .guide-article-wrap {
    max-width: 960px;
    margin: 40px auto 0;
    padding: 0 16px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.85;
    text-align: right;
  }
  .guide-article-wrap h2 {
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 900;
    color: #0F172A;
    margin: 38px 0 14px;
    line-height: 1.35;
  }
  .guide-article-wrap p {
    color: #334155;
    font-size: 15.5px;
    margin-bottom: 18px;
  }
  .guide-article-wrap ul, .guide-article-wrap ol {
    margin: 0 24px 20px 0;
    color: #334155;
    font-size: 15px;
  }
  .guide-article-wrap li {
    margin-bottom: 9px;
  }
  .guide-step-card {
    background: #F8FAFC;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 14px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .guide-step-num {
    background: #0F172A;
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .guide-step-content h4 {
    font-size: 16.5px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
  }
  .guide-step-content p {
    margin: 0;
    font-size: 14.5px;
    color: #475569;
  }
  .guide-faq-item {
    background: #FFFFFF;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 12px;
  }
  .guide-faq-item h4 {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 6px;
  }
  .guide-faq-item p {
    margin: 0;
    font-size: 14.5px;
    color: #475569;
  }
  .ad-slot-wrap {
    width: 100%;
    min-height: 110px;
    margin: 36px 0;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    box-sizing: border-box;
    padding: 12px;
    text-align: center;
  }

  /* ARABIC FOOTER OFFICIAL STYLES */
  #itc_ftr_root {
      background-color: #0f172a !important;
      color: #94a3b8 !important;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Cairo", "Noto Sans Arabic", sans-serif !important;
      padding: 4.5rem 5% 2rem !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-sizing: border-box !important;
      width: 100% !important;
      position: relative !important;
      direction: rtl !important;
      text-align: right !important;
  }

  #itc_ftr_root, 
  #itc_ftr_root * {
      box-sizing: border-box !important;
      margin: 0;
      padding: 0;
  }

  #itc_ftr_grid {
      display: grid !important;
      grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
      gap: 2.5rem !important;
      max-width: 1400px !important;
      margin: 0 auto !important;
      padding-bottom: 3.5rem !important;
  }

  .itc_ftr_brand_col {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.2rem !important;
  }

  .itc_ftr_logo_badge {
      display: inline-flex !important;
      align-items: center !important;
      background: #ffffff !important;
      padding: 6px 14px !important;
      border-radius: 8px !important;
      width: fit-content !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  .itc_ftr_logo_img {
      height: 38px !important;
      width: auto !important;
      display: block !important;
  }

  .itc_ftr_desc {
      font-size: 0.88rem !important;
      line-height: 1.6 !important;
      color: #94a3b8 !important;
      max-width: 320px !important;
  }

  .itc_ftr_title {
      font-size: 0.82rem !important;
      letter-spacing: normal !important;
      font-weight: 700 !important;
      color: #f8fafc !important;
      margin-bottom: 1.2rem !important;
  }

  .itc_ftr_list {
      list-style: none !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0.65rem !important;
  }

  .itc_ftr_link {
      text-decoration: none !important;
      color: #94a3b8 !important;
      font-size: 0.88rem !important;
      font-weight: 400 !important;
      transition: all 0.2s ease !important;
      display: inline-block !important;
  }

  .itc_ftr_link:hover {
      color: #ffffff !important;
      transform: translateX(-4px) !important;
  }

  .itc_ftr_bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
      padding-top: 2rem !important;
      max-width: 1400px !important;
      margin: 0 auto !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: 1rem !important;
  }

  .itc_ftr_copy {
      font-size: 0.82rem !important;
      color: #64748b !important;
  }

  .itc_ftr_legal {
      display: flex !important;
      gap: 1.5rem !important;
      align-items: center !important;
  }

  .itc_ftr_legal a {
      color: #64748b !important;
      text-decoration: none !important;
      font-size: 0.82rem !important;
      transition: color 0.2s ease !important;
  }

  .itc_ftr_legal a:hover {
      color: #f8fafc !important;
  }

  .itc_ftr_scroll_top {
      background: rgba(255, 255, 255, 0.06) !important;
      color: #cbd5e1 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding: 6px 12px !important;
      border-radius: 6px !important;
      font-size: 0.78rem !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
  }

  .itc_ftr_scroll_top:hover {
      background: rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      transform: translateY(-2px) !important;
  }

  @media (max-width: 1024px) {
      #readouts{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
      #itc_ftr_grid {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 2rem !important;
      }
      .itc_ftr_brand_col {
          grid-column: span 3 !important;
          margin-bottom: 1rem !important;
      }
  }

  @media (max-width: 768px) {
      .color-row-main{
        gap: 10px;
        padding: 10px 12px;
      }
      .swatch-lg{
        width: 38px;
        height: 38px;
        border-radius: 8px;
      }
      .cbar-wrap{
        display: none !important;
      }
      .cinfo .cname{
        font-size: 13px;
      }
      .cinfo .ccodes{
        font-size: 10.5px;
      }
      .cpct{
        font-size: 13px;
        min-width: auto;
      }
  }

  @media (max-width: 640px) {
      .wrap{ padding:10px 12px 60px; }
      #readouts{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .readout-tile{ padding:10px; min-height:74px; }
      .readout-tile .rl-value{ font-size:16px; }
      .readout-tile .rl-label{ font-size:10px; }
      .readout-tile .rl-sub{ font-size:10.5px; }

      #itc_ftr_root {
          padding: 3.5rem 5% 1.5rem !important;
      }
      #itc_ftr_grid {
          grid-template-columns: 1fr !important;
          gap: 2rem !important;
      }
      .itc_ftr_brand_col {
          grid-column: span 1 !important;
      }
      .itc_ftr_bottom {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 1.2rem !important;
      }
  }

  @media (max-width: 480px){
      .color-row-main{
        gap: 8px;
        padding: 8px 10px;
      }
      .rank{
        min-width: 16px;
        font-size: 11px;
      }
      .swatch-lg{
        width: 36px;
        height: 36px;
      }
      .badge-dominant{
        display: none;
      }
      .cpct .px{
        display: none;
      }
      .cpct{
        font-size: 12px;
      }
  }