:root{--primary:#2c4a7c;--selection:#dce8ff;--hover:#eef2fa;--bg:#f0f2f5}

  *{box-sizing:border-box;margin:0;padding:0}
  :root{--strip-h:33px;--toggle-w:17px;--tree-pl:12px;--tree-below-ml:25px;--connector-offset:calc(6px + var(--tree-pl) - 4px);--panel-line-x:calc(4px - var(--tree-below-ml) + 3px)}
  html{overflow:hidden;overscroll-behavior:none}
  body{font-family:var(--font);background:var(--bg);color:#222;position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
  /* ── top bar ── */
  #topbar{background:var(--primary);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;overflow:hidden;container-type:inline-size;container-name:topbar}
  #topbar h1{font-size:1rem;font-weight:600;white-space:nowrap;cursor:pointer;opacity:.9}
  #topbar h1:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
  #tb-sep{opacity:.4;margin:0 -2px;font-size:.85rem;white-space:nowrap}
  #tb-session-name{font-size:.85rem;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;cursor:pointer}
  #tb-session-name:hover{opacity:1}
  .tb-btn{background:#ffffff22;border:1px solid #ffffff44;color:#fff;padding:5px 14px;border-radius:16px;cursor:pointer;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
  #mode-switcher{display:none;background:#ffffff22;border-radius:9px;padding:3px;gap:0;flex-shrink:0}
  .mode-seg{background:none;border:none;color:#ffffffaa;padding:3px 13px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
  .mode-seg.active{background:#fff;color:var(--primary);font-weight:600}
  .mode-seg:hover:not(.active){color:#fff}
  #mode-validate{display:inline-flex;align-items:center}
  #xml-draft-dot{width:6px;height:6px;background:#fbbf24;border-radius:50%;margin-left:5px;flex-shrink:0;animation:xml-dot-pulse 1.8s ease-in-out infinite}
  @keyframes xml-dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}
  @container topbar (max-width:660px){.tb-label{display:none}#status{display:none}#tb-session-name{max-width:100px}}
  .tb-btn:hover{background:#ffffff44}
  #root-select{padding:5px 10px;border-radius:16px;border:none;font-size:13px;min-width:280px;outline:none;background:#fff;color:#222}
  #status{font-size:12px;opacity:.75;margin-left:auto;white-space:nowrap}
  /* ── drop overlay ── */
  /* (start-screen styles live inline in the landing template — the explorer doesn't use them) */
  #file-input{display:none}
  /* ── main layout ── */
  #app{display:flex;flex:1;overflow:hidden}
  /* ── unified nav sidebar ── */
  #nav-sidebar{width:220px;min-width:80px;max-width:40vw;background:#f6f7f9;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;border-right:1px solid #eee}
  #nav-header{flex-shrink:0;background:#fafafa;border-bottom:1px solid color-mix(in srgb,var(--primary) 10%,#e8e8e8)}
  #nav-switcher{display:flex;gap:3px;margin:8px 10px;padding:3px;box-sizing:border-box;background:#e9ecf1;border-radius:9px}
  .nav-tab{flex:1;padding:6px 0;font-size:11px;font-weight:700;color:#8a94a6;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:6px;background:none;cursor:pointer;transition:color .15s,background .12s,box-shadow .12s}
  .nav-tab.active{color:var(--primary);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}
  .nav-tab:not(.active):hover{color:var(--primary)}
  #nav-file-ctx{display:flex;align-items:center;gap:8px;padding:0 14px;height:var(--strip-h);box-sizing:border-box;overflow:hidden}
  #nav-file-ctx-label{font-size:11px;font-weight:500;color:#8a9ab8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;gap:4px}
  #nav-file-ctx-label:hover .nav-ctx-file{text-decoration:underline}
  .nav-ctx-file{color:var(--primary);font-weight:700;text-transform:none;letter-spacing:0}
  #nav-file-ctx-clear{font-size:14px;color:var(--primary);cursor:pointer;flex-shrink:0;line-height:1;opacity:.5;transition:opacity .15s;margin-left:2px}
  #nav-file-ctx-clear:hover{opacity:1}

  .global-file-row{padding:9px 14px 5px;font-size:10px;font-weight:800;color:#6b7688;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;border-top:1px solid #d5dae1;background:#f4f6f8}
  .global-file-row:first-child{margin-top:0;border-top:none}
  .root-item.global-root{padding-left:22px}
  #nav-search-wrap{display:flex;align-items:center;margin:5px 10px;border:1px solid #d0d0d0;border-radius:3px;background:#fff;cursor:text}
  #nav-search{flex:1;border:none;padding:0 4px 0 10px;font-size:12px;outline:none;background:transparent;color:#222;height:32px;min-width:0}
  #nav-search::placeholder{color:#999}
  #nav-search-icon{flex-shrink:0;padding:0 8px;color:#aaa;display:flex;align-items:center;pointer-events:none}
  #nav-list{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:#f4f6f8}
  /* ── resize handle ── */
  .resizer{width:5px;background:#dde;cursor:col-resize;flex-shrink:0;transition:background .15s}
  .resizer:hover,.resizer.dragging{background:var(--primary)}
  .file-item{padding:6px 14px;cursor:pointer;font-size:12px;border-left:3px solid transparent;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .file-item:hover{background:var(--hover)}
  .file-item.active{background:var(--selection);border-left-color:var(--primary);color:var(--primary);font-weight:500}
  .file-item.kb-focus{background:var(--hover)}
  .root-item{padding:7px 16px;cursor:pointer;font-size:13px;font-weight:400;border-left:3px solid transparent;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .root-item.entry-root{font-weight:700}
  .root-item:hover{background:var(--hover)}
  .root-item.active{background:var(--selection);border-left-color:var(--primary);font-weight:600}
  .root-item.kb-focus{background:var(--selection)}
  /* ── detail ── */
  #detail{flex:1;display:flex;flex-direction:column;overflow:hidden}
  #detail-strip{flex-shrink:0;background:#fafafa;border-bottom:1px solid #eee;display:flex;align-items:stretch;overflow:hidden;height:var(--strip-h);box-sizing:border-box}
  #detail-tabs{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;min-width:0;flex-shrink:1;scrollbar-width:none;-ms-overflow-style:none}
  #detail-tabs::-webkit-scrollbar{display:none;height:0}
  #tabs-scroll-left,#tabs-scroll-right{flex-shrink:0;background:none;border:none;border-left:1px solid #eee;color:#999;padding:0 7px;cursor:pointer;display:flex;align-items:center}
  #tabs-scroll-left:hover,#tabs-scroll-right:hover{background:var(--hover);color:var(--primary)}
  #tabs-scroll-left[disabled],#tabs-scroll-right[disabled]{opacity:.25;cursor:default;pointer-events:none}
  #new-search-tab-btn{flex-shrink:0;background:none;border:none;border-left:1px solid #eee;color:#999;font-size:16px;font-weight:300;padding:0 12px;cursor:pointer;display:flex;align-items:center;line-height:1}
  #new-search-tab-btn:hover{background:var(--hover);color:var(--primary)}
  #tab-ctx-menu .tab-ctx-close{display:flex;align-items:center;gap:7px}
  #tab-ctx-menu .tab-ctx-close svg{flex-shrink:0}
  #all-tabs-btn{flex-shrink:0;background:none;border:none;border-left:1px solid #eee;color:#bbb;font-size:11px;padding:0 12px;cursor:pointer;display:flex;align-items:center;white-space:nowrap}
  #all-tabs-btn:hover{color:var(--primary);background:var(--hover)}
  #tab-overflow-menu{position:fixed;background:#fff;border:1px solid #dde;border-radius:6px;box-shadow:0 4px 14px #0002;z-index:9999;font-size:12px;min-width:220px;padding:4px 0;max-height:50vh;overflow-y:auto}
  #tab-overflow-menu .tab-overflow-item{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;cursor:pointer;color:#333;gap:12px}
  #tab-overflow-menu .tab-overflow-item:hover{background:var(--hover)}
  #tab-overflow-menu .tab-overflow-item.active{color:var(--primary);font-weight:600}
  #tab-overflow-menu .tab-overflow-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tab-overflow-menu .tab-overflow-close{background:none;border:none;color:#ccc;cursor:pointer;font-size:15px;line-height:1;padding:0;flex-shrink:0}
  #tab-overflow-menu .tab-overflow-close:hover{color:#888}
  #detail-strip-label{padding:10px 14px;font-size:11px;font-weight:700;color:#667;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;flex-shrink:0;border-right:1px solid #eee}


  .detail-tab{display:flex;align-items:center;gap:5px;padding:0 12px;font-size:12px;font-weight:600;color:color-mix(in srgb,var(--primary) 45%,#999);cursor:pointer;border:none;border-bottom:2px solid transparent;white-space:nowrap;user-select:none;background:none;transition:color .15s,border-color .15s,background .12s}
  .detail-tab:not(.active):hover{color:var(--primary);background:var(--hover)}
  .detail-tab.active{color:var(--primary);background:#fff;border-bottom-color:var(--primary)}
  .detail-tab.dragging{opacity:.35;transform:scale(.95);transition:opacity .15s,transform .15s}
  .detail-tab.drag-over{border-left:3px solid var(--primary);background:var(--hover)}
  .detail-tab.drag-landed{animation:tab-land .35s ease-out}
  @keyframes tab-land{0%{background:var(--selection)}100%{background:inherit}}
  @keyframes spin{to{transform:rotate(360deg)}}
  .detail-tab-close{background:none;border:none;color:color-mix(in srgb,var(--primary) 25%,#ccc);cursor:pointer;padding:0 0 0 2px;font-size:15px;line-height:1;display:flex;align-items:center;transition:color .12s}
  .detail-tab-close:hover{color:var(--primary)}
  #tab-ctx-menu{position:fixed;background:#fff;border:1px solid #dde;border-radius:6px;box-shadow:0 4px 14px #0002;z-index:9999;font-size:13px;min-width:180px;padding:4px 0}
  #tab-ctx-menu div{padding:7px 14px;cursor:pointer;color:#333}
  #tab-ctx-menu div:hover{background:var(--hover)}
  #detail-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
  #detail-header-wrap{flex-shrink:0;display:flex;align-items:center;padding:0 38px 0 24px;background:#fafafa;height:var(--strip-h);box-sizing:border-box;overflow:hidden}
  #detail-actions-toggle{position:absolute;right:0;top:0;height:var(--strip-h);width:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#99a;font-size:20px;z-index:2;box-sizing:border-box;transition:color .12s,background .12s}
  #detail-actions-toggle::before{content:'▾';display:inline-block;transform:rotate(-90deg);transition:transform .2s ease}
  #detail-actions-toggle.open::before{transform:rotate(0deg)}
  #detail-actions-toggle:hover{color:var(--primary);background:var(--hover)}
  #detail-actions-toggle.open{color:var(--primary)}
  #detail-scroll{flex:1;overflow-y:auto;padding:14px 24px 18px;overscroll-behavior:contain;font-size:13px;overflow-anchor:none;border-top:1px solid color-mix(in srgb,var(--primary) 10%,#e8e8e8);background:#fff}
  #detail-actions{flex-shrink:0;display:flex;align-items:stretch;gap:0;background:#fafafa;height:var(--strip-h);box-sizing:border-box}
  .strip-sep{width:1px;background:color-mix(in srgb,var(--primary) 22%,#dde);margin:6px 8px;flex-shrink:0}
  .tree-action-btn{display:flex;align-items:center;gap:5px;padding:0 10px;margin:4px 2px;border:none;background:none;cursor:pointer;color:var(--primary);font-size:12px;border-radius:6px;transition:background .12s,color .12s,opacity .12s;opacity:.65}
  .tree-action-btn:hover:not(:disabled){background:var(--selection);color:var(--primary);opacity:1}
  .tree-action-btn:disabled{opacity:.25;cursor:default}
  .tree-action-btn.btn-active{background:var(--selection);color:var(--primary);opacity:1}
  #snap-wrap,#create-xml-wrap,#usages-wrap,#clear-marks-wrap{position:relative;display:flex;align-items:stretch}
  /* Contextual "Clear" button: pinned right, animated entrance, soft removal tint */
  #clear-marks-wrap{animation:clearMarksIn .15s ease both}
  @keyframes clearMarksIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
  #clear-marks-btn{color:#854d0e;opacity:1;background:#fef9c3;border:1px solid #fde047}
  #clear-marks-btn:hover:not(:disabled){color:#713f12;opacity:1;background:#fef08a;border-color:#fde047}
  #view-fade{position:fixed;inset:0;background:rgba(0,0,0,.07);z-index:150;pointer-events:none;opacity:0;transition:opacity .18s}
  #view-fade.on{opacity:1}
  #view-wrap{position:relative;display:flex;align-items:stretch}
  #view-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.13);z-index:200;white-space:nowrap;min-width:180px;font-size:13px;color:#444;overflow:hidden}
  #view-dropdown,#view-options,#view-options *{font-size:13px}
  #view-options .vo-action-btn,#view-options .vo-reset-link{font-size:12px}
  #view-dropdown::before{content:'';position:absolute;top:-5px;left:18px;width:8px;height:8px;background:#fff;border-left:1px solid #ddd;border-top:1px solid #ddd;transform:rotate(45deg)}
  #details-wrap{position:relative;display:flex;align-items:stretch}
  #details-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.13);z-index:200;white-space:nowrap;font-size:12px;color:#444;overflow:hidden}
  #details-dropdown::before{content:'';position:absolute;top:-5px;left:18px;width:8px;height:8px;background:#fff;border-left:1px solid #ddd;border-top:1px solid #ddd;transform:rotate(45deg)}
  .details-row{border-bottom:1px solid #eee}
  .details-row:last-child{border-bottom:none}
  .details-row-btn{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 14px;cursor:pointer;line-height:1.4;font:inherit;color:inherit}
  .details-row-btn:hover{background:#f3f4f6}
  .details-row-applied{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;color:#777}
  .details-undo-link{background:none;border:none;padding:0;margin:0;font:inherit;font-size:12px;color:var(--primary);cursor:pointer;text-decoration:none;white-space:nowrap}
  .details-undo-link:hover{text-decoration:underline}
  #view-options{padding:8px 10px 10px;min-width:280px}
  #view-options .vo-hdr-row{display:flex;align-items:center;padding:2px 10px 8px}
  #view-options .vo-title{flex:1;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#999}
  #view-options .vo-hdr{width:56px;text-align:center;font-size:.72rem;font-weight:700;color:#b6bbc6}
  #view-options .vo-row{display:flex;align-items:center;border-radius:7px;padding:0 10px;transition:background .1s}
  #view-options .vo-row:hover{background:var(--hover)}
  #view-options .vo-row label{flex:1;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:0;padding:6px 0;line-height:1.4;font-size:.9rem;color:#333}
  #view-options .vo-row.vo-sub label{padding-left:16px;color:#555}
  #view-options .vo-row .vo-cb{width:56px;display:flex;justify-content:center;flex-shrink:0}
  #view-options .vo-row input[type=checkbox]{cursor:pointer;margin:0;width:16px;height:16px}
  #view-options .vo-cb-na{color:#c4c9d2;font-size:.95rem;line-height:1}
  #view-options .vo-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  #view-options .vo-sep{border-top:1px solid #eee;margin:6px 10px}
  #view-options .vo-pref{border-top:1px solid #eee;margin:8px -10px -10px;padding:12px 20px 14px;background:#f6f7f9}
  #view-options .vo-section{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#999;margin:0 0 9px}
  #view-options .vo-actions{display:flex;gap:8px}
  #view-options .vo-action-btn{flex:1;padding:9px 8px;font-family:inherit;font-size:.86rem;border:1px solid #d7dae0;border-radius:7px;background:#fff;color:#333;cursor:pointer;transition:background .1s,border-color .1s}
  #view-options .vo-action-btn:hover{background:var(--hover);border-color:var(--primary);color:var(--primary)}
  #view-options .vo-reset-link{display:block;width:100%;margin-top:12px;padding:4px;background:none;border:none;font-family:inherit;font-size:.84rem;color:#8a8f99;text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:center;transition:color .1s}
  #view-options .vo-reset-link:hover{color:var(--primary)}
  #detail-scroll.hide-card .t-row .t-card,   #vld-xsd-scroll.hide-card .t-row .t-card{display:none !important}
  #detail-scroll.hide-type .t-row .t-type,   #vld-xsd-scroll.hide-type .t-row .t-type{display:none !important}
  #detail-scroll.hide-restr .t-row .t-restr-badge, #vld-xsd-scroll.hide-restr .t-row .t-restr-badge, #detail-scroll.hide-restr .t-row .t-fixed-badge, #vld-xsd-scroll.hide-restr .t-row .t-fixed-badge, #detail-scroll.hide-restr .t-row .t-default-badge, #vld-xsd-scroll.hide-restr .t-row .t-default-badge{display:none !important}
  #detail-scroll.hide-doc .t-doc-badge,  #vld-xsd-scroll.hide-doc .t-doc-badge{display:none !important}
  #detail-scroll.hide-doc .t-doc-box,    #vld-xsd-scroll.hide-doc .t-doc-box{display:none !important}
  #detail-scroll.hide-doc .t-node.doc-search-hit>.t-doc-box,#vld-xsd-scroll.hide-doc .t-node.doc-search-hit>.t-doc-box{display:block !important}
  #vld-xsd-scroll .t-doc-inline{display:none !important}
  #vld-xsd-scroll .t-doc-badge{display:none !important}
  #vld-xsd-scroll .t-doc-box{display:none !important}
  #detail-scroll .t-pr-row .t-type,#vld-xsd-scroll .t-pr-row .t-type{display:inline-flex !important}
  #detail-scroll .t-pr-row .t-restr-badge,#vld-xsd-scroll .t-pr-row .t-restr-badge{display:inline-flex !important}
  #vld-xsd-scroll .t-row .t-fixed-badge{display:none !important}
  #vld-xsd-scroll .t-pr-row .t-fixed-badge{display:inline-flex !important}
  #detail-scroll.show-doc-full .t-doc-box,   #vld-xsd-scroll.show-doc-full .t-doc-box{display:block !important}
  #detail-scroll.show-doc-full .t-doc-badge, #vld-xsd-scroll.show-doc-full .t-doc-badge{display:none !important}
  .t-below{display:none;margin:0 8px 12px var(--tree-below-ml);width:fit-content;max-width:550px;font-size:11px;position:relative;padding:0 0 4px}
  /* only reveal the below-panel once it actually has a row that's visible under the current
     view config — otherwise it'd render as an empty box taking up space for nothing */
  .t-node-open>.t-below:has(.t-pr-doc){display:block}
  #detail-scroll.show-below-prefix .t-node-open>.t-below:has(.t-pr-prefix),#vld-xsd-scroll.show-below-prefix .t-node-open>.t-below:has(.t-pr-prefix),
  #detail-scroll.show-below-card .t-node-open>.t-below:has(.t-pr-card),#vld-xsd-scroll.show-below-card .t-node-open>.t-below:has(.t-pr-card),
  #detail-scroll.show-below-type .t-node-open>.t-below:has(.t-pr-type),#vld-xsd-scroll.show-below-type .t-node-open>.t-below:has(.t-pr-type),
  #detail-scroll.show-below-restr .t-node-open>.t-below:has(.t-pr-restr),#vld-xsd-scroll.show-below-restr .t-node-open>.t-below:has(.t-pr-restr),
  #detail-scroll.show-below-attrs .t-node-open>.t-below:has(.t-pr-attrs),#vld-xsd-scroll.show-below-attrs .t-node-open>.t-below:has(.t-pr-attrs),
  #detail-scroll.show-below-filesrc .t-node-open>.t-below:has(.t-pr-filesrc),#vld-xsd-scroll.show-below-filesrc .t-node-open>.t-below:has(.t-pr-filesrc)
  {display:block}
  .t-pr-row{display:none;align-items:baseline;gap:6px;padding:3px 10px;border-top:none}
  #detail-scroll.show-below-prefix .t-node-open>.t-below .t-pr-prefix,#vld-xsd-scroll.show-below-prefix .t-node-open>.t-below .t-pr-prefix{display:flex}
  #detail-scroll.show-below-card .t-node-open>.t-below .t-pr-card,#vld-xsd-scroll.show-below-card .t-node-open>.t-below .t-pr-card{display:flex}
  #detail-scroll.show-below-type .t-node-open>.t-below .t-pr-type,#vld-xsd-scroll.show-below-type .t-node-open>.t-below .t-pr-type{display:flex}
  #detail-scroll.show-below-filesrc .t-node-open>.t-below .t-pr-filesrc,#vld-xsd-scroll.show-below-filesrc .t-node-open>.t-below .t-pr-filesrc{display:flex}
  #detail-scroll.show-below-restr .t-node-open>.t-below .t-pr-restr,#vld-xsd-scroll.show-below-restr .t-node-open>.t-below .t-pr-restr{display:flex}
  #detail-scroll.show-below-doc .t-node-open>.t-below .t-pr-doc,#vld-xsd-scroll.show-below-doc .t-node-open>.t-below .t-pr-doc{display:flex}
  #detail-scroll.hide-attrs .t-attr-node,#vld-xsd-scroll.hide-attrs .t-attr-node{display:none}
  #detail-scroll.show-below-attrs .t-node-open>.t-below .t-pr-attrs,#vld-xsd-scroll.show-below-attrs .t-node-open>.t-below .t-pr-attrs{display:flex}
  #detail-scroll.show-below-type .t-node-open>.t-row .t-type,#vld-xsd-scroll.show-below-type .t-node-open>.t-row .t-type{display:none !important}
  #detail-scroll.show-below-filesrc .t-node-open>.t-row .t-file-src,#vld-xsd-scroll.show-below-filesrc .t-node-open>.t-row .t-file-src{display:none !important}
  #detail-scroll.show-below-restr .t-node-open>.t-row .t-restr-badge,#vld-xsd-scroll.show-below-restr .t-node-open>.t-row .t-restr-badge,#detail-scroll.show-below-restr .t-node-open>.t-row .t-fixed-badge,#vld-xsd-scroll.show-below-restr .t-node-open>.t-row .t-fixed-badge,#detail-scroll.show-below-restr .t-node-open>.t-row .t-default-badge,#vld-xsd-scroll.show-below-restr .t-node-open>.t-row .t-default-badge{display:none !important}
  #detail-scroll.show-below-doc .t-node-open>.t-row .t-doc-badge,#vld-xsd-scroll.show-below-doc .t-node-open>.t-row .t-doc-badge{display:none !important}
  .t-pl{display:flex;align-items:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9aa5c0;white-space:nowrap;line-height:1.4}
  .t-pv{color:#333;font-size:11px;display:flex;flex-wrap:wrap;gap:3px;align-items:baseline;min-width:0}
  .t-pv-doc,.t-pv-attrs{flex-direction:column;align-items:flex-start;gap:2px;width:100%;white-space:pre-wrap;line-height:1.55;box-sizing:border-box}
  .t-pv-typedoc{flex-basis:100%;color:#666;font-style:italic;white-space:pre-wrap;line-height:1.5;margin-top:2px}
  .t-pr-row .t-restr-badge,.t-pr-row .t-fixed-badge,.t-pr-row .t-type{background:none !important;color:#333 !important;font-size:11px !important;padding:0 !important;border-radius:0 !important}
  .t-pr-attr-entry{display:flex;align-items:center;flex-wrap:wrap;gap:3px}
  #tree-search-wrap{display:flex;align-items:stretch;gap:6px;padding:0}
  #tree-search-doc-cb,#vld-xsd-search-doc-cb{appearance:none;width:26px;height:14px;background:#ccc;border-radius:7px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;border:none;outline:none}
  #tree-search-doc-cb::after,#vld-xsd-search-doc-cb::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;background:#fff;border-radius:50%;transition:left .2s}
  #tree-search-doc-cb:checked,#vld-xsd-search-doc-cb:checked{background:var(--primary)}
  #tree-search-doc-cb:checked::after,#vld-xsd-search-doc-cb:checked::after{left:14px}
  .t-search-hl{border-radius:2px}
  .t-search-current > .t-name,.t-search-current > .t-toggle{border:2px solid #0097a7 !important}
  .find-popup{position:fixed;z-index:200;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.18);display:flex;align-items:center;overflow:hidden}
  .find-popup input[type=search]{border:none;padding:9px 12px;font-size:12px;color:#444;outline:none;width:180px;background:transparent;font-family:inherit}
  .find-popup input[type=search]::placeholder{color:#aaa}
  .find-popup-sep{width:1px;background:#eee;align-self:stretch;flex-shrink:0}
  .find-popup-doc-label{display:flex;align-items:center;gap:5px;cursor:pointer;padding:0 8px;white-space:nowrap;user-select:none}
  .find-popup-doc-label span{font-size:11px;color:#667}
  .find-popup-nav{display:flex;flex-direction:column;justify-content:center;padding:0 4px;flex-shrink:0}
  .find-popup-nav button{border:none;background:none;cursor:pointer;color:#667;padding:0 2px;line-height:1}
  .find-popup-nav button:hover{color:var(--primary)}
  .find-popup-count{font-size:11px;color:#aaa;white-space:nowrap;min-width:36px;padding:0 6px;text-align:center}
  .find-popup-close{border:none;background:none;cursor:pointer;color:#aaa;padding:4px 10px;font-size:15px;line-height:1;flex-shrink:0}
  .find-popup-close:hover{color:#555}
  #usages-popup{position:fixed;z-index:200;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.18);min-width:220px;max-width:360px;overflow:hidden}
  .usages-header{font-size:11px;font-weight:600;color:#8a9ab8;padding:8px 12px 6px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #f0f0f0}
  .usages-list{max-height:280px;overflow-y:auto}
  .usages-item{display:flex;flex-direction:column;gap:1px;padding:7px 12px;cursor:pointer;border-bottom:1px solid #f5f5f5}
  .usages-item:last-child{border-bottom:none}
  .usages-item:hover{background:var(--hover)}
  .usages-item-name{font-size:12px;font-weight:600;color:var(--primary)}
  .usages-item-file{font-size:11px;color:#aaa}
  .t-search-hl-0{background:#fff176}
  .t-search-hl-1{background:#c8e6c9}
  .t-search-hl-2{background:#bbdefb}
  .t-search-hl-3{background:#f8bbd0}
  .t-search-hl-4{background:#ffe0b2}
  #detail-header{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
  #detail-header h2{font-size:.85rem;color:var(--primary);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .bc-file{color:color-mix(in srgb,var(--primary) 50%,#888);font-weight:400;font-size:.85rem;cursor:pointer}
  .bc-file:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
  .bc-sep{color:color-mix(in srgb,var(--primary) 15%,#ccc);font-weight:300;margin:0 6px;font-size:.85rem}
  .action-btn{font-size:11px;padding:3px 10px;border:1px solid #aac;border-radius:12px;background:#fff;cursor:pointer;color:#446}
  .action-btn:hover{background:var(--hover)}
  #placeholder{color:#aaa;padding:60px;text-align:center;font-size:14px}
  #file-info{padding:28px 36px;max-width:660px}
  .fi-filename{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:2px;word-break:break-word}
  .fi-hint{color:#aaa;font-size:12.5px;margin-bottom:20px}
  .fi-table{border-collapse:collapse;margin-bottom:4px;font-size:13px}
  .fi-key{color:#8a9ab8;font-weight:500;padding:3px 20px 3px 0;white-space:nowrap;vertical-align:top}
  .fi-val{color:#333;overflow-wrap:anywhere}
  .fi-val.mono{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:12px}
  /* Foldable section header */
  .fi-section-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a9ab8;margin:22px 0 0;padding:4px 0;cursor:pointer;user-select:none}
  .fi-section-title:hover{color:var(--primary)}
  .fi-chev{font-size:9px;color:#b0bacb;transition:transform .12s}
  .fi-section.open > .fi-section-title .fi-chev{transform:rotate(90deg)}
  .fi-count{font-size:10.5px;font-weight:600;letter-spacing:0;color:var(--primary);background:var(--hover);border-radius:20px;padding:1px 8px;text-transform:none}
  .fi-section-body{display:none;margin-top:9px}
  .fi-section.open > .fi-section-body{display:block}
  .fi-import-row{display:flex;gap:10px;align-items:baseline;margin-bottom:5px;min-width:0}
  .fi-import-loc{font-size:12px;color:#8a9ab8;flex:none;white-space:nowrap}
  .fi-import-ns{font-size:11px;color:#8a9ab8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* Component lists (root elements / complex types) — one clickable name per row, never mid-word wrapped */
  .fi-list{display:flex;flex-direction:column;gap:1px}
  .fi-item{display:block;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);font-size:12.5px;
    color:var(--primary);text-decoration:none;cursor:pointer;padding:4px 8px;border-radius:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
  .fi-item:hover{background:var(--hover)}
  .fi-item.is-root{font-weight:650}
  .fi-doc-lead{font-size:13.5px;color:#333;line-height:1.65;white-space:pre-wrap;
    max-height:320px;overflow-y:auto;border-left:3px solid var(--primary);
    background:var(--hover);border-radius:0 8px 8px 0;padding:14px 16px;margin-bottom:8px}
  .fi-doc{font-size:12px;color:#555;line-height:1.6;white-space:pre-wrap;max-height:180px;overflow-y:auto;background:var(--hover);border-radius:6px;padding:10px 12px}
  .fi-doc-link{color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:none;font:inherit;padding:0}
  .fi-doc-link:hover{opacity:.75}
  /* ── leaf detail ── */
  .leaf-section{margin-bottom:16px}
  .leaf-section-title{font-size:.85em;font-weight:700;color:#667;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
  .leaf-doc-body{font-size:.92em;color:#555;line-height:1.65;white-space:pre-wrap}
  .leaf-row{display:flex;gap:8px;align-items:baseline;margin:3px 0;font-size:.92em}
  .leaf-label{color:#999;min-width:90px;flex-shrink:0}
  .leaf-value{color:#333;font-family:monospace}
  .leaf-enum-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  /* ── tree ── */
  .tree-root{line-height:1.5}
  .t-row{display:flex;align-items:center;gap:4px;padding:2px 1px;border-radius:4px;cursor:pointer;user-select:none;position:relative}
  .t-row:hover{background:var(--hover)}
  .t-toggle{width:1.546em;height:1.546em;flex-shrink:0;font-size:.846em;color:#888;text-align:center;border:1px solid #ccc;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;background:#fff;line-height:0;margin-top:1px}
  /* fuse the toggle into the name box right next to it: flatten the facing corners/border and drop the row gap between them */
  .t-toggle{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:0 14px 28px rgba(30,41,59,.16),0 4px 8px rgba(30,41,59,.10),0 1px 2px rgba(30,41,59,.08)}
  /* leaf — nothing to expand: white (no grey) */
  .t-toggle.t-toggle-empty,.t-toggle.t-toggle-rep{background:#fff}
  .t-toggle + .t-name{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-4px}
  /* toggle-only rows — nothing beside them to fuse with (array items, a JSON schema's document
     root): put the removed seam side back so the toggle reads as a complete, standalone box */
  .t-toggle:has(+ .t-name.t-name-anon){border-right:1px solid #ccc;border-top-right-radius:3px;border-bottom-right-radius:3px}
  .t-name{font-weight:400;font-family:inherit;background:#fff;border:1px solid #e3e6ec;border-radius:5px;padding:1px 6px;box-shadow:0 14px 28px rgba(30,41,59,.16),0 4px 8px rgba(30,41,59,.10),0 1px 2px rgba(30,41,59,.08)}
  /* default expand toggle: hide the +/- text char (kept for JS state) and render a real plus/minus SVG icon
     (rounded stroke caps, matching the app's icon set) via a mask so it follows the toggle color.
     Open state swaps the plus mask for the minus mask. */
  .t-toggle:not(.t-toggle-empty):not(.t-toggle-choice):not(.t-toggle-expand):not(.t-toggle-rep){position:relative;color:transparent}
  .t-toggle:not(.t-toggle-empty):not(.t-toggle-choice):not(.t-toggle-expand):not(.t-toggle-rep)::before{content:'';position:absolute;top:50%;left:50%;width:.92em;height:.92em;transform:translate(-50%,-50%);background:#888;-webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}
  .t-node:has(> .t-children:not(.closed)) > .t-row > .t-toggle:not(.t-toggle-empty):not(.t-toggle-choice):not(.t-toggle-expand):not(.t-toggle-rep)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}
  /* choice toggle: alternative-key icon, same bright look regardless of expanded state, rotates 90deg open */
  .t-toggle.t-toggle-choice::before{content:'\2387';color:#888;font-size:1.09em;line-height:1;display:inline-block;transform:rotate(0deg);transition:transform .2s ease}
  .t-node:has(> .t-children:not(.closed)) > .t-row > .t-toggle.t-toggle-choice::before{transform:rotate(90deg)}
  /* expand/collapse toggle: same two-joined-squares glyph as the repeating pill,
     rotates 90deg open — identical technique to the choice toggle above */
  .t-toggle.t-toggle-expand::before{content:'\29c9';color:#888;font-size:1.09em;line-height:1;display:inline-block;transform:rotate(0deg);transition:transform .2s ease}
  .t-node:has(> .t-children:not(.closed)) > .t-row > .t-toggle.t-toggle-expand::before{transform:rotate(90deg)}
  /* leaf repeating node — same glyph, but nothing to expand so it never rotates */
  .t-toggle.t-toggle-rep::before{content:'\29c9';color:#888;font-size:1.09em;line-height:1;display:inline-block}
  .t-rep-icon{display:inline-flex;align-items:center;gap:4px;background:#e3f0fd;color:#1565c0;font-weight:700;font-size:11px;padding:1px 7px;border-radius:9px;flex-shrink:0;user-select:none;line-height:1.4}
  .t-rep-icon-sym{font-size:11px;line-height:1}
  .t-prefix{color:#8a9ab8;font-weight:400}
  .hide-prefix .t-prefix{display:none}
  .t-name.grp{color:#6644aa;font-style:italic}
  .t-name.restrict{color:#999;font-size:11px}
  .t-name.unres{color:#c00;font-style:italic}
  .t-load-ext{font-size:10px;color:#999;cursor:pointer;margin-left:5px;text-decoration:none;flex-shrink:0}
  .t-load-ext:hover{color:var(--primary)}
  .t-load-ext-done{cursor:default;color:#999}
  .t-load-ext-done:hover{color:#999}
  .t-name.circ{color:#a60;font-style:italic}
  .t-unres-hint{font-size:10px;color:#c00;margin-left:6px;cursor:help;flex-shrink:0;white-space:nowrap;opacity:.85}
  .t-card{font-size:10px;background:transparent;color:var(--primary);border-radius:3px;padding:1px 5px;cursor:default;border:none;font-family:inherit}
  .t-type{font-size:10px;background:color-mix(in srgb,var(--selection) 50%,#fff);color:color-mix(in srgb,var(--primary) 75%,#888);border-radius:3px;padding:1px 5px;cursor:default;border:none;font-family:inherit;display:inline-flex;align-items:center;vertical-align:middle}
  .t-file-src{display:none;font-size:10px;color:#8a94a6;align-items:center;vertical-align:middle;margin-left:6px;font-weight:400}
  #detail-scroll.show-filesrc .t-row .t-file-src,#vld-xsd-scroll.show-filesrc .t-row .t-file-src{display:inline-flex}
  .t-file-src-link{color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .t-file-src-link:hover{opacity:.7}
  .t-restr-badge{border:none !important;font-family:inherit;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
  .t-pr-restr .t-restr-badge{max-width:none;white-space:normal}
  .t-restr-indicator-wrap{display:none;align-items:center;gap:3px;margin-left:5px;flex-shrink:0;vertical-align:middle}
  .t-restr-indicator{width:7px;height:7px;border-radius:50%;cursor:pointer;flex-shrink:0}
  .t-restr-indicator:hover{filter:brightness(.8)}
  .xsd-tooltip{display:none;position:fixed;z-index:99999;background:#1d1d1f;color:#fff;font-size:11px;line-height:1.5;padding:7px 10px;border-radius:6px;max-width:min(420px,calc(100vw - 16px));width:max-content;box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:auto;user-select:text;cursor:text;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
  .xsd-tt-name{font-weight:700;margin-bottom:2px}
  .xsd-tt-doc{color:#ddd;font-weight:400}
  #xsd-busy-indicator{position:fixed;right:16px;bottom:16px;z-index:99998;background:#1d1d1f;color:#fff;font-size:12px;padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:7px;box-shadow:0 4px 14px rgba(0,0,0,.28)}
  .t-type-indicator-wrap{display:none;align-items:center;gap:3px;margin-left:5px;flex-shrink:0;vertical-align:middle}
  .t-doc-indicator-wrap{display:none;align-items:center;gap:3px;margin-left:5px;flex-shrink:0;vertical-align:middle}
  .t-attrs-indicator-wrap{display:none;align-items:center;gap:3px;margin-left:5px;flex-shrink:0;vertical-align:middle}
  /* Inline colored indicator dots (the type/constraint/doc/attribute hints shown when a lever is
     collapsed) are never shown in the XSD tree. */
  .t-restr-indicator-wrap,.t-type-indicator-wrap,.t-doc-indicator-wrap,.t-attrs-indicator-wrap{display:none !important}
  .t-doc-badge{font-size:10px;background:#f0f0f0;color:#666;border:none;border-radius:3px;padding:1px 5px;cursor:pointer;margin-left:4px;max-width:220px;display:inline-flex;align-items:center;gap:0;vertical-align:middle;font-family:inherit}
  .t-doc-badge:hover{background:#e4e4e4}
  .t-doc-badge-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
  .t-doc-more-dot{flex-shrink:0;color:#aaa;font-size:10px;margin-left:2px}
  .t-doc-box{margin:2px 4px 4px 12px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:4px;padding:5px 8px;font-size:11px;color:#555;line-height:1.5;white-space:pre-wrap;cursor:pointer;user-select:none;position:relative}
  .t-doc-box:hover{background:#efefef}
  .t-doc-box::after{content:'▲ collapse';font-size:10px;color:#aaa;float:right;margin-left:8px}
  .t-children{padding-left:var(--tree-pl);margin-left:6px;position:relative}
  /* bridges the trunk through an open below-panel, reusing the same --connector-offset
     as the regular elbow/trunk lines (left is relative to .t-children's own padding box,
     which starts var(--tree-pl) left of where a child node's own box would, hence the offset) */
  /* always bridges from this node's own toggle center down to where .t-children starts —
     a few px when there's no open panel, the full panel height when there is one, so the
     trunk's first segment is never a special case */
  .t-children:not(.closed)::before{content:'';position:absolute;left:calc(var(--tree-pl) - var(--connector-offset));top:calc(-1 * var(--panel-gap, 0px));width:2px;height:var(--panel-gap, 0px);background:#8090aa;pointer-events:none;z-index:1}
  #detail-scroll{--tree-pl:24.5px;--tree-below-ml:25px}
  .t-children.closed{display:none}
  .t-opt-hint{display:none;padding:3px 8px;color:#aaa;font-style:italic;font-size:11px}
  #detail-scroll.hide-optionals .t-all-optional > .t-opt-hint,
  #vld-xsd-scroll.hide-optionals .t-all-optional > .t-opt-hint{display:block}
  .t-children > .t-node{position:relative;z-index:0}
  /* extra breathing room when resuming a parent's sibling list after a nested, expanded subtree —
     i.e. between that subtree's last descendant and the parent's next sibling */
  .t-children > .t-node:has(> .t-children:not(.closed)) + .t-node{padding-top:8px}
  /* └ vertical-only trunk stub for the last child — it's the end of the line, so no continuation below */
  .t-children > .t-node:last-child::before{content:'';position:absolute;left:calc(-1 * var(--connector-offset));top:0;width:2px;height:var(--row-center,11px);background:#8090aa;pointer-events:none;z-index:1}
  /* • branch dot for every non-last child — centered on the trunk line / row-center via its own
     midpoint (left/top mark the dot's center, not its edge), so it stays centered regardless of size */
  .t-children > .t-node:not(:last-child)::before{content:'';position:absolute;width:8px;height:8px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid #8090aa;top:var(--row-center,11px);left:calc(-1 * var(--connector-offset) + 1px);transform:translate(-50%,-50%);pointer-events:none;z-index:2}
  /* • branch dot for the last child, on the pseudo-element freed up by removing its old horizontal turn */
  .t-children > .t-node:last-child::after{content:'';position:absolute;width:8px;height:8px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid #8090aa;top:var(--row-center,11px);left:calc(-1 * var(--connector-offset) + 1px);transform:translate(-50%,-50%);pointer-events:none;z-index:2}
  /* hollow dot for optional nodes — same outer size as the filled dot (border-box keeps the added border from growing it) */
  .t-children > .t-node.t-opt:not(:last-child)::before,
  .t-children > .t-node.t-opt:last-child::after{width:8px;height:8px;box-sizing:border-box;background:#fff;border:2px solid #8090aa}
  /* tie from the branch dot to this node's own toggle/name box — solid for required nodes, dashed for optional ones.
     .t-row is itself a positioning context, so this uses --row-center-local (offset from the row's
     own top) rather than --row-center (offset from the node's top) — keeps the tie aligned with the
     dot/trunk even when the node has top padding that pushes the row down within it. */
  .t-children > .t-node > .t-row::before{content:'';position:absolute;left:calc(-1 * var(--connector-offset) + 1px);top:calc(var(--row-center-local,11px) - 1px);width:var(--connector-offset);height:0;border-top:2px solid #8090aa;pointer-events:none;z-index:1}
  .t-children > .t-node.t-opt > .t-row::before{border-top-style:dotted;border-top-width:2px}
  /* visually-last node (real last child is hidden): its own trunk-continuation pseudo normally
     collapses to 0 height (no next visible sibling), so stretch it down to this node's own
     row-center instead, same as a real last child's vertical stub */
  .t-children > .t-node.t-vis-last::after{height:var(--row-center,11px) !important}
  #detail-scroll.hide-optionals .t-opt,
  #vld-xsd-scroll.hide-optionals .t-opt{display:none}
  #detail-scroll .t-row > .t-name{font-weight:700}
  #detail-scroll .t-opt > .t-row > .t-name{font-weight:600}
  #detail-scroll .t-node:not(.t-opt) > .t-row > .t-name:not(.grp):not(.choice):not(.unres):not(.circ):not(.restrict){color:#14161c}
  #detail-scroll.opt-grey .t-opt > .t-row > .t-name{font-weight:400;color:#888}
  #detail-scroll.opt-italic .t-opt > .t-row > .t-name{font-style:italic}
  #vld-xsd-scroll .t-row > .t-name{font-weight:700}
  #vld-xsd-scroll .t-node:not(.t-opt) > .t-row > .t-name:not(.grp):not(.choice):not(.unres):not(.circ):not(.restrict){color:#14161c}
  #vld-xsd-scroll .t-opt > .t-row > .t-name{font-weight:400;color:#999}
  /* dashed look for optional nodes — only the sides the toggle/name fusion keeps (never the
     removed seam side), so the seam stays invisible instead of reappearing as a stray border */
  .t-opt > .t-row > .t-toggle{border-top-style:dashed;border-left-style:dashed;border-bottom-style:dashed;border-color:#a8b3cc;box-shadow:0 6px 12px rgba(30,41,59,.08),0 2px 4px rgba(30,41,59,.05)}
  /* toggle-only + optional: the put-back seam side above is solid — dash it too, same color */
  .t-opt > .t-row > .t-toggle:has(+ .t-name.t-name-anon){border-right-style:dashed;border-right-color:#a8b3cc}
  .t-opt > .t-row > .t-name{border-top-style:dashed;border-right-style:dashed;border-bottom-style:dashed;border-color:#a8b3cc;box-shadow:0 6px 12px rgba(30,41,59,.08),0 2px 4px rgba(30,41,59,.05)}
  .no-connectors .t-node::before,.no-connectors .t-node::after{display:none !important;content:none !important}
  .t-info-btn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;padding:0;border:none;background:none;cursor:pointer;color:#888;border-radius:3px;flex-shrink:0;font-size:11px;line-height:1;margin-left:3px;visibility:hidden}
  .t-row:hover .t-info-btn{visibility:visible}
  .t-node-open > .t-row .t-info-btn{visibility:visible;color:#2563eb}
  .t-info-btn:hover{background:#e8eeff;color:#2563eb}
#row-ctx-menu{position:fixed;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.18);z-index:2000;display:none;min-width:180px;padding:5px 0;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#1d1d1f}
  #row-ctx-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:5px 12px;background:none;border:none;cursor:pointer;color:#1d1d1f;white-space:nowrap}
  #row-ctx-menu button:hover{background:#0a66c2;color:#fff}
  #row-ctx-menu button:hover svg{stroke:#fff}
  #row-ctx-menu .ctx-sep{height:1px;background:rgba(0,0,0,.1);margin:4px 0}
  #row-ctx-menu button.ctx-disabled{color:#bbb;pointer-events:none}
  /* ├ vertical line for non-last children: JS sets --node-gap */
  .t-children > .t-node:not(:last-child)::after{content:'';position:absolute;left:calc(-1 * var(--connector-offset));top:0;width:2px;height:var(--node-gap,0);background:#8090aa;pointer-events:none;z-index:1}
  .t-restrict-info{font-size:11px;color:#558;padding:2px 4px 2px 12px;background:#f8f8ff;border-radius:4px;margin:2px 0}
  /* choice */
  .t-name.choice{display:inline-flex;align-items:center;background:#fdf0dd;color:#a85d00;font-style:normal;font-weight:700;font-size:11px;padding:1px 7px;border-radius:9px}
  .t-oneof-badge{display:inline-flex;align-items:center;background:#fdf0dd;color:#a85d00;font-weight:700;font-size:11px;padding:1px 7px;border-radius:9px;flex-shrink:0}
  .t-children.choice-body{margin-left:6px;padding-left:var(--tree-pl);border-radius:0 0 4px 4px}
  /* extends (only shown inside type panel) */
  .t-name.ext{color:#1a7a4a;font-style:italic}
  .t-children.ext-body{margin-left:6px;padding-left:var(--tree-pl);background:#f2fff7;border-radius:0 0 4px 4px}
  /* focus */
  .bc-link{color:var(--primary);cursor:pointer;font-weight:500;font-size:.85rem;text-decoration:underline;text-underline-offset:2px}
  .bc-link:hover{color:color-mix(in srgb,var(--primary) 75%,#000)}
  .t-type-nav{cursor:pointer}
  .t-type-nav:hover{background:var(--hover)}
  .t-nav-arrow{opacity:0;transition:opacity .12s;margin-left:3px;font-size:9px;color:#888;font-style:normal}
  .t-row:hover .t-nav-arrow{opacity:1}
  /* JSON array element: a real row, but with no name of its own — only its toggle/badges. */
  .t-name.t-name-anon{min-width:0;margin:0;padding:0}
  /* Insert -> which occurrence menu (click only) */
  #vld-occ-menu{position:fixed;z-index:400;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.13);overflow:hidden;font-size:12px;color:#444;min-width:150px;padding:2px 0}
  #vld-occ-menu .occ-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 4px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8892a6}
  #vld-occ-menu .occ-x{background:none;border:none;padding:0 3px;cursor:pointer;font:inherit;font-size:14px;font-weight:400;line-height:1;color:#aab;letter-spacing:0}
  #vld-occ-menu .occ-x:hover{color:#444}
  #vld-occ-menu .occ-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:none;padding:6px 12px;cursor:pointer;line-height:1.4;font:inherit;color:inherit}
  #vld-occ-menu .occ-item:hover{background:#f3f4f6}
  #vld-occ-menu .occ-item.occ-all{font-weight:600}
  #vld-occ-menu .occ-sep{height:1px;background:#eee;margin:2px 0}
  #vld-occ-menu .occ-grid{display:grid;gap:4px;padding:4px 10px 8px}
  #vld-occ-menu .occ-cell{padding:5px 2px;min-width:26px;text-align:center;background:#fff;border:1px solid #e3e6ec;border-radius:5px;cursor:pointer;font:inherit;font-size:11px;color:#444;line-height:1.3}
  #vld-occ-menu .occ-cell:hover:not(.occ-done){background:#f3f4f6;border-color:#c9cfda}
  #vld-occ-menu .occ-cell.occ-done{color:#c2c8d2;background:#f7f8fa;cursor:default}
  .t-insert-btn{display:none;align-items:center;color:#aab;cursor:pointer;margin-left:4px;flex-shrink:0;padding:0;border:none;background:none}
  .t-insert-btn:hover{color:#1a7a4a !important}
  #vld-xsd-scroll .t-insert-btn{display:inline-flex}
  #vld-xsd-scroll .t-node.t-vld-singular.vld-present-row>.t-row>.t-insert-btn{display:none}
  #vld-xsd-scroll .t-node.t-vld-choice-blocked>.t-row>.t-insert-btn{display:none}
  #mark-hover-btn{position:fixed;z-index:9999;display:none;background:none;border:none;cursor:pointer;padding:0;font-size:14px;line-height:1;color:#aaa;align-items:center;justify-content:center}
  #mark-hover-btn.is-marked{color:#f59e0b}
  .t-marked>.t-row>.t-prefix,.t-marked>.t-row>.t-name{background:#fff3c4 !important;border-radius:2px}
  .t-pr-row.t-marked{background:#fff3c4 !important}
  /* validation mode */
  #vld-panel{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:row}
  #vld-panel.vld-unified{flex-direction:column}
  #vld-panel-body{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}
  #vld-unified-actions{align-items:stretch;height:var(--strip-h);box-sizing:border-box;border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,#dde);background:var(--bg);overflow-x:auto;flex-shrink:0}
  #vld-picker-strip{flex-shrink:0;background:var(--hover);border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,#dde);display:flex;align-items:center;height:var(--strip-h);box-sizing:border-box;padding:0 14px;gap:6px}
  #vld-picker-label{font-size:11px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
  #vld-picker-count{font-size:11px;color:#aaa;white-space:nowrap}
  #vld-picker{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  #vld-xsd-panel{flex-shrink:0;width:320px;min-width:200px;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #eee;background:#fff;position:relative}
  #vld-tree-actions{flex-shrink:0;display:flex;align-items:stretch;gap:0;border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,#dde);background:var(--hover);height:var(--strip-h);box-sizing:border-box}
  #vld-view-wrap{position:relative;display:flex;align-items:stretch}
  #vld-xsd-scroll{flex:1;overflow-y:auto;padding:14px 8px 18px;overscroll-behavior:contain;font-size:12px}
  #vld-xml-panel{flex:1;min-width:200px;display:flex;flex-direction:column;overflow:hidden;background:#fff;position:relative}
  #vld-editor{flex:1;min-height:0;overflow:hidden}
  #vld-xml-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;color:#bbb;pointer-events:none;text-align:center;white-space:nowrap}
  #vld-editor-wrap{position:relative;flex:1;min-height:0;overflow:hidden;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--primary) 12%,#dde)}
  #vld-editor-wrap #vld-editor{position:absolute;inset:0}
  .xml-ns-prefix{color:#8a9ab8 !important}
  .vld-json-type-hint{color:#aaa !important;font-style:italic;pointer-events:none}
  .vld-monaco-error-line{background:rgba(192,57,43,.08) !important}
  .vld-monaco-warn-line{background:rgba(230,126,34,.08) !important}
  .vld-glyph-error,.vld-glyph-warn{width:8px !important;height:8px !important;border-radius:50%;margin:auto;margin-left:4px}
  .vld-glyph-error{background:#c0392b}
  .vld-glyph-warn{background:#e67e22}
  /* amber "fill me" lightbulb — same symbol as the toolbar Suggestions toggle */
  .vld-glyph-suggest{width:15px !important;height:15px !important;margin:auto;margin-left:1px;cursor:pointer;background-repeat:no-repeat;background-position:center;background-size:14px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E")}
  /* toolbar Suggestions toggle: label stays the normal button color; only the bulb changes —
     amber when on, default text color when off */
  #vld-suggest-btn.sug-on svg{color:#e0a100}
  /* Optionals toggle: same idea — icon lightens (amber/gold) when optionals are shown,
     falls back to the default text color when hidden; the label never changes */
  #vld-unified-optionals-btn.opt-on svg{color:#e0a100}
  .vld-squiggle-error{text-decoration:underline wavy #c0392b;text-underline-offset:2px}
  .vld-squiggle-warn{text-decoration:underline wavy #e67e22;text-underline-offset:2px}
  .vld-node-hl{background:rgba(44,133,220,.25);border-radius:2px}
  .vld-node-hl-line{background:rgba(255,183,0,.3) !important}
  .vld-occ-hl-line{background:rgba(44,133,220,.16) !important}
  #vld-editor-wrap .monaco-hover{font-size:12px !important;line-height:1.5 !important}
  .vld-cursor-row>.t-row{border-left:3px solid #2c85dc !important;background:rgba(255,183,0,.3) !important}
  .vld-clicked-row>.t-row{background:rgba(255,183,0,.3) !important}
  #vld-results-resizer{flex-shrink:0;height:8px;cursor:row-resize;background:#f4f4f6;border-top:1px solid #ddd;border-bottom:1px solid #ddd;display:none;align-items:center;justify-content:center}
  #vld-results-resizer::after{content:'';display:block;width:32px;height:3px;border-radius:2px;background:#ccc}
  #vld-results-resizer:hover,#vld-results-resizer.dragging{background:#e8e8f0}
  #vld-results-resizer:hover::after,#vld-results-resizer.dragging::after{background:#aab}
  #vld-results-wrap{flex-shrink:0;display:none;flex-direction:column;overflow:hidden;background:var(--hover);border-top:1px solid color-mix(in srgb,var(--primary) 18%,#dde)}
  #vld-results-wrap.visible{display:flex}
  #vld-results-wrap.collapsed{height:28px !important}
  #vld-results-summary{display:none;align-items:center;padding:0 14px;height:28px;font-size:12px;cursor:pointer;gap:8px;white-space:nowrap;overflow:hidden;user-select:none;transition:background .15s}
  #vld-results-summary:hover{background:rgba(0,0,0,.04)}
  #vld-results-wrap.has-errors #vld-results-summary{background:#fff3f3}
  #vld-results-wrap.has-errors #vld-results-summary:hover{background:#ffe8e8}
  #vld-results-wrap.has-warns:not(.has-errors) #vld-results-summary{background:#fffbe6}
  #vld-results-wrap.has-warns:not(.has-errors) #vld-results-summary:hover{background:#fff5cc}
  #vld-results-wrap.has-ok #vld-results-summary{background:#f0fff4}
  #vld-results-wrap.has-ok #vld-results-summary:hover{background:#e0fbe8}
  #vld-results-wrap.collapsed #vld-results-summary{display:flex}
  #vld-results-wrap.collapsed #vld-results{display:none}
  #vld-results{flex:1;overflow-y:auto;padding:10px 14px;font-size:12px}
  #vld-no-match{padding:16px;font-size:12px;color:#c0392b;text-align:center}
  .vld-issue{padding:5px 8px;border-radius:5px;border-left:3px solid;margin-bottom:5px;font-size:12px;line-height:1.5;cursor:pointer}
  .vld-issue:hover{opacity:.8}
  .vld-error{background:#fff3f3;border-color:#c0392b;color:#8b0000}
  .vld-warn{background:#fffbe6;border-color:#e67e22;color:#7a4800}
  .vld-ok{background:#f0fff4;border-color:#1a7a4a;color:#155724;font-weight:600;cursor:default}
  .vld-suggest{background:#fffaf0;border-color:#e0a100;color:#7a5a00}
  .vld-suggest::before{content:"💡 ";}
  .vld-error-row>.t-row{border-left:3px solid #c0392b !important}
  .vld-warn-row>.t-row{border-left:3px solid #e67e22 !important}
  .vld-focused-error>.t-row{border-left:3px solid #c0392b !important;outline:2px solid #c0392b;outline-offset:-2px}
  .vld-focused-warn>.t-row{border-left:3px solid #e67e22 !important;outline:2px solid #e67e22;outline-offset:-2px}
  .vld-not-found-row>.t-row{background:#fff3e8 !important}
  .vld-present-row>.t-row>.t-toggle{border-color:#8fcab0}
  .vld-present-row>.t-row>.t-name{color:#186a42}
  .vld-value-chips{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;margin-left:auto;padding-left:6px}
  .vld-value-chip{display:inline-flex;align-items:center;max-width:220px;padding:1px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:#1a5c33;background:#e6f4ea;border:1px solid #b8dfc4;border-radius:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
  .vld-value-coord{color:#8892a6;margin-right:4px;flex-shrink:0}
  .vld-value-chip:hover{border-color:#8fbf9d;background:#dcefe1}
  .vld-value-chip.vld-value-invalid{color:#8a1f3d;background:#fbe3ea;border-color:#f0b8ca}
  .vld-value-chip.vld-value-invalid:hover{border-color:#e592ac;background:#f8d4e0}
  .vld-value-chip.vld-value-empty:not(.vld-value-invalid){color:#98a2b3;font-style:italic;background:#eef1f6;border-color:#d8dce4}
  .vld-value-chip.vld-value-editing{cursor:default;max-width:none;padding:0;background:none;border:none;gap:3px}
  .vld-value-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;padding:1px 5px;border:1px solid #2c85dc;border-radius:3px;width:140px;outline:none}
  .vld-chip-btn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex-shrink:0;padding:0;background:#fff;border:1px solid #d8dce4;border-radius:3px;cursor:pointer;font:inherit;font-size:10px;line-height:1;color:#8892a6}
  .vld-chip-btn.vld-chip-ok:hover{color:#1a5c33;background:#e6f4ea;border-color:#b8dfc4}
  .vld-chip-btn.vld-chip-undo:hover{color:#2c4a7c;background:#eef2fa;border-color:#c3cfe4}
  .vld-chip-btn.vld-chip-del:hover{color:#8a1f3d;background:#fbe3ea;border-color:#f0b8ca}
  .vld-issue.vld-active{outline:2px solid #666;outline-offset:-2px}
  .vld-enum-fix{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;font-weight:500}
  .vld-enum-fix:hover{text-decoration-style:solid}
  .vld-missing-fix-btn{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;font-weight:500}
  .vld-missing-fix-btn:hover{text-decoration-style:solid}
  .vld-delete-text-fix{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;font-weight:500}
  .vld-delete-text-fix:hover{text-decoration-style:solid}
  #vld-xml-strip{flex-shrink:0;display:flex;align-items:stretch;gap:0;border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,#dde);background:var(--hover);height:var(--strip-h);box-sizing:border-box;overflow:hidden}
  .xml-search-match-0{background:rgba(255,241,118,0.6);border-radius:2px}
  .xml-search-match-1{background:rgba(165,214,167,0.6);border-radius:2px}
  .xml-search-match-2{background:rgba(144,202,249,0.6);border-radius:2px}
  .xml-search-match-3{background:rgba(248,187,208,0.6);border-radius:2px}
  .xml-search-match-4{background:rgba(255,204,128,0.6);border-radius:2px}
  #vld-xml-strip,#vld-tree-actions,#detail-actions,#vld-unified-actions{container-type:inline-size;container-name:strip}
  @container strip (max-width:480px){.btn-label{display:none}}
  .vld-nav-item{padding:7px 12px 7px 14px;font-size:12px;cursor:pointer;color:#333;border-left:3px solid transparent;display:flex;flex-direction:column;gap:1px}
  .vld-nav-item-name{font-weight:500;line-height:1.3}
  .vld-nav-item-file{font-size:10px;color:#aaa;line-height:1.2}
  .vld-nav-item:hover{background:var(--hover)}
  .vld-nav-item.active{border-left-color:var(--primary);background:var(--selection);color:var(--primary)}
  .vld-nav-item.active .vld-nav-item-name{font-weight:700}
  .vld-nav-item.active .vld-nav-item-file{color:#7a94c4}
  #vld-nav-empty{padding:16px 12px;font-size:12px;color:#999;text-align:center}
  .vld-nav-file-hdr{padding:8px 14px 3px;font-size:10px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px;user-select:none}
  .vld-nav-item{padding:4px 12px 4px 22px}
  /* ── legal footer ── */
  #legal-footer{position:relative;z-index:101;flex-shrink:0;background:var(--primary);display:flex;align-items:center;justify-content:center;gap:16px;height:22px;font-size:11px;color:rgba(255,255,255,.4);user-select:none}
  #legal-footer .footer-sha{position:absolute;right:12px;font-family:monospace;font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.03em}
  #legal-footer a{color:rgba(255,255,255,.4);text-decoration:none;cursor:pointer}
  #legal-footer a:hover{color:rgba(255,255,255,.85);text-decoration:none}
  #legal-footer span{color:rgba(255,255,255,.2)}
  /* ── legal modal ── */
  #legal-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;align-items:center;justify-content:center}
  #legal-modal.open{display:flex}
  #legal-modal-box{background:#fff;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.22);width:min(680px,94vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
  #legal-modal-header{display:flex;align-items:stretch;border-bottom:1px solid #eee;flex-shrink:0}
  .legal-tab{padding:12px 20px;font-size:13px;font-weight:600;color:#999;cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none}
  .legal-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
  .legal-tab:hover:not(.active){color:#555;background:#f7f8fa}
  #legal-modal-close{margin-left:auto;background:none;border:none;font-size:20px;color:#bbb;cursor:pointer;padding:0 16px;line-height:1}
  #legal-modal-close:hover{color:#555}
  #legal-modal-body{overflow-y:auto;padding:24px 28px;font-size:13px;color:#444;line-height:1.7}
  #legal-modal-body h2{font-size:15px;font-weight:700;color:#222;margin:0 0 14px}
  #legal-modal-body h3{font-size:13px;font-weight:700;color:#333;margin:18px 0 6px}
  #legal-modal-body p{margin:0 0 10px}
  #legal-modal-body address{font-style:normal;margin:0 0 10px;line-height:1.9}
  .legal-email{unicode-bidi:bidi-override;direction:rtl}
  /* ── auto-fill hint bubble ── */
  #autofill-hint{position:relative}
  #autofill-hint::before,#autofill-hint::after{content:'';position:absolute;left:var(--arrow-left,50%);transform:translateX(-50%);border-style:solid;border-left-color:transparent;border-right-color:transparent;pointer-events:none}
  #autofill-hint::before{top:-7px;border-width:0 6px 7px;border-top-color:transparent;border-bottom-color:color-mix(in srgb,var(--primary) 20%,#dde)}
  #autofill-hint::after{top:-5px;border-width:0 5px 6px;border-top-color:transparent;border-bottom-color:#fff}
  /* ── screenshot info dialog ── */
  #snap-info-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:center;justify-content:center}
  #snap-info-dialog{background:#fff;border-radius:12px;padding:24px 26px 20px;max-width:440px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,.22);position:relative}
  .wizard-close-btn{position:absolute;top:10px;right:12px;background:none;border:none;font-size:18px;line-height:1;color:#bbb;cursor:pointer;padding:4px 6px;border-radius:4px}
  .wizard-close-btn:hover{color:#555;background:#f0f0f0}
  #snap-info-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eee}
  #snap-info-title{font-size:15px;font-weight:700;color:#222;margin-bottom:5px}
  #snap-info-subtitle{font-size:12px;color:#777;line-height:1.55}
  .snap-wizard-page{display:none;flex-direction:column;gap:14px;margin-bottom:20px}
  .snap-wizard-page.active{display:flex}
  .snap-anim-box{background:#f6f7f9;border:1px solid #e2e4e8;border-radius:8px;height:150px;position:relative;overflow:hidden;display:flex;align-items:center;padding:12px 14px}
  .snap-wizard-title{font-size:14px;font-weight:600;color:#222}
  .snap-wizard-text{font-size:12.5px;color:#555;line-height:1.6}
  .snap-wizard-footer{display:flex;flex-direction:column;gap:8px}
  .snap-wizard-top-row{display:flex;align-items:center;gap:8px}
  .snap-dots{display:flex;gap:6px;align-items:center}
  .snap-dot{width:7px;height:7px;border-radius:50%;background:#d0d4dc;cursor:pointer;transition:background .2s,transform .2s}
  .snap-dot.active{background:var(--primary,#1a73e8);transform:scale(1.2)}
  .snap-dismiss{font-size:12px;color:#777;display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;margin-left:8px}
  .snap-dismiss input{cursor:pointer;accent-color:var(--primary);width:13px;height:13px}
  .snap-wizard-btn-row{display:flex;align-items:center;gap:8px;justify-content:flex-end}
  .snap-info-cancel{background:none;border:1px solid #d0d0d0;border-radius:6px;padding:6px 14px;font-size:13px;color:#555;cursor:pointer;white-space:nowrap}
  .snap-info-cancel:hover{background:#f5f5f5;border-color:#bbb}
  .snap-info-go{background:var(--primary,#1a73e8);border:none;border-radius:6px;padding:6px 16px;font-size:13px;color:#fff;font-weight:500;cursor:pointer;white-space:nowrap}
  .snap-info-go:hover{filter:brightness(1.08)}
  /* autofill info dialog */
  #autofill-info-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:center;justify-content:center}
  #autofill-info-dialog{background:#fff;border-radius:12px;padding:24px 26px 20px;max-width:400px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,.22);position:relative}
  #autofill-info-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eee}
  #autofill-info-title{font-size:15px;font-weight:700;color:#222;margin-bottom:5px}
  #autofill-info-subtitle{font-size:12px;color:#777;line-height:1.55}
  .afil-xml{font-family:monospace;font-size:10.5px;line-height:1.75;color:#555;background:#f8f9fb;border:1px solid #e4e6ea;border-radius:5px;padding:8px 12px}
  .afil-indent{padding-left:16px}
  .afil-tag{color:#2563eb}
  .afil-val{color:#16a34a;font-weight:600;animation:afil-val-appear 4s ease-in-out infinite}
  .afil-val-1{animation-delay:0s}
  .afil-val-2{animation-delay:.12s}
  .afil-val-3{animation-delay:.24s}
  .afil-btn-row{display:flex;justify-content:flex-end;margin-top:4px}
  .afil-btn{display:inline-flex;align-items:center;gap:5px;background:var(--primary,#2c4a7c);color:#fff;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:500;cursor:default;animation:afil-btn-click 4s ease-in-out infinite}
  @keyframes afil-val-appear{
    0%,28%{opacity:0}
    38%,76%{opacity:1}
    86%,100%{opacity:0}
  }
  .afil-pulse{animation:afil-pulse 1.6s ease-in-out infinite !important;opacity:1 !important}
  @keyframes afil-pulse{
    0%,100%{background:transparent;color:var(--primary);opacity:.7;box-shadow:none}
    50%{background:var(--primary,#2c4a7c);color:#fff;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}
  }
  @keyframes afil-btn-click{
    0%,20%{filter:brightness(1);transform:scale(1)}
    24%,28%{filter:brightness(1.15);transform:scale(.94)}
    34%,100%{filter:brightness(1);transform:scale(1)}
  }
  /* intro wizard */
  #intro-info-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000}
  #intro-info-dialog{background:#fff;border-radius:12px;padding:24px 26px 20px;max-width:440px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,.22);position:relative}
  #intro-info-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eee}
  #intro-info-title{font-size:15px;font-weight:700;color:#222;margin-bottom:5px}
  #intro-info-subtitle{font-size:12px;color:#777;line-height:1.55}
  .sani-vbtn.sani-exp-all-btn{animation:intro-exp-click 10s ease-in-out infinite!important}
  .sani-vbtn.sani-col-all-btn{animation:intro-col-click 10s ease-in-out infinite!important}
  .sani-all-expand{overflow:hidden;padding-left:14px;animation:intro-all-expand 10s ease-in-out infinite}
  @keyframes intro-exp-click{
    0%,8%{border-color:transparent;background:transparent;transform:scale(1)}
    14%,18%{border-color:var(--primary);background:var(--hover);transform:scale(.95)}
    24%,100%{border-color:transparent;background:transparent;transform:scale(1)}
  }
  @keyframes intro-col-click{
    0%,52%{border-color:transparent;background:transparent;transform:scale(1)}
    58%,62%{border-color:var(--primary);background:var(--hover);transform:scale(.95)}
    68%,100%{border-color:transparent;background:transparent;transform:scale(1)}
  }
  @keyframes intro-all-expand{
    0%,20%{max-height:0;opacity:0}
    30%,57%{max-height:125px;opacity:1}
    72%,100%{max-height:0;opacity:0}
  }
  .intro-snap-wrapper{position:relative;padding:4px 6px;border-radius:3px 0 3px 3px;animation:intro-snap-capture 8s ease-in-out infinite}
  .intro-snap-bc{font-size:9px;color:#888;margin-bottom:5px;border-bottom:1px solid #e8eaf0;padding-bottom:4px}
  .intro-snap-fold{position:absolute;top:0;right:0;width:0;height:0;border-top:10px solid var(--primary,#2c4a7c);border-left:10px solid transparent;animation:intro-snap-fold 8s ease-in-out infinite}
  @keyframes intro-snap-capture{
    0%,34%{outline:2px solid transparent;background:transparent}
    43%,78%{outline:2px solid var(--primary,#2c4a7c);background:#fff}
    88%,100%{outline:2px solid transparent;background:transparent}
  }
  @keyframes intro-snap-fold{
    0%,34%{opacity:0;transform:scale(0)}
    43%,78%{opacity:1;transform:scale(1)}
    88%,100%{opacity:0;transform:scale(0)}
  }
  .sani-screenshot-click-btn{animation:intro-screenshot-click 8s ease-in-out infinite}
  @keyframes intro-screenshot-click{
    0%,25%{transform:scale(1)}
    30%{transform:scale(.92)}
    34%,100%{transform:scale(1)}
  }
  .intro-xml-stage{position:relative}
  .intro-xml-src-tree{font-size:11px;line-height:1.75;color:#444;animation:intro-xml-src 4.5s ease-in-out infinite}
  @keyframes intro-xml-src{
    0%,22%{opacity:1}
    32%,100%{opacity:0}
  }
  .intro-xml-gen{position:absolute;top:0;left:0;right:0;font-family:monospace;font-size:10px;line-height:1.65;color:#555;background:#f8f9fb;border:1px solid #e4e6ea;border-radius:5px;padding:6px 10px;animation:intro-xml-gen 4.5s ease-in-out infinite}
  @keyframes intro-xml-gen{
    0%,32%{opacity:0}
    42%,77%{opacity:1}
    87%,100%{opacity:0}
  }
  .sani-bcbar{display:flex;align-items:center;gap:4px;font-size:10.5px;color:#555;background:#f6f7fa;border:1px solid #e2e4e8;border-radius:5px;padding:5px 10px;width:100%;box-sizing:border-box}
  .sani-bc-word{color:var(--primary,#2c4a7c);font-weight:500}
  .sani-bc-sep{color:#bbb;flex-shrink:0}
  .sani-copy-btn{margin-left:auto;display:flex;align-items:center;padding:2px 5px;border-radius:3px;border:1px solid transparent;animation:intro-copy-hl 4.5s ease-in-out infinite;flex-shrink:0}
  .sani-copy-confirm{font-size:10px;color:#16a34a;font-weight:600;white-space:nowrap;margin-left:4px;animation:intro-copy-confirm 4.5s ease-in-out infinite}
  @keyframes intro-copy-hl{
    0%,20%{color:#bbb;background:transparent;border-color:transparent}
    28%,36%{color:var(--primary);background:var(--hover);border-color:var(--primary)}
    44%,100%{color:#bbb;background:transparent;border-color:transparent}
  }
  @keyframes intro-copy-confirm{
    0%,35%{opacity:0;transform:translateX(-4px)}
    43%,68%{opacity:1;transform:translateX(0)}
    76%,100%{opacity:0;transform:translateX(0)}
  }
  /* mini tree */
  .sani-tree{font-size:11px;line-height:1.8;color:#444;flex-shrink:0;width:150px}
  .sani-node{padding:0 4px;border-radius:2px;white-space:nowrap}
  .sani-node.sani-root,.sani-node.sani-parent{font-weight:500;color:#333}
  .sani-target{animation:sani-node-hl 4.5s ease-in-out infinite}
  .sani-ctx{position:absolute;left:116px;top:26px;background:#fff;border:1px solid #d4d7e0;border-radius:6px;box-shadow:0 3px 12px rgba(0,0,0,.14);font-size:10.5px;overflow:hidden;min-width:108px;animation:sani-ctx-show 4.5s ease-in-out infinite}
  .sani-cursor{position:absolute;left:108px;top:28px;pointer-events:none;animation:sani-cursor-appear 6s ease-in-out infinite}
  .sani-mouse-body{width:18px;height:26px;border:1.5px solid #999;border-radius:9px 9px 6px 6px;overflow:hidden;background:#f5f5f5;position:relative}
  .sani-mouse-rbtn{position:absolute;right:0;top:0;width:50%;height:55%;background:var(--primary,#1a73e8);border-radius:0 7px 0 0;opacity:0;animation:sani-rbtn-click 6s ease-in-out infinite}
  .sani-mouse-divider{position:absolute;left:50%;top:0;transform:translateX(-50%);width:1px;height:14px;background:#ccc}
  .sani-mouse-wheel{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:3px;height:6px;background:#ccc;border-radius:1.5px}
  .sani-ctx-row{padding:4px 10px;color:#444;white-space:nowrap}
  .sani-ctx-row.hl{animation:sani-ctx-hl 4.5s ease-in-out infinite}
  /* view anim */
  .sani-view-col{display:flex;flex-direction:column;gap:5px;width:100%}
  .sani-toolbar{display:flex;align-items:center;gap:1px;background:#f2f3f6;border:1px solid #e0e2e8;border-radius:5px;padding:2px 4px;width:100%;box-sizing:border-box}
  .sani-tb-btn{opacity:0.22;padding:3px 5px;border-radius:3px;display:flex;align-items:center;flex-shrink:0}
  .sani-tb-sep{width:1px;height:12px;background:#d0d2da;margin:0 2px;flex-shrink:0}
  .sani-vbtn{display:inline-flex;align-items:center;gap:4px;border:1px solid #ccc;border-radius:5px;padding:3px 8px 3px 7px;font-size:10.5px;color:#444;background:#fff;cursor:default;width:fit-content;animation:sani-vbtn-click 4.5s ease-in-out infinite}
  .sani-vdd{background:#fff;border:1px solid #d4d7e0;border-radius:5px;box-shadow:0 3px 10px rgba(0,0,0,.11);overflow:hidden;animation:sani-vdd-show 4.5s ease-in-out infinite}
  .sani-vdd-row{display:flex;align-items:center;gap:6px;padding:3px 9px;font-size:10.5px;color:#444}
  .sani-cb{width:11px;height:11px;border-radius:2px;border:1.5px solid #aaa;display:inline-block;flex-shrink:0;box-sizing:border-box}
  .sani-cb.on{background:var(--primary,#1a73e8);border-color:var(--primary,#1a73e8)}
  .sani-cb.tog{animation:sani-cb-anim 4.5s ease-in-out infinite}
  /* keyframes */
  @keyframes sani-node-hl{
    0%,12%{background:transparent}
    20%,75%{background:var(--selection,#e8effc)}
    84%,100%{background:transparent}
  }
  @keyframes sani-ctx-show{
    0%,22%{opacity:0;transform:scale(.95) translateY(-3px)}
    32%,72%{opacity:1;transform:scale(1) translateY(0)}
    82%,100%{opacity:0;transform:scale(.95) translateY(-3px)}
  }
  @keyframes sani-ctx-hl{
    0%,43%{background:transparent;color:#444;font-weight:400}
    51%,72%{background:var(--selection,#e8effc);color:var(--primary,#1a73e8);font-weight:500}
    82%,100%{background:transparent;color:#444;font-weight:400}
  }
  @keyframes sani-vbtn-click{
    0%,14%{background:#fff;border-color:#ccc;color:#444}
    22%,30%{background:var(--hover,#edf0ff);border-color:var(--primary,#1a73e8);color:var(--primary,#1a73e8)}
    38%,100%{background:#fff;border-color:#ccc;color:#444}
  }
  @keyframes sani-vdd-show{
    0%,25%{opacity:0;transform:translateY(-4px)}
    35%,78%{opacity:1;transform:translateY(0)}
    88%,100%{opacity:0;transform:translateY(-4px)}
  }
  @keyframes sani-cb-anim{
    0%,38%{background:var(--primary,#1a73e8);border-color:var(--primary,#1a73e8)}
    48%,70%{background:#fff;border-color:#aaa}
    80%,100%{background:var(--primary,#1a73e8);border-color:var(--primary,#1a73e8)}
  }
  /* (i) info button anim */
  .sani-irow{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#333;font-weight:500;width:100%;padding:2px 4px;border-radius:2px}
  .sani-card{font-size:9px;color:var(--primary,#1a73e8);border:1px solid var(--primary,#1a73e8);border-radius:2px;padding:0 3px;line-height:1.5;flex-shrink:0}
  .sani-iname{white-space:nowrap}
  .sani-ibtn{color:#888;border-radius:3px;width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;animation:sani-ibtn-hl 4.5s ease-in-out infinite}
  .sani-idetail{margin-top:6px;background:#f0f4ff;border:1px solid color-mix(in srgb,var(--primary,#1a73e8) 28%,#dde);border-radius:5px;padding:5px 8px;font-size:10px;color:#555;line-height:1.5;animation:sani-idetail-show 4.5s ease-in-out infinite}
  @keyframes sani-ibtn-hl{
    0%,12%{background:#fff;color:#888}
    18%,26%{background:#e8eeff;color:#2563eb}
    32%,72%{background:#fff;color:#888}
    76%,84%{background:#e8eeff;color:#2563eb}
    90%,100%{background:#fff;color:#888}
  }
  @keyframes sani-idetail-show{
    0%,28%{opacity:0;transform:translateY(5px)}
    36%,70%{opacity:1;transform:translateY(0)}
    82%,100%{opacity:0;transform:translateY(5px)}
  }
  /* highlight / mark feature */
  .sani-mark-anim-row{border-radius:0 4px 4px 0;animation:sani-mark-row-bg 6s ease-in-out infinite}
  .sani-mark-anim-cb-empty,.sani-mark-anim-cb-full{position:absolute;left:-18px;font-size:12px;line-height:1}
  .sani-mark-anim-cb-empty{color:#aaa;animation:sani-mark-empty-cb 6s ease-in-out infinite}
  .sani-mark-anim-cb-full{color:#f59e0b;animation:sani-mark-full-cb 6s ease-in-out infinite}
  @keyframes sani-mark-row-bg{
    0%,15%{background:transparent}
    22%,30%{background:var(--hover,#edf0ff)}
    38%,62%{background:#fff3c4}
    70%,78%{background:var(--hover,#edf0ff)}
    88%,100%{background:transparent}
  }
  @keyframes sani-mark-empty-cb{
    0%,15%{opacity:0}
    22%,28%{opacity:1}
    34%,62%{opacity:0}
    68%,76%{opacity:1}
    85%,100%{opacity:0}
  }
  @keyframes sani-mark-full-cb{
    0%,32%{opacity:0}
    38%,62%{opacity:1}
    68%,100%{opacity:0}
  }
  /* expand/collapse subtree anim */
  .sani-exprow{display:flex;align-items:center;gap:4px;font-size:10.5px;color:#333;padding:1px 4px}
  .sani-tog{width:20px;height:20px;border:1.5px solid #bbb;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;animation:sani-tog-hl 4.5s ease-in-out infinite}
  .sani-plus,.sani-minus{position:absolute;font-size:14px;font-weight:700;color:#444;line-height:1;user-select:none}
  .sani-plus{animation:sani-plus-show 4.5s ease-in-out infinite}
  .sani-minus{animation:sani-minus-show 4.5s ease-in-out infinite}
  .sani-subtree{padding-left:14px;overflow:hidden;animation:sani-subtree-show 4.5s ease-in-out infinite}
  @keyframes sani-tog-hl{
    0%,10%{border-color:#ccc;background:transparent}
    18%,25%{border-color:var(--primary,#1a73e8);background:var(--hover,#edf0ff)}
    32%,58%{border-color:#ccc;background:transparent}
    64%,71%{border-color:var(--primary,#1a73e8);background:var(--hover,#edf0ff)}
    78%,100%{border-color:#ccc;background:transparent}
  }
  @keyframes sani-plus-show{
    0%,27%{opacity:1}
    34%,62%{opacity:0}
    69%,100%{opacity:1}
  }
  @keyframes sani-minus-show{
    0%,27%{opacity:0}
    34%,62%{opacity:1}
    69%,100%{opacity:0}
  }
  @keyframes sani-subtree-show{
    0%,27%{max-height:0;opacity:0}
    36%,60%{max-height:80px;opacity:1}
    68%,100%{max-height:0;opacity:0}
  }
  /* page 0: show-only result stage (6s) */
  #snap-page-0 .sani-target{animation-name:sani-node-hl-p0;animation-duration:6s}
  #snap-page-0 .sani-ctx{animation-name:sani-ctx-show-p0;animation-duration:6s}
  #snap-page-0 .sani-ctx-row.hl{animation-name:sani-ctx-hl-p0;animation-duration:6s}
  .sani-fade-ctx{animation:sani-hide-after-ctx 6s ease-in-out infinite}
  @keyframes sani-node-hl-p0{
    0%,8%{background:transparent}
    14%,92%{background:var(--selection,#e8effc)}
    98%,100%{background:transparent}
  }
  @keyframes sani-ctx-show-p0{
    0%,16%{opacity:0;transform:scale(.95) translateY(-3px)}
    22%,52%{opacity:1;transform:scale(1) translateY(0)}
    60%,100%{opacity:0;transform:scale(.95) translateY(-3px)}
  }
  @keyframes sani-ctx-hl-p0{
    0%,30%{background:transparent;color:#444;font-weight:400}
    36%,52%{background:var(--selection,#e8effc);color:var(--primary,#1a73e8);font-weight:500}
    60%,100%{background:transparent;color:#444;font-weight:400}
  }
  @keyframes sani-cursor-appear{
    0%,2%{opacity:0}
    6%,20%{opacity:1}
    26%,100%{opacity:0}
  }
  @keyframes sani-rbtn-click{
    0%,13%{opacity:0}
    16%,21%{opacity:.75}
    26%,100%{opacity:0}
  }
  @keyframes sani-hide-after-ctx{
    0%,60%{opacity:1}
    68%,90%{opacity:0}
    97%,100%{opacity:1}
  }
  /* page 1: view preview rows */
  .sani-preview{display:flex;flex-direction:column;gap:3px;width:100%}
  .sani-prev-row{display:flex;align-items:center;gap:6px;font-size:11px;color:#444}
  .sani-type-badge{font-size:9.5px;color:#777;background:#ebebeb;border-radius:3px;padding:1px 4px;white-space:nowrap;flex-shrink:0}
  .sani-type-anim-go{animation:sani-type-vis 4.5s ease-in-out infinite}
  @keyframes sani-type-vis{
    0%,36%{opacity:1}
    46%,72%{opacity:0}
    80%,100%{opacity:1}
  }