/* Shared geometry across Gonggu and its account/customer entry points. */
.app-header { height: 64px; padding: 0 !important; border-bottom: 1px solid #e5e7eb; background: white; }
.app-header > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0 24px; }
.app-header .app-logo, .app-header .app-logo > h1, .app-header .app-logo > span:first-child { color: #6765f2 !important; font: 800 20px/28px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; letter-spacing: -.5px; white-space: nowrap; }
.app-header #sidebarToggle, .app-header button[aria-label='알림'], .app-header [data-profile-account-menu-button] { min-width: 44px; min-height: 44px; }
.gonggu-back-button { display: inline-flex; min-height: 44px; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: white; color: #374151; font-size: 14px; font-weight: 700; line-height: 22px; white-space: nowrap; }
.gonggu-back-button:focus-visible { outline: 2px solid #6765f2; outline-offset: 2px; }
.gonggu-back-button:hover { background: #f5f3ff; color: #6765f2; }
.app-back-row { margin-bottom: 20px; }
.app-brand-page { --color-primary: 103 101 242 !important; }
.app-brand-page .bg-primary { background-color: #6765f2; }
.app-brand-page .text-primary { color: #6765f2; }
.app-native-date button { display: none; } /* Use the browser's one native picker. */
/* Payment, order and campaign filters share the native date field geometry. */
:is(.app-payment-filters, .app-order-controls, .app-campaign-filters) :is(input:not([type='checkbox']):not([type='hidden']), select):not([multiple]) { height: 44px; min-height: 44px; border-radius: 16px; padding-top: 8px; padding-bottom: 8px; }
.app-order-controls :is(input:not([type='checkbox']):not([type='hidden']), select):not([multiple]) { border-color: #d1d5db; font-size: 14px; line-height: 20px; }
.app-order-controls input:not([type='checkbox']):focus-visible { outline: 2px solid #6765f2; outline-offset: 2px; }
.app-profile-details input[readonly] { background: #f8fafc; border-color: transparent; color: #374151; }
.app-profile-details input[readonly]:focus { outline: 2px solid #6765f2; }
.app-profile-details input[readonly][data-profile-edit-field] { padding-right: 16px; }
.app-profile-actions { position: sticky; bottom: 12px; z-index: 10; background: white; padding: 12px; border: 1px solid #ede9fe; border-radius: 16px; }
#influencerProfileViewActions { top: 76px; bottom: auto; margin-bottom: 20px; }
.app-close-button { flex-shrink: 0; min-height: 44px; white-space: nowrap; }
[data-accessible-dialog] button[aria-label$='닫기'] { min-width: 44px; min-height: 44px; white-space: nowrap; }
.app-product-status { overflow-wrap: normal; word-break: keep-all; }
.app-kpis > div { min-width: 0; }
@media (max-width: 767px) {
  .app-header > div { padding: 0 16px; gap: 8px; }
  .app-header > div > div:first-child { gap: 8px; }
  .app-header .app-logo { margin-left: 0 !important; }
  .app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app-kpis > div { padding: 16px; }
  .app-kpis .text-3xl { font-size: 24px; overflow-wrap: anywhere; }
  .app-product-image { order: 0 !important; }
  .app-product-details { order: 1 !important; }
  .app-landing-hero { min-height: auto !important; }
  .app-landing-hero > div { padding-top: 48px; padding-bottom: 48px; }
  .app-landing-section { padding-top: 40px; padding-bottom: 40px; }
  .gonggu-responsive-table td { white-space: normal; overflow-wrap: anywhere; }
}

.app-business-header { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.app-business-header :where([class^='ri-'], [class*=' ri-'])::before { font-size: 1.2em; }

.app-business-sidebar { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.app-business-sidebar :where([class^='ri-'], [class*=' ri-'])::before { font-size: 1.2em; }
.app-business-sidebar.sidebar-collapsed { width: 80px !important; }
.app-business-sidebar.sidebar-collapsed .sidebar-text,
.app-business-sidebar.sidebar-collapsed .profile-details,
.app-business-sidebar.sidebar-collapsed .sidebar-arrow { display: none; }
.app-business-sidebar.sidebar-collapsed .profile-avatar { width: 40px !important; height: 40px !important; }
.app-business-sidebar.sidebar-collapsed .sidebar-submenu { margin-left: 0 !important; }
.app-business-sidebar.sidebar-collapsed #orders-submenu { display: none; }

/* Persistent navigation for signed-in pages outside the dashboard templates. */
.app-dashboard-content { min-height: 100vh; padding-top: 64px; }
@media (min-width: 1024px) { .app-dashboard-content { margin-left: 288px; } }
.app-influencer-header, .app-influencer-sidebar, .app-admin-header, .app-admin-sidebar { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.app-influencer-sidebar .sidebar-active { background: linear-gradient(90deg, #6765f2, #855ef6); color: white; }
.app-influencer-sidebar.sidebar-collapsed, .app-admin-sidebar.sidebar-collapsed { width: 80px !important; }
:is(.app-influencer-sidebar, .app-admin-sidebar).sidebar-collapsed :is(.sidebar-text, .profile-details, .sidebar-arrow) { display: none; }
.app-influencer-sidebar.sidebar-collapsed .profile-avatar { width: 40px !important; height: 40px !important; }
.app-influencer-sidebar.sidebar-collapsed .sidebar-submenu { margin-left: 0 !important; }

.app-influencer-header, .app-influencer-sidebar { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 3%), 0 8px 32px -4px rgb(0 0 0 / 8%); backdrop-filter: blur(8px); }
.app-influencer-sidebar { border: 1px solid rgb(255 255 255 / 80%); }

/* Influencer profile V2 */
.app-influencer-profile { width: 100%; }
.app-profile-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px -20px rgb(15 23 42 / 35%); }
.app-profile-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid #f3f4f6; }
.business-profile-v2 .profile-card-head, .app-influencer-profile .app-profile-card-header { background: rgb(103 101 242 / 10%); border-bottom-color: rgb(103 101 242 / 18%); }
.app-influencer-profile .app-profile-card-header p { color: #5b6270; }
.business-profile-v2 .profile-card-head { border-radius: 11px 11px 0 0; }
.app-profile-card-body { padding: 20px; }
.app-profile-attention { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto); align-items: center; gap: 18px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; padding: 16px 20px; }
.app-profile-attention-item { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; border-radius: 14px; padding: 10px 14px; font-size: 13px; }
.app-profile-attention-item strong { font-size: 14px; }
.app-profile-attention-action { background: #fef2f2; color: #b91c1c; }
.app-profile-attention-waiting { background: #fffbeb; color: #b45309; }
.app-profile-attention-clear { background: #ecfdf5; color: #047857; }
.app-profile-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; padding: 9px 16px; font-size: 14px; font-weight: 700; line-height: 1.25; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.app-profile-button.hidden { display: none; }
.app-profile-button:focus-visible, .app-profile-icon-button:focus-visible, .app-profile-input:focus-visible, .app-profile-file:focus-visible { outline: 3px solid rgb(103 101 242 / 24%); outline-offset: 2px; }
.app-profile-button:disabled { cursor: not-allowed; opacity: .55; }
.app-profile-button-primary { border: 1px solid transparent; background: linear-gradient(90deg, #6765f2, #855ef6); color: #fff; }
.app-profile-button-secondary { border: 1px solid #d8d7ff; background: #fff; color: #5553d9; }
.app-profile-button-secondary:hover { background: #f5f3ff; }
.app-profile-button-quiet { border: 1px solid #e5e7eb; background: #fff; color: #4b5563; }
.app-profile-button-quiet:hover { background: #f9fafb; }
.app-profile-label { display: block; margin-bottom: 7px; color: #374151; font-size: 14px; font-weight: 700; }
.app-profile-input { width: 100%; min-height: 44px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; padding: 10px 13px; color: #111827; font-size: 14px; }
textarea.app-profile-input { min-height: 112px; }
.app-profile-input[readonly] { border-color: #e5e7eb; background: #f9fafb; color: #4b5563; }
.app-profile-file { display: block; width: 100%; min-height: 44px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; padding: 7px; color: #4b5563; font-size: 13px; }
.app-profile-file::file-selector-button { margin-right: 10px; border: 0; border-radius: 9px; background: #ede9fe; padding: 6px 10px; color: #5b21b6; font-weight: 700; }
.app-profile-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.app-profile-badge-public { background: #ede9fe; color: #5b21b6; }
.app-profile-badge-private { background: #eef2ff; color: #4338ca; }
.app-profile-badge-success { background: #ecfdf5; color: #047857; }
.app-profile-badge-warning { background: #fffbeb; color: #b45309; }
.app-profile-badge-danger { background: #fef2f2; color: #b91c1c; }
.app-profile-badge-neutral { background: #f3f4f6; color: #4b5563; }
.app-social-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 20px; }
.app-social-icon { display: inline-flex; width: 44px; height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 13px; background: #f5f3ff; color: #6765f2; font-size: 20px; }
.app-social-actions { display: flex; max-width: 280px; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 8px; }
.app-profile-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; overflow-y: auto; background: rgb(15 23 42 / 58%); padding: 20px; }
.app-profile-modal.hidden { display: none; }
.app-profile-modal-panel { width: min(100%, 560px); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 20px; background: #fff; box-shadow: 0 24px 80px -20px rgb(15 23 42 / 55%); }
.app-profile-icon-button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; color: #4b5563; font-size: 28px; line-height: 1; }
.app-profile-icon-button:hover { background: #f3f4f6; }

@media (max-width: 720px) {
  .app-profile-card-header, .app-profile-card-body, .app-social-row { padding: 16px; }
  .app-profile-attention { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .app-profile-card-header, .app-social-row { grid-template-columns: minmax(0, 1fr); }
  .app-profile-card-header { flex-direction: column; }
  .app-profile-card-header > .app-profile-button { width: 100%; }
  .app-social-actions { max-width: none; justify-content: flex-start; }
}

/* Shared offer calculator: a quiet track with a large keyboard-focusable thumb. */
#offerPricing input[type="range"] {
  appearance: none;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #e5e7eb;
  padding: 0;
  cursor: pointer;
}
#offerPricing input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 3px solid white;
  border-radius: 50%;
  background: #6765f2;
  box-shadow: 0 0 0 1px #6765f2;
}
#offerPricing input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid white;
  border-radius: 50%;
  background: #6765f2;
  box-shadow: 0 0 0 1px #6765f2;
}
#offerPricing input[type="range"]:focus-visible {
  outline: 2px solid #6765f2;
  outline-offset: 5px;
}

/* Order state is communicated by both a label and a distinct, high-contrast color. */
.order-status-badge { display:inline-flex; align-items:center; gap:6px; border-radius:9999px; padding:5px 10px; font-size:12px; font-weight:700; line-height:1.4; background:#f1f5f9; color:#475569; white-space:nowrap; }
.order-status-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.order-status-badge[data-order-status="initiated"] { background:#fffbeb; color:#92400e; }
.order-status-badge[data-order-status="paid"] { background:#eff6ff; color:#1d4ed8; }
.order-status-badge[data-order-status="shipped"] { background:#f5f3ff; color:#6d28d9; }
.order-status-badge[data-order-status="confirmed"] { background:#ecfdf5; color:#047857; }
.order-status-badge[data-order-status="failed"] { background:#fef2f2; color:#b91c1c; }
.order-status-badge[data-order-status="cancelled"] { background:#f1f5f9; color:#475569; }
.order-status-badge[data-order-status="refunded"] { background:#ecfeff; color:#0e7490; }
.order-pagination, .commerce-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.commerce-pagination { justify-content:flex-end; margin-top:16px; }
.order-pagination a, .order-pagination button, .order-pagination [aria-current], .commerce-pagination button { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:6px 12px; border:1px solid #d1d5db; border-radius:12px; font-size:14px; font-weight:600; background:white; }
.order-pagination [aria-current="page"] { background:#6765f2; border-color:#6765f2; color:white; }
.order-pagination button:disabled, .commerce-pagination button:disabled { background:#f8fafc; color:#94a3b8; cursor:default; }
[data-commerce-panel] [hidden] { display:none !important; }
.order-management-dialog { width:calc(100% - 32px); max-width:720px; max-height:90vh; padding:24px; border:1px solid #e5e7eb; border-radius:24px; overflow:auto; }
.order-management-dialog::backdrop { background:rgb(15 23 42 / 45%); }
[data-commerce-panel] input:not([type="checkbox"]), [data-commerce-panel] select { min-height:44px; border-radius:16px; }
[data-commerce-panel] article { overflow-wrap:anywhere; }
@media (max-width:639px) { .order-pagination { flex-direction:column; align-items:flex-start; } .order-management-dialog { padding:16px; } }
/* Order overview: compact rows; all operational forms live on the detail page. */
.campaign-v2-row { display: grid; grid-template-columns: minmax(0,2.2fr) .7fr 1fr 1fr 1.15fr; align-items: center; gap: 1rem; padding: 1.25rem; }
a.campaign-v2-row { border-top: 1px solid #e5e7eb; }
a.campaign-v2-row:hover, a.campaign-v2-row:focus-visible { background: #faf9ff; }
a.campaign-v2-row:focus-visible { outline: 2px solid #6765f2; outline-offset: -3px; }
.campaign-v2-head { padding-block: .85rem; background: #f9fafb; font-size: .75rem; font-weight: 600; color: #6b7280; }
.campaign-v2-status { display: inline-flex; border-radius: 99px; padding: .3rem .7rem; background: #f3f4f6; color: #4b5563; font-size: .75rem; font-weight: 600; }
.campaign-v2-status[data-campaign-status=active] { background: #ecfdf5; color: #047857; }
.campaign-v2-status[data-campaign-status=completed] { background: #ede9fe; color: #6d28d9; }
.catalog-v2-row { display: grid; grid-template-columns: minmax(0,2fr) 1fr 1fr; align-items: center; gap: 1rem; }
.campaign-catalog-dialog { width: min(48rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.campaign-catalog-dialog::backdrop { background: rgb(15 23 42 / .35); }
.campaign-pending-summary > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.campaign-pending-summary > div:last-child > a { min-width: 0; padding: .75rem; }
.campaign-detail-tabs { overflow-x: auto; overscroll-behavior-inline: contain; }
.campaign-detail-tabs [role=tablist] { display: flex; min-width: max-content; gap: .25rem; border-bottom: 1px solid #e5e7eb; }
.campaign-detail-tabs [role=tab] { display: inline-flex; min-height: 44px; align-items: center; padding: .5rem .9rem; border-bottom: 2px solid transparent; color: #6b7280; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.campaign-detail-tabs [role=tab][aria-selected=true] { border-bottom-color: #6765f2; color: #514fcf; }
.campaign-detail-tabs [role=tab]:focus-visible { outline: 2px solid #6765f2; outline-offset: -2px; }
@media (max-width: 1279px) {
  .campaign-v2-head { display: none; }
  a.campaign-v2-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  a.campaign-v2-row > :first-child { grid-column: 1 / -1; }
  a.campaign-v2-row > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .catalog-v2-row { grid-template-columns: minmax(0,1fr) auto; }
  .catalog-v2-row > :first-child { grid-column: 1 / -1; }
  .campaign-detail-tabs { margin-inline: -1rem; padding-inline: 1rem; }
}
@media (min-width: 1024px) { .campaign-pending-summary > div:last-child { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-version-nav { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid #e5e7eb; padding-bottom: .75rem; }
.page-version-nav a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .5rem 1rem; border-radius: 12px; color: #6b7280; font-weight: 700; }
.page-version-nav a span { font-size: .75rem; font-weight: 500; }
.page-version-nav a[aria-current=page] { background: #ede9fe; color: #6765f2; }
.page-version-nav a:focus-visible { outline: 2px solid #6765f2; outline-offset: 2px; }
.order-list-heading, .order-list-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) 6rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}
.order-list-heading { background: #f9fafb; color: #6b7280; font-size: .75rem; font-weight: 600; padding-block: .85rem; border-bottom: 1px solid #e5e7eb; }
.order-list [data-order-divider] { border-top: 1px solid #e5e7eb; }
.order-list-row:hover { background: #faf9ff; }
.order-list-row:focus-visible { outline: 2px solid #6765f2; outline-offset: -3px; background: #faf9ff; }
.order-list-action { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; }
.order-bulk-dialog { width: min(28rem, calc(100% - 2rem)); }
.order-bulk-dialog::backdrop { background: rgb(15 23 42 / .35); }
@media (max-width: 1279px) {
  .order-list-heading { display: none; }
  .order-list-row { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
  .order-list-product { grid-column: 1; }
  .order-list-amount { grid-column: 2; text-align: right; }
  .order-list-status { grid-column: 1; }
  .order-list-shipping { grid-column: 1; }
  .order-list-action { grid-column: 2; grid-row: 2 / span 2; }
}

@media(max-width:360px){.app-admin-header .app-logo{font-size:16px!important}.app-admin-header [data-app-post-link]{white-space:nowrap;font-size:12px}}

/* Campaign content and finance keep their own containers and existing handlers. */
.commerce-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.commerce-result-card,.commerce-condition-card{min-width:0;background:#fff;border:1px solid #e5e3ed;border-radius:16px;padding:22px}.commerce-result-card h3,.commerce-condition-card h3{font-size:18px;font-weight:700}.commerce-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.commerce-state{display:inline-flex;border-radius:99px;padding:4px 9px;font-size:12px;font-weight:650;background:#fff4df;color:#956115}.commerce-state[data-state=approved]{background:#eaf7ef;color:#247846}.commerce-state[data-state=revision]{background:#fff4df;color:#956115}.commerce-condition-card dl,.commerce-amounts{display:grid;gap:16px;margin:20px 0}.commerce-condition-card dl>div,.commerce-amounts>div{display:flex;justify-content:space-between;gap:16px;font-size:14px}.commerce-condition-card dt,.commerce-amounts dt{color:#687081}.commerce-condition-card dd,.commerce-amounts dd{text-align:right;font-weight:650}.commerce-net{border-top:1px solid #e5e3ed;padding-top:18px}.commerce-net dd{font-size:22px;color:#5144b9}.commerce-hold{margin-top:14px;color:#956115;font-size:14px}.commerce-condition-card a,.commerce-result-card>a{display:inline-flex;min-height:44px;align-items:center;margin-top:12px;color:#5144b9;font-size:14px;font-weight:650}.commerce-finance-note{font-size:12px;color:#687081;margin-top:12px}.commerce-panel>h2{margin-bottom:16px}.commerce-panel>p[role=status]:empty{margin:0}@media(max-width:760px){.commerce-split{grid-template-columns:1fr}.commerce-result-card,.commerce-condition-card{padding:18px}.commerce-net dd{font-size:20px}}

/* Unread state is separate from task totals and campaign participation. */
.gonggu-new-dot { display:inline-block; width:7px; height:7px; min-width:7px; border-radius:50%; background:#6765f2; box-shadow:0 0 0 1.5px #fff; margin-inline-start:7px; vertical-align:middle; flex-shrink:0; }
.gonggu-new-dot[hidden] { display:none !important; }
.gonggu-recommendation-navigation { display:flex; gap:8px; overflow-x:auto; border-bottom:1px solid #e5e7eb; margin-bottom:24px; }
.gonggu-recommendation-navigation a { white-space:nowrap; padding:12px 16px; color:#6b7280; font-weight:700; }
.gonggu-recommendation-navigation a[aria-current="page"] { color:#6765f2; border-bottom:2px solid #6765f2; }
.influencer-card[data-admin-recommended="true"] { border-color:#d9d4fd; border-inline-start:4px solid #6765f2; }
.recommendation-source { color:#5956d9; background:#f0edff; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:700; }
.recommendation-profile-dialog { width:min(480px,calc(100vw - 32px)); border:1px solid #e5e7eb; border-radius:20px; padding:24px; }
.recommendation-profile-dialog::backdrop { background:rgba(31,35,68,.35); }

/* Campaign progress is separate from unread and participant indicators. */
.campaign-v2-status[data-tone]{align-items:center;gap:6px;white-space:nowrap;border:1px solid transparent;font-size:13px;line-height:1.5;padding:6px 10px;font-weight:650;letter-spacing:-.02em}
.campaign-v2-status[data-tone]::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.campaign-v2-status[data-tone=purple]{background:#f1edff;color:#5c42bd;border-color:#e4dbff}
.campaign-v2-status[data-tone=amber]{background:#fff7e6;color:#9c6100;border-color:#f6e1b4}
.campaign-v2-status[data-tone=blue]{background:#edf4ff;color:#305eb6;border-color:#dbe7fc}
.campaign-v2-status[data-tone=gray]{background:#f2f3f6;color:#59616e;border-color:#e7e9ee}
.campaign-v2-status[data-tone=green]{background:#eaf8f0;color:#22704a;border-color:#cbe9d9}