/* 账号与项目沿革 · financial evolution board
   Scoped to #account-timeline. Uses the platform's existing design tokens. */

#account-timeline {
  --at-accent: var(--primary);
  --at-line: color-mix(in srgb, var(--primary) 42%, var(--border));
  --at-soft: color-mix(in srgb, var(--primary) 5%, var(--card));
  margin: 14px 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(1000px 420px at 8% -8%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 2%, var(--card)), var(--card));
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
#account-timeline * { box-sizing: border-box; }
#account-timeline button,
#account-timeline select,
#account-timeline input {
  font: inherit;
  font-size: 12px;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  min-height: 36px;
}
#account-timeline button { cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
#account-timeline button:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--at-soft); }
#account-timeline button:focus-visible,
#account-timeline select:focus-visible,
#account-timeline input:focus-visible,
#account-timeline summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#account-timeline button:disabled { opacity: .5; cursor: wait; }

/* Header */
#account-timeline .at-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding: 2px 2px 18px;
  border-bottom: 1px solid var(--border);
}
#account-timeline .at-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--primary);
  text-transform: uppercase;
}
#account-timeline .at-eyebrow:before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--primary); }
#account-timeline h2 { margin: 8px 0 6px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; font-weight: 680; letter-spacing: -.035em; }
#account-timeline p { max-width: 760px; margin: 4px 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.75; }
#account-timeline .at-heading > button { flex: none; border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); color: var(--primary); font-weight: 600; box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 8%, transparent); }

/* Controls */
#account-timeline .at-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 16px 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--muted) 22%, var(--card)); }
#account-timeline .at-toolbar label { display: flex; flex-direction: column; gap: 5px; font-size: 10px; color: var(--muted-foreground); }
#account-timeline .at-presets { display: flex; gap: 5px; flex-wrap: wrap; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
#account-timeline .at-presets button { min-height: 30px; padding: 6px 10px; border: 0; border-radius: 7px; color: var(--muted-foreground); background: transparent; }
#account-timeline .at-presets button:hover { color: var(--primary); background: var(--at-soft); }
#account-timeline .at-search { flex: 1; min-width: 210px; }
#account-timeline .at-search input { width: 100%; background: var(--card); }

/* Summary cards */
#account-timeline .at-overview { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
#account-timeline .at-overview > span { position: relative; min-width: 0; padding: 13px 14px 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 4%, var(--card)), var(--card)); color: var(--muted-foreground); font-size: 10.5px; line-height: 1.45; }
#account-timeline .at-overview > span:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary); opacity: .8; }
#account-timeline .at-overview > span:nth-child(2):before { background: var(--brand-teal); }
#account-timeline .at-overview > span:nth-child(3):before { background: var(--brand-purple); }
#account-timeline .at-overview > span:nth-child(4):before { background: var(--muted-foreground); }
#account-timeline .at-overview b { display: block; margin: 3px 0 1px; color: var(--foreground); font-size: 19px; font-weight: 680; letter-spacing: -.025em; white-space: nowrap; }
#account-timeline .at-overview > span:first-child b { color: var(--primary); font-size: 24px; }
#account-timeline .at-overview > span:last-child { margin-left: 0; }
#account-timeline .at-overview small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 9.5px; line-height: 1.4; }

/* Canvas toolbar */
#account-timeline .at-canvas-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; padding: 8px 2px; }
#account-timeline .at-canvas-toolbar nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 34px; color: var(--muted-foreground); font-size: 11px; }
#account-timeline .at-canvas-toolbar nav strong { color: var(--foreground); font-weight: 600; }
#account-timeline .at-canvas-toolbar nav > button { min-height: 28px; padding: 4px 8px; border-color: transparent; color: var(--primary); background: transparent; }
#account-timeline .at-canvas-actions { display: flex; gap: 5px; align-items: center; color: var(--muted-foreground); font-size: 10px; }
#account-timeline .at-canvas-actions button { min-height: 30px; padding: 6px 9px; font-size: 11px; }
#account-timeline .at-canvas-actions > span { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

/* Legend */
#account-timeline .at-tree-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 2px 12px; color: var(--muted-foreground); font-size: 10px; }
#account-timeline .at-tree-legend > span { display: inline-flex; align-items: center; gap: 6px; }
#account-timeline .at-tree-legend i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
#account-timeline .at-tree-legend > span:nth-child(2) i { background: var(--card); border: 1px solid var(--primary); }
#account-timeline .at-tree-legend > span:nth-child(3) i { background: var(--brand-teal); }
#account-timeline .at-legend-hint { margin-left: auto; color: color-mix(in srgb, var(--muted-foreground) 82%, transparent); }

