*,*::before,*::after{box-sizing:border-box}
  *[hidden], [hidden]{display:none !important;pointer-events:none !important;visibility:hidden !important}
  :root{
    --line-hover:#bdb7b1;
    --wash-rgb:18,32,46;
    --paper:#f6f5f4; --paper-2:#ebeced; --card:#fcfcfc;
    --ink:#1b252b; --ink-2:#5c6062; --mut:#8a8f91;
    --accent:#1aa6df; --accent-2:#0f8ec4;
    --tint-2:#e7f5fd; --line:#cfc9c3;
    --ok:#22a565; --warn:#e0a11a; --danger:#d92d20;
    --disp:'Jost','Century Gothic',system-ui,sans-serif;
    --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);
    --card-surface:linear-gradient(180deg,#ffffff,#fbfbfa);
    --card-sheen:#ffffff;
    --hair:#eceae8;
    --card-tray:rgba(246,245,244,.72);
    --card-rest-shadow:0px 1px 2px #00000008,0px 4px 8px -2px #0000000a;
    --card-hover-border:#bdb7b1;
    --card-hover-shadow:0px 2px 4px #0000000a,0px 8px 16px -4px #0000000f;
    --rail:44px; --sb-w:238px; --sb-pad:6px; --ease-sb:cubic-bezier(.32,.72,0,1);
    --scrim: color-mix(in srgb, var(--paper) 52%, transparent);
    --scrim-blur: blur(5px) saturate(105%);
  }
  :root[data-theme="dark"]{
    --line-hover:rgba(255,255,255,.22);
    --wash-rgb:255,255,255;
    --paper:#18191b; --paper-2:#212225; --card:#26282b;
    --card-surface:linear-gradient(180deg,#2b2d31,#232528);
    --card-sheen:rgba(255,255,255,.055);
    --hair:rgba(255,255,255,.06);
    --card-tray:rgba(0,0,0,.16);
    --card-rest-shadow:0 1px 2px rgba(0,0,0,.45);
    --card-hover-border:rgba(255,255,255,.15);
    --card-hover-shadow:0 2px 6px rgba(0,0,0,.35),0 16px 34px -16px rgba(0,0,0,.8);
    --ink:#f5f9fc; --ink-2:#9ea3a6; --mut:#7a7f82;
    --tint:#3d3428; --tint-2:#2d2420;
    --stone:#2a2c2f; --dark:#0a0908; --line:#33363a; --navy-800:#0d0b0a;
    --accent:#1aa6df; --accent-2:#118cc0; --accent-ink:#e6edf3;
  }


  html, body {
    background: var(--paper);
    overscroll-behavior-x: none;
    overflow-x: clip;
  }
  .ag-main, .wrap {
    overflow-x: hidden;
  }
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit}
  button:focus, button:focus-visible, a:focus, a:focus-visible { outline: none !important; box-shadow: none !important; }
  h1,h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;margin:0}

  .ag-main{flex:1;min-width:0;display:flex;flex-direction:column}
  html::-webkit-scrollbar{width:10px;height:10px}
  html::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-thumb{background:rgba(128,128,128,.32);border-radius:99px;
    border:2px solid transparent;background-clip:content-box}
  html::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.55);
    border:2px solid transparent;background-clip:content-box}
  @supports (-moz-appearance:none){
    html{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.35) transparent}
  }

  /* ---- sidebar (same as projects.html / deployments.html) ---- */
  .ag-history::-webkit-scrollbar{width:0;height:0}
  @supports (-moz-appearance:none){ .ag-history{scrollbar-width:none} }
  .ag-history{position:sticky !important;top:0;align-self:flex-start;height:100vh;flex:0 0 0px;
    width:0;min-width:0;max-width:var(--sb-w);overflow:hidden;
    background:var(--paper);border-right:0 solid var(--line);box-sizing:border-box;
    transition:width .26s var(--ease),flex-basis .26s var(--ease),border-color .26s var(--ease);
    display:flex;flex-direction:column;z-index:100}
  .ag-history.on{width:var(--sb-w) !important;flex:0 0 var(--sb-w) !important;min-width:var(--sb-w) !important;border-right:1px solid var(--line);overflow:visible !important}
  .ag-hist-head,.ag-hist-tabs,.ag-hist-foot{width:100%;box-sizing:border-box}
  .ag-hist-head{display:flex;align-items:center;gap:8px;padding:10px 10px 12px 12px;width:100%;box-sizing:border-box}
  .ag-hist-mark{width:28px;height:28px;display:grid;place-items:center;flex:none}
  .ag-hist-mark img{width:23px;height:23px;display:block;object-fit:contain;border-radius:5px}
  /* The logo IS the toggle on this page — the floating button that used to
     do it is gone. It only ever appeared on hover, sat outside the rail it
     controlled, and was the thing that flickered. */
  .ag-hist-mark{cursor:pointer}
  .ag-hist-mark:hover{opacity:.82}
  .ag-hist-mark:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
  /* On a desktop the logo is the only control and the floating button is
     gone — it was the thing that flickered. On a phone the rail collapses to
     icons with no room for a close affordance inside it, so the button comes
     back there, and only while the panel is open. */
  @media (min-width:901px){
    /* Hidden only while the panel is CLOSED. Collapsed, the rail is a strip
       of icons and the logo in it is what opens the panel -- a second control
       floating outside the rail was the thing that flickered, so it stays
       gone there. Open, the logo has moved to the right of the head and the
       panel needs a way to close: that is this button, top-left, exactly
       where projects and deployments put it.

       This was a blanket display:none, which read as "the logo is the only
       control" -- true when collapsed, but it also took away the close
       button from an open panel on any desktop-width window. */
    #agDeskSidebarToggle:not(.on){display:none !important}
  }

  .ag-hist-search{margin-left:auto;margin-right:38px;flex:none;width:30px;height:30px;
    display:grid;place-items:center;border:1px solid transparent;border-radius:9px;
    background:none;color:var(--ink-2);cursor:pointer;transition:background .15s ease,color .15s ease}
  .ag-hist-search:hover{background:var(--paper-2);color:var(--ink)}
  .ag-hist-search svg{width:16px;height:16px}
  .ag-hist-brand-text{display:none;flex-direction:column;line-height:1.05;font-family:var(--disp);font-weight:800;font-size:.88rem;color:var(--ink);letter-spacing:-.01em;margin-left:6px}
  .ag-hist-brand-text span{display:block}
  .ag-ws-wrap{position:relative}
  .ag-ws{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);color:var(--ink) !important;border-radius:999px;padding:6px 10px 6px 6px;margin:8px 10px 8px;width:calc(100% - 20px);cursor:pointer;text-align:left;box-sizing:border-box}
  .ag-ws .av svg,.ag-user-main .av svg{width:13px;height:13px;color:#fff}
  .ag-ws .av{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:600;font-size:.8rem}
  .ag-ws .nm{color:var(--ink) !important;flex:1;min-width:0;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ag-ws svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
  .ag-ws .chev{transition:transform .16s var(--ease)}
  .ag-ws.open .chev{transform:rotate(180deg)}
  .ag-ws-menu{position:absolute;left:10px;right:10px;top:calc(100% - 2px);z-index:60;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;
    box-shadow:0 16px 40px -10px rgba(11,22,38,.32);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
  .ag-ws-menu.open{opacity:1;visibility:visible;transform:none}
  .ag-ws-signed{padding:8px 10px 10px;font-size:.78rem;color:var(--mut);border-bottom:1px solid var(--line);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ag-ws-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:.88rem;color:var(--ink);transition:.13s;text-decoration:none;border:0;background:none;width:100%;text-align:left;cursor:pointer}
  .ag-ws-item:hover{background:var(--paper-2)}
  .ag-ws-item svg{width:15px;height:15px;flex:none}
  .ag-hist-tabs{display:flex;flex-direction:column;gap:2px;padding:2px var(--sb-pad) 4px;width:100%;box-sizing:border-box;flex:0 0 auto;overflow:visible !important}
  .ag-hist-tab{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--ink);cursor:pointer;
    padding:7px 6px;border-radius:8px;font-size:.75rem;font-weight:450;text-align:left;transition:background .14s,color .14s;text-decoration:none}
  .ag-hist-tab .tab-ic{flex:none;width:18px;height:18px;display:grid;place-items:center;color:var(--ink-2)}
  .ag-hist-tab .tab-ic svg{width:16px;height:16px}
  .ag-hist-tab .tab-ic.ring{border:1px solid var(--line);border-radius:50%;background:var(--paper-2)}
  .ag-hist-tab:hover{background:var(--paper-2)}
  .ag-hist-tab.on{background:var(--paper-2);font-weight:600}
  .ag-hist-tab.on .tab-ic,.ag-hist-tab:hover .tab-ic{color:var(--ink)}
  .ag-hist-tab .lbl,.ag-user-main .nm,.ag-ws .nm,.ag-hist-brand-text{
    max-width:190px;opacity:1;overflow:hidden;white-space:nowrap;
    transition:max-width .26s var(--ease-sb),opacity .18s ease .06s}
  .ag-tab-new{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.05)}
  .ag-tab-new:hover{background:var(--card);filter:brightness(1.06)}
  .ag-tab-new .tab-ic.ring{color:var(--ink);background:var(--paper-2)}
  .ag-hist-chats{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:2px 0 4px}
  .ag-chats-ttl{font-size:.655rem;font-weight:450;color:var(--mut);padding:10px 10px 4px;flex:0 0 auto}
  .ag-chats-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 var(--sb-pad) 4px;display:flex;flex-direction:column;gap:2px}
  .ag-chats-list::-webkit-scrollbar{width:6px;height:6px}
  .ag-chats-list::-webkit-scrollbar-track{background:transparent}
  .ag-chats-list::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
  .ag-history:hover .ag-chats-list::-webkit-scrollbar-thumb{background:var(--line)}
  .ag-chats-list::-webkit-scrollbar-thumb:hover{background:var(--mut)}
  @supports (-moz-appearance:none){ .ag-chats-list{scrollbar-width:thin;scrollbar-color:var(--line) transparent} }
  .ag-chats-list > *{flex:0 0 auto}
  .ag-chat-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
    padding:7px 6px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:.75rem;
    white-space:nowrap;overflow:hidden;transition:background .14s,color .14s;border:0;background:none;cursor:pointer;text-align:left;font-family:inherit}
  .ag-chat-item:hover{background:var(--paper-2);color:var(--ink)}
  .ag-chat-item i{flex:none;width:18px;height:18px;display:grid;place-items:center;color:var(--ink-2);opacity:.95}
  .ag-chat-item i svg{width:16px;height:16px}
  .ag-chat-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ag-chat-item .sdot{width:6px;height:6px;border-radius:50%;background:var(--mut);flex:none;margin:0 6px}
  .ag-chats-empty{padding:14px;color:var(--mut);font-size:.8rem;line-height:1.5;text-align:center}
  .ag-hist-foot{flex:0 0 auto;padding:8px 10px 8px;border-top:1px solid var(--line);background:var(--paper);width:100%;box-sizing:border-box}
  .ag-hist-foot .ttl{font-size:.84rem;font-weight:600;padding:0 2px;margin-bottom:4px;color:var(--ink)}
  .ag-plan-alert{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.25);color:#f87171;font-size:.76rem;
    font-weight:500;padding:4px 8px;border-radius:6px;margin-bottom:6px;text-align:center;width:100%;box-sizing:border-box}
  .ag-meter-row{display:flex;align-items:center;gap:7px;padding:2px 0;width:100%;box-sizing:border-box}
  .ag-meter-row svg{width:14px;height:14px;flex:none;color:var(--ink-2)}
  .ag-meter-row .lab{flex:1;min-width:0;font-size:.78rem;color:var(--ink);font-weight:500}
  .ag-meter-row .lab i{display:block;font-style:normal;color:var(--mut);font-size:.70rem;font-weight:400;margin-top:0}
  .ag-meter{width:54px;height:5px;border-radius:999px;background:rgba(128,128,128,.18);overflow:hidden;flex:none}
  .ag-meter i{display:block;height:100%;border-radius:999px;background:#3b82f6;transition:width .4s var(--ease)}
  .ag-meter i.warn{background:var(--warn)}
  .ag-meter i.hot{background:var(--danger)}
  .ag-upgrade{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;padding:9px 12px;
    border:0;border-radius:9px;background:#0077ff;color:#fff;font-size:.9rem;font-weight:600;
    cursor:pointer;width:100%;box-sizing:border-box;text-decoration:none;transition:.15s}
  .ag-upgrade:hover{background:#0062cc}
  .ag-hist-install{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;font-size:.72rem;color:var(--mut);width:100%;box-sizing:border-box}
  .ag-hist-install svg{width:13px;height:13px;color:var(--ink-2);flex:none;transition:color .15s ease,transform .15s ease;cursor:pointer}
  .ag-hist-install svg:hover{color:#0077ff !important;transform:scale(1.15)}
  .ag-hist-install a:hover{color:var(--ink)}
  .ag-hist-links{display:flex;gap:8px;justify-content:center;margin-top:5px;font-size:.71rem;color:var(--mut);width:100%;box-sizing:border-box}
  .ag-hist-links a:hover{color:var(--ink)}
  @media (min-height:660px){ .ag-hist-chats{min-height:clamp(96px,18vh,260px)} }
  @media (min-height:560px) and (max-height:659px){ .ag-hist-chats{min-height:76px} }
  /* Compressed, not deleted.

     These two rows were display:none below 700px, and 700px of viewport is
     more than a laptop usually has once the browser's own chrome is taken
     off the screen — so "Install Souqi on ... Changelog" and the
     Terms / Privacy / Plans line were simply absent for most people, on
     every page with this rail. They are two 14px rows: the room comes from
     tightening what sits around them and letting the chat list give up a
     little more of its minimum, which it can afford because it scrolls. */
  @media (max-height:700px){
    .ag-hist-install{font-size:.68rem;gap:4px;margin-top:5px}
    .ag-hist-install svg{width:12px;height:12px}
    .ag-hist-links{font-size:.67rem;gap:7px;margin-top:4px}
    .ag-hist-chats{min-height:56px}
    .ag-hist-foot{padding-top:8px;padding-bottom:8px}
    .ag-meter-row{padding:2px 0}
  }
  @media (max-height:620px){
    .ag-meter-row .lab i{display:inline;margin-left:6px}
    .ag-meter-row{padding:1px 0}
    .ag-upgrade{margin-top:6px;padding:7px 12px}
    .ag-hist-foot{padding-top:6px;padding-bottom:6px}
  }
  .ag-hist-user{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:5px var(--sb-pad) 8px;
    background:var(--paper-2);width:100%;box-sizing:border-box}
  .ag-user-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;
    color:var(--ink);cursor:pointer;padding:5px 6px;border-radius:9px;font:inherit;text-align:left;transition:.14s}
  .ag-user-main:hover{background:var(--paper)}
  .ag-user-main .av{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:.76rem;font-weight:700}
  .ag-user-main .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:500}
  .ag-user-gear{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;background:none;
    color:var(--mut);cursor:pointer;border-radius:9px;transition:.14s}
  .ag-user-gear:hover{background:var(--paper);color:var(--ink)}
  .ag-user-gear svg{width:14px;height:14px}
  .ag-pv-toggle-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:9px;padding:6px 14px;height:34px;font-size:.85rem;font-weight:600;cursor:pointer;
    transition:all .2s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.03);outline:none !important}
  #agDeskSidebarToggle{position:fixed !important;top:10px !important;left:10px !important;z-index:999999 !important;
    padding:5px 10px !important;height:32px !important;font-size:.82rem !important}
  .ag-pv-toggle-btn:hover{border-color:#cbd5e1;background:var(--paper-2);color:var(--ink)}
  .ag-pv-toggle-btn.on{background:var(--card);color:var(--ink)}
  .ag-pv-toggle-btn .pane-left{transition:fill .2s ease;fill:transparent}
  .ag-pv-toggle-btn.on .pane-left{fill:var(--accent)}
  .ag-pv-toggle-btn svg{width:16px;height:16px;flex:none}

  /* ---- desktop sidebar rail (copied from projects.html) ---- */
  @media (min-width:901px){
    .ag-history{flex:0 0 var(--rail) !important;width:var(--rail) !important;min-width:var(--rail) !important;
      border-right:1px solid var(--line);overflow:hidden;
      transition:width .34s var(--ease-sb),flex-basis .34s var(--ease-sb),margin-right .34s var(--ease-sb);
      transition-delay:.16s;will-change:width;z-index:100}
    .ag-history.on{width:var(--sb-w) !important;flex:0 0 var(--sb-w) !important;min-width:var(--sb-w) !important;
      overflow:visible !important;box-shadow:none;margin-right:0}
    @media (hover:hover) and (pointer:fine){
      .ag-history:not(.on):not(.hover-suppressed):hover,
      .ag-history.hover-open:not(.on):not(.hover-suppressed){
        width:var(--sb-w) !important;flex-basis:var(--sb-w) !important;
        margin-right:calc(var(--rail) - var(--sb-w));
        overflow:visible !important;z-index:400 !important;transition-delay:0s;
        box-shadow:6px 0 28px -8px rgba(11,22,38,.28)}
    }
    .ag-history:not(.on):not(:hover):not(.hover-open) .lbl,
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-brand-text,
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-user-main .nm,
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-ws .nm{max-width:0 !important;opacity:0 !important;transition-delay:0s}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-ws .chev,
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-chats-ttl,
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-foot{display:none !important}

    /* This page still carried the old rule that hid Settings on the collapsed
       rail, and none of the layout that goes with keeping it: stacked under
       the avatar, both centred, and the name's flex gap zeroed so the circle
       does not sit off-centre. Same treatment as deployments/projects/code. */
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-user{
      flex-direction:column;align-items:center;gap:4px;
      padding-left:0 !important;padding-right:0 !important}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-user-main{
      flex:none;width:32px;padding:5px 0;justify-content:center;gap:0}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-user-gear{
      display:grid !important;flex:none;width:30px;height:24px}
    .ag-history:not(.on) .ag-ws-menu{display:none !important}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-chats{border-top:1px solid var(--line);margin:5px 9px 0;padding-top:6px}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-chats-list{padding:0;overflow:hidden}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-chat-item{width:100%;margin:0;padding:7px 0;justify-content:center;gap:0}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-chat-item span{display:none}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-chats-empty{display:none}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-head{padding:8px 0 4px !important;height:44px !important;flex:0 0 44px !important;overflow:hidden;justify-content:center}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-mark{margin:0 auto}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-search{display:none !important}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-tabs{padding:4px 0 6px !important;align-items:center}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-tab{width:32px;padding:7px 0;justify-content:center;gap:0}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-tab-new{background:transparent;box-shadow:none}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-tab-new .tab-ic.ring{background:var(--card);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06)}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-hist-user{background:transparent;justify-content:center}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-ws-wrap{padding:0 !important;display:flex;justify-content:center}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-ws{width:32px;margin:6px auto;padding:3px;justify-content:center;gap:0;background:transparent;border-color:transparent}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-chat-item .sdot{margin:0}
    #agDeskSidebarToggle:not(.on) span{display:none !important}
    #agDeskSidebarToggle:not(.on){padding:4px !important;width:30px !important;height:30px !important;
      left:calc(var(--sb-w) - 40px) !important;justify-content:center !important}
    /* HIDING IT IS A HOVER FEATURE, SO IT IS SCOPED LIKE ONE.

       Only a pointer that can hover can bring the button back, so on a
       touch screen these two rules are a trapdoor: the toggle is
       opacity:0 and pointer-events:none the moment the sidebar is
       collapsed, and the hover that un-hides it never happens. On an
       iPad the sidebar could not be opened at all — measured on
       /projects, /deployments and /security, where the rail sits at 44px
       and the only control that opens it is unreachable. (The builder
       escaped it by opening the sidebar on a tap of the rail itself, and
       by starting open; the same trapdoor is in its CSS.)

       The guard is the one the hover-to-open rule above already uses, so
       the two halves of the behaviour now appear and disappear together.
       Without a hover pointer the toggle simply stays visible, which is
       what every touch device needs anyway. */
    @media (hover:hover) and (pointer:fine){
      .ag-history:not(.on) ~ #agDeskSidebarToggle,
      .ag-history:not(.on) ~ * #agDeskSidebarToggle{opacity:0;pointer-events:none;transition:opacity .18s ease}
      .ag-history:not(.on):hover ~ #agDeskSidebarToggle,
      .ag-history:not(.on):hover ~ * #agDeskSidebarToggle,
      .ag-history:not(.on).hover-open ~ #agDeskSidebarToggle,
      .ag-history:not(.on).hover-open ~ * #agDeskSidebarToggle{opacity:1;pointer-events:auto}
    }
    #agDeskSidebarToggle.on span{display:none !important}
    #agDeskSidebarToggle.on{padding:4px !important;width:30px !important;height:30px !important;
      justify-content:center !important;left:calc(var(--sb-w) - 40px) !important}
    .ag-history.on .ag-hist-search{order:2;margin-left:auto;margin-right:0}
    .ag-history.on .ag-hist-mark{order:3;margin-left:0}
    .ag-history:hover .ag-hist-search,.ag-history.hover-open .ag-hist-search{order:2;margin-left:auto;margin-right:0}
    /* Collapsed, the head is centre-justified with no side padding and the
       28px logo lands at x=8. Hover-expanded it picks up the panel padding
       and lands at 12. Four pixels is not much, but it is the control moving
       under a cursor already resting on it, and this page has had enough of
       that. Pinned, so nothing shifts until the panel is genuinely open. */
    .ag-history:not(.on):hover .ag-hist-head{padding-left:8px !important}
    .ag-history:not(.on):hover .ag-hist-mark{margin-left:0 !important}

    /* NOT on :hover. On this page the logo is the control that opens the
       rail, so it must not move while the rail is merely hover-expanded:
       pointing at it slid it from x=8 to the far end of the widened panel,
       out from under the cursor, leaving you clicking the empty space where
       the only opener used to be. It moves right only when the panel is
       actually open (.on, the rule above), and at that moment the close
       button takes its place at x=7 — a handover, not a disappearance.

       .hover-open went with the script that set it; nothing adds it now. */
    #agDeskSidebarToggle:not(.on){left:7px !important}
    #agDeskSidebarToggle.on{left:7px !important}
    .ag-main .nav{padding-left:96px}
    .ag-history.on ~ .ag-main .nav{padding-left:clamp(18px,4vw,40px)}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-user-main{gap:0 !important;justify-content:center}
    .ag-history:not(.on):not(:hover):not(.hover-open) .ag-user-main .av{width:26px;height:26px;font-size:.82rem}
  }
  @media (max-width:900px){
    .ag-history{position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;
      height:100vh !important;width:240px !important;max-width:80vw !important;z-index:999999 !important;
      transform:translateX(-100%) !important;transition:transform .28s var(--ease) !important;box-shadow:4px 0 24px rgba(0,0,0,.5)}
    .ag-history.on{transform:translateX(0) !important}
    .ag-history:not(.on){
      width:var(--rail) !important;min-width:var(--rail) !important;max-width:var(--rail) !important;
      transform:translateX(0) !important;box-shadow:none !important;overflow:hidden !important;
      transition:width .28s var(--ease),transform .28s var(--ease) !important;
      /* 0, not 44px. That reservation held a gap at the top of the collapsed
         rail for the floating toggle that used to sit over it. The toggle is
         hidden while the rail is collapsed now — the logo opens it — so the
         gap was just pushing that logo 44px below where it sits on every
         other page. */
      padding-top:0 !important}
    .ag-main{padding-left:var(--rail)}
    .ag-history:not(.on) .lbl,
    .ag-history:not(.on) .ag-hist-brand-text,
    .ag-history:not(.on) .ag-user-main .nm,
    .ag-history:not(.on) .ag-ws .nm{max-width:0 !important;opacity:0 !important;overflow:hidden !important}
    .ag-history:not(.on) .ag-ws .chev,
    .ag-history:not(.on) .ag-hist-view,
    .ag-history:not(.on) .ag-chats-ttl,
    .ag-history:not(.on) .ag-hist-search,
    .ag-history:not(.on) .ag-ws-menu{display:none !important}
    .ag-history:not(.on) .ag-hist-chats{border-top:1px solid var(--line);margin:5px 6px 0;padding-top:6px}
    .ag-history:not(.on) .ag-hist-chats.is-empty{border-top:0;margin:0;padding-top:0}
    .ag-history:not(.on) .ag-chats-list{padding:0;overflow:hidden}
    .ag-history:not(.on) .ag-chat-item{width:32px;margin:0 auto;padding:7px 0;justify-content:center;gap:0}
    .ag-history:not(.on) .ag-chat-item .sdot{margin:0}
    .ag-history:not(.on) .ag-chat-item span{display:none}
    .ag-history:not(.on) .ag-chats-empty{display:none}
    .ag-history:not(.on) .ag-hist-head{padding:8px 0 4px !important;height:44px !important;flex:0 0 44px !important;overflow:hidden;justify-content:center}
    .ag-history:not(.on) .ag-hist-mark{margin:0 auto}
    .ag-history:not(.on) .ag-ws-wrap{padding:0 !important;display:flex;justify-content:center}
    .ag-history:not(.on) .ag-ws{width:32px !important;margin:0 !important;padding:5px 0 !important;
      justify-content:center;gap:0;background:transparent !important;border-color:transparent !important}
    .ag-history:not(.on) .ag-hist-tabs{padding:4px 0 6px !important;align-items:center}
    .ag-history:not(.on) .ag-hist-tab{width:32px;padding:7px 0;justify-content:center;gap:0}
    .ag-history:not(.on) .ag-tab-new{background:transparent;box-shadow:none}
    .ag-history:not(.on) .ag-hist-user{background:transparent}
    .ag-history:not(.on) .ag-hist-user{flex-direction:column;gap:3px;padding-left:0;padding-right:0}
    .ag-history:not(.on) .ag-user-main{flex:none;width:32px;padding:5px 0;justify-content:center}
    .ag-history:not(.on) .ag-user-main{gap:0 !important;justify-content:center}
    .ag-history:not(.on) .ag-user-main .av{width:26px;height:26px;font-size:.82rem}
    .ag-history:not(.on) .ag-user-gear{display:grid !important;flex:none;width:30px;height:24px}
    .ag-history:not(.on) .ag-hist-foot{display:none !important}
    /* Open, the head reads: [close button] … [search] [logo]. The button
       takes the left, so the search and the mark are pushed to the right end
       rather than sitting under it — the same order deployments, projects and
       code use, so the rail is the same object on every page.

       Closed, there is no button at all: the rail is 44px of icons and the
       logo at the top of it is what opens the panel. A floating button over
       a rail that is already one tap wide is one control too many. */
    .ag-history.on .ag-hist-head{flex:0 0 42px !important;
      padding-top:6px !important;padding-bottom:4px !important}
    .ag-history.on .ag-hist-search{order:2;margin-left:auto;margin-right:0}
    .ag-history.on .ag-hist-mark{order:3;margin-left:0}
    #agDeskSidebarToggle:not(.on){display:none !important}
    #agDeskSidebarToggle.on{left:7px !important}

    #agDeskSidebarToggle{position:fixed !important;top:10px !important;left:7px !important;
      z-index:999999 !important;padding:4px !important;width:30px !important;height:30px !important;
      justify-content:center !important}
    #agDeskSidebarToggle span{display:none !important}
    /* 7px, not the panel edge. The logo now sits at the right of the open
       head (see above), so parking the close button there put the two on top
       of each other. Left, like every other page. */
    #agDeskSidebarToggle.on{left:7px !important}
    .ag-history:not(.on){border-right:1px solid var(--line) !important}
    .ag-history.on{box-shadow:6px 0 28px -10px rgba(11,22,38,.28) !important}
    .ag-hist-backdrop{display:block !important;position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:min(var(--sb-w),80vw) !important;
      background:var(--scrim) !important;
      backdrop-filter:var(--scrim-blur) !important;z-index:999998 !important;opacity:0 !important;pointer-events:none !important;transition:opacity .28s ease !important}
    .ag-hist-backdrop.on{opacity:1 !important;pointer-events:auto !important}
  }

  /* ---- page header ---- */
  .nav{display:flex;align-items:center;gap:16px;padding:14px clamp(18px,4vw,40px) 14px 114px;border-bottom:none;background:var(--paper);transition:padding-left .26s var(--ease)}
  .ag-history.on ~ .ag-main .nav{padding-left:clamp(18px,4vw,40px)}
  .nav .sp{margin-left:auto}
  .btn-g{padding:9px 15px;border:1px solid var(--line);border-radius:10px;font-size:.86rem;font-weight:600;transition:.16s;background:var(--card)}
  .btn-g:hover{border-color:var(--line-hover)}
  .btn-d{padding:9px 17px;border-radius:10px;background:var(--accent);color:#fff;font-size:.86rem;font-weight:600;transition:.16s}
  .btn-d:hover{background:var(--accent-2)}
  .btn-g,.btn-d{white-space:nowrap}
  @media (max-width:900px){
    .nav{display:none}
    .wrap{padding-top:14px}
  }

  /* ---- main content ---- */
  .wrap{max-width:1180px;margin:0 auto;padding:clamp(26px,5vw,46px) clamp(18px,4vw,40px) 80px;width:100%}
  .phead{display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .phead svg.ic{width:22px;height:22px;color:var(--ink)}
  .phead h1{font-size:clamp(1.5rem,3vw,1.9rem)}

  /* ---- security banner ---- */
  .sec-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 20px;border-radius:12px;margin-bottom:24px;
    transition:background .3s ease, border-color .3s ease}
  .sec-banner.clean{background:rgba(34,165,101,.08);border:1px solid rgba(34,165,101,.22)}
  .sec-banner.warn{background:rgba(217,45,32,.06);border:1px solid rgba(217,45,32,.2)}
  .sec-banner svg{width:28px;height:28px;flex:none}
  .sec-banner.clean svg{color:var(--ok)}
  .sec-banner.warn svg{color:var(--danger)}
  /* flex:1 made the text block eat the whole row, which pinned the shield to
     the far left with the headline floating a third of the way in. flex:none
     keeps shield and text as one group, and justify-content centres that
     group — the same treatment the deployment danger box and the preview
     placeholder get. */
  /* flex:none centres the shield-and-text group instead of stretching it —
     but with nothing allowed to shrink, a 352px phone pushed the sentence
     straight out of the box. It may shrink; it just may not grow. */
  .sec-banner .sec-banner-text{flex:0 1 auto;min-width:0;text-align:center}
  .sec-banner .sec-banner-text b{display:block;font-size:.95rem;font-weight:600;margin-bottom:2px}
  .sec-banner.clean .sec-banner-text b{color:var(--ok)}
  .sec-banner.warn .sec-banner-text b{color:var(--danger)}
  .sec-banner .sec-banner-text span{display:block;font-size:.82rem;color:var(--ink-2)}
  @media (max-width:560px){
    /* Stacked once the row no longer fits: shield over text, both centred,
       rather than a shrinking column that ends in an ellipsis. */
    .sec-banner{flex-direction:column;gap:9px;padding:14px 16px;text-align:center}
    .sec-banner .sec-banner-text{flex:1 1 auto;width:100%}
  }

  /* ---- scan overview ---- */
  .sec-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .sec-head h2{font-size:1.05rem;flex:1}
  .sec-head .btn-scan{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);
    border-radius:9px;font-size:.82rem;font-weight:600;background:var(--card);color:var(--ink);cursor:pointer;transition:.15s}
  .sec-head .btn-scan:hover{border-color:var(--line-hover);background:var(--paper-2)}
  .sec-head .btn-scan svg{width:14px;height:14px}
  .sec-desc{font-size:.84rem;color:var(--ink-2);margin-bottom:20px;line-height:1.5}

  /* ---- toolbar (search + filters) ---- */
  .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
  .search{position:relative;width:min(300px,100%)}
  .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mut)}
  .search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 34px;
    font:inherit;font-size:.9rem;background:var(--card);color:var(--ink)}
  .search input:focus{outline:none;border-color:var(--accent)}
  .fsel{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:.87rem;
    background:var(--card);color:var(--ink);cursor:pointer}
  .fsel:focus{outline:none;border-color:var(--accent)}
  .toolbar .sp{margin-left:auto}

  /* ---- projects table ---- */
  .sec-count{font-size:.82rem;color:var(--mut);margin-bottom:12px}
  .sec-table{width:100%;border-collapse:collapse}
  .sec-table th{text-align:left;font-size:.76rem;font-weight:500;color:var(--mut);padding:10px 12px;
    border-bottom:1px solid var(--line);white-space:nowrap}
  .sec-table td{padding:12px;font-size:.88rem;border-bottom:1px solid var(--hair);vertical-align:middle}
  .sec-table tbody tr{transition:background .12s ease}
  .sec-table tbody tr:hover{background:var(--paper-2)}
  .sec-table .proj-name{font-weight:600;color:var(--ink)}
  .sec-table .proj-name a{color:inherit;text-decoration:none}
  .sec-table .proj-name a:hover{text-decoration:underline}

  /* vulnerability badges */
  .vuln-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:600}
  .vuln-badge.none{background:rgba(34,165,101,.1);color:var(--ok)}
  .vuln-badge.low{background:rgba(59,130,246,.1);color:#3b82f6}
  .vuln-badge.moderate{background:rgba(224,161,26,.12);color:var(--warn)}
  .vuln-badge.high{background:rgba(234,88,12,.12);color:#ea580c}
  .vuln-badge.critical{background:rgba(217,45,32,.1);color:var(--danger)}

  /* status dot */
  .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:6px}
  .status-dot.live{background:var(--ok)}
  .status-dot.draft{background:var(--mut)}

  /* actions */
  .act-btn{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 12px;
    font-size:.78rem;font-weight:500;cursor:pointer;transition:.15s;color:var(--ink)}
  .act-btn:hover{border-color:var(--line-hover);background:var(--paper-2)}

  /* ---- empty state / replit-style secure illustration ---- */
  .sec-empty{display:flex;flex-direction:column;align-items:center;padding:60px 20px;text-align:center}
  .sec-empty svg{width:80px;height:80px;color:var(--ok);margin-bottom:16px;opacity:.7}
  .sec-empty b{font-size:1.05rem;font-weight:600;margin-bottom:4px}
  .sec-empty span{font-size:.85rem;color:var(--mut)}

  .sec-secure-wrap{display:flex;flex-direction:column;align-items:center;padding:54px 20px 48px;text-align:center}
  .sec-secure-ill{display:flex;align-items:center;justify-content:center;margin-bottom:8px;position:relative;overflow:visible;width:184px;height:120px;margin-left:auto;margin-right:auto}
  .sec-secure-ill svg{display:block;max-width:100%;height:auto}
  .sec-secure-title{font-size:1.18rem;font-weight:600;color:var(--ink);margin:18px 0 6px;letter-spacing:-.015em}
  .sec-secure-sub{font-size:.92rem;color:var(--ink-2);margin:0;line-height:1.5}

  /* ---- Fancy scanning animations ---- */
  @keyframes spinContinuous {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes scanGlowPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45), 0 2px 8px rgba(0, 0, 0, 0.06);
      border-color: rgba(34, 197, 94, 0.55);
    }
    50% {
      box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.2), 0 0 20px rgba(34, 197, 94, 0.4);
      border-color: var(--ok);
    }
  }
  @keyframes scanShimmerWave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .btn-scan.scanning, .act-btn.scanning {
    pointer-events: none;
    background: linear-gradient(90deg, var(--card) 0%, rgba(34, 197, 94, 0.16) 50%, var(--card) 100%);
    background-size: 200% 100%;
    animation: scanGlowPulse 1.6s ease-in-out infinite, scanShimmerWave 1.8s linear infinite !important;
    border-color: var(--ok) !important;
    color: var(--ok) !important;
  }
  .btn-scan.scanning svg, .act-btn.scanning svg {
    animation: spinContinuous 0.75s linear infinite !important;
    color: var(--ok) !important;
  }

  /* Laser Beam & Radar Pulse in Illustration */
  .laser-beam {
    display: none;
    position: absolute;
    left: 12px;
    width: 160px;
    height: 2.5px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #22c55e 20%, #86efac 50%, #22c55e 80%, transparent);
    box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e, 0 2px 6px rgba(34, 197, 94, 0.9);
    pointer-events: none;
    z-index: 10;
  }
  .sec-secure-ill.scanning .laser-beam {
    display: block;
    animation: laserScanMotion 1.5s ease-in-out infinite alternate;
  }
  @keyframes laserScanMotion {
    0% { top: 12px; opacity: 0.3; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 104px; opacity: 0.3; }
  }

  .sec-radar-ring {
    transform-origin: 92px 56px;
    opacity: 0;
  }
  .sec-secure-ill.scanning .sec-radar-ring {
    animation: radarSonar 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
  }
  .sec-secure-ill.scanning .sec-radar-ring:nth-child(2) {
    animation-delay: 0.6s;
  }
  @keyframes radarSonar {
    0% { transform: scale(0.6); opacity: 0.85; stroke-width: 2.5px; }
    70% { opacity: 0.35; }
    100% { transform: scale(1.6); opacity: 0; stroke-width: 0.5px; }
  }

  .sec-secure-ill.scanning .code-line {
    animation: codeLineGaze 1.4s ease-in-out infinite;
  }
  .sec-secure-ill.scanning .code-line:nth-child(even) {
    animation-delay: 0.25s;
  }
  @keyframes codeLineGaze {
    0%, 100% { fill: rgba(34, 197, 94, 0.22); }
    50% { fill: rgba(34, 197, 94, 0.55); filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.7)); }
  }

  .sec-scan-ticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: var(--ok);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: -.01em;
    transition: all 0.3s ease;
  }

  .sec-banner.is-scanning {
    border-color: rgba(34, 197, 94, 0.55) !important;
    box-shadow: 0 0 20px -4px rgba(34, 197, 94, 0.3) !important;
    transition: all 0.3s ease;
  }

  /* ---- upload panel ---- */
  /* Centred and capped, not full-bleed. The panel is one short action - a
     heading, a sentence and a target to drop onto - and stretched across a
     1180px console it read as an empty region with a hairline around it.
     A measure that fits the sentence puts the target back under the words
     that describe it. */
  .upload-panel{border:1px solid var(--line);border-radius:14px;background:var(--card);
    padding:22px;margin:32px auto 0;max-width:640px;width:100%;box-sizing:border-box;
    text-align:center;transition:border-color .15s}
  .upload-panel h2{font-size:1.05rem;margin-bottom:6px}
  .upload-panel .desc{font-size:.84rem;color:var(--ink-2);margin:0 auto 16px;line-height:1.5;max-width:52ch}
  .drop-zone{border:2px dashed var(--line);border-radius:12px;padding:26px 20px;text-align:center;
    cursor:pointer;transition:border-color .2s,background .2s;position:relative}
  .drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:rgba(26,166,223,.04)}
  .drop-zone svg{width:30px;height:30px;color:var(--mut);margin-bottom:9px}
  .drop-zone b{display:block;font-size:.9rem;font-weight:600;margin-bottom:4px}
  .drop-zone span{display:block;font-size:.8rem;color:var(--mut)}
  .drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
  /* Results are a report, not part of the drop target: they read left-aligned
     even though the panel above them is centred. */
  .upload-results{margin-top:18px;text-align:left}
  .upload-results .result-card{border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:10px;background:var(--paper)}
  .upload-results .result-card h3{font-size:.9rem;font-weight:600;margin:0 0 8px;font-family:var(--disp)}
  .finding-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:.82rem}
  .finding-row:last-child{border-bottom:0}
  .finding-row .f-sev{width:70px;flex:none;font-weight:600;text-transform:uppercase;font-size:.72rem}
  .finding-row .f-sev.high,.finding-row .f-sev.critical{color:var(--danger)}
  .finding-row .f-sev.moderate{color:var(--warn)}
  .finding-row .f-sev.medium{color:var(--warn)}
  .finding-row .f-sev.low{color:#3b82f6}
  .finding-row .f-desc{flex:1;min-width:0}
  .finding-row .f-path{color:var(--mut);font-size:.78rem}

  /* ---- skeleton / loading ---- */
  @keyframes sweep{to{transform:translateX(100%)}}
  .sk-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;position:relative;overflow:hidden}
  .sk-row::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(139,152,165,.13),transparent);
    animation:sweep 1.4s var(--ease) infinite}
  .sk-row i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--line)}
  .sk-row b{height:8px;border-radius:99px;background:var(--line);display:block}
  .sk-row:nth-child(1) b{width:74%}
  .sk-row:nth-child(2) b{width:58%}
  .sk-row:nth-child(3) b{width:66%}
  .sk-row:nth-child(4) b{width:47%}
  @media (prefers-reduced-motion:reduce){ .sk-row::after{animation:none} }

  /* table skeleton */
  .sk-table{width:100%}
  .sk-table-row{display:flex;align-items:center;gap:16px;padding:14px 12px;border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
  .sk-table-row::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(139,152,165,.13),transparent);
    animation:sweep 1.4s var(--ease) infinite}
  .sk-table-row span{height:10px;border-radius:99px;background:var(--line);display:block}
  .sk-table-row span:nth-child(1){width:28%}
  .sk-table-row span:nth-child(2){width:14%}
  .sk-table-row span:nth-child(3){width:18%}
  .sk-table-row span:nth-child(4){width:10%}

  /* settings overlay - identical geometry and animations as code.html, projects.html, deployments.html */
  .ag-set-overlay{position:fixed;inset:0;z-index:9999999 !important;background:var(--scrim);
    display:flex;align-items:center;justify-content:center;padding:clamp(8px,3.5vh,40px);
    -webkit-backdrop-filter:var(--scrim-blur);backdrop-filter:var(--scrim-blur)}
  .ag-set-overlay[hidden]{display:none !important;pointer-events:none !important;visibility:hidden !important}
  .ag-set-overlay iframe{width:min(1393px,92vw);height:min(700px,80vh);border:0;border-radius:13px;
    background:var(--card);box-shadow:0 30px 90px -28px rgba(0,0,0,.55);
    animation:sqSettingsIn var(--dur-chill,.3s) var(--ease-snappy,ease-out) both}
  @keyframes sqSettingsIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  .ag-set-overlay.closing iframe{animation:sqSettingsOut var(--dur-snappy,.12s) var(--ease-snappy,ease-out) both}
  @keyframes sqSettingsOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.99)}}
  @media (prefers-reduced-motion:reduce){
    .ag-set-overlay iframe{animation-duration:1ms;animation-name:none;opacity:1}
    .ag-set-overlay.closing iframe{animation-name:none;opacity:0}
  }
  @media (max-width:900px){
    .ag-set-overlay{padding:0}
    .ag-set-overlay iframe{width:100%;height:100%;border-radius:0}
  }

  @media (max-width:640px){
    .sec-table th:nth-child(3),.sec-table td:nth-child(3),
    .sec-table th:nth-child(4),.sec-table td:nth-child(4){display:none}
    .toolbar{flex-direction:column;align-items:stretch}
    .search{width:100%}
  }