/* TARA , multi-purpose mail robot. Page-scoped: every rule lives under .ta. */
.ta {
  --ta-ink: #0b1d26; --ta-ink-2: #12303c; --ta-text: #10232c; --ta-muted: #5a6b72; --ta-line: rgba(16, 42, 53, .1);
  --ta-glass: rgba(255, 255, 255, .72); --ta-cyan: #3fb6e8; --ta-mint: #7cf3df; --ta-violet: #7a5cff; --ta-teal: #007b72;
  --ta-grad: linear-gradient(120deg, #19c3b0 0%, #3fb6e8 45%, #7a5cff 100%);
  --ta-ok: #1f8a5b; --ta-warn: #a15b00; --ta-bad: #b42318;
  --ta-r: 22px; --ta-r-sm: 14px;
  --ta-shadow: 0 1px 1px rgba(11, 29, 38, .04), 0 12px 32px -14px rgba(11, 29, 38, .22);
  --ta-ease: cubic-bezier(.2, .8, .2, 1);
  color: var(--ta-text); font-family: var(--font-body, Inter, system-ui, sans-serif);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1240px; margin: 0 auto; padding-bottom: 110px;
}
.ta *, .ta *::before, .ta *::after { box-sizing: border-box; }
.ta > * { min-width: 0; }
.ta-writer { background: var(--ta-glass); border: 1px solid var(--ta-line); border-radius: var(--ta-r-sm); padding: 16px; margin: 16px 0; }
.ta-writer h4 { margin: 0 0 8px; font-size: 1rem; }
.ta-writer .ta-row { align-items: end; flex-wrap: wrap; }
.ta-writer .ta-row > * { min-width: 0; }
.ta-writer-status { font-size: .875rem; color: var(--ta-text); }
.ta-writer-status:empty { display: none; }
.ta-generated { border-top: 1px solid var(--ta-line); padding-top: 16px; overflow-wrap: anywhere; }
.ta-generated-body { white-space: pre-wrap; font-size: .875rem; line-height: 1.7; margin: 12px 0; }
.ta-writer .ta-actions { flex-wrap: wrap; }
.ta [hidden] { display: none !important; }
.ta-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.ta-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 30px 32px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px;
  background: radial-gradient(120% 140% at 0% 0%, #12303c 0%, #0b1d26 55%, #070f15 100%); color: #eaf7f6;
  box-shadow: 0 30px 70px -36px rgba(7, 15, 21, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ta-aurora { position: absolute; inset: -40%; z-index: -1; filter: blur(48px); opacity: .55; pointer-events: none; }
.ta-aurora i { position: absolute; width: 46%; height: 46%; border-radius: 50%; mix-blend-mode: screen; animation: ta-drift 18s var(--ta-ease) infinite alternate; }
.ta-aurora i:nth-child(1) { left: 18%; top: 22%; background: #19c3b0; }
.ta-aurora i:nth-child(2) { left: 48%; top: 10%; background: #3f7fe8; animation-delay: -6s; }
.ta-aurora i:nth-child(3) { left: 62%; top: 42%; background: #7a5cff; animation-delay: -12s; }
@keyframes ta-drift { to { transform: translate3d(8%, 6%, 0) scale(1.15); } }
.ta-orb { width: 108px; height: 108px; flex: none; }
.ta-orb svg { width: 100%; height: 100%; overflow: visible; }
.ta-ring { fill: none; stroke: rgba(159, 246, 234, .35); stroke-width: 1.2; transform-origin: 60px 60px; }
.ta-ring.r1 { stroke-dasharray: 2 6; animation: ta-spin 40s linear infinite; }
.ta-ring.r2 { stroke: rgba(122, 92, 255, .45); stroke-dasharray: 18 10; animation: ta-spin 26s linear infinite reverse; }
.ta-core { filter: drop-shadow(0 0 18px rgba(63, 182, 232, .55)); }
.ta-sats { fill: var(--ta-mint); transform-origin: 60px 60px; animation: ta-spin 14s linear infinite; }
.ta.is-sending .ta-sats { animation-duration: 2.4s; }
.ta.is-sending .ta-core { animation: ta-pulse 1.2s ease-in-out infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }
@keyframes ta-pulse { 50% { filter: drop-shadow(0 0 30px rgba(124, 243, 223, .9)); } }
.ta-kicker { margin: 0 0 4px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #9ff6ea; font-weight: 700; }
.ta-hero h2 { margin: 0; font-family: var(--font-display, Manrope, sans-serif); font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 3.2rem); letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(100deg, #ffffff 10%, #b8fff2 45%, #b9a8ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ta-tag { margin: 8px 0 4px; font-size: 1.15rem; font-weight: 600; color: #f2fbfa; }
.ta-sub { margin: 0; color: rgba(234, 247, 246, .72); font-size: .95rem; max-width: 46ch; }
.ta-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(96px, auto)); gap: 10px; }
.ta-stats div { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(12px); }
.ta-stats dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(234, 247, 246, .6); }
.ta-stats dd { margin: 4px 0 0; font-weight: 700; font-size: .98rem; color: #fff; overflow-wrap: anywhere; }
.ta-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #f0b429; vertical-align: 1px; }
.ta-dot.on { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }

/* ---------- staff bar + tabs ---------- */
.ta-staffbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--ta-glass); border: 1px solid var(--ta-line); }
.ta-staffbar label { font-weight: 700; font-size: .9rem; }
.ta-staffbar select { min-width: 260px; }
.ta-tabs { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(16, 42, 53, .06); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ta-tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 600 .92rem/1 var(--font-body, Inter, sans-serif); color: var(--ta-muted); cursor: pointer; white-space: nowrap; transition: color .25s; }
.ta-tabs button[aria-selected="true"] { color: var(--ta-text); }
.ta-tabs button:focus-visible { outline: 2px solid var(--ta-cyan); outline-offset: 2px; }
.ta-tabs-ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(11, 29, 38, .12); transition: transform .45s var(--ta-ease), width .45s var(--ta-ease); }

.ta-notice { padding: 12px 16px; border-radius: 14px; background: #eef7ff; border: 1px solid #cfe5fb; color: #19456b; font-size: .94rem; }
.ta-notice.warn { background: #fbf1e2; border-color: #f0d6ad; color: #6d3f00; }
.ta-notice a, .ta-notice button { color: inherit; font-weight: 700; }

/* ---------- cards ---------- */
.ta-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ta-card { background: var(--ta-glass); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .8); outline: 1px solid var(--ta-line); outline-offset: -1px;
  border-radius: var(--ta-r); padding: 22px; box-shadow: var(--ta-shadow); display: grid; gap: 14px; min-width: 0; }
.ta-card + .ta-card { margin-top: 18px; }
.ta-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-card-head h3 { margin: 0; font-family: var(--font-display, Manrope, sans-serif); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.ta-card-head .ta-hint { flex-basis: 100%; }
.ta-card-head .ta-btn { margin-left: auto; }
.ta-step { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: #fff; background: var(--ta-grad); box-shadow: 0 6px 14px -6px rgba(63, 182, 232, .8); }
.ta-saved, .ta-count { margin-left: auto; font-size: .82rem; color: var(--ta-muted); font-variant-numeric: tabular-nums; }
.ta-count { padding: 4px 10px; border-radius: 999px; background: rgba(16, 42, 53, .06); font-weight: 700; color: var(--ta-text); }
.ta-count.over { background: #fbeae8; color: var(--ta-bad); }
.ta-hint { color: var(--ta-muted); font-size: .84rem; }
.ta-hint code { font-size: .8rem; background: rgba(16, 42, 53, .06); padding: 1px 5px; border-radius: 6px; }

/* ---------- fields ---------- */
.ta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ta-field { display: grid; gap: 6px; min-width: 0; }
.ta-field > span { font-weight: 700; font-size: .86rem; color: var(--ta-text); }
.ta-field > span small { font-weight: 500; color: var(--ta-muted); }
.ta input[type="text"], .ta input:not([type]), .ta select, .ta textarea {
  width: 100%; font: 500 .97rem/1.5 var(--font-body, Inter, sans-serif); color: var(--ta-text); background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(16, 42, 53, .14); border-radius: 12px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s; }
.ta textarea { resize: vertical; min-height: 96px; }
.ta #taRecipients { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; }
.ta input:focus, .ta select:focus, .ta textarea:focus { outline: none; border-color: var(--ta-cyan); box-shadow: 0 0 0 4px rgba(63, 182, 232, .16); }

.ta-purposes { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-purpose { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(16, 42, 53, .12); background: #fff; padding: 8px 13px; border-radius: 999px; cursor: pointer;
  font: 600 .88rem/1 var(--font-body, Inter, sans-serif); color: var(--ta-text); transition: transform .2s var(--ta-ease), border-color .2s, box-shadow .2s; }
.ta-purpose svg { width: 16px; height: 16px; color: var(--ta-cyan); }
.ta-purpose:hover { transform: translateY(-1px); }
.ta-purpose[aria-checked="true"] { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ta-grad) border-box; border: 1.5px solid transparent; box-shadow: 0 8px 18px -12px rgba(63, 182, 232, .9); }
.ta-purpose:focus-visible { outline: 2px solid var(--ta-cyan); outline-offset: 2px; }
.ta-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-tags button { border: 1px dashed rgba(63, 182, 232, .6); background: rgba(63, 182, 232, .07); color: #135f86; border-radius: 8px; padding: 4px 9px; font: 600 .8rem/1.2 var(--font-body, Inter, sans-serif); cursor: pointer; }
.ta-tags button:hover { background: rgba(63, 182, 232, .16); }
.ta-sig summary, .ta-library summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--ta-text); }
.ta-sig textarea { margin-top: 8px; min-height: 70px; }

.ta-drop { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed rgba(16, 42, 53, .2); background: rgba(255, 255, 255, .6); transition: border-color .2s, background .2s; }
.ta-drop svg { grid-row: span 2; width: 26px; height: 26px; color: var(--ta-cyan); }
.ta-drop span { font-size: .92rem; }
.ta-drop small { color: var(--ta-muted); font-size: .8rem; }
.ta-drop.over, .ta-drop:hover, .ta-drop:focus-visible { border-color: var(--ta-cyan); background: rgba(63, 182, 232, .06); outline: none; }
.ta-attached, .ta-library-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-library-list { margin-top: 8px; }
.ta-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 8px 7px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--ta-line); font-size: .86rem; }
.ta-file b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ta-file small { color: var(--ta-muted); }
.ta-file button { border: 0; background: rgba(16, 42, 53, .06); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--ta-muted); font-size: 1rem; line-height: 1; }
.ta-file.pick { cursor: pointer; }
.ta-file.pick[aria-pressed="true"] { border-color: var(--ta-cyan); background: rgba(63, 182, 232, .08); }
.ta-file.busy { opacity: .6; }

/* ---------- recipients ---------- */
.ta-people-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ta-flags { margin-left: auto; font-size: .8rem; color: var(--ta-warn); }
.ta-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 196px; overflow: auto; }
.ta-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--ta-line); font-size: .82rem; max-width: 100%;
  animation: ta-in .35s var(--ta-ease) both; }
