:root {
      --font-main: "Pretendard Variable", Pretendard, sans-serif;
      --primary: #0d6b38;
      --primary-deep: #0a542b;
      --primary-soft: #e5f1ea;
      --blue-bg: #cfeaff;
      --blue-bg-2: #bce0ff;
      --canvas: #ffffff;
      --panel: #ffffff;
      --line: #dddddf;
      --line-soft: #ececef;
      --ink: #222225;
      --muted: #77777d;
      --muted-2: #a1a1aa;
      --danger: #df4b35;
      --success: #16a34a;
      --warning: #f59e0b;
      --shadow-lg: none;
      --shadow-tab: none;
      --radius-card: 18px;
      --radius-panel: 14px;
      --radius-input: 10px;
      --app-max: 100%;
      --lnb-width: 342px;
      --left-width: 300px;
      --right-width: 300px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-width: 320px;
      background: #f5f6f8;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background: #f5f6f8;
      font-family: var(--font-main);
      font-size: 15px;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea {
      font: inherit;
      font-family: var(--font-main);
    }

    .app {
      width: min(100%, var(--app-max));
      min-height: 100vh;
      margin: 0 auto;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .topbar {
      min-height: 52px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      background: #ffffff;
      border-bottom: 1px solid var(--line-soft);
    }

    .top-main {
      width: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .top-main {
      border-bottom: 0;
    }

    .top-left {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 22px;
      flex: 1 1 auto;
    }

    .header-brand {
      min-width: 128px;
      display: inline-flex;
      align-items: center;
      flex: none;
    }

    .header-brand img {
      display: block;
      height: 26px;
      width: auto;
    }

    .breadcrumb {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 4px 8px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #ffffff;
      color: #667085;
      font-size: 13px;
      font-weight: 750;
      white-space: nowrap;
    }

    .breadcrumb ol {
      margin: 0;
      padding: 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      list-style: none;
    }

    .breadcrumb li {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .breadcrumb li+li::before {
      content: "";
      width: 6px;
      height: 6px;
      margin: 0 8px 0 4px;
      border-top: 1.5px solid #aeb4bf;
      border-right: 1.5px solid #aeb4bf;
      transform: rotate(45deg);
      flex: none;
    }

    .breadcrumb a {
      min-height: 24px;
      padding: 0 6px;
      display: inline-flex;
      align-items: center;
      border-radius: 7px;
      color: #667085;
      text-decoration: none;
    }

    .breadcrumb a:hover {
      background: #f6f8fa;
      color: #171719;
    }

    .breadcrumb [aria-current="page"] span {
      min-height: 24px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      border-radius: 7px;
      background: #ecfdf3;
      color: #0d6b38;
      font-weight: 900;
    }

    .top-flow-left {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1 1 auto;
      overflow: hidden;
    }

    .flow-divider {
      width: 1px;
      height: 18px;
      flex: none;
      background: #e5e7ec;
    }

    .utility-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: none;
    }

    .utility-button {
      width: 36px;
      height: 36px;
      display: inline-grid;
      place-items: center;
      border: 1px solid #e8eaf0;
      border-radius: 10px;
      background: #ffffff;
      color: #30333a;
      cursor: pointer;
      box-shadow: none;
      transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
    }

    .utility-button:hover {
      border-color: #d8dce5;
      background: #fafbfc;
      color: #111318;
    }

    .utility-button svg {
      width: 17px;
      height: 17px;
    }

    .utility-divider {
      width: 1px;
      height: 20px;
      margin: 0 2px;
      background: #eceef3;
    }

    .profile-chip {
      position: relative;
      min-width: 48px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e8eaf0;
      border-radius: 18px;
      background: #ffffff;
      color: #30333a;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -0.01em;
      box-shadow: none;
    }

    .profile-chip::after {
      content: "";
      position: absolute;
      top: -3px;
      right: -3px;
      width: 6px;
      height: 6px;
      border: 2px solid #ffffff;
      border-radius: 999px;
      background: #e11d48;
    }

    .send-steps {
      min-width: 0;
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      overflow-x: auto;
      color: #92929a;
      scrollbar-width: none;
    }

    .send-steps::-webkit-scrollbar {
      display: none;
    }

    .send-step {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      border-radius: 18px;
      color: #8a8a91;
      font-size: 14px;
      font-weight: 800;
    }

    .send-step.is-done,
    .send-step.is-active {
      color: #171719;
    }

    .send-step.is-active {
      background: #f4f4f5;
    }

    .step-dot {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 20px;
      padding-top: 1px;
      border-radius: 999px;
      border: 1px solid #d4d4d8;
      background: #ffffff;
      color: #a1a1aa;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .send-step.is-done .step-dot,
    .send-step.is-active .step-dot {
      border-color: #101012;
      background: #101012;
      color: #ffffff;
    }

    .step-arrow {
      color: #c7c7cc;
      font-size: 15px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: none;
    }

    .byte-chip {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border-radius: 6px;
      background: #eef5ff;
      color: #1d4ed8;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .top-button,
    .next-button {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 12px;
      border-radius: 7px;
      border: 1px solid #d8d8dc;
      background: #ffffff;
      color: #242428;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .next-button {
      border-color: var(--primary);
      background: var(--primary);
      color: #ffffff;
      padding: 0 14px;
    }

    .ghost-button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 8px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }

    .ghost-button {
      padding: 0 14px;
      background: var(--canvas);
      color: var(--primary);
      border-color: var(--primary);
      font-weight: 800;
    }

    .preview-test-button {
      align-self: center;
      width: auto;
      min-height: 38px;
      margin-top: 14px;
      padding: 0 16px;
      border-color: #cfe8d8;
      background: #f4fbf7;
      color: var(--primary);
      font-size: 14px;
      font-weight: 900;
    }

    .ghost-button:active {
      transform: translateY(1px);
    }

    .workspace {
      min-height: 0;
      padding: 16px 24px 32px 0;
      display: grid;
      grid-template-columns: var(--lnb-width) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      transition: grid-template-columns 0.18s ease;
    }

    .workspace:has(.lnb-toggle-input:checked) {
      --lnb-width: 92px;
    }

    .lnb,
    .side-card,
    .composer-card,
    .right-card {
      background: #ffffff;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-card);
    }

    .side-card {
      overflow: hidden;
      opacity: 0.96;
    }

    .message-workbench {
      grid-column: 2;
      min-width: 0;
      display: grid;
      grid-template-columns: var(--left-width) minmax(720px, 1.65fr) var(--right-width);
      gap: 16px;
      align-items: stretch;
      padding: 16px;
      border: 1px solid var(--line-soft);
      border-radius: 20px;
      background: #f8f9fb;
      box-shadow: none;
    }

    .message-workbench .side-card,
    .message-workbench .composer-card,
    .message-workbench .right-card {
      border-color: #e7e9ee;
      background: #fbfcfd;
      box-shadow: none;
    }

    .message-workbench .composer-card {
      min-height: 0;
      background: #ffffff;
    }

    .message-workbench>.top-flow {
      grid-column: 1 / -1;
      min-width: 0;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 4px 12px;
      border-bottom: 1px solid var(--line-soft);
      white-space: nowrap;
    }

    .message-workbench>.top-flow .send-steps {
      min-width: 0;
      flex: 1 1 auto;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .message-workbench>.top-flow .top-actions {
      width: auto;
      flex: 0 0 auto;
      flex-wrap: nowrap;
      overflow: visible;
      padding-bottom: 0;
    }

    .lnb {
      position: relative;
      padding: 0;
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
      font-family: var(--font-main);
      transition: padding 0.18s ease;
    }

    .lnb::after {
      content: "";
      position: absolute;
      top: 18px;
      right: -10px;
      width: 1px;
      height: calc(100% - 36px);
      background: #e7e9ee;
      pointer-events: none;
    }

    .lnb-toggle-input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .lnb-toggle-input:checked+.lnb {
      grid-template-columns: 92px 0;
    }

    .lnb-rail {
      min-height: 100%;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      border-right: 1px solid #eef0f3;
      background: #ffffff;
      font-family: var(--font-main);
    }

    .rail-item {
      width: 74px;
      min-height: 64px;
      display: grid;
      place-items: center;
      gap: 4px;
      padding: 7px 0;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: #52565c;
      font-size: 12.5px;
      font-weight: 900;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    button.rail-item {
      font-family: var(--font-main);
    }

    label.rail-item {
      user-select: none;
    }

    .rail-item svg {
      width: 28px;
      height: 28px;
      color: currentColor;
      overflow: visible;
    }

    .rail-item.is-active {
      border-color: #bfe8d0;
      background: #ffffff;
      color: #0b7a3b;
      box-shadow: none;
    }

    .rail-item:hover {
      border-color: #d9e4dd;
      background: #f7fbf8;
      color: #148d4b;
    }

    .lnb-panel {
      min-width: 0;
      padding: 16px 8px 18px;
      overflow: hidden;
      font-family: var(--font-main);
      transition: opacity 0.18s ease;
    }

    .lnb-panel-content {
      display: none;
    }

    .lnb-panel-content.is-active {
      display: block;
    }

    .lnb-toggle-input:checked+.lnb .lnb-panel {
      opacity: 0;
      pointer-events: none;
    }

    .lnb-balance {
      margin: 0 6px 12px;
      min-height: 50px;
      padding: 8px 8px 8px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      border: 1px solid #e5e5e8;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: none;
    }

    .lnb-toggle-input:checked+.lnb .lnb-balance {
      margin-left: 0;
      margin-right: 0;
      padding: 8px;
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .lnb-balance span {
      color: #6f6f76;
      font-size: 13px;
      font-weight: 700;
    }

    .lnb-balance strong {
      margin-left: 4px;
      color: #111113;
      font-size: 16px;
      font-weight: 950;
      letter-spacing: 0.01em;
    }

    .lnb-balance small {
      color: #6f6f76;
      font-size: 12px;
      font-weight: 800;
    }

    .lnb-charge-button {
      min-width: 44px;
      height: 32px;
      border: 0;
      border-radius: 8px;
      background: var(--success);
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: none;
    }

    .lnb-toggle-input:checked+.lnb .lnb-balance div {
      display: none;
    }

    .lnb-toggle-input:checked+.lnb .lnb-charge-button {
      min-width: 38px;
      width: 38px;
      padding: 0;
      font-size: 0;
    }

    .lnb-toggle-input:checked+.lnb .lnb-charge-button::before {
      content: "충";
      font-size: 14px;
    }

    .lnb-primary-actions {
      margin: 0 6px 12px;
      display: grid;
      gap: 8px;
    }

    .lnb-action-button {
      min-height: 44px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: 13px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      text-decoration: none;
      box-shadow: none;
    }

    .lnb-action-button svg {
      width: 17px;
      height: 17px;
      color: #ffffff;
      flex: none;
    }

    .lnb-action-button.is-new {
      background: linear-gradient(135deg, #0d6b38 0%, #16a34a 100%);
    }

    .lnb-action-button.is-quick {
      background: linear-gradient(135deg, #155eef 0%, #00a3ff 100%);
    }

    .lnb-action-button:hover {
      transform: none;
    }

    .lnb-toggle-input:checked+.lnb .lnb-primary-actions {
      margin-left: 0;
      margin-right: 0;
      justify-items: center;
    }

    .lnb-toggle-input:checked+.lnb .lnb-action-button {
      width: 44px;
      height: 44px;
      justify-content: center;
      padding: 0;
      border-radius: 14px;
    }

    .lnb-group {
      position: relative;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .lnb-group.is-first {
      margin-top: 0;
    }

    .lnb-group::before {
      content: none;
    }

    .lnb-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      padding: 0 12px;
      margin-bottom: 8px;
    }

    .lnb-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 12px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }

    .lnb-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lnb-toggle-input:checked+.lnb .lnb-title,
    .lnb-toggle-input:checked+.lnb .lnb-text,
    .lnb-toggle-input:checked+.lnb .lnb-action-text {
      display: none;
    }

    .lnb-toggle-input:checked+.lnb .lnb-group {
      margin-top: 10px;
    }

    .lnb-toggle-input:checked+.lnb .lnb-item {
      width: 44px;
      height: 44px;
      justify-content: center;
      gap: 0;
      padding: 0;
      margin: 0 auto;
      border-radius: 14px;
    }

    .lnb-toggle-input:checked+.lnb .lnb-item svg {
      width: 18px;
      height: 18px;
    }

    .lnb-item:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    .lnb-item.is-active {
      background: var(--primary-soft);
      color: var(--primary-deep);
      font-weight: 700;
    }

    .lnb-item svg {
      width: 16px;
      height: 16px;
      color: var(--muted);
    }

    .lnb-item.is-active svg {
      color: var(--primary);
    }

    .textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius-input);
      background: #ffffff;
      color: var(--ink);
      outline: none;
      transition: border-color 0.12s ease;
    }

    .textarea:focus {
      border-color: var(--primary);
      box-shadow: none;
    }

    .ai-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .ai-tag {
      background: #e6f0ff;
      color: #155eef;
    }

    .template-panel {
      display: grid;
      gap: 10px;
      padding: 18px 20px 20px;
    }

    .template-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 15px;
      font-weight: 900;
    }

    .template-add {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(13, 107, 56, 0.2);
      border-radius: 8px;
      background: #f4fbf7;
      color: var(--primary);
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
    }

    .template-search {
      width: 100%;
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #ffffff;
      color: var(--ink);
      font-size: 14px;
      outline: none;
    }

    .template-search:focus {
      border-color: var(--primary);
      box-shadow: none;
    }

    .template-list {
      display: grid;
      gap: 8px;
    }

    .template-card {
      position: relative;
      width: 100%;
      padding: 11px 13px;
      display: grid;
      gap: 6px;
      border: 1px solid var(--line-soft);
      border-left: 2px solid transparent;
      border-radius: 6px;
      background: #ffffff;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.16s ease, background 0.16s ease;
    }

    .template-card:hover {
      border-color: #d6ddd9;
      border-left-color: rgba(13, 107, 56, 0.22);
      background: #fbfcfb;
    }

    .template-card.is-selected {
      border-color: #e1e5e3;
      border-left-color: rgba(13, 107, 56, 0.45);
      background: #ffffff;
    }

    .template-card strong {
      color: #171719;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.35;
    }

    .template-card p {
      margin: 0;
      color: #6f6f76;
      font-size: 13px;
      line-height: 1.45;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .template-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      flex-wrap: wrap;
    }

    .template-card-meta .is-applied {
      color: #6f6f76;
      font-weight: 800;
    }

    .template-scope {
      min-height: 22px;
      padding: 3px 7px;
      display: inline-flex;
      align-items: center;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .template-divider {
      height: 1px;
      background: var(--line-soft);
      margin: 2px 0;
    }

    .variable-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #8a8a91;
      font-size: 13px;
      font-weight: 900;
    }

    .variable-title span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .variable-grid {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .variable-chip {
      min-height: 30px;
      padding: 0 9px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: #ffffff;
      text-align: left;
      cursor: pointer;
    }

    .variable-chip:hover {
      border-color: rgba(13, 107, 56, 0.28);
      background: #fbfefc;
    }

    .variable-chip code {
      color: #198f48;
      font-family: var(--font-main);
      font-size: 12px;
      font-weight: 900;
    }

    .variable-chip span {
      color: #77777d;
      font-size: 12px;
      font-weight: 700;
    }

    .composer-card {
      position: relative;
      padding: 0 28px 28px;
      min-height: 720px;
    }

    .composer-head {
      padding: 18px 0 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }

    .composer-head>div:first-child {
      flex: 1 1 200px;
    }

    .composer-title {
      margin: 0;
      font-size: 24px;
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: 0;
    }

    .composer-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .composer-channel-badge {
      min-height: 26px;
      padding: 4px 10px;
      display: inline-flex;
      align-items: center;
      border: 1px solid #cfe8d8;
      border-radius: 999px;
      background: #edf7f1;
      color: var(--primary);
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }

    .composer-sub {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
      font-weight: 500;
    }

    .form-stack {
      display: grid;
      gap: 14px;
    }

    .recipient-overview {
      margin: 0 0 12px;
      padding: 14px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.4fr);
      gap: 14px;
      align-items: stretch;
      border: 1px solid #dce3ea;
      border-radius: 14px;
      background: #f8fafc;
    }

    .overview-main {
      min-width: 0;
      display: grid;
      gap: 5px;
      align-content: center;
    }

    .overview-label {
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
    }

    .overview-main strong {
      color: #111827;
      font-size: 17px;
      line-height: 1.35;
      font-weight: 950;
    }

    .overview-main small {
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 700;
    }

    .recipient-stats {
      margin: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .recipient-stats div {
      min-width: 0;
      padding: 10px;
      display: grid;
      align-content: space-between;
      gap: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
    }

    .recipient-stats dt {
      margin: 0 0 5px;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      white-space: nowrap;
    }

    .recipient-stats dd {
      margin: 0;
      color: #111827;
      font-size: 15px;
      line-height: 1.2;
      font-weight: 950;
      text-align: center;
      white-space: nowrap;
    }

    .sender-number-panel {
      margin: 0 0 10px;
      min-height: 44px;
      padding: 8px 10px 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: #ffffff;
    }

    .sender-number-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .sender-number-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .sender-number-title {
      display: inline-flex;
      align-items: center;
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.35;
    }

    .sender-number-value {
      min-width: 0;
      color: #34343a;
      font-size: 14px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sender-number-status {
      min-height: 24px;
      padding: 3px 8px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      background: #e8f7ed;
      color: var(--primary);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .sender-number-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--primary);
    }

    .sender-number-button {
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
    }

    .sender-number-button:hover {
      border-color: rgba(13, 107, 56, 0.35);
      color: var(--primary);
      background: #fbfefc;
    }

    .ai-lite-button {
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      background: var(--primary);
      color: #ffffff;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .ai-lite-button.is-secondary {
      border-color: #cbd5e1;
      background: #ffffff;
      color: #334155;
    }

    .ai-lite-button.is-secondary:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }

    .message-editor-panel {
      padding: 16px;
      gap: 14px;
      overflow: hidden;
      border-color: #dfe6e1;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: none;
    }

    .message-editor-panel .ai-tag {
      min-height: 22px;
      padding: 3px 9px;
      border: 0;
      background: #eef5ff;
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 900;
    }

    .message-field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .message-field-top {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .message-check-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--success);
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      flex: none;
    }

    .message-title-text {
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.35;
      white-space: nowrap;
    }

    .message-ai-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      flex: none;
      white-space: nowrap;
    }

    .field-panel {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius-panel);
      background: #ffffff;
    }

    .lms-tools-panel {
      padding: 0;
      display: flex;
      align-items: center;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .lms-tool-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      width: 100%;
    }

    .lms-tool-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .lms-tool-button {
      min-height: 32px;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .lms-tool-button:hover {
      border-color: rgba(13, 107, 56, 0.35);
      color: var(--primary);
      background: #fbfefc;
    }

    .check-panel {
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: #ffffff;
      overflow: hidden;
    }

    .check-summary {
      min-height: 50px;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      list-style: none;
    }

    .check-summary::-webkit-details-marker {
      display: none;
    }

    .check-summary-main {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .sender-number-title,
    .message-title-text,
    .check-summary-title {
      color: var(--ink);
      font-size: 15px;
      font-weight: 900;
      line-height: 1.35;
      white-space: nowrap;
    }

    .check-summary-status {
      min-height: 24px;
      padding: 3px 9px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .check-summary-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .check-cost-pill {
      min-height: 24px;
      padding: 3px 9px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .check-cost-pill {
      background: #f5f6f7;
      color: var(--ink);
    }

    .check-more {
      min-height: 30px;
      padding: 0 10px 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d9dee7;
      border-radius: 8px;
      background: #ffffff;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
    }

    .check-more::after {
      content: "";
      width: 6px;
      height: 6px;
      border-right: 1.8px solid currentColor;
      border-bottom: 1.8px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      transition: transform 0.12s ease;
    }

    .check-summary:hover .check-more {
      border-color: #b8c0cc;
      background: #f8fafc;
      color: #111827;
    }

    .check-panel[open] .check-more::after {
      transform: rotate(225deg) translate(-1px, -1px);
    }

    .check-panel[open] .check-more .when-closed,
    .check-more .when-open {
      display: none;
    }

    .check-panel[open] .check-more .when-open {
      display: inline;
    }

    .check-panel:not([open]) .check-detail-grid {
      display: none;
    }

    .check-detail-grid {
      padding: 0 12px 12px 38px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .check-detail-item {
      min-height: 54px;
      padding: 9px 10px;
      display: grid;
      gap: 3px;
      align-content: center;
      border: 1px solid #edf0f3;
      border-radius: 10px;
      background: #fbfcfd;
      color: #34343a;
      font-size: 13px;
      font-weight: 800;
    }

    .check-detail-item strong {
      color: #111827;
      font-size: 13px;
      font-weight: 950;
    }

    .check-detail-item span {
      color: #64748b;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 750;
    }

    .check-detail-item.is-warning {
      border-color: #fed7aa;
      background: #fff7ed;
    }

    .check-detail-item.is-warning strong {
      color: #9a3412;
    }

    .check-detail-item.is-warning span {
      color: #7c2d12;
    }

    .field {
      display: grid;
      gap: 8px;
    }

    .textarea-wrap {
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: #ffffff;
    }

    .textarea {
      min-height: 294px;
      padding: 14px 16px 16px;
      border: 0;
      resize: none;
      font-size: 15px;
      line-height: 1.68;
      font-weight: 500;
      color: #202024;
      background: #ffffff;
    }

    .editor-toolbar {
      min-height: 50px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--line-soft);
      background: #fafbfc;
      color: #72757d;
      font-size: 13px;
      line-height: 1.4;
    }

    .toolbar-left,
    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tool-button {
      border: 1px solid #dfe3e8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 8px;
      background: #ffffff;
      color: #686b73;
      font-family: var(--font-main);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
    }

    .tool-button:hover {
      border-color: rgba(13, 107, 56, 0.32);
      background: #f0f5f2;
      color: var(--primary);
    }

    .toolbar-right {
      margin-left: auto;
      color: #6b6f78;
      font-weight: 800;
      white-space: nowrap;
    }

    .right-panel {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-self: stretch;
    }

    .right-panel>.right-card:first-child {
      flex: none;
      display: flex;
      flex-direction: column;
    }

    .right-card {
      padding: 14px;
    }

    .right-card h2,
    .right-card h3 {
      margin: 0;
      font-size: 17px;
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: 0;
    }

    .right-card .composer-title {
      font-size: 20px;
      line-height: 1.3;
      letter-spacing: 0;
    }

    .right-card p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .preview-phone {
      margin-top: 16px;
      position: relative;
      width: 100%;
      max-width: 248px;
      aspect-ratio: 71.6 / 147.6;
      margin-left: auto;
      margin-right: auto;
      padding: 7px;
      border: 2px solid #0f1012;
      border-radius: 44px;
      background: linear-gradient(90deg, #222326 0%, #0f1012 8%, #17181b 50%, #0f1012 92%, #2a2b2f 100%);
      box-shadow: none;
      overflow: hidden;
      flex: none;
      font-family: var(--font-main);
      letter-spacing: 0;
    }

    .preview-phone *,
    .preview-phone *::before,
    .preview-phone *::after {
      font-family: var(--font-main);
      letter-spacing: 0;
    }

    .preview-phone::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 88px;
      width: 4px;
      height: 168px;
      border-radius: 4px 0 0 4px;
      background:
        linear-gradient(to bottom,
          transparent 0 4px,
          #2b2c30 4px 38px,
          transparent 38px 56px,
          #2b2c30 56px 104px,
          transparent 104px 120px,
          #2b2c30 120px 168px);
      z-index: 3;
    }

    .preview-phone::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 180px;
      width: 4px;
      height: 78px;
      border-radius: 0 4px 4px 0;
      background: #2b2c30;
      z-index: 3;
    }

    .phone-notch {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 68px;
      height: 21px;
      background: #050506;
      border-radius: 999px;
      z-index: 10;
      display: block;
    }

    .phone-notch::after {
      content: "";
      position: absolute;
      right: 10px;
      top: 6px;
      width: 8.5px;
      height: 8.5px;
      border-radius: 999px;
      background: #101b3d;
      box-shadow: none;
    }

    .phone-screen {
      width: 100%;
      height: 100%;
      padding: 20px 12px 11px;
      border: 1px solid #202124;
      border-radius: 37px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow: hidden;
    }

    .phone-status {
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      color: #171719;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      flex: none;
    }

    .phone-status-icons {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #171719;
      font-weight: 900;
    }

    .phone-status-icons svg {
      display: block;
      color: #171719;
    }

    .status-signal {
      width: 18px;
      height: 12px;
    }

    .status-wifi {
      width: 15px;
      height: 12px;
    }

    .status-battery {
      width: 22px;
      height: 12px;
    }

    .phone-nav {
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: none;
    }

    .phone-nav-button {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #ffffff;
      border: 1px solid #f2f2f3;
      color: #171719;
      box-shadow: none;
    }

    .phone-nav-button svg {
      width: 17px;
      height: 17px;
    }

    .phone-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 42px;
      padding: 0;
      border-bottom: 0;
      text-align: center;
      flex: none;
    }

    .phone-header-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #0d6b38;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
      flex: none;
    }

    .phone-header-name {
      min-height: 20px;
      padding: 3px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #ffffff;
      color: #202024;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .phone-header-name::after {
      content: "";
      display: none;
    }

    .message-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: flex-start;
      flex: 1 1 auto;
      min-height: 0;
      padding-bottom: 18px;
    }

    .bubble {
      max-width: 100%;
      padding: 10px 11px;
      border-radius: 19px;
      font-size: 12px;
      line-height: 1.42;
      font-weight: 500;
      word-break: break-word;
      white-space: pre-wrap;
    }

    .bubble.sms {
      position: relative;
      align-self: flex-start;
      width: calc(100% - 16px);
      max-width: none;
      margin: 2px 8px 0;
      background: #e5e5ea;
      border: 0;
      border-radius: 20px;
      color: #000000;
      box-shadow: none;
    }

    .bubble.sms::after {
      content: "";
      position: absolute;
      left: -7px;
      bottom: 0;
      width: 16px;
      height: 18px;
      background: #e5e5ea;
      border-bottom-right-radius: 14px 12px;
      z-index: 0;
    }

    .bubble.sms::before {
      content: "";
      position: absolute;
      left: -10px;
      bottom: 0;
      width: 10px;
      height: 18px;
      background: #ffffff;
      border-bottom-right-radius: 10px;
      z-index: 1;
    }

    .sms-brand {
      display: block;
      margin-bottom: 6px;
      color: #111827;
      font-size: 13px;
      font-weight: 650;
      white-space: normal;
    }

    .sms-body {
      display: block;
      white-space: pre-wrap;
    }

    .sms-link {
      display: inline;
      color: #007aff;
      font-size: 12px;
      font-weight: 500;
      text-decoration: underline;
    }

    .bubble a {
      color: #007aff;
      text-decoration: underline;
    }

    .message-meta {
      display: none;
      align-self: flex-end;
      font-size: 11px;
      color: #8c9098;
      margin-left: 0;
      margin-right: 8px;
      margin-top: 0;
      font-weight: 900;
      line-height: 1.2;
    }

    .phone-date {
      align-self: center;
      color: #9a9da4;
      font-size: 10px;
      font-weight: 900;
      margin: -4px 0 -1px;
    }

    @media (max-width: 1500px) {
      :root {
        --left-width: 280px;
        --right-width: 280px;
      }

      .message-workbench {
        grid-template-columns: var(--left-width) minmax(620px, 1fr) var(--right-width);
      }
    }

    @media (max-width: 1280px) {
      :root {
        --right-width: 300px;
      }

      .workspace {
        grid-template-columns: var(--lnb-width) minmax(0, 1fr);
      }

      .message-workbench {
        grid-template-columns: minmax(0, 1fr) var(--right-width);
      }

      .message-workbench>.top-flow {
        grid-column: 1 / -1;
      }

      .composer-card {
        grid-column: 1;
        grid-row: 2;
      }

      .side-card {
        grid-column: 1;
        grid-row: 3;
      }

      .right-panel {
        grid-column: 2;
        grid-row: 2 / span 2;
      }

      .preview-phone {
        margin-top: 12px;
      }
    }

    @media (max-width: 980px) {
      .app {
        padding: 18px;
      }

      .workspace {
        grid-template-columns: 1fr;
        padding: 16px 0 28px;
      }

      .lnb {
        display: none;
      }

      .message-workbench {
        grid-column: 1;
        grid-template-columns: 1fr;
        width: 100%;
      }

      .message-workbench>.top-flow,
      .side-card {
        grid-column: 1;
      }

      .side-card {
        grid-row: auto;
        order: 2;
      }

      .composer-card {
        grid-column: 1;
        grid-row: auto;
        order: 1;
      }

      .right-panel {
        grid-column: 1;
        grid-row: auto;
        order: 3;
      }

      .recipient-overview {
        grid-template-columns: 1fr;
      }

      .recipient-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .app {
        padding: 14px;
      }

      .topbar {
        height: auto;
        min-height: 52px;
        padding: 12px 14px;
      }

      .top-left {
        width: 100%;
      }

      .top-main {
        width: 100%;
      }

      .header-brand {
        min-width: 0;
      }

      .breadcrumb {
        display: none;
      }

      .flow-divider {
        display: none;
      }

      .top-actions {
        width: 100%;
        overflow: visible;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: 2px;
      }

      .message-workbench>.top-flow {
        align-items: flex-start;
        flex-direction: column;
        overflow: visible;
        padding-bottom: 10px;
      }

      .message-workbench>.top-flow .top-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
      }

      .send-steps {
        width: 100%;
        flex-wrap: wrap;
        white-space: normal;
        gap: 6px;
      }

      .message-workbench>.top-flow .send-steps {
        width: 100%;
        flex: 1 1 auto;
      }

      .step-arrow {
        display: none;
      }

      .send-step {
        min-height: 30px;
        padding: 0 7px;
        font-size: 12px;
      }

      .composer-card {
        padding: 0 14px 18px;
      }

      .sender-number-panel {
        align-items: stretch;
        flex-direction: column;
      }

      .sender-number-head {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .composer-head,
      .editor-toolbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .composer-head>div:first-child {
        flex: 0 1 auto;
      }

      .lms-tool-row,
      .check-summary,
      .recipient-stats,
      .check-detail-grid {
        grid-template-columns: 1fr;
      }

      .message-ai-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .check-summary-meta {
        justify-content: flex-start;
      }

      .message-field-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .sender-number-button {
        width: 100%;
      }
    }