:root {

      color-scheme: light;

      --ink: #07132f;

      --muted: #60708f;

      --soft: #f4f8ff;

      --paper: rgba(255, 255, 255, 0.88);

      --paper-solid: #ffffff;

      --line: rgba(7, 19, 47, 0.12);

      --accent: #00dff6;

      --accent-strong: #0068ff;

      --lime: #7cff00;

      --magenta: #ff007f;

      --orange: #ff3b1f;

      --navy: #071342;

      --shadow: 0 24px 78px rgba(7, 19, 66, 0.16);

      --radius: 8px;

      --max: 1180px;

    }



    * {

      box-sizing: border-box;

    }



    html {

      scroll-behavior: smooth;

    }



    body {

      min-height: 100vh;

      margin: 0;

      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

      background:

        linear-gradient(116deg, #f9fcff 0%, #eefaff 36%, #f9f2ff 68%, #fff7ef 100%);

      color: var(--ink);

      letter-spacing: 0;

    }



    img {

      user-select: none;

      -webkit-user-drag: none;

    }



    body::before {

      position: fixed;

      inset: 0;

      z-index: -1;

      pointer-events: none;

      content: "";

      background-image:

        linear-gradient(rgba(7, 19, 66, 0.045) 1px, transparent 1px),

        linear-gradient(90deg, rgba(7, 19, 66, 0.045) 1px, transparent 1px);

      background-size: 48px 48px;

      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.58), transparent 72%);

    }



    body::after {

      position: fixed;

      inset: 0;

      z-index: -1;

      pointer-events: none;

      content: "";

      background:

        linear-gradient(135deg, transparent 0 10%, rgba(0, 223, 246, 0.22) 10% 12%, transparent 12% 49%, rgba(255, 0, 127, 0.12) 49% 51%, transparent 51%),

        linear-gradient(45deg, transparent 0 69%, rgba(124, 255, 0, 0.16) 69% 71%, transparent 71% 100%),

        linear-gradient(160deg, transparent 0 78%, rgba(255, 59, 31, 0.14) 78% 80%, transparent 80%);

      opacity: 0.88;

    }



    a {

      color: inherit;

    }



    button,

    input {

      font: inherit;

    }



    .site-shell {

      width: min(var(--max), calc(100% - 40px));

      margin: 0 auto;

    }



    .topbar {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 18px;

      padding: 22px 0;

    }



    .brand {

      display: inline-flex;

      align-items: center;

      gap: 12px;

      min-width: 0;

      text-decoration: none;

    }



    .brand-mark {

      display: grid;

      flex: 0 0 auto;

      width: 42px;

      height: 42px;

      place-items: center;

      border: 1px solid rgba(0, 223, 246, 0.42);

      border-radius: var(--radius);

      background: linear-gradient(135deg, #ffffff 0%, #dbfbff 54%, #f7ecff 100%);

      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.14);

      color: #004bd8;

      font-weight: 800;

    }



    .brand-copy {

      min-width: 0;

    }



    .brand-name {

      display: block;

      font-size: 1rem;

      font-weight: 760;

      line-height: 1.1;

    }



    .brand-note {

      display: block;

      margin-top: 3px;

      color: var(--muted);

      font-size: 0.78rem;

      white-space: nowrap;

    }

    .stats-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 28px;
      height: 28px;
      padding: 0 7px;
      border-radius: 999px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.15s, background 0.15s;
    }
    .stats-link:hover {
      color: var(--accent);
      background: rgba(0, 223, 246, 0.1);
    }
    .stats-link svg {
      flex-shrink: 0;
    }
    .stats-pv {
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--ink);
      line-height: 1;
      white-space: nowrap;
    }



    .nav-links {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .nav-link {

      min-height: 38px;

      padding: 10px 13px;

      border: 1px solid transparent;

      border-radius: var(--radius);

      color: #26395f;

      font-size: 0.9rem;

      text-decoration: none;

    }



    .nav-link:hover {

      border-color: rgba(0, 223, 246, 0.34);

      background: rgba(255, 255, 255, 0.72);

      color: var(--accent-strong);

    }



    /* ── 联系方式图标区 ─────────────────────────────── */

    .contact-icons {

      display: flex;

      align-items: center;

      gap: 6px;

    }



    .contact-icon-btn {

      display: grid;

      place-items: center;

      width: 36px;

      height: 36px;

      border: 1px solid transparent;

      border-radius: var(--radius);

      background: transparent;

      color: #26395f;

      cursor: pointer;

      text-decoration: none;

      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;

      padding: 0;

    }



    .contact-icon-btn:hover {

      border-color: rgba(0, 223, 246, 0.38);

      background: rgba(255, 255, 255, 0.72);

      color: var(--accent-strong);

      transform: translateY(-1px);

    }



    .contact-icon-btn svg {

      width: 18px;

      height: 18px;

      display: block;

      flex-shrink: 0;

    }



    /* ── 邮箱弹窗 ─────────────────────────────────── */

    .email-popup-overlay {

      display: none;

      position: fixed;

      inset: 0;

      z-index: 200;

      background: rgba(7, 19, 47, 0.18);

      backdrop-filter: blur(4px);

    }



    .email-popup-overlay.open {

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 20px;

    }



    .email-popup {

      position: relative;

      width: min(400px, 100%);

      border: 1px solid rgba(0, 223, 246, 0.34);

      border-radius: calc(var(--radius) * 1.5);

      background: rgba(255, 255, 255, 0.95);

      box-shadow: 0 28px 72px rgba(7, 19, 66, 0.22);

      backdrop-filter: blur(20px);

      padding: 28px 24px 22px;

      animation: popupIn 200ms ease forwards;

    }



    @keyframes popupIn {

      from { opacity: 0; transform: translateY(-8px) scale(0.97); }

      to   { opacity: 1; transform: translateY(0) scale(1); }

    }



    .email-popup-close {

      position: absolute;

      top: 12px;

      right: 12px;

      display: grid;

      place-items: center;

      width: 30px;

      height: 30px;

      border: none;

      border-radius: var(--radius);

      background: transparent;

      color: var(--muted);

      cursor: pointer;

      font-size: 1.1rem;

      transition: background 140ms ease;

    }



    .email-popup-close:hover {

      background: rgba(7, 19, 47, 0.07);

    }



    .email-popup-icon {

      display: flex;

      align-items: center;

      justify-content: center;

      width: 46px;

      height: 46px;

      border: 1px solid rgba(0, 223, 246, 0.34);

      border-radius: var(--radius);

      background: linear-gradient(135deg, #f0fbff, #eef4ff);

      color: #0051cf;

      margin-bottom: 14px;

    }



    .email-popup-icon svg {

      width: 22px;

      height: 22px;

    }



    .email-popup h3 {

      margin: 0 0 4px;

      font-size: 1.08rem;

      line-height: 1.3;

      color: var(--ink);

    }



    .email-popup-addr {

      font-size: 1.04rem;

      font-weight: 700;

      color: #0051cf;

      letter-spacing: 0.01em;

      user-select: all;

      word-break: break-all;

      margin: 6px 0 18px;

    }



    .email-popup-note {

      font-size: 0.82rem;

      color: var(--muted);

      margin: 0 0 18px;

      line-height: 1.55;

    }



    .email-popup-send {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      min-height: 42px;

      padding: 10px 18px;

      border: 1px solid rgba(0, 223, 246, 0.48);

      border-radius: var(--radius);

      background: linear-gradient(135deg, #053dff 0%, #00dff6 100%);

      color: #fff;

      font: inherit;

      font-weight: 760;

      text-decoration: none;

      cursor: pointer;

      transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;

    }



    .email-popup-send:hover {

      background: linear-gradient(135deg, #071342 0%, #0068ff 48%, #00dff6 100%);

      transform: translateY(-1px);

      box-shadow: 0 14px 28px rgba(0, 104, 255, 0.22);

    }



    .email-popup-send svg {

      width: 16px;

      height: 16px;

      flex-shrink: 0;

    }



    /* 小屏适配 */

    @media (max-width: 620px) {

      .contact-icons {

        gap: 4px;

      }

      .contact-icon-btn {

        width: 32px;

        height: 32px;

      }

      .contact-icon-btn svg {

        width: 16px;

        height: 16px;

      }

    }



    .hero {

      display: grid;

      grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.76fr);

      gap: clamp(24px, 5vw, 58px);

      align-items: center;

      padding: clamp(26px, 6vw, 72px) 0 36px;

    }



    .eyebrow {

      display: inline-flex;

      align-items: center;

      gap: 9px;

      width: fit-content;

      margin: 0 0 18px;

      padding: 8px 11px;

      border: 1px solid rgba(0, 223, 246, 0.42);

      border-radius: 999px;

      background: rgba(255, 255, 255, 0.72);

      color: #004bd8;

      font-size: 0.82rem;

      font-weight: 700;

      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.1);

    }



    .eyebrow::before {

      width: 8px;

      height: 8px;

      border-radius: 999px;

      background: var(--magenta);

      box-shadow: 0 0 0 4px rgba(255, 0, 127, 0.1);

      content: "";

    }



    h1 {

      max-width: 780px;

      margin: 0;

      font-size: 6.7rem;

      line-height: 0.88;

      letter-spacing: 0;

    }



    .hero-lede {

      max-width: 620px;

      margin: 18px 0 0;

      color: #475467;

      font-size: 1.18rem;

      line-height: 1.72;

    }



    .hero-slogan {

      margin: 22px 0 0;

      color: #00615d;

      font-size: 2.36rem;

      font-weight: 850;

      line-height: 1.04;

      text-shadow: 0 0 24px rgba(0, 223, 246, 0.24);

    }



    .hero-actions {

      display: flex;

      flex-wrap: wrap;

      gap: 12px;

      margin-top: 40px;

    }



    .button {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-height: 46px;

      padding: 12px 16px;

      border: 1px solid rgba(7, 19, 47, 0.12);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.72);

      color: var(--ink);

      font-weight: 760;

      text-decoration: none;

      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;

    }



    .button:hover {

      transform: translateY(-2px);

      border-color: rgba(0, 223, 246, 0.58);

      background: #fff;

      box-shadow: 0 14px 28px rgba(0, 104, 255, 0.12);

    }



    .button.primary {

      border-color: rgba(0, 223, 246, 0.54);

      background: linear-gradient(135deg, #053dff 0%, #00dff6 100%);

      color: #fff;

      box-shadow: 0 20px 40px rgba(0, 104, 255, 0.25);

    }



    .button.primary:hover {

      background: linear-gradient(135deg, #071342 0%, #0068ff 48%, #00dff6 100%);

    }



    .hero-panel {

      position: relative;

      overflow: hidden;

      min-height: 480px;

      border: 1px solid rgba(0, 223, 246, 0.3);

      border-radius: var(--radius);

      background:

        linear-gradient(160deg, rgba(7, 19, 66, 0.1), rgba(0, 223, 246, 0.04)),

        url("assets/endril-avatar.png") center / cover;

      box-shadow: var(--shadow);

      isolation: isolate;

    }



    .hero-panel::before {

      position: absolute;

      inset: 0;

      z-index: -1;

      content: "";

      background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 19, 66, 0.28)),

        linear-gradient(135deg, rgba(0, 223, 246, 0.16), transparent 44%, rgba(255, 0, 127, 0.16));

    }



    .panel-card {

      position: absolute;

      right: 22px;

      bottom: 22px;

      left: 22px;

      border: 1px solid rgba(255, 255, 255, 0.72);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.86);

      box-shadow: 0 24px 56px rgba(7, 19, 66, 0.24);

      backdrop-filter: blur(18px);

    }



    .panel-card-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 12px;

      padding: 18px 18px 12px;

      border-bottom: 1px solid rgba(7, 19, 47, 0.08);

    }



    .panel-label {

      color: var(--muted);

      font-size: 0.78rem;

      font-weight: 800;

      text-transform: uppercase;

    }



    .panel-status {

      display: inline-flex;

      align-items: center;

      min-height: 28px;

      padding: 5px 9px;

      border-radius: 999px;

      background: rgba(0, 223, 246, 0.14);

      color: #0051cf;

      font-size: 0.75rem;

      font-weight: 800;

      white-space: nowrap;

    }



    .panel-feature {

      display: grid;

      grid-template-columns: 74px minmax(0, 1fr);

      gap: 14px;

      align-items: center;

      padding: 18px;

    }



    .panel-feature img {

      width: 74px;

      height: 74px;

      border: 1px solid rgba(0, 223, 246, 0.28);

      border-radius: var(--radius);

      object-fit: cover;

    }



    .panel-feature h2 {

      margin: 0;

      font-size: 1.12rem;

      line-height: 1.28;

    }



    .panel-feature p {

      margin: 7px 0 0;

      color: #5f6c7b;

      font-size: 0.88rem;

      line-height: 1.55;

    }



    .stats {

      display: grid;

      grid-template-columns: repeat(3, minmax(0, 1fr));

      gap: 12px;

      padding: 0 18px 18px;

    }



    .stat {

      min-width: 0;

      padding: 12px;

      border: 1px solid rgba(7, 19, 47, 0.08);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.62);

    }



    .stat strong {

      display: block;

      font-size: 1.28rem;

      line-height: 1;

    }



    .stat span {

      display: block;

      margin-top: 6px;

      color: var(--muted);

      font-size: 0.74rem;

      line-height: 1.25;

    }



    .section {

      padding: 36px 0 64px;

    }



    .section-head {

      display: flex;

      align-items: end;

      justify-content: space-between;

      gap: 24px;

      margin-bottom: 18px;

    }



    .section-title {

      margin: 0;

      font-size: 2.86rem;

      line-height: 1;

    }



    .section-copy {

      max-width: 570px;

      margin: 12px 0 0;

      color: #5f6c7b;

      line-height: 1.72;

    }



    .tools-count {

      flex: 0 0 auto;

      min-height: 38px;

      padding: 10px 12px;

      border: 1px solid var(--line);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.72);

      color: #26395f;

      font-size: 0.9rem;

      font-weight: 760;

      white-space: nowrap;

    }



    .controls {

      position: sticky;

      top: 0;

      z-index: 3;

      display: grid;

      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);

      gap: 12px;

      align-items: center;

      margin: 24px 0;

      padding: 10px;

      border: 1px solid rgba(0, 223, 246, 0.22);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.78);

      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.09);

      backdrop-filter: blur(18px);

    }



    .search {

      width: 100%;

      height: 46px;

      padding: 0 14px;

      border: 1px solid rgba(7, 19, 47, 0.12);

      border-radius: var(--radius);

      outline: none;

      background: rgba(255, 255, 255, 0.72);

      color: var(--ink);

    }



    .search:focus {

      border-color: rgba(0, 223, 246, 0.62);

      box-shadow: 0 0 0 4px rgba(0, 223, 246, 0.16);

    }



    .filter-row {

      display: flex;

      flex-wrap: wrap;

      justify-content: flex-end;

      gap: 8px;

    }



    .filter-button {

      min-height: 38px;

      padding: 8px 11px;

      border: 1px solid rgba(7, 19, 47, 0.1);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.7);

      color: #26395f;

      cursor: pointer;

      font-size: 0.88rem;

      font-weight: 760;

      transition: background 160ms ease, border-color 160ms ease, color 160ms ease;

    }



    .filter-button:hover,

    .filter-button.active {

      border-color: rgba(0, 223, 246, 0.58);

      background: linear-gradient(135deg, rgba(0, 223, 246, 0.16), rgba(124, 255, 0, 0.12));

      color: #0051cf;

    }



    .grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

      gap: 18px;

      align-items: stretch;

    }



    .tool-card {

      position: relative;

      display: flex;

      overflow: hidden;

      min-height: 420px;

      border: 1px solid rgba(7, 19, 47, 0.1);

      border-radius: var(--radius);

      background: var(--paper-solid);

      box-shadow: 0 18px 42px rgba(7, 19, 66, 0.09);

      text-decoration: none;

      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;

    }



    .tool-card:hover {

      transform: translateY(-5px);

      border-color: rgba(0, 223, 246, 0.42);

      box-shadow: 0 28px 64px rgba(0, 104, 255, 0.16);

    }



    .tool-card-inner {

      display: grid;

      width: 100%;

      grid-template-rows: 200px minmax(0, 1fr);

    }



    .tool-media {

      position: relative;

      overflow: hidden;

      background: #d9faff;

    }



    .tool-media img {

      width: 100%;

      height: 100%;

      display: block;

      object-fit: cover;

      transition: transform 380ms ease;

    }



    .tool-card:hover .tool-media img {

      transform: scale(1.045);

    }



    .tool-media.placeholder {

      display: grid;

      place-items: center;

      background:

        linear-gradient(135deg, rgba(0, 223, 246, 0.18), rgba(255, 0, 127, 0.12)),

        #f5fbff;

    }



    .placeholder-mark {

      display: grid;

      width: 76px;

      height: 76px;

      place-items: center;

      border: 1px solid rgba(0, 223, 246, 0.34);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.7);

      color: #0051cf;

      font-size: 1.4rem;

      font-weight: 850;

    }



    .tool-body {

      display: flex;

      min-height: 0;

      flex-direction: column;

      padding: 18px;

    }



    .tool-meta {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 10px;

      margin-bottom: 14px;

    }



    .tag {

      display: inline-flex;

      align-items: center;

      max-width: 100%;

      min-height: 28px;

      padding: 5px 9px;

      border: 1px solid rgba(0, 223, 246, 0.26);

      border-radius: 999px;

      background: rgba(0, 223, 246, 0.1);

      color: #0051cf;

      font-size: 0.76rem;

      font-weight: 820;

    }



    .tool-type {

      color: var(--muted);

      font-size: 0.78rem;

      font-weight: 760;

      white-space: nowrap;

    }



    .tool-card h3 {

      margin: 0;

      font-size: 1.2rem;

      line-height: 1.35;

    }



    .tool-card p {

      margin: 10px 0 18px;

      color: #5f6c7b;

      line-height: 1.68;

    }



    .tool-footer {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 14px;

      margin-top: auto;

      padding-top: 16px;

      border-top: 1px solid rgba(7, 19, 47, 0.08);

      color: #26395f;

      font-size: 0.9rem;

      font-weight: 760;

    }



    .arrow {

      display: grid;

      flex: 0 0 auto;

      width: 34px;

      height: 34px;

      place-items: center;

      border-radius: var(--radius);

      background: linear-gradient(135deg, rgba(0, 223, 246, 0.16), rgba(255, 0, 127, 0.1));

      color: #0051cf;

    }



    .empty-state {

      display: none;

      padding: 34px;

      border: 1px dashed rgba(0, 104, 255, 0.25);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.66);

      color: var(--muted);

      text-align: center;

    }



    .empty-state.show {

      display: block;

    }



    .about-band {

      padding: 36px 0 64px;

    }



    .about {

      display: grid;

      grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.58fr);

      gap: 20px;

      align-items: start;

      padding: clamp(22px, 4vw, 34px);

      border: 1px solid rgba(0, 223, 246, 0.22);

      border-radius: var(--radius);

      background:

        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 251, 255, 0.72)),

        linear-gradient(135deg, rgba(0, 223, 246, 0.08), rgba(255, 0, 127, 0.06));

      box-shadow: 0 16px 44px rgba(0, 104, 255, 0.09);

    }



    .about h2 {

      margin: 0;

      font-size: 2.32rem;

      line-height: 1.06;

    }



    .about p {

      margin: 16px 0 0;

      color: #526683;

      line-height: 1.76;

    }

    .about p a {
      color: #0a8aa0;
      text-decoration: none;
      transition: color .15s;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .about p a::after {
      content: "";
      width: 0.85em;
      height: 0.85em;
      opacity: 0.6;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain;
              mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain;
    }
    .about p a:hover {
      color: #007a8a;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .about p a:hover::after {
      opacity: 1;
    }



    .about-list {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

      gap: 10px;

      align-content: start;

      margin: 0;

      padding: 0;

      list-style: none;

    }



    .about-list li {

      padding: 0;

      border: 1px solid rgba(7, 19, 47, 0.09);

      border-radius: var(--radius);

      background: rgba(255, 255, 255, 0.68);

      overflow: hidden;

      transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;

    }



    .about-list li:hover {

      transform: translateY(-2px);

      border-color: rgba(0, 223, 246, 0.46);

      box-shadow: 0 14px 30px rgba(0, 104, 255, 0.1);

    }



    .about-link {

      display: grid;

      grid-template-columns: minmax(0, 1fr) 24px;

      gap: 12px;

      align-items: center;

      min-height: 52px;

      padding: 13px 14px;

      color: #102348;

      font-weight: 740;

      line-height: 1.45;

      text-decoration: none;

    }



    .about-arrow {

      display: grid;

      width: 24px;

      height: 24px;

      place-items: center;

      color: #102348;

      font-size: 1.2rem;

      line-height: 1;

    }



    .about-list li:hover .about-arrow {

      color: #0051cf;

    }



    footer {

      padding: 28px 0 38px;

      border-top: 1px solid rgba(7, 19, 47, 0.08);

      color: var(--muted);

      font-size: 0.9rem;

    }



    .footer-inner {

      display: grid;

      grid-template-columns: 1fr auto 1fr;

      align-items: center;

      gap: 18px;

    }

    .footer-inner > span:first-child {

      text-align: left;

    }

    .footer-inner > span:last-child {

      text-align: right;

    }

    .footer-links {

      display: flex;

      gap: 36px;

      justify-content: center;

    }

    .footer-links a {

      color: inherit;

      font-size: 0.82rem;

      text-decoration: none;

    }

    .footer-links a:hover {

      text-decoration: underline;

    }



    @media (max-width: 860px) {

      .topbar {

        align-items: flex-start;

      }



      .nav-links {

        flex-wrap: wrap;

        justify-content: flex-end;

      }



      .hero,

      .about {

        grid-template-columns: 1fr;

      }



      h1 {

        font-size: 5.2rem;

      }



      .hero-slogan {

        font-size: 2.05rem;

      }



      .section-title {

        font-size: 2.42rem;

      }



      .hero-panel {

        min-height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;

      }


      .panel-card {
        position: relative;
        right: auto; bottom: auto; left: auto;
        margin: auto 12px 12px;
        width: calc(100% - 24px);

      }

      .panel-feature {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 14px;

      }



      .controls {

        grid-template-columns: 1fr;

        position: static;

      }



      .filter-row {

        justify-content: flex-start;

      }

    }



    @media (max-width: 620px) {

      .site-shell {

        width: min(100% - 28px, var(--max));

      }



      .topbar {

        flex-direction: column;

      }



      .nav-links {

        width: 100%;

        justify-content: flex-start;

      }



      .nav-link {

        padding-inline: 10px;

      }



      .hero {

        padding-top: 22px;

      }



      h1 {

        font-size: 3.78rem;

      }



      .hero-lede {

        font-size: 1.03rem;

      }



      .hero-slogan {

        font-size: 1.74rem;

      }



      .section-title {

        font-size: 2.08rem;

      }



      .about h2 {

        font-size: 1.82rem;

      }

      .about-list {

        gap: 8px;

      }

      .about-link {

        min-height: 48px;

      }



      .hero-actions {

        display: grid;

        grid-template-columns: 1fr;

      }



      .button {

        width: 100%;

      }



      .hero-panel {

        min-height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;

      }



      .panel-card {

        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        margin: auto 12px 12px;
        width: calc(100% - 24px);

      }



      .panel-feature {

        grid-template-columns: 58px minmax(0, 1fr);

        padding: 14px;

      }



      .panel-feature img {

        width: 58px;

        height: 58px;

      }



      .stats {

        grid-template-columns: 1fr;

        padding: 0 14px 14px;

      }



      .section-head,

      .footer-inner {

        grid-template-columns: 1fr;

        text-align: center;

      }

      .footer-inner > span:first-child,

      .footer-inner > span:last-child {

        text-align: center;

      }

      .footer-links {

        justify-content: center;

        margin: 8px 0;

      }



      .tools-count {

        display: inline-flex;

        margin-top: 16px;

      }



      .grid {

        grid-template-columns: 1fr;

      }



      .tool-card {

        min-height: 0;

      }



      .tool-card-inner {

        grid-template-rows: 180px minmax(0, 1fr);

      }

    }



    @media (prefers-reduced-motion: reduce) {

      *,

      *::before,

      *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

      }

    }

    /* ── Feedback Widget ────────────────────────── */
    /* ── Floating Action Hub ─────────────────────────────── */
    .fab-hub { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; cursor:grab; }
    .fab-hub:active { cursor:grabbing; }

    /* Main toggle button */
    .fab-main {
      width:48px; height:48px; border-radius:50%;
      border:1px solid rgba(7,19,47,0.12); background:rgba(255,255,255,0.88);
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      box-shadow:0 2px 14px rgba(7,19,66,0.14); cursor:pointer;
      display:grid; place-items:center; transition:all 0.2s ease;
      color:#60708f; user-select:none;
    }
    .fab-main:hover { transform:scale(1.08); box-shadow:0 4px 24px rgba(7,19,66,0.18); color:#0068ff; }
    .fab-main svg { width:22px; height:22px; transition:transform 0.3s ease; }
    .fab-main.open svg { transform:rotate(45deg); }

    /* Sub-action buttons */
    .fab-actions {
      display:flex; flex-direction:column; align-items:flex-end; gap:8px;
      opacity:0; transform:translateY(10px) scale(0.95);
      pointer-events:none;
      transition:opacity 0.22s ease, transform 0.22s ease;
    }
    .fab-actions.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
    .fab-action-item {
      display:flex; align-items:center; gap:8px; cursor:pointer;
    }
    .fab-action-label {
      font-size:0.75rem; color:#07132f; white-space:nowrap;
      background:rgba(255,255,255,0.88); backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      padding:3px 10px; border-radius:12px;
      border:1px solid rgba(7,19,47,0.08);
      box-shadow:0 1px 4px rgba(7,19,66,0.06);
    }
    .fab-action-btn {
      width:42px; height:42px; border-radius:50%; border:1px solid rgba(7,19,47,0.1);
      background:rgba(255,255,255,0.92); backdrop-filter:blur(12px);
      box-shadow:0 2px 10px rgba(7,19,66,0.1); cursor:pointer;
      display:grid; place-items:center; transition:all 0.18s ease; color:#60708f;
    }
    .fab-action-btn:hover { transform:scale(1.1); color:#0068ff; box-shadow:0 4px 16px rgba(7,19,66,0.16); }
    .fab-action-btn svg { width:18px; height:18px; }

    /* Panels (feedback/tip/share) */
    .fab-panel {
      display:none; position:absolute; bottom:60px; right:0;
      min-width:320px; max-width:420px;
      background:rgba(255,255,255,0.96); border-radius:10px; border:1px solid rgba(7,19,47,0.1);
      box-shadow:0 8px 40px rgba(7,19,66,0.16); overflow:auto;
      backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      resize:both;
    }
    .fab-panel.open { display:block; }
    .fab-panel-hdr {
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 18px 8px;
    }
    .fab-panel-hdr h3 { font-size:0.92rem; font-weight:600; color:#07132f; margin:0; }
    .fab-panel-close {
      width:28px; height:28px; border-radius:50%; border:none;
      background:rgba(7,19,47,0.05); cursor:pointer; font-size:1.1rem;
      color:#60708f; display:grid; place-items:center; transition:all 0.15s;
    }
    .fab-panel-close:hover { background:rgba(7,19,47,0.1); color:#07132f; }
    .fab-panel-body { padding:16px 18px; }

    /* ── Feedback styles ── */
    .fb-editor {
      width:100%; min-height:100px; max-height:300px; padding:10px 12px;
      border:1px solid rgba(7,19,47,0.1); border-radius:8px;
      font:inherit; font-size:0.85rem; outline:none;
      background:#fff; color:#07132f; transition:border-color 0.15s;
      margin-bottom:10px; overflow-y:auto; line-height:1.6; resize:both; box-sizing:border-box;
    }
    .fb-editor:focus { border-color:#0068ff; }
    .fb-editor:empty::before { content:attr(placeholder); color:#a0aec0; pointer-events:none; }
    .fb-editor img { max-width:100%; border-radius:6px; margin:8px 0; border:1px solid rgba(7,19,47,0.08); }
    .fb-editor ul,.fb-editor ol { padding-left:20px; margin:4px 0; }
    .fb-toolbar { display:flex; gap:2px; margin-bottom:8px; flex-wrap:wrap; }
    .fb-tool-btn {
      width:28px; height:28px; border-radius:6px; border:none;
      background:transparent; cursor:pointer; font-size:0.78rem; color:#60708f;
      display:grid; place-items:center; transition:all 0.15s;
    }
    .fb-tool-btn:hover { background:rgba(0,104,255,0.08); color:#0068ff; }
    .fb-sep { width:1px; background:rgba(7,19,47,0.1); margin:0 4px; align-self:stretch; }
    .fab-input {
      width:100%; padding:10px 12px; margin-bottom:12px; box-sizing:border-box;
      border:1px solid rgba(7,19,47,0.1); border-radius:8px;
      font:inherit; font-size:0.85rem; outline:none;
      background:#fff; color:#07132f; transition:border-color 0.15s;
    }
    .fab-input:focus { border-color:#0068ff; }
    .fab-input::placeholder { color:#a0aec0; }
    .fab-btn {
      width:100%; padding:10px; border:none; border-radius:8px;
      background:linear-gradient(135deg,#0068ff,#3b82f6); color:#fff;
      font:inherit; font-size:0.88rem; font-weight:600; cursor:pointer;
      transition:opacity 0.15s;
    }
    .fab-btn:hover { opacity:0.9; }
    .fab-btn:disabled { opacity:0.5; cursor:default; }
    .fab-btn.secondary {
      background:rgba(7,19,47,0.06); color:#07132f; margin-top:8px;
    }
    .fab-msg { text-align:center; padding:16px; font-size:0.85rem; color:#60708f; }
    .fab-msg.success { color:#16a34a; }
    .fab-msg.error { color:#dc2626; }

    /* ── Tip panel styles ── */
    .tip-qr-wrap { text-align:center; padding:8px 0 16px; }
    .tip-qr-wrap img { width:180px; height:180px; border-radius:12px; border:1px solid rgba(7,19,47,0.1); }
    /* ── Tip Sticker Picker ── */
    .tip-sticker-picker { margin: 8px 0 12px; }
    .tip-sticker-cats { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
    .tip-sticker-cat { padding: 3px 10px; border-radius: 12px; border: 1px solid #e2e8f0; background: transparent; font-size: 0.72rem; color: #60708f; cursor: pointer; transition: all 0.15s; }
    .tip-sticker-cat.active { background: #07132f; color: white; border-color: #07132f; }
    .tip-sticker-cat:hover:not(.active) { background: #f0f4f8; }
    .tip-sticker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 220px; overflow-y: auto; }
    .tip-sticker-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 4px 2px; border-radius: 8px; transition: all 0.15s; border: 2px solid transparent; }
    .tip-sticker-item:hover { background: #f0f4f8; }
    .tip-sticker-item.selected { border-color: #FFD54F; background: #FFFDE7; }
    .tip-sticker-item img { width: 42px; height: 42px; object-fit: contain; }
    .tip-sticker-item span { font-size: 0.62rem; color: #60708f; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tip-sticker-selected { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 0; }
    .tip-sticker-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 4px; background: #f0f4f8; border-radius: 12px; font-size: 0.72rem; color: #1a1a2e; }
    .tip-sticker-tag img { width: 18px; height: 18px; }
    .tip-sticker-tag button { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 0.8rem; padding: 0 0 0 2px; line-height: 1; }
    .tip-sticker-tag button:hover { color: #ef4444; }
    .tip-anon-toggle {
      display:flex; align-items:center; gap:8px; margin-bottom:12px;
      font-size:0.82rem; color:#60708f; cursor:pointer; user-select:none;
    }
    .tip-section-divider { text-align:center; color:#a0aec0; font-size:0.78rem; margin:12px 0; position:relative; }
    .tip-section-divider::before, .tip-section-divider::after {
      content:""; position:absolute; top:50%; width:40%; height:1px; background:rgba(7,19,47,0.08);
    }
    .tip-section-divider::before { left:0; } .tip-section-divider::after { right:0; }

    /* ── Share panel styles ── */
    .share-grid { display:flex; gap:12px; justify-content:center; margin-bottom:6px; flex-wrap:wrap; }
    .share-btn-item {
      display:flex; flex-direction:column; align-items:center; gap:6px;
      border:none; background:transparent; cursor:pointer; font:inherit; padding:4px;
      transition:transform 0.15s; min-width:64px;
    }
    .share-btn-item:hover { transform:scale(1.08); }
    .share-btn-item .share-icon-circle {
      width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
      box-shadow:0 2px 10px rgba(0,0,0,0.12); transition:box-shadow 0.15s;
    }
    .share-btn-item:hover .share-icon-circle { box-shadow:0 4px 16px rgba(0,0,0,0.2); }
    .share-btn-item .share-icon-circle svg { width:22px; height:22px; color:#fff; }
    .share-btn-item .share-label { font-size:0.72rem; color:#60708f; }
    .share-url-row { display:flex; gap:6px; margin-top:12px; }
    .share-url-input {
      flex:1; padding:8px 12px; border:1px solid rgba(7,19,47,0.1); border-radius:8px;
      font:inherit; font-size:0.8rem; color:#60708f; background:#f9fafb; outline:none;
    }
    .share-copy-btn {
      padding:8px 16px; border:none; border-radius:8px;
      background:#0068ff; color:#fff; font:inherit; font-size:0.82rem; cursor:pointer;
      transition:opacity 0.15s; white-space:nowrap;
    }
    .share-copy-btn:hover { opacity:0.88; }

    @media(max-width:768px){
      .fab-panel { width:calc(100vw - 48px); right:0; }
      .fab-hub { bottom:16px; right:16px; }
    }