.scuba-chart{
      --bg:#f9f9f9; --fg:#333; --card:#fff; --border:#000; --muted:#f0f0f0; --shadow:0 0 10px rgba(0,0,0,.08);
      margin:0; font-family:Arial, sans-serif; color:var(--fg);
      background:var(--bg); padding:16px;
    }
    .scuba-chart *{ box-sizing:border-box; }

    /* 顶部提示 */
    .scuba-chart .notice{
      text-align:center; font-size:14px; margin:0 auto 14px; padding:6px;
      color:#555;
    }
    .scuba-chart .notice a{
      color:#d63384; font-weight:bold; text-decoration:none;
    }
    .scuba-chart .notice a:hover{ text-decoration:underline; }

    /* 手机/平板：网格布局 */
    .scuba-chart .grid{ max-width:1200px; margin:0 auto; display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
    @media (min-width:600px){ .scuba-chart .grid{ grid-template-columns:repeat(3,1fr);} }
    .scuba-chart .swatch{
      background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
      padding:10px; text-align:center; border-radius:6px;
    }
    .scuba-chart .label{ font-size:14px; margin-bottom:6px; display:block; font-weight:normal; }
    .scuba-chart .color-box{ width:100%; height:90px; border:1px solid #ccc; border-radius:4px; }

    /* 桌面：表格布局 */
    .scuba-chart .table-wrap{ display:none; max-width:1200px; margin:0 auto; }
    .scuba-chart table{
      border-collapse:collapse; margin:12px auto 0; text-align:center; background:var(--card);
      box-shadow:var(--shadow); width:100%; table-layout:fixed;
    }
    .scuba-chart td{
      border:1px solid var(--border); padding:8px 10px; vertical-align:top; word-wrap:break-word;
    }
    .scuba-chart .t-label{ font-size:14px; margin-bottom:6px; display:block; font-weight:normal; }
    .scuba-chart .t-box{ width:100%; height:80px; border:1px solid #ccc; border-radius:4px; }
    .scuba-chart td[colspan="8"]{ background:var(--muted); font-size:16px; font-weight:bold; }

    @media (min-width:1024px){
      .scuba-chart .grid-wrap{ display:none; }
      .scuba-chart .table-wrap{ display:block; }
    }
    @media print{
      .scuba-chart{ padding:0; }
      .scuba-chart .grid-wrap{ display:none !important; }
      .scuba-chart .table-wrap{ display:block !important; }
      .scuba-chart table{ box-shadow:none; }
    }