/* Month continuity explanation */
#account-timeline .at-month-continuity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.65;
}
#account-timeline .at-month-continuity[hidden] { display: none; }
#account-timeline .at-continuity-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 11px;
  font-weight: 700;
}
#account-timeline .at-month-continuity strong { display: block; margin-bottom: 2px; color: var(--foreground); font-size: 11.5px; font-weight: 650; }
#account-timeline .at-month-continuity p { max-width: none; margin: 0; color: var(--muted-foreground); font-size: 10.5px; line-height: 1.65; }
#account-timeline .at-month-continuity button { min-height: 26px; margin-top: 7px; padding: 3px 8px; border-color: color-mix(in srgb, var(--primary) 20%, var(--border)); color: var(--primary); background: var(--card); font-size: 10.5px; }

/* Canvas */
#account-timeline .at-canvas { height: clamp(620px, calc(100vh - 300px), 900px); overflow: auto; position: relative; cursor: grab; border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border)); border-radius: 16px; background-color: var(--card); background-image: linear-gradient(color-mix(in srgb, var(--primary) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 4%, transparent) 1px, transparent 1px), radial-gradient(900px 380px at 12% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 65%); background-size: 32px 32px, 32px 32px, 100% 100%; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent); overscroll-behavior: contain; touch-action: pan-x pan-y; }
#account-timeline .at-canvas.at-dragging { cursor: grabbing; user-select: none; }
#account-timeline .at-tree { position: relative; min-width: 100%; min-height: 100%; }
#account-timeline .at-tree-scene { position: relative; transform-origin: 0 0; transition: transform .18s ease-out; }
#account-timeline .at-wires { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }

/* Month lanes */
#account-timeline .at-time-column { position: absolute; top: 92px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border)); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, transparent), transparent 46%); }
#account-timeline .at-time-column:before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 10%, transparent)); opacity: .5; }
#account-timeline .at-time-column > .at-month-node { position: absolute; left: 10px; top: -64px; min-height: 48px; padding: 4px 10px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
#account-timeline .at-time-column .at-month-node:before { display: none; }
#account-timeline .at-time-column .at-month-node b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--primary); }
#account-timeline .at-time-column .at-month-node span { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 10px; }

/* Lines */
#account-timeline .at-branch { fill: none; stroke: var(--at-line); stroke-width: 2; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: at-branch-grow .65s cubic-bezier(.22, 1, .36, 1) var(--at-delay, 0s) forwards; }
#account-timeline .at-branch-trunk { stroke-width: 2.6; stroke: color-mix(in srgb, var(--primary) 55%, var(--border)); }
#account-timeline .at-branch-leaf { stroke: color-mix(in srgb, var(--brand-teal) 48%, var(--border)); opacity: .82; }
#account-timeline .at-branch.at-branch-highlight { stroke: var(--primary); stroke-width: 3; opacity: 1; }
#account-timeline .at-existing-branch { animation: none; stroke-dashoffset: 0; }

/* Root */
#account-timeline .at-root { position: absolute; display: flex; flex-direction: column; gap: 7px; padding: 22px 20px; min-height: 250px; border: 0; border-radius: 16px; color: var(--primary-foreground); background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 72%, var(--brand-purple))); box-shadow: 0 18px 38px color-mix(in srgb, var(--primary) 22%, transparent); z-index: 3; }
#account-timeline .at-root-icon { position: absolute; right: 16px; top: 16px; padding: 5px 8px; border-radius: 999px; color: var(--primary-foreground); background: color-mix(in srgb, var(--primary-foreground) 16%, transparent); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
#account-timeline .at-root .at-eyebrow { color: color-mix(in srgb, var(--primary-foreground) 72%, transparent); }
#account-timeline .at-root .at-eyebrow:before { background: color-mix(in srgb, var(--primary-foreground) 70%, transparent); }
#account-timeline .at-root > strong { margin-top: 14px; font-size: 18px; font-weight: 650; line-height: 1.35; }
#account-timeline .at-root-meta { color: color-mix(in srgb, var(--primary-foreground) 74%, transparent); font-size: 10px; line-height: 1.6; }
#account-timeline .at-root > b { margin: 12px 0 2px; font-size: 28px; line-height: 1.1; letter-spacing: -.035em; }
#account-timeline .at-root > b small { font-size: 10px; font-weight: 400; opacity: .75; }
#account-timeline .at-root-caption { margin-top: auto; color: color-mix(in srgb, var(--primary-foreground) 76%, transparent); font-size: 10px; line-height: 1.65; }
#account-timeline .at-root > button { color: var(--primary-foreground); border-color: color-mix(in srgb, var(--primary-foreground) 24%, transparent); }

