/* © 2026 IG Tools — All rights reserved. Unauthorized copying, reuse, or redistribution of this code is prohibited. */
/* IG Tools — styles */
  /* --- shared theme (identical to the tools) --- */
  :root{
    --bg:#161618; --panel:#1F1F24; --panel-2:#292930; --line:#34343E;
    --text:#EDEDF1; --muted:#9695A2;
    --g1:#8A3FFC; --g2:#FF4D8D; --g3:#FF9A3D;
    --grad:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3));
    --ig:linear-gradient(105deg,#515BD4,#8A3AB9 25%,#C13584 45%,#E1306C 62%,#FD1D1D 78%,#F56040 90%,#FCAF45);
    --radius:15px;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  /* Lock the page itself so it can never scroll — only .stage scrolls internally. On iOS this is
     what stops the fixed header from drifting: a tall iframe otherwise flattens its scroll onto the
     top document (body), and body scrolling drags the address bar and the fixed header with it. */
  body{font-family:var(--sans);color:var(--text);background:var(--bg);
    position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  /* fixed header — pinned to the viewport top; never moves on scroll (JS sets --header-h).
     translateZ(0) promotes it to its own layer to stop iOS Safari scroll jitter. */
  .app-header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--bg);
    transform:translateZ(0);-webkit-transform:translateZ(0)}

  /* --- top bar --- */
  .tabbar{
    flex:0 0 auto;display:flex;align-items:center;gap:4px;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:0 12px;height:56px;overflow-x:auto;white-space:nowrap;
  }
  .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;
    padding-right:14px;margin-right:6px;border-right:1px solid var(--line);flex:0 0 auto}
  .brand .dot{width:22px;height:22px;border-radius:7px;background:var(--ig)}
  .igbar{flex:0 0 auto;height:4px;background:var(--ig)}
  .tab{appearance:none;border:0;background:transparent;color:var(--muted);
    font-size:14.5px;font-weight:600;cursor:pointer;
    padding:9px 15px;border-radius:10px;transition:.15s;flex:0 0 auto}
  .tab:hover{color:var(--text);background:var(--panel)}
  .tab.active{color:var(--text);background:var(--panel-2)}
  .tab .tshort{display:none}   /* short tab labels — shown only on narrow screens */
  .spacer{flex:1 1 auto}

  /* --- language segment --- */
  .langseg{display:inline-flex;flex:0 0 auto;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;padding:2px;margin-left:8px}
  .langseg button{appearance:none;border:0;background:transparent;color:var(--muted);
    font-size:13px;font-weight:700;cursor:pointer;padding:6px 11px;border-radius:8px;transition:.15s}
  .langseg button:hover{color:var(--text)}
  .langseg button.on{background:var(--ig);color:#fff}

  /* --- content area: a fixed scroll region filling the space under the fixed header --- */
  .stage{position:fixed;left:0;right:0;bottom:0;top:var(--header-h,60px);
    background:var(--bg);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  iframe{display:none;width:100%;height:100%;border:0;background:var(--bg)}
  iframe.show{display:block}
  .panel{display:none}
  .panel.show{display:block;min-height:100%}

  /* --- home landing (dark theme + color accents) --- */
  .home{position:relative;min-height:100%;background:var(--bg);color:var(--text);
    display:flex;flex-direction:column;align-items:center;
    padding:64px 20px;text-align:center;overflow:hidden}
  .home::before{content:none}
  .home > *{position:relative;z-index:1}
  .home .kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;margin-bottom:16px;padding:6px 13px;border-radius:999px;
    background:var(--ig)}
  .home h1{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-.5px;line-height:1.1}
  .home h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .home .sub{color:var(--muted);margin-top:16px;max-width:600px;font-size:17px;line-height:1.55}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;width:100%;max-width:920px;margin-top:46px}
  .card{--a:var(--g1);cursor:pointer;text-align:left;position:relative;overflow:hidden;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:24px;transition:.18s;color:var(--text)}
  .card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--a)}
  .card.a1{--a:#8A3FFC} .card.a2{--a:#FF4D8D} .card.a3{--a:#FF9A3D} .card.a4{--a:#22B8FF} .card.a5{--a:#3ED598} .card.a6{--a:#14C8C0}
  .card:hover{transform:translateY(-4px);border-color:var(--a);
    background:var(--panel-2);box-shadow:0 14px 34px -12px var(--a)}
  .card .ic{width:54px;height:54px;border-radius:15px;padding:3px;margin-bottom:16px;background:var(--ig)}
  .card .ic i{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
    font-size:26px;border-radius:12px;background:var(--bg);font-style:normal}
  .card h2{font-size:19px;font-weight:700;margin-bottom:6px}
  .card p{color:var(--muted);font-size:14px;line-height:1.5}
  .card .go{margin-top:15px;font-weight:700;font-size:14px;color:var(--a)}
  .card .wip{position:absolute;top:10px;right:10px;background:rgba(255,154,61,.16);border:1px solid rgba(255,154,61,.5);color:#FF9A3D;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.02em}

  /* mobile: wrap the tab bar so all tabs AND the TR/EN toggle stay visible (no off-screen scroll) */
  @media(max-width:600px){
    /* single-row header on mobile: short tab labels, brand text hidden (logo dot stays), no wrap */
    .tabbar{flex-wrap:nowrap;height:54px;overflow-x:auto;padding:0 8px;gap:2px;-webkit-overflow-scrolling:touch}
    .tabbar::-webkit-scrollbar{display:none}
    .brand{border-right:0;padding-right:4px;margin-right:2px}
    .brand .bname{display:none}   /* mobile: show only the logo icon, hide the "IG Tools" text */
    .brand .dot{width:20px;height:20px}
    .tab{font-size:12.5px;padding:7px 8px;flex:0 0 auto}
    .tab .tfull{display:none}
    .tab .tshort{display:inline}
    .spacer{display:none}
    .langseg{margin-left:auto;flex:0 0 auto}
    .langseg button{padding:5px 8px}
    .tab,.langseg button{min-height:36px}
  }