:root {
    --fg: #111; --muted: #666; --bg: #fafafa;
    --card: #fff; --border: #e5e5e5;
    --accent: #0b5fff; --danger: #c33; --ok: #0a7d2b;
  }
  * { box-sizing: border-box; }
  body {
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--fg); background: var(--bg); margin: 0;
  }
  header {
    display: flex; align-items: center; gap: 24px;
    padding: 10px 20px; border-bottom: 1px solid var(--border);
    background: var(--card);
  }
  header .brand {
    font-size: 15px; font-weight: 600; color: var(--fg);
    text-decoration: none; white-space: nowrap;
  }
  header nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
  header nav a {
    padding: 6px 10px; border-radius: 4px;
    color: var(--muted); text-decoration: none; font-size: 13px;
  }
  header nav a:hover { color: var(--fg); background: var(--bg); }
  header nav a[aria-current="page"] {
    color: var(--fg); background: var(--bg); font-weight: 500;
  }
  header > .account-menu { margin-left: auto; }
  header.minimal { justify-content: center; border-bottom-color: transparent; }
  header.minimal .brand { font-size: 18px; }
  main { margin: 24px auto; padding: 0 20px; }

  /* Server-rendered account chip. CSS-only dropdown via <details>; no JS
     needed to open/close. The summary marker is suppressed because the
     chip carries its own ▾ glyph. The label sits in an inner span with a
     hard width cap + ellipsis truncation so a long email doesn't blow out
     the header layout — the full value stays in the DOM (and the title
     attribute) for accessibility / hover reveal. */
  .account-menu { position: relative; }
  .account-menu > summary {
    list-style: none; cursor: pointer;
    padding: 6px 10px; border-radius: 4px;
    color: var(--muted); font-size: 13px;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 240px;
  }
  .account-menu > summary > .label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .account-menu > summary::-webkit-details-marker { display: none; }
  .account-menu > summary:hover,
  .account-menu[open] > summary {
    color: var(--fg); background: var(--bg); border-color: var(--border);
  }
  .account-menu > .menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    min-width: 180px;
    background: var(--card); border: 1px solid var(--border); border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 4px; z-index: 10;
  }
  .account-menu > .menu a,
  .account-menu > .menu button {
    display: block; width: 100%; text-align: left;
    padding: 7px 10px; border-radius: 3px;
    background: transparent; color: var(--fg); border: none;
    font: inherit; font-size: 13px; text-decoration: none;
    cursor: pointer;
  }
  .account-menu > .menu a:hover,
  .account-menu > .menu button:hover { background: var(--bg); }
  .account-menu > .menu form { margin: 0; }
  button {
    padding: 7px 16px;
    background: var(--accent); color: #fff; border: none; border-radius: 4px;
    font: inherit; font-weight: 500; cursor: pointer;
  }
  button.secondary { background: #fff; color: var(--fg); border: 1px solid var(--border); }
  button:disabled { opacity: 0.5; cursor: not-allowed; }

  html, body { -webkit-text-size-adjust: 100%; }
  /* Utility wrapper for wide tables on narrow viewports. Keeps the layout
     from exploding when a table has more columns than the screen can fit. */
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  @media (max-width: 640px) {
    main { margin: 16px auto; padding: 0 12px; }
    /* Nav wraps to its own row below brand + account chip. `order: 3` +
       `flex-basis: 100%` beats the default wrap behavior, which would
       otherwise push .account-menu to a third row because of margin-left: auto. */
    header { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
    header nav { order: 3; flex-basis: 100%; }
    /* iOS auto-zooms when a focused input has font-size < 16px, which
       reflows the whole layout. Forcing 16px on inputs avoids the jump. */
    input, select, textarea { font-size: 16px; }
    /* 44px tap target (iOS HIG minimum). a.btn is declared in the
       integrations page CSS; naming it here is harmless elsewhere. */
    button, a.btn { padding: 10px 16px; min-height: 44px; }
  }