/* Cards */
#account-timeline .at-leaf { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 7px; height: auto !important; min-height: 96px; padding: 13px 15px; overflow: hidden; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--primary) 2%, var(--card))); box-shadow: 0 4px 14px color-mix(in srgb, var(--foreground) 5%, transparent); z-index: 2; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
#account-timeline .at-leaf:before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
#account-timeline .at-leaf:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); box-shadow: 0 11px 24px color-mix(in srgb, var(--primary) 10%, transparent); }
#account-timeline .at-account-leaf { border-color: color-mix(in srgb, var(--primary) 16%, var(--border)); }
#account-timeline .at-project-leaf { min-height: 86px; background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--brand-teal) 3%, var(--card))); }
#account-timeline .at-project-leaf:before { background: var(--brand-teal); }
#account-timeline .at-expanded { border-color: color-mix(in srgb, var(--primary) 48%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 7%, var(--card)), var(--card)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 9%, transparent); }
#account-timeline .at-leaf-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; overflow: hidden; color: var(--foreground); font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
#account-timeline .at-leaf-title i { flex: none; color: var(--primary); font-size: 10px; font-style: normal; font-weight: 500; }
#account-timeline .at-project-leaf .at-leaf-title i { color: var(--brand-teal); }
#account-timeline .at-leaf-id { width: 100%; overflow: hidden; color: var(--muted-foreground); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
#account-timeline .at-leaf-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; margin-top: 1px; }
#account-timeline .at-leaf-bottom b { color: var(--foreground); font-size: 17px; font-weight: 680; letter-spacing: -.02em; }
#account-timeline .at-leaf-bottom b small { color: var(--muted-foreground); font-size: 9px; font-weight: 400; }
#account-timeline .at-leaf-bottom em { overflow: hidden; color: var(--muted-foreground); font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
#account-timeline .at-account-inspect { position: absolute; z-index: 4; min-height: 20px; padding: 2px 0; border: 0; color: var(--primary); background: transparent; font-size: 10px; }
#account-timeline .at-account-inspect:hover { background: transparent; text-decoration: underline; }
#account-timeline .at-canvas-empty { position: absolute; top: 24px; left: 330px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted-foreground); background: var(--card); }

/* Detail */
#account-timeline .at-inline-detail { margin-top: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border)); border-radius: 14px; background: var(--card); box-shadow: 0 12px 34px color-mix(in srgb, var(--foreground) 7%, transparent); }
#account-timeline .at-inline-detail[hidden] { display: none; }
#account-timeline .at-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 4%, var(--card)); font-size: 12px; }
#account-timeline .at-dialog-bar strong { font-weight: 650; }
#account-timeline .at-detail-panel { padding: 20px 22px 22px; }
#account-timeline .at-detail-head h3 { margin: 8px 0; font-size: 21px; letter-spacing: -.02em; overflow-wrap: anywhere; }
#account-timeline .at-detail-head > strong { display: block; margin: 12px 0 2px; color: var(--primary); font-size: 30px; font-weight: 700; letter-spacing: -.03em; overflow-wrap: anywhere; }
#account-timeline .at-detail-head > strong small { color: var(--muted-foreground); font-size: 11px; font-weight: 400; }
#account-timeline .at-detail-head small { color: var(--muted-foreground); font-size: 11px; }
#account-timeline .at-facts { display: flex; gap: 32px; margin: 14px 0; padding: 13px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#account-timeline .at-facts span { color: var(--muted-foreground); font-size: 10px; }
#account-timeline .at-facts b { display: block; margin-top: 4px; color: var(--foreground); font-size: 12px; font-weight: 600; }
#account-timeline .at-scroll { overflow: auto; }
#account-timeline table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
#account-timeline th, #account-timeline td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: right; }
#account-timeline th:first-child { padding-left: 0; text-align: left; }
#account-timeline th { color: var(--muted-foreground); font-weight: 500; }
#account-timeline td:last-child { padding-right: 0; }
#account-timeline th small { display: block; color: var(--muted-foreground); font-weight: 400; }
#account-timeline tfoot { background: var(--secondary); font-weight: 600; }
#account-timeline a { color: var(--primary); text-decoration: none; }
#account-timeline a:hover { text-decoration: underline; }
#account-timeline .at-reconcile { margin: 14px 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--primary) 3%, var(--card)); font-size: 11px; line-height: 1.9; }
#account-timeline .at-reconcile span { display: block; color: var(--muted-foreground); }
#account-timeline .at-reconcile b { font-weight: 550; overflow-wrap: anywhere; }
#account-timeline .at-note { color: var(--muted-foreground); font-size: 10.5px; line-height: 1.7; }
#account-timeline .at-method { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; }
#account-timeline .at-method summary { cursor: pointer; color: var(--foreground); font-weight: 500; }
#account-timeline .at-method p { max-width: none; margin: 5px 0; }

