@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

/* Scoped to the in-page panel so the radio console keeps its own type and controls. */
.aob-signal {
  color-scheme: dark;
  --bg: #0d1211;
  --paper: #151c1a;
  --ink: #eff7f4;
  --muted: #a9b7b2;
  --line: #35423e;
  --soft: #202a27;
  --accent: #48c8aa;
  --accent-strong: #8ce3cf;
  --accent-pale: #17392f;
  --warn-bg: #392b14;
  --warn-ink: #f3d7a0;
  --danger: #ff8f82;
  --shadow: 0 18px 50px rgba(0, 0, 0, .3);
  --radius: 18px;
  font-family: Manrope, sans-serif;
  line-height: 1.5;
  color: var(--ink);
}
.aob-signal, .aob-signal * { box-sizing: border-box; }
.aob-signal button, .aob-signal input, .aob-signal textarea, .aob-signal select { font: inherit; }
.aob-signal a { color: var(--accent-strong); }
.aob-signal .shell { width: min(100%, 1120px); margin: 0 auto; padding: 18px 24px 48px; }
.aob-signal .langbar { display: none; }
.aob-signal .gate { max-width: 560px; margin: 8px auto 0; }
.aob-signal .gate h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.04em; line-height: 1.15; margin: 0 0 18px; }
.aob-signal .gate label { display: grid; gap: 8px; font-weight: 650; }
.aob-signal .confirm { max-width: 680px; margin: 12px auto 0; }
.aob-signal .confirm p { margin: 0; font-size: clamp(1.15rem, 2.5vw, 1.55rem); line-height: 1.45; letter-spacing: -.02em; }
.aob-signal .intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .75fr); gap: 40px; align-items: end; padding: 8px 0 30px; border-bottom: 1px solid var(--line); }
.aob-signal h1 { margin: 0 0 14px; max-width: 760px; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -.04em; }
.aob-signal .summary { margin: 0; max-width: 720px; padding-left: 1.1rem; }
.aob-signal .summary li { margin: 0 0 6px; }
.aob-signal .lead { margin: 14px 0 0; max-width: 690px; color: var(--muted); }
.aob-signal .intro-note { margin: 0; padding: 18px 0 2px 22px; border-left: 2px solid var(--accent); color: var(--muted); font-size: .91rem; }
.aob-signal .intro-note strong { display: block; color: var(--ink); margin-bottom: 5px; }
.aob-signal .progress-wrap { position: sticky; top: 0; z-index: 2; padding: 13px 0 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); }
.aob-signal .progress-row { display: flex; align-items: center; gap: 14px; }
.aob-signal .progress-track { height: 6px; flex: 1; overflow: hidden; border-radius: 99px; background: var(--soft); }
.aob-signal .progress-bar { width: 0%; height: 100%; border-radius: inherit; background: var(--accent); }
.aob-signal .progress-text { min-width: 86px; color: var(--muted); font-family: "DM Mono", monospace; font-size: .76rem; text-align: right; }
.aob-signal form { display: grid; gap: 22px; margin-top: 10px; }
.aob-signal .section { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.aob-signal .section-head { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 26px 28px 18px; }
.aob-signal .section-number { font: 500 .75rem/1 "DM Mono", monospace; color: var(--accent-strong); padding-top: 8px; }
.aob-signal h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.72rem); letter-spacing: -.025em; line-height: 1.15; }
.aob-signal .section-sub { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.aob-signal .section-body { padding: 0 28px 30px 94px; }
.aob-signal .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.aob-signal .full { grid-column: 1 / -1; }
.aob-signal label.field { display: grid; gap: 7px; min-width: 0; font-size: .84rem; font-weight: 600; }
.aob-signal .hint { color: var(--muted); font-size: .76rem; font-weight: 400; }
.aob-signal input[type="text"],
.aob-signal input[type="email"],
.aob-signal input[type="url"],
.aob-signal input[type="date"],
.aob-signal select,
.aob-signal textarea {
  width: 100%; min-height: 47px; padding: 11px 13px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; outline: none; font-size: 16px;
}
.aob-signal textarea { min-height: 100px; resize: vertical; }
.aob-signal input:focus, .aob-signal select:focus, .aob-signal textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.aob-signal input[aria-invalid="true"], .aob-signal textarea[aria-invalid="true"], .aob-signal select[aria-invalid="true"] { border-color: var(--danger); }
.aob-signal .role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.aob-signal .choice { display: grid; grid-template-columns: 28px 1fr; align-items: center; min-height: 72px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; }
.aob-signal .choice input { width: 18px; height: 18px; margin: 0 0 0 12px; accent-color: var(--accent); }
.aob-signal .choice span { display: flex; min-height: 70px; padding: 14px 14px 14px 8px; align-items: center; font-size: .86rem; font-weight: 600; }
.aob-signal .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); color: var(--ink); }
.aob-signal .dropzone { display: grid; place-items: center; min-height: 168px; padding: 26px; border: 1.5px dashed var(--accent); border-radius: 13px; background: color-mix(in srgb, var(--accent-pale) 55%, var(--paper)); text-align: center; cursor: pointer; }
.aob-signal .dropzone.drag { background: var(--accent-pale); }
.aob-signal .drop-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 50%; background: var(--accent); color: #fff; font: 500 1.3rem/1 "DM Mono", monospace; }
.aob-signal .dropzone strong { display: block; margin-bottom: 5px; }
.aob-signal .dropzone small { color: var(--muted); }
.aob-signal .file-input { display: block; width: 100%; margin-top: 10px; padding: 9px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: 16px; }
.aob-signal .track-list { display: grid; gap: 12px; margin-top: 16px; }
.aob-signal .track-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.aob-signal .track-card.excluded { border-color: var(--danger); }
.aob-signal .track-name { overflow-wrap: anywhere; font-weight: 650; font-size: .88rem; }
.aob-signal .track-meta { margin-top: 3px; color: var(--muted); font: .72rem/1.4 "DM Mono", monospace; }
.aob-signal .track-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aob-signal .society-question, .aob-signal .ai-question, .aob-signal .society-warning { grid-column: 1 / -1; }
.aob-signal .society-warning { display: none; padding: 13px 14px; border-radius: 9px; background: color-mix(in srgb, var(--danger) 12%, var(--paper)); color: var(--danger); font-size: .82rem; font-weight: 650; }
.aob-signal .society-warning.show { display: block; }
.aob-signal .ai-details { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: var(--accent-pale); border-radius: 9px; }
.aob-signal .ai-details.show { display: grid; }
.aob-signal .ai-details .full { grid-column: 1 / -1; }
.aob-signal .remove { align-self: start; border: 0; background: transparent; color: var(--danger); cursor: pointer; font-weight: 700; }
.aob-signal .empty { padding: 13px 0 0; color: var(--muted); font-size: .84rem; }
.aob-signal .terms-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.aob-signal .term-fact { background: var(--bg); padding: 15px; }
.aob-signal .term-fact span { display: block; color: var(--muted); font: .69rem/1.2 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.aob-signal .term-fact strong { display: block; margin-top: 5px; }
.aob-signal .terms-full { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.aob-signal .terms-full summary { position: relative; padding: 17px 34px 17px 0; cursor: pointer; font-weight: 650; }
.aob-signal .terms-full summary::-webkit-details-marker { display: none; }
.aob-signal .term-block { padding: 0 0 16px; color: var(--muted); font-size: .88rem; }
.aob-signal .term-block h3 { margin: 0 0 6px; color: var(--ink); font-size: .95rem; }
.aob-signal .legal-note { margin-top: 18px; padding: 14px 16px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 9px; font-size: .8rem; }
.aob-signal .checks { display: grid; gap: 12px; margin-top: 22px; }
.aob-signal .check { display: grid; grid-template-columns: 21px 1fr; gap: 11px; align-items: start; font-size: .86rem; cursor: pointer; }
.aob-signal .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.aob-signal .check a { font-weight: 700; text-underline-offset: 2px; }
.aob-signal .signature-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 22px; }
.aob-signal .canvas-wrap { position: relative; min-width: 0; }
.aob-signal canvas { display: block; width: 100%; height: 180px; touch-action: none; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; cursor: crosshair; }
.aob-signal .sign-line { position: absolute; left: 22px; right: 22px; bottom: 43px; border-bottom: 1px solid var(--line); pointer-events: none; }
.aob-signal .canvas-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); font-size: .74rem; }
.aob-signal .clear-sign { padding: 0; border: 0; background: transparent; color: var(--accent-strong); font-weight: 700; cursor: pointer; }
.aob-signal .sign-fields { display: grid; gap: 14px; align-content: start; }
.aob-signal .final-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 28px; background: #101514; color: #eff7f4; border-radius: var(--radius); }
.aob-signal .final-panel h2, .aob-signal .final-panel p { color: #fff; }
.aob-signal .final-panel p { margin: 7px 0 0; max-width: 650px; color: #c9d4d0; font-size: .88rem; }
.aob-signal .send { min-height: 51px; padding: 0 22px; border: 0; border-radius: 9px; background: #e7ff57; color: #11160e; font-weight: 800; cursor: pointer; }
.aob-signal .send:disabled { opacity: .55; cursor: wait; }
.aob-signal .status { display: none; grid-column: 1 / -1; padding: 13px 15px; border-radius: 8px; background: #25312e; color: #eff7f4; font-size: .84rem; }
.aob-signal .status.show { display: block; }
.aob-signal .status.error { background: #48231f; }
.aob-signal .footer-note { margin: 18px 0 0; color: var(--muted); font-size: .75rem; text-align: center; }
.aob-signal .hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
@media (max-width: 760px) {
  .aob-signal .shell { padding: 8px 14px 28px; }
  .aob-signal .intro, .aob-signal .grid, .aob-signal .signature-layout, .aob-signal .role-grid, .aob-signal .terms-summary, .aob-signal .track-fields, .aob-signal .ai-details, .aob-signal .final-panel { grid-template-columns: 1fr; }
  .aob-signal .section-head { grid-template-columns: 38px 1fr; padding: 22px 18px 16px; }
  .aob-signal .section-body { padding: 0 18px 24px; }
  .aob-signal .full, .aob-signal .ai-details .full { grid-column: auto; }
  .aob-signal .send { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .aob-signal, .aob-signal * { scroll-behavior: auto; transition: none !important; }
}