.ta-chips li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.ta-chips li i { font-style: normal; color: var(--ta-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.ta-chips li button { border: 0; background: none; cursor: pointer; color: var(--ta-muted); padding: 0 4px; font-size: .95rem; }
.ta-chips li.bad { border-color: #f3c7c2; background: #fdf3f2; color: var(--ta-bad); }
@keyframes ta-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.ta-avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: var(--ta-grad); flex: none; }

.ta-preview { border-radius: 18px; border: 1px solid var(--ta-line); background: linear-gradient(180deg, #fbfdfe, #f4f8fa); padding: 14px; display: grid; gap: 10px; }
.ta-preview-head { display: flex; align-items: center; gap: 10px; }
.ta-preview-head h4 { margin: 0; font-size: .9rem; font-weight: 800; }
.ta-preview-head select { margin-left: auto; width: auto; max-width: 60%; padding: 6px 10px; font-size: .84rem; }
.ta-mail { background: #fff; border-radius: 14px; border: 1px solid var(--ta-line); padding: 14px 16px; display: grid; gap: 6px; box-shadow: 0 10px 24px -20px rgba(11, 29, 38, .5); }
.ta-mail-meta { display: flex; gap: 10px; font-size: .84rem; border-bottom: 1px solid rgba(16, 42, 53, .06); padding-bottom: 6px; }
.ta-mail-meta span { color: var(--ta-muted); width: 56px; flex: none; }
.ta-mail-meta b { font-weight: 600; overflow-wrap: anywhere; }
.ta-mail-body { font-size: .92rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; padding-top: 6px; }
.ta mark { background: rgba(124, 243, 223, .35); color: inherit; border-radius: 4px; padding: 0 2px; }
.ta-mail-body mark { background: rgba(124, 243, 223, .35); color: inherit; border-radius: 4px; padding: 0 2px; }
.ta-mail-body .miss { background: #fdecc8; }
.ta-mail-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-mail-files span { font-size: .78rem; padding: 3px 8px; border-radius: 8px; background: rgba(16, 42, 53, .05); }

/* ---------- launch bar ---------- */
.ta-sendbar { position: sticky; bottom: 16px; z-index: 5; margin-top: 18px; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 22px; border-radius: 22px;
  background: rgba(11, 29, 38, .92); color: #eaf7f6; backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 24px 50px -24px rgba(7, 15, 21, .8); }
.ta-sendbar-copy { display: grid; gap: 2px; min-width: 0; }
.ta-sendbar-copy strong { font-size: 1rem; color: #fff; }
.ta-sendbar-copy span { font-size: .84rem; color: rgba(234, 247, 246, .7); overflow-wrap: anywhere; }
.ta-sendbar .ta-btn-prime { margin-left: auto; }

/* ---------- buttons ---------- */
.ta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 18px;
  font: 700 .93rem/1 var(--font-body, Inter, sans-serif); text-decoration: none; transition: transform .2s var(--ta-ease), box-shadow .2s, opacity .2s; }
.ta-btn:focus-visible { outline: 2px solid var(--ta-cyan); outline-offset: 3px; }
.ta-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.ta-btn-prime { overflow: hidden; color: #fff; background: var(--ta-grad); padding: 15px 22px; font-size: 1rem; box-shadow: 0 12px 30px -12px rgba(63, 182, 232, .9); }
.ta-btn-prime:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(122, 92, 255, .9); }
.ta-btn-prime kbd { font: 600 .7rem/1 var(--font-body, Inter, sans-serif); padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.ta-btn-glow { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: ta-sheen 3.6s ease-in-out infinite; }
.ta-btn-prime:disabled .ta-btn-glow { animation: none; }
@keyframes ta-sheen { 60%, 100% { transform: translateX(120%); } }
.ta-btn-ghost { background: #fff; color: var(--ta-text); border: 1px solid rgba(16, 42, 53, .14); }
.ta-btn-ghost:hover { border-color: rgba(16, 42, 53, .3); }
.ta-btn-dark { background: var(--ta-ink); color: #fff; }
.ta-btn-danger { background: #fff; color: var(--ta-bad); border: 1px solid #f3c7c2; }
.ta-sm { padding: 8px 13px; font-size: .84rem; }

/* ---------- history / templates / modules / boxes ---------- */
.ta-history, .ta-templates { display: grid; gap: 10px; }
.ta-hrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ta-line); }
.ta-hrow strong { font-size: .96rem; overflow-wrap: anywhere; }
.ta-hrow small { color: var(--ta-muted); font-size: .82rem; }
.ta-hrow .ta-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(16, 42, 53, .07); overflow: hidden; }
.ta-hrow .ta-bar i { display: block; height: 100%; background: var(--ta-grad); border-radius: inherit; }
.ta-pill { white-space: nowrap; display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgba(16, 42, 53, .07); color: var(--ta-text); }
.ta-pill.live { background: #e3f6ee; color: var(--ta-ok); }
.ta-pill.next { background: #eef0ff; color: #4535b8; }
.ta-pill.planned { background: rgba(16, 42, 53, .06); color: var(--ta-muted); }
.ta-pill.bad { background: #fbeae8; color: var(--ta-bad); }
.ta-empty { padding: 28px; text-align: center; color: var(--ta-muted); border: 1px dashed var(--ta-line); border-radius: 16px; }
.ta-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ta-module { position: relative; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ta-line); display: grid; gap: 8px; align-content: start; overflow: hidden; }
.ta-module::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ta-grad); opacity: .25; }
.ta-module.live::before { opacity: 1; }
.ta-module h4 { margin: 0; font-size: 1rem; }
.ta-module p { margin: 0; font-size: .86rem; color: var(--ta-muted); }
.ta-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ta-box { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ta-line); display: grid; gap: 10px; align-content: start; }
.ta-box header { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.ta-box header b { font-size: 1rem; }
.ta-box header .ta-pill { margin-left: auto; }
.ta-box p { margin: 0; font-size: .86rem; color: var(--ta-muted); overflow-wrap: anywhere; }
.ta-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .9rem; }
.ta-logo.gmail { background: linear-gradient(135deg, #ea4335, #fbbc05); }
.ta-logo.zoho { background: linear-gradient(135deg, #e42527, #f9b21d 50%, #089949); }
.ta-logo.outlook { background: linear-gradient(135deg, #0a64c9, #28a8ea); }
.ta-consent, .ta-switch { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.ta-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ta-teal); }
.ta-switch input { position: absolute; opacity: 0; }
.ta-switch-ui { flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(16, 42, 53, .18); position: relative; transition: background .25s; }
.ta-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--ta-ease); }
.ta-switch input:checked + .ta-switch-ui { background: var(--ta-teal); }
.ta-switch input:checked + .ta-switch-ui::after { transform: translateX(18px); }
.ta-switch input:focus-visible + .ta-switch-ui { outline: 2px solid var(--ta-cyan); outline-offset: 2px; }
.ta-switch input:disabled + .ta-switch-ui { opacity: .5; }
.ta-chip { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: rgba(16, 42, 53, .06); }

/* ---------- review / send sheet ---------- */
.ta-sheet-wrap { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(7, 15, 21, .5); backdrop-filter: blur(8px); animation: ta-fade .25s ease both; }
@keyframes ta-fade { from { opacity: 0; } }
.ta-sheet { position: relative; width: min(760px, 100%); max-height: min(88vh, 900px); overflow: auto; border-radius: 26px; background: #fff; padding: 26px;
  box-shadow: 0 40px 90px -30px rgba(7, 15, 21, .7); animation: ta-rise .4s var(--ta-ease) both; }
@keyframes ta-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.ta-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(16, 42, 53, .06); font-size: 1.3rem; cursor: pointer; color: var(--ta-muted); }
#taSheetBody { display: grid; gap: 16px; }
.ta-sheet h3 { margin: 0; padding-right: 40px; font-family: var(--font-display, Manrope, sans-serif); font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.ta-sheet p { margin: 0; }
.ta-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ta-summary div { padding: 14px; border-radius: 16px; background: #f4f8fa; display: grid; gap: 2px; }
.ta-summary b { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ta-summary span { font-size: .8rem; color: var(--ta-muted); }
.ta-summary .go b { background: var(--ta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ta-problems { margin: 0; padding: 12px 16px 12px 32px; border-radius: 14px; background: #fbeae8; color: #7a1a12; font-size: .9rem; }
.ta-skips { display: grid; gap: 6px; max-height: 150px; overflow: auto; font-size: .86rem; }
.ta-skips div { display: flex; gap: 8px; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #fbf6ec; }
.ta-samples { display: grid; gap: 10px; }
.ta-samples .ta-mail-body { max-height: 160px; }
.ta-confirm { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: #f0faf8; border: 1px solid #cdede8; font-size: .92rem; cursor: pointer; }
.ta-confirm input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--ta-teal); }
.ta-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ta-sheet > div > .ta-actions:last-child { position: sticky; bottom: -26px; margin: 0 -26px -26px; padding: 14px 26px 22px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); }

/* launch: countdown + progress */
.ta-launchpad { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.ta-ring-big { width: 168px; height: 168px; position: relative; }
.ta-ring-big svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ta-ring-big circle { fill: none; stroke-width: 10; }
.ta-ring-big .bg { stroke: rgba(16, 42, 53, .07); }
.ta-ring-big .fg { stroke: url(#taRingG); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ta-ease); }
.ta-ring-big .num { position: absolute; inset: 0; display: grid; place-content: center; }
.ta-ring-big .num b { font: 800 2.4rem/1 var(--font-display, Manrope, sans-serif); font-variant-numeric: tabular-nums; }
.ta-ring-big .num span { font-size: .8rem; color: var(--ta-muted); }
.ta-flight { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; text-align: left; }
.ta-flight li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: .8rem; background: #f4f8fa; border: 1px solid transparent; transition: background .3s, border-color .3s; min-width: 0; }
.ta-flight li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-flight li i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(16, 42, 53, .2); }
.ta-flight li.sending i { border-color: var(--ta-cyan); border-top-color: transparent; animation: ta-spin .8s linear infinite; }
.ta-flight li.sent { background: #e9f8f1; }
.ta-flight li.sent i { border: 0; background: var(--ta-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; animation: ta-pop .35s var(--ta-ease); }
.ta-flight li.failed { background: #fdf0ee; border-color: #f3c7c2; }
.ta-flight li.failed i { border: 0; background: var(--ta-bad); }
.ta-flight li.cancelled { opacity: .55; }
@keyframes ta-pop { from { transform: scale(.3); } }

.ta-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1100; padding: 12px 18px; border-radius: 14px; background: var(--ta-ink); color: #fff; font-size: .92rem;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); animation: ta-rise .3s var(--ta-ease) both; max-width: calc(100vw - 32px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .ta-hero { grid-template-columns: auto minmax(0, 1fr); }
  .ta-stats { grid-column: 1 / -1; }
  .ta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ta-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 16px; border-radius: 22px; }
  .ta-hero > * { min-width: 0; }
  .ta-orb { width: 72px; height: 72px; }
  .ta-stats { grid-template-columns: 1fr 1fr; }
  .ta-stats div:first-child { grid-column: 1 / -1; }
  .ta-stats div { padding: 10px; }
  .ta-row { grid-template-columns: 1fr; }
  .ta-card { padding: 16px; }
  .ta-sendbar { flex-direction: column; align-items: stretch; padding: 14px; bottom: 8px; }
  .ta-sendbar .ta-btn-prime { margin-left: 0; }
  .ta-btn-prime kbd { display: none; }
  .ta-summary { grid-template-columns: 1fr 1fr 1fr; }
  .ta-summary b { font-size: 1.25rem; }
  .ta-sheet { padding: 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ta *, .ta *::before, .ta *::after { animation: none !important; transition: none !important; }
}

/* Writer v2: missing-detail suggestions */
.ta-details { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f0faf8; border: 1px solid #cdede8; }
.ta-details span { font-size: .8rem; font-weight: 700; color: #0e5a52; width: 100%; }
.ta-details button { border: 1px solid #b9e3dc; background: #fff; color: #0e5a52; border-radius: 999px; padding: 5px 10px; font: 600 .78rem/1.3 var(--font-body, Inter, sans-serif); cursor: pointer; text-align: left; }
.ta-details button:hover { background: #e3f6f2; }