@keyframes at-branch-grow { to { stroke-dashoffset: 0; } }
@keyframes at-node-grow { from { opacity: 0; transform: translateX(-7px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
#account-timeline .at-grow-node { animation: at-node-grow .3s ease-out var(--at-delay, 0s) both; }
#account-timeline .at-time-column .at-grow-node { animation-name: at-mindmap-move; }
@keyframes at-mindmap-move { from { opacity: var(--at-start-opacity, 0); transform: translate(var(--at-from-x, -7px), var(--at-from-y, 0)); } to { opacity: 1; transform: translate(0, 0); } }

@media (max-width: 1100px) {
  #account-timeline .at-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #account-timeline .at-legend-hint { margin-left: 0; width: 100%; }
}
@media (max-width: 700px) {
  #account-timeline { padding: 14px; border-radius: 14px; }
  #account-timeline h2 { font-size: 22px; }
  #account-timeline .at-toolbar { padding: 9px; }
  #account-timeline .at-search { min-width: 100%; }
  #account-timeline .at-overview { grid-template-columns: 1fr; gap: 8px; }
  #account-timeline .at-overview > span { padding: 11px 12px; }
  #account-timeline .at-overview b { font-size: 18px; }
  #account-timeline .at-canvas { height: 600px; }
  #account-timeline .at-month-continuity { padding: 10px 12px; }
  #account-timeline .at-month-continuity p { font-size: 10px; }
  #account-timeline .at-canvas-toolbar { align-items: flex-start; }
  #account-timeline .at-canvas-actions { flex-wrap: wrap; }
  #account-timeline .at-presets { width: 100%; }
  #account-timeline .at-presets button { flex: 1; padding: 6px 7px; }
  #account-timeline .at-facts { flex-direction: column; gap: 8px; }
  #account-timeline .at-detail-panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #account-timeline .at-grow-node { animation: none; opacity: 1; }
  #account-timeline .at-branch { animation: none; stroke-dashoffset: 0; }
  #account-timeline .at-tree-scene { transition: none; }
  #account-timeline .at-leaf { transition: none; }
}
/* Camera viewport: scene dimensions never create invisible scroll overflow. */
#account-timeline .at-workspace{min-width:0;position:relative;background:var(--card);border-radius:12px}
#account-timeline .at-canvas-toolbar{position:sticky;top:0;z-index:8;background:var(--card);padding:10px 2px}
#account-timeline .at-canvas-actions{flex-wrap:wrap}
#account-timeline #at-zoom-slider{width:82px;min-height:24px;padding:0;accent-color:var(--primary);border:0;background:transparent}
#account-timeline .at-canvas{height:clamp(460px,calc(100dvh - 330px),780px);overflow:hidden;touch-action:none;isolation:isolate;contain:layout paint;background-image:radial-gradient(color-mix(in srgb,var(--border) 80%,transparent) .7px,transparent .7px);background-size:20px 20px;cursor:grab;border-radius:12px}
#account-timeline .at-tree{position:absolute;inset:0;width:100%!important;height:100%!important;min-width:0;min-height:0;overflow:hidden}
#account-timeline .at-tree-scene{position:absolute;left:0;top:0;transform-origin:0 0;transition:none;will-change:transform}
#account-timeline .at-time-column{top:108px;border-width:0 0 0 1px;border-style:dashed;border-color:color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:0;background:transparent}
#account-timeline .at-time-column>.at-month-node{top:-83px;left:0;border:0;background:transparent;box-shadow:none;padding:8px 16px}
#account-timeline .at-time-column .at-month-node:before{display:none}
#account-timeline .at-time-column .at-month-node b{font-size:17px}
#account-timeline .at-leaf{height:var(--at-node-height)!important;min-height:0;max-height:var(--at-node-height);padding:11px 13px;gap:5px;border-radius:9px;box-shadow:0 2px 8px color-mix(in srgb,var(--foreground) 4%,transparent);transition:box-shadow .15s ease,border-color .15s ease}
#account-timeline .at-leaf:hover{transform:none;box-shadow:0 5px 15px color-mix(in srgb,var(--primary) 9%,transparent)}
#account-timeline .at-leaf-title{font-size:13px}
#account-timeline .at-leaf-bottom b{font-size:15px}
#account-timeline .at-leaf-bottom em{font-size:10px}
#account-timeline .at-root{min-height:0;padding:15px;gap:7px;border-radius:11px;background:var(--card);border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));box-shadow:0 4px 16px color-mix(in srgb,var(--primary) 6%,transparent);color:var(--foreground)}
#account-timeline .at-root .at-eyebrow,#account-timeline .at-root-icon{color:var(--primary)}
#account-timeline .at-root>.at-root-meta,#account-timeline .at-root>.at-root-caption{color:var(--muted-foreground)}
#account-timeline .at-root>strong{font-size:16px;color:var(--foreground);margin:5px 0 0}
#account-timeline .at-root>b{color:var(--primary);font-size:22px;margin:6px 0}
#account-timeline .at-root b small{color:var(--muted-foreground)}
#account-timeline .at-root-icon{background:color-mix(in srgb,var(--primary) 8%,var(--card))}
#account-timeline .at-grow-node{animation:at-mindmap-move .3s cubic-bezier(.22,1,.36,1) var(--at-delay,0s) both}
#account-timeline .at-branch{stroke-width:1.6}
#account-timeline .at-minimap{position:absolute;right:12px;bottom:12px;z-index:5;width:150px;height:98px;padding:7px;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:0 3px 12px color-mix(in srgb,var(--foreground) 6%,transparent);cursor:crosshair;touch-action:none}
#account-timeline .at-minimap>span{display:block;font-size:9px;line-height:14px;color:var(--muted-foreground);pointer-events:none}
#account-timeline .at-minimap svg{display:block;width:100%;height:65px;overflow:hidden}
#account-timeline .at-minimap-account,#account-timeline .at-minimap-root{fill:color-mix(in srgb,var(--primary) 50%,var(--card))}
#account-timeline .at-minimap-project{fill:var(--brand-teal)}
#account-timeline .at-minimap-view{fill:color-mix(in srgb,var(--primary) 8%,transparent);stroke:var(--primary);stroke-width:2;vector-effect:non-scaling-stroke}
#account-timeline .at-workspace:fullscreen,#account-timeline .at-workspace.at-theater{padding:16px;background:var(--card);display:flex;flex-direction:column;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden}
#account-timeline .at-workspace.at-theater{position:fixed;inset:0;z-index:1000}
#account-timeline .at-workspace:fullscreen .at-canvas,#account-timeline .at-workspace.at-theater .at-canvas{height:auto;min-height:0;flex:1}
#account-timeline .at-workspace:fullscreen .at-month-continuity,#account-timeline .at-workspace.at-theater .at-month-continuity{display:none}
#account-timeline .at-month-continuity{padding:9px 12px}
@media(max-width:700px){#account-timeline .at-canvas{height:540px}#account-timeline .at-minimap{width:112px;height:80px;right:8px;bottom:8px}#account-timeline .at-minimap svg{height:47px}#account-timeline #at-zoom-slider{width:65px}#account-timeline .at-canvas-toolbar{align-items:center}#account-timeline .at-workspace:fullscreen{padding:10px}}
@media(prefers-reduced-motion:reduce){#account-timeline .at-grow-node{animation:none;opacity:1;transform:none}#account-timeline .at-tree-scene{transition:none!important}}
#account-timeline .at-minimap[hidden]{display:none}
#account-timeline .at-canvas:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
