/* ============================================================
     Palette: sumi ink (墨) base, shu-iro vermillion (朱色) accent,
     ai indigo (藍) secondary, matcha (抹茶) for success states.
     ============================================================ */
  :root {
    --bg: #08080b;
    --bg-2: #0d0d12;
    --panel: #121218;
    --panel-2: #1a1a22;
    --border: #212129;
    --border-2: #2d2d38;
    --text: #f0efec;
    --text-dim: #9d9aa4;
    --text-mute: #6a6774;

    /* 朱色 shu-iro, traditional torii vermillion */
    --accent: #e04e39;
    --accent-2: #c0392b;
    --accent-soft: #f0785e;
    --accent-glow: rgba(224, 78, 57, 0.32);

    /* 藍 ai, indigo */
    --indigo: #3c6997;
    --indigo-glow: rgba(60, 105, 151, 0.3);

    --danger: #d64550;
    --danger-glow: rgba(214, 69, 80, 0.3);
    --success: #7a9e5c;          /* 抹茶 matcha */
    --success-glow: rgba(122, 158, 92, 0.32);
    --info: #5b8fa8;             /* 浅葱 asagi */
    --info-glow: rgba(91, 143, 168, 0.32);
    --gold: #c9a227;             /* 山吹 yamabuki */

    --radius: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* 青海波 seigaiha wave pattern */
    --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.028' stroke-width='1'%3E%3Cpath d='M0 36a36 36 0 0 1 72 0'/%3E%3Cpath d='M0 36a27 27 0 0 1 72 0' transform='scale(1)'/%3E%3Ccircle cx='36' cy='36' r='27'/%3E%3Ccircle cx='36' cy='36' r='18'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3Ccircle cx='0' cy='36' r='27'/%3E%3Ccircle cx='0' cy='36' r='18'/%3E%3Ccircle cx='0' cy='36' r='9'/%3E%3Ccircle cx='72' cy='36' r='27'/%3E%3Ccircle cx='72' cy='36' r='18'/%3E%3Ccircle cx='72' cy='36' r='9'/%3E%3C/g%3E%3C/svg%3E");
    /* 麻の葉 asanoha, used sparingly on panels */
    --asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69' viewBox='0 0 40 69'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.022'%3E%3Cpath d='M20 0v69M0 11.5l20 11.5 20-11.5M0 34.5l20 11.5 20-11.5M0 57.5l20 11.5 20-11.5M0 11.5v23M40 11.5v23M0 34.5v23M40 34.5v23M20 23l-20 11.5M20 23l20 11.5M20 46l-20 11.5M20 46l20 11.5'/%3E%3C/g%3E%3C/svg%3E");
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Nothing in this app should ever scroll sideways */
  html, body { overflow-x: hidden; max-width: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
    background:
      radial-gradient(900px 620px at 82% -8%, rgba(224, 78, 57, 0.10), transparent 62%),
      radial-gradient(760px 520px at -8% 108%, rgba(60, 105, 151, 0.10), transparent 62%),
      var(--seigaiha),
      var(--bg);
    background-attachment: fixed, fixed, fixed, fixed;
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* Faint horizon line, echoes the top edge of a woodblock print */
  body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: linear-gradient(180deg, rgba(224,78,57,0.05) 0%, transparent 22%);
  }
  main, header.topbar { position: relative; z-index: 1; }
  /* Japanese label styling, used for category subtitles and accents */
  .jp {
    font-family: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
    font-weight: 400;
    letter-spacing: 0.14em;
  }