.macro-calculator-app {
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 24px;
      --space-2xl: 32px;
      --gray-50: #fbfbfb;
      --gray-100: #f7f7f7;
      --gray-150: #f2f2f2;
      --gray-200: #eeeeee;
      --gray-300: #dddddd;
      --gray-400: #bbbbbb;
      --gray-500: #999999;
      --gray-600: #666666;
      --gray-700: #444444;
      --gray-800: #222222;
      --gray-900: #111111;
      --bg-canvas: #ffffff;
      --bg-module: #f7f7f7;
      --bg-hover: #eeeeee;
      --bg-hover-subtle: #f2f2f2;
      --bg-active: #111111;
      --bg-disabled: #eeeeee;
      --text-primary: #111111;
      --text-secondary: #444444;
      --text-tertiary: #666666;
      --text-placeholder: #999999;
      --text-disabled: #999999;
      --text-on-dark: #ffffff;
      --border: #dddddd;
      --border-strong: #222222;
      --success: #276749;
      --danger: #a12424;
      --radius-sm: 4px;
      --radius: 6px;
      --radius-round: 999px;
      --font-sans: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 0 360px 48px 30px;
      color: var(--text-primary);
      background: var(--bg-canvas);
      font: 15px/1.7 var(--font-sans);
    }

    .macro-calculator-app *,
    .macro-calculator-app *::before,
    .macro-calculator-app *::after { box-sizing: border-box; }
    .macro-calculator-app button,
    .macro-calculator-app input,
    .macro-calculator-app summary { font: inherit; }
    .macro-calculator-app button:focus-visible,
    .macro-calculator-app input:focus-visible,
    .macro-calculator-app summary:focus-visible {
      outline: 2px solid var(--border-strong);
      outline-offset: 2px;
    }
    .macro-calculator-app a {
      color: inherit;
      text-underline-offset: 3px;
    }
    .macro-calculator-app [hidden] { display: none !important; }
    .macro-calculator-app .num,
    .macro-calculator-app input[type="number"] {
      font-variant-numeric: tabular-nums;
    }
    .macro-calculator-app .tool-page-header {
      padding-block: 24px 16px;
      border-bottom: 1px solid var(--border);
    }
    .macro-calculator-app .tool-page-header h1 {
      margin: 0;
      font-size: 30px;
      font-weight: 750;
      line-height: 1.2;
      letter-spacing: -.5px;
    }
    .macro-calculator-app .page-description {
      margin: 4px 0 0;
      color: var(--text-tertiary);
      font-size: 16px;
    }
    .macro-calculator-app .tool-core { padding-top: 16px; }
    .macro-calculator-app .calculator-grid {
      display: grid;
      grid-template-columns: minmax(280px, .92fr) minmax(340px, 1.08fr);
      gap: var(--space-md);
      align-items: stretch;
    }
    .macro-calculator-app .card-block {
      margin-bottom: 16px;
      padding: 16px 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-module);
    }
    .macro-calculator-app .calculator-grid > .card-block { margin-bottom: 0; }
    .macro-calculator-app .panel-title {
      margin: 0 0 12px;
      font-size: 18px;
      line-height: 1.4;
    }
    .macro-calculator-app h2.panel-title {
      padding: 0;
      border: 0;
    }
    .macro-calculator-app .mode-switcher {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-sm);
      margin-bottom: 16px;
    }
    .macro-calculator-app .btn,
    .macro-calculator-app .mode-button,
    .macro-calculator-app .chip {
      min-width: 80px;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-canvas);
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .macro-calculator-app .btn:hover,
    .macro-calculator-app .mode-button:hover,
    .macro-calculator-app .chip:hover {
      border-color: var(--gray-400);
      background: var(--bg-hover);
    }
    .macro-calculator-app .btn:active,
    .macro-calculator-app .mode-button:active,
    .macro-calculator-app .chip:active { transform: translateY(1px); }
    .macro-calculator-app .mode-button[aria-pressed="true"],
    .macro-calculator-app .btn-primary {
      border-color: var(--bg-active);
      background: var(--bg-active);
      color: var(--text-on-dark);
    }
    .macro-calculator-app .btn-primary:hover { background: var(--gray-800); }
    .macro-calculator-app .field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .macro-calculator-app .field { min-width: 0; }
    .macro-calculator-app .field-full { grid-column: 1 / -1; }
    .macro-calculator-app .field label,
    .macro-calculator-app .field-label {
      display: block;
      margin-bottom: 4px;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 700;
    }
    .macro-calculator-app .input-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      overflow: hidden;
      height: 44px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-canvas);
    }
    .macro-calculator-app .input-wrap:focus-within { border-color: var(--border-strong); }
    .macro-calculator-app .input-wrap:has(input[aria-invalid="true"]) { border-color: var(--danger); }
    .macro-calculator-app .input-base {
      min-width: 0;
      height: 42px;
      padding: 0 12px;
      border: 0;
      outline: 0;
      color: var(--text-primary);
      background: transparent;
      font-size: 15px;
    }
    .macro-calculator-app .input-base:focus-visible {
      outline: 2px solid var(--border-strong);
      outline-offset: -2px;
    }
    .macro-calculator-app .input-base[readonly] {
      color: var(--text-secondary);
      background: var(--gray-50);
    }
    .macro-calculator-app .unit {
      align-self: stretch;
      display: grid;
      min-width: 48px;
      place-items: center;
      padding: 0 10px;
      border-left: 1px solid var(--border);
      color: var(--text-tertiary);
      background: var(--gray-50);
      font-size: 13px;
    }
    .macro-calculator-app .field-help,
    .macro-calculator-app .error-text {
      min-height: 20px;
      margin: 3px 0 0;
      color: var(--text-tertiary);
      font-size: 12px;
      line-height: 1.5;
    }
    .macro-calculator-app .error-text { color: var(--danger); }
    .macro-calculator-app .rule-note {
      margin: 12px 0 0;
      padding: 10px 12px;
      border-left: 3px solid var(--gray-900);
      background: var(--gray-100);
      color: var(--text-secondary);
      font-size: 13px;
    }
    .macro-calculator-app .preset-row,
    .macro-calculator-app .action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .macro-calculator-app .chip {
      min-width: 0;
      min-height: 34px;
      padding: 4px 12px;
      border-radius: var(--radius-round);
      font-size: 13px;
    }
    .macro-calculator-app .status-line {
      min-height: 24px;
      margin: 8px 0 0;
      color: var(--text-tertiary);
      font-size: 13px;
    }
    .macro-calculator-app .status-line.is-success { color: var(--success); }
    .macro-calculator-app .status-line.is-error { color: var(--danger); }
    .macro-calculator-app .result-hero {
      padding: 16px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
      background: var(--bg-canvas);
    }
    .macro-calculator-app .result-kicker {
      display: block;
      color: var(--text-tertiary);
      font-size: 13px;
      font-weight: 700;
    }
    .macro-calculator-app .result-total {
      display: block;
      margin-top: 2px;
      font-size: clamp(26px, 4vw, 42px);
      font-weight: 750;
      line-height: 1.2;
    }
    .macro-calculator-app .macro-results {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }
    .macro-calculator-app .macro-card {
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-canvas);
    }
    .macro-calculator-app .macro-name {
      display: block;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 700;
    }
    .macro-calculator-app .macro-value {
      display: block;
      margin-top: 2px;
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 750;
      line-height: 1.25;
    }
    .macro-calculator-app .macro-meta {
      display: block;
      margin-top: 3px;
      color: var(--text-tertiary);
      font-size: 12px;
      line-height: 1.45;
    }
    .macro-calculator-app .energy-visual {
      margin-top: 16px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-canvas);
    }
    .macro-calculator-app .energy-visual-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 700;
    }
    .macro-calculator-app .energy-bar {
      display: flex;
      overflow: hidden;
      width: 100%;
      height: 24px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      background: var(--gray-200);
    }
    .macro-calculator-app .energy-segment {
      min-width: 0;
      transition: width 160ms ease;
    }
    .macro-calculator-app .segment-protein { background: #222222; }
    .macro-calculator-app .segment-fat { background: #777777; }
    .macro-calculator-app .segment-carbs {
      background: repeating-linear-gradient(135deg, #bbbbbb 0, #bbbbbb 5px, #eeeeee 5px, #eeeeee 10px);
    }
    .macro-calculator-app .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      margin-top: 8px;
      color: var(--text-secondary);
      font-size: 12px;
    }
    .macro-calculator-app .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .macro-calculator-app .legend-swatch {
      width: 12px;
      height: 12px;
      border: 1px solid var(--border-strong);
      border-radius: 2px;
    }
    .macro-calculator-app .process {
      margin: 14px 0 0;
      padding-left: 20px;
      color: var(--text-secondary);
    }
    .macro-calculator-app .process li + li { margin-top: 4px; }
    .macro-calculator-app .result-note {
      margin: 12px 0 0;
      color: var(--text-tertiary);
      font-size: 13px;
    }
    .macro-calculator-app h2 {
      margin: 32px 0 16px;
      padding-left: 12px;
      border-left: 3px solid var(--gray-900);
      font-size: 24px;
      line-height: 1.3;
    }
    .macro-calculator-app .accordion {
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .macro-calculator-app details + details { border-top: 1px solid var(--border); }
    .macro-calculator-app summary {
      position: relative;
      padding: 14px 44px 14px 16px;
      background: var(--bg-module);
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }
    .macro-calculator-app summary::-webkit-details-marker { display: none; }
    .macro-calculator-app summary::after {
      position: absolute;
      top: 50%;
      right: 18px;
      content: "+";
      font-weight: 700;
      transform: translateY(-50%);
    }
    .macro-calculator-app details[open] summary::after { content: "−"; }
    .macro-calculator-app .acc-panel {
      padding: 0 16px 16px;
      background: var(--bg-module);
    }
    .macro-calculator-app .acc-panel p { max-width: 72ch; margin: 0; }
    .macro-calculator-app .acc-panel p + p,
    .macro-calculator-app .acc-panel ul + p { margin-top: 10px; }
    .macro-calculator-app .acc-panel ul,
    .macro-calculator-app .acc-panel ol {
      max-width: 72ch;
      margin: 8px 0 0;
      padding-left: 22px;
    }
    .macro-calculator-app .example-box {
      margin-top: 12px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-canvas);
    }
    .macro-calculator-app .example-box strong { display: block; margin-bottom: 4px; }
    .macro-calculator-app .toast {
      position: fixed;
      z-index: 900;
      right: 50%;
      bottom: max(18px, env(safe-area-inset-bottom));
      max-width: calc(100vw - 24px);
      padding: 9px 14px;
      border: 0;
      border-radius: var(--radius);
      color: var(--text-on-dark);
      background: var(--gray-900);
      transform: translateX(50%);
      cursor: pointer;
    }
    .macro-calculator-app .coach-mark {
      position: fixed;
      z-index: 1000;
      inset: 0;
      padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }
    .macro-calculator-app .coach-mark__shade {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .macro-calculator-app .coach-mark__ring {
      position: fixed;
      border: 2px solid #ffffff;
      border-radius: var(--radius);
      pointer-events: none;
    }
    .macro-calculator-app .coach-mark__callout {
      position: fixed;
      width: 280px;
      max-width: calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
      margin: 0;
      padding: 16px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
      color: var(--text-primary);
      background: var(--bg-canvas);
    }
    .macro-calculator-app .coach-mark__title {
      margin-bottom: 6px;
      font-size: 18px;
      font-weight: 700;
    }
    .macro-calculator-app .coach-mark__callout p { margin: 0; }
    .macro-calculator-app .coach-mark__actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }
    .macro-calculator-app .coach-mark__button {
      min-width: 80px;
      min-height: 44px;
      padding: 0 16px;
      border: 1px solid var(--gray-900);
      border-radius: var(--radius);
      color: var(--text-on-dark);
      background: var(--gray-900);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    @media (max-width: 900px) {
      .macro-calculator-app { padding-right: 8px; padding-left: 8px; }
    }
    @media (max-width: 720px) {
      .macro-calculator-app .calculator-grid,
      .macro-calculator-app .field-grid,
      .macro-calculator-app .macro-results { grid-template-columns: 1fr; gap: 8px; }
      .macro-calculator-app .field-full { grid-column: auto; }
      .macro-calculator-app .card-block { padding: 16px 14px; }
      .macro-calculator-app .result-total { font-size: 30px; }
      .macro-calculator-app .macro-value { font-size: 26px; }
    }
    @media (max-width: 430px) {
      .macro-calculator-app .mode-switcher { grid-template-columns: 1fr; }
      .macro-calculator-app .action-row .btn { flex: 1 1 calc(50% - 4px); padding-inline: 10px; }
      .macro-calculator-app .coach-mark__button {
        min-width: 68px;
        min-height: 44px;
        padding-inline: 10px;
        font-size: 13px;
      }
    }
    @media (hover: none) {
      .macro-calculator-app .btn:active,
      .macro-calculator-app .mode-button:active,
      .macro-calculator-app .chip:active { transform: none; background: var(--bg-hover); }
      .macro-calculator-app .btn,
      .macro-calculator-app .mode-button { min-height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .macro-calculator-app * { scroll-behavior: auto !important; transition-duration: 0s !important; }
    }