block below so a
       race with the other agent can't break us. -->
  <link rel="stylesheet" href="/account/styles.css">

  <!-- Phase-two tokens — guaranteed source of truth for --pkc-* vars even if
       the shared styles.css hasn't been written yet by the parallel agent. -->
  <link rel="stylesheet" href="/phase-two/styles.css">

  <style>
    /* ─────────────────────────────────────────────────────────────
     * /account/ SPA — self-contained styles
     * Reuses --pkc-* tokens from phase-two. Never redefines them.
     * Mirrors phase-three's brutalist vocabulary: dark + orange,
     * 2px borders, JetBrains Mono micro-copy, hi-vis underlines.
     * ───────────────────────────────────────────────────────────── */

    body { display: flex; flex-direction: column; min-height: 100dvh; }

    /* ── Header ──────────────────────────────────────────────── */
    .account-shell {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 24px;
      padding: 18px 32px;
      border-bottom: 2px solid var(--pkc-border);
      background: var(--pkc-bg);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .monogram {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .monogram svg {
      width: 28px;
      height: 28px;
      display: block;
    }

    .monogram-text {
      font-family: var(--font-display);
      font-size: 13px;
      letter-spacing: 0.02em;
      color: var(--pkc-text);
    }

    .header-status {
      justify-self: center;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text-muted);
      background: var(--pkc-surface);
      border: 1px solid var(--pkc-border);
      border-radius: 2px;
      min-height: 26px;
      transition: color var(--duration-fast) var(--ease-snappy),
                  border-color var(--duration-fast) var(--ease-snappy),
                  background var(--duration-fast) var(--ease-snappy);
    }
    .header-status[data-tone="working"] { color: var(--pkc-accent); border-color: var(--pkc-accent); }
    .header-status[data-tone="success"] { color: var(--pkc-neon); border-color: var(--pkc-neon); }
    .header-status[data-tone="error"]   { color: var(--pkc-danger); border-color: var(--pkc-danger); }

    .user-menu { position: relative; justify-self: end; }

    .user-menu-trigger {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px 6px 14px;
      background: transparent;
      border: 2px solid var(--pkc-border);
      border-radius: 2px;
      font-family: var(--font-display);
      font-size: 13px;
      letter-spacing: 0.02em;
      color: var(--pkc-accent);
      cursor: pointer;
      transition: border-color var(--duration-fast) var(--ease-snappy);
    }
    .user-menu-trigger:hover,
    .user-menu-trigger[aria-expanded="true"] { border-color: var(--pkc-accent); }
    .user-menu-trigger:focus-visible { outline: 2px solid var(--pkc-accent); outline-offset: 2px; }

    .user-menu-caret {
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--pkc-accent);
      transition: transform var(--duration-fast) var(--ease-snappy);
    }
    .user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }

    .user-menu-pop {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 180px;
      background: var(--pkc-surface);
      border: 2px solid var(--pkc-border-strong);
      border-radius: 2px;
      padding: 4px;
      display: none;
      box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    }
    .user-menu-pop[data-open="true"] { display: block; }

    .user-menu-item {
      display: block;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: 0;
      text-align: left;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text);
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-snappy),
                  color var(--duration-fast) var(--ease-snappy);
    }
    .user-menu-item:hover,
    .user-menu-item:focus-visible { background: var(--pkc-accent); color: var(--pkc-accent-ink); outline: none; }
    .user-menu-item--danger { color: var(--pkc-danger); }
    .user-menu-item--danger:hover { background: var(--pkc-danger); color: var(--pkc-bg); }

    /* ── Tab strip ───────────────────────────────────────────── */
    .tab-strip {
      display: flex;
      gap: 0;
      padding: 0 32px;
      border-bottom: 2px solid var(--pkc-border);
      background: var(--pkc-bg);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .tab-strip::-webkit-scrollbar { display: none; }

    .tab {
      position: relative;
      padding: 18px 22px;
      background: transparent;
      border: 0;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text-muted);
      cursor: pointer;
      white-space: nowrap;
      transition: color var(--duration-fast) var(--ease-snappy),
                  border-color var(--duration-fast) var(--ease-snappy);
    }
    .tab:hover { color: var(--pkc-text); }
    .tab[aria-selected="true"] {
      color: var(--pkc-accent);
      border-bottom-color: var(--pkc-accent);
    }
    .tab:focus-visible { outline: 2px solid var(--pkc-accent); outline-offset: -2px; }

    /* ── Main / panels ───────────────────────────────────────── */
    main.account-main {
      flex: 1;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 32px 96px;
    }

    .tabpanel { display: none; }
    .tabpanel[data-active="true"] {
      display: block;
      animation:
        pkc-pop-up var(--duration-snap) var(--ease-snappy) both,
        pkc-scanline-in var(--duration-snap) var(--ease-scan) both;
    }

    .panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin: 0 0 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--pkc-border);
    }
    .panel-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 28px;
      letter-spacing: -0.01em;
      color: var(--pkc-text);
    }
    .panel-subtitle {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text-muted);
    }

    /* ── Loading & empty states (brutalist full-state) ───────── */
    .full-state {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 60px 0;
    }
    .full-state .step-label {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-accent);
    }
    .full-state h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 36px;
      letter-spacing: -0.01em;
      color: var(--pkc-text);
    }
    .full-state p {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--pkc-text-muted);
    }

    /* ── Forms — extend phase-two/three patterns ─────────────── */
    .field {
      display: flex;
      flex-direction: column;
      margin-bottom: 28px;
    }
    .field-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text-muted);
    }
    .input {
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 14px 0;
      background: transparent;
      border: 0;
      border-bottom: 2px solid var(--pkc-border);
      border-radius: 0;
      color: var(--pkc-text);
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.01em;
      caret-color: var(--pkc-accent);
      outline: none;
      transition: border-color var(--duration-fast) var(--ease-snappy);
    }
    .input:focus { border-bottom-color: var(--pkc-accent); }
    .input:focus-visible { outline: 2px solid var(--pkc-accent); outline-offset: 6px; border-radius: 2px; }
    .input:read-only { color: var(--pkc-text-muted); cursor: not-allowed; }
    textarea.input { min-height: 88px; line-height: 1.5; resize: vertical; }

    .field-hint {
      margin-top: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--pkc-text-muted);
    }
    .field-hint .hl { color: var(--pkc-accent); }
    .field-error {
      margin-top: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--pkc-danger);
    }
    .field.invalid .input { border-bottom-color: var(--pkc-danger); }

    /* ── Profile grid ────────────────────────────────────────── */
    .profile-grid {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 40px;
    }
    @media (max-width: 720px) {
      .profile-grid { grid-template-columns: 1fr; gap: 28px; }
    }

    .avatar-slot {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .avatar-frame {
      width: 100%;
      aspect-ratio: 1 / 1;
      border: 2px dashed var(--pkc-border-strong);
      background: var(--pkc-surface);
      display: grid;
      place-items: center;
      color: var(--pkc-text-muted);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-align: center;
      padding: 16px;
    }
    .avatar-frame[data-has-image="true"] { border-style: solid; border-color: var(--pkc-accent); padding: 0; }
    .avatar-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .avatar-caption {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--pkc-text-muted);
    }

    .row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    @media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; gap: 0; } }

    .form-actions {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-top: 16px;
      padding-top: 24px;
      border-top: 1px solid var(--pkc-border);
      flex-wrap: wrap;
    }

    /* ── Buttons ─────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: var(--pkc-accent);
      color: var(--pkc-accent-ink);
      border: 2px solid var(--pkc-accent);
      border-radius: 2px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background var(--duration-fast) var(--ease-snappy),
                  color var(--duration-fast) var(--ease-snappy),
                  border-color var(--duration-fast) var(--ease-snappy),
                  opacity var(--duration-fast) var(--ease-snappy);
    }
    .btn:hover { background: var(--pkc-text); color: var(--pkc-bg); border-color: var(--pkc-text); }
    .btn:focus-visible { outline: 2px solid var(--pkc-accent); outline-offset: 4px; }
    .btn[disabled],
    .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

    .btn--ghost {
      background: transparent;
      color: var(--pkc-text);
      border-color: var(--pkc-border-strong);
    }
    .btn--ghost:hover { background: var(--pkc-surface); color: var(--pkc-text); border-color: var(--pkc-accent); }

    .btn--danger {
      background: var(--pkc-danger);
      color: var(--pkc-bg);
      border-color: var(--pkc-danger);
    }
    .btn--danger:hover { background: var(--pkc-text); color: var(--pkc-bg); border-color: var(--pkc-text); }

    .btn--sm { padding: 8px 14px; font-size: 11px; }

    /* ── Inline link ─────────────────────────────────────────── */
    .inline-link {
      background: none;
      border: 0;
      padding: 0;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-accent);
      cursor: pointer;
    }
    .inline-link:hover { color: var(--pkc-text); }
    .inline-link:focus-visible { outline: 2px solid var(--pkc-accent); outline-offset: 2px; }

    /* ── Security subsections ────────────────────────────────── */
    .sec-card {
      margin-bottom: 32px;
      padding: 24px;
      background: var(--pkc-surface);
      border: 1px solid var(--pkc-border);
      border-radius: 2px;
    }
    .sec-card h3 {
      margin: 0 0 4px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-accent);
    }
    .sec-card-sub {
      margin: 0 0 20px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--pkc-text-muted);
    }
    .sec-card-result {
      margin-top: 12px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      min-height: 14px;
    }
    .sec-card-result[data-tone="success"] { color: var(--pkc-neon); }
    .sec-card-result[data-tone="error"]   { color: var(--pkc-danger); }

    /* ── Sessions list ───────────────────────────────────────── */
    .sessions-list { display: flex; flex-direction: column; gap: 0; }
    .session-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 16px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--pkc-border);
    }
    .session-row:last-child { border-bottom: 0; }
    .session-label {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--pkc-text);
    }
    .session-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--pkc-text-muted);
    }
    .session-badge {
      padding: 3px 8px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-accent);
      border: 1px solid var(--pkc-accent);
      border-radius: 2px;
    }

    /* ── Danger zone ─────────────────────────────────────────── */
    .danger-zone {
      border: 2px solid var(--pkc-danger);
      padding: 20px 24px;
      background: var(--pkc-surface);
      border-radius: 2px;
    }
    .danger-zone[data-expanded="false"] .danger-body { display: none; }
    .danger-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .danger-head h3 {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-danger);
    }
    .danger-body { margin-top: 20px; }

    /* ── Notifications grid ──────────────────────────────────── */
    .notif-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 560px) { .notif-grid { grid-template-columns: 1fr; } }

    .notif-card {
      padding: 20px;
      background: var(--pkc-surface);
      border: 1px solid var(--pkc-border);
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: border-color var(--duration-fast) var(--ease-snappy);
    }
    .notif-card[data-locked="true"] { opacity: 0.7; }

    .notif-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .notif-card h3 {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text);
    }
    .notif-card .desc {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--pkc-text-muted);
    }
    .notif-tag {
      display: inline-block;
      padding: 2px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text-muted);
      border: 1px solid var(--pkc-border);
      border-radius: 2px;
    }
    .notif-tag[data-tone="locked"]  { color: var(--pkc-text-muted); border-color: var(--pkc-border-strong); }
    .notif-tag[data-tone="soon"]    { color: var(--pkc-accent); border-color: var(--pkc-accent); }

    /* Toggle (replicates phase-two/three vocabulary) */
    .toggle {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      user-select: none;
    }
    .toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .toggle-frame {
      position: relative;
      width: 44px;
      height: 22px;
      background: var(--pkc-surface);
      border: 2px solid var(--pkc-border-strong);
      border-radius: 2px;
      transition: background var(--duration-fast) var(--ease-snappy),
                  border-color var(--duration-fast) var(--ease-snappy);
    }
    .toggle-dot {
      position: absolute;
      top: 2px; left: 2px;
      width: 14px; height: 14px;
      background: var(--pkc-border-strong);
      transition: transform var(--duration-fast) var(--ease-snappy),
                  background var(--duration-fast) var(--ease-snappy);
    }
    .toggle input:checked + .toggle-frame { border-color: var(--pkc-accent); }
    .toggle input:checked + .toggle-frame .toggle-dot {
      transform: translateX(22px);
      background: var(--pkc-accent);
    }
    .toggle input:focus-visible + .toggle-frame {
      outline: 2px solid var(--pkc-accent);
      outline-offset: 2px;
    }
    .toggle input:disabled + .toggle-frame { opacity: 0.5; cursor: not-allowed; }

    /* ── Activity timeline ───────────────────────────────────── */
    .activity-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }
    .timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .timeline-row {
      display: grid;
      grid-template-columns: 130px 130px 1fr;
      gap: 20px;
      align-items: baseline;
      padding: 14px 0;
      border-bottom: 1px solid var(--pkc-border);
    }
    @media (max-width: 640px) {
      .timeline-row { grid-template-columns: 1fr; gap: 4px; }
    }
    .timeline-time {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--pkc-text-muted);
    }
    .timeline-type {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--pkc-text);
    }
    .timeline-type[data-tone="success"] { color: var(--pkc-neon); }
    .timeline-type[data-tone="fail"]    { color: var(--pkc-danger); }
    .timeline-type[data-tone="neutral"] { color: var(--pkc-text-muted); }
    .timeline-summary {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--pkc-text);
    }

    /* ── Boot state ──────────────────────────────────────────── */
    .boot-state {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 96px 32px;
      max-width: 720px;
      margin: 0 auto;
      text-align: left;
    }

    /* ── Char counter ────────────────────────────────────────── */
    .char-count { color: var(--pkc-accent); }

    /* ── Tooltip-ish hint on locked toggles ──────────────────── */
    .lock-icon {
      display: inline-block;
      margin-left: 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      color: var(--pkc-text-muted);
    }