/* ===== Formula page (extends skill.css palette) ===== */
    .pageHeader{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
    }
    .pageHeader h1{ margin:0; font-size:22px; letter-spacing:.2px; }
    .pageHeader .sub{ margin:6px 0 0; }

    .stack{ display:flex; flex-direction:column; gap:16px; }

    .panel{
      border:1px solid var(--line);
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .panelHead{
      padding:12px 14px;
      border-bottom:1px solid rgba(42,49,68,.65);
      background:rgba(0,0,0,.25);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .panelTitle{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
    }

    .items{
      padding:14px;
    }
    .grid{
      display:grid;
      grid-template-columns: repeat(15, minmax(0, 1fr));
      gap:10px;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    @media (max-width: 520px){
      .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    .itemBtn{
      position:relative;
      width:100%;
      aspect-ratio:1/1;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 30% 25%, rgba(122,162,255,.20), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
      box-shadow: 0 10px 22px rgba(0,0,0,.30);
      overflow:hidden;
      cursor:pointer;
      padding:0;
      outline:none;
      transition:transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .itemBtn:hover{
      border-color:rgba(122,162,255,.35);
      transform: translateY(-1px);
      background:
        radial-gradient(circle at 30% 25%, rgba(122,162,255,.26), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
    }
    .itemBtn.is-active{
      border-color:rgba(122,162,255,.60);
      box-shadow: 0 0 0 2px rgba(122,162,255,.12) inset, 0 10px 22px rgba(0,0,0,.35);
      transform:none;
    }
    .itemBtn img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      padding:12px;
      filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
    }
    .qtyPill{
      position:absolute;
      right:8px;
      bottom:8px;
      font-size:12px;
      color:#fff;
      background:rgba(0,0,0,.40);
      border:1px solid rgba(255,255,255,.14);
      padding:3px 7px;
      border-radius:999px;
      backdrop-filter: blur(6px);
    }

    /* ===== Formula ===== */
    .formulaBody{ padding:14px; }
    .formulaTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .selected{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .selIcon{
      width:56px; height:56px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 30% 25%, rgba(122,162,255,.20), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
      box-shadow: 0 8px 18px rgba(0,0,0,.35);
      overflow:hidden;
      flex:0 0 auto;
    }
    .selIcon img{ width:100%; height:100%; object-fit:contain; display:block; padding:10px; }
    .selMeta{ min-width:0; }
    .selName{ font-size:16px; font-weight:900; margin:0; line-height:1.15; }
    .selReq{ color:var(--muted); margin-top:6px; font-size:12px; }

    .formulaStatus{
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }

    .recipe{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-top:12px;
      border-top:1px solid rgba(42,49,68,.65);
    }
    .recipeRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(16,20,33,.60), rgba(16,20,33,.32));
    }
    .recipeLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
    .compIcon{
      width:40px; height:40px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      overflow:hidden;
      flex:0 0 auto;
    }
    .compIcon img{ width:100%; height:100%; object-fit:contain; display:block; padding:6px; }
    .compName{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .compNeed{ color:var(--muted); font-size:12px; }
    .compCount{
      font-weight:900;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.22);
      white-space:nowrap;
    }

    .note{
      margin-top:12px;
      color:var(--muted);
      font-size:12px;
      line-height:1.4;
    }

    /* ===== Tooltip ===== */
    .tooltip{
      position:fixed;
      z-index:99999;
      pointer-events:none;
      width:min(360px, calc(100vw - 24px));
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(700px 420px at 20% -20%, rgba(122,162,255,.12), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.40));
      box-shadow: 0 18px 45px rgba(0,0,0,.55);
      padding:12px 12px;
      opacity:0;
      transform: translateY(6px);
      transition: opacity .08s ease, transform .08s ease;
      backdrop-filter: blur(8px);
    }
    .tooltip.is-show{ opacity:1; transform: translateY(0); }
    .ttTitle{
      font-size:15px;
      font-weight:900;
      margin:0 0 6px 0;
      letter-spacing:.2px;
    }
    .ttBody{ margin:0; color:#d7c9b4; font-size:13px; line-height:1.35; }
    .ttReq{ margin:10px 0 8px 0; color:var(--muted); font-size:12px; }
    .ttStats{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:6px;
      color:#4bd6ff;
      font-weight:800;
      font-size:13px;
    }
    .ttStats b{ color:#fff; font-weight:900; }