.notification-page-heading .heading-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.notification-layout { display: grid; grid-template-columns: minmax(360px, 1.1fr) minmax(420px, .9fr); gap: 18px; align-items: start; }
.notification-channel-column { display: grid; gap: 14px; min-width: 0; }
.notification-channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.notification-channel-card { position: relative; min-height: 148px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(32,42,56,.06); cursor: pointer; text-align: left; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.notification-channel-card:hover { transform: translateY(-2px); border-color: #d7ad1c; box-shadow: 0 12px 27px rgba(32,42,56,.1); }
.notification-channel-card.selected { border-color: #d9aa00; box-shadow: inset 3px 0 #ffc400, 0 12px 27px rgba(32,42,56,.1); background: linear-gradient(115deg,#fffdf5,#fff); }
.notification-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notification-channel-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #1b2430; color: #ffc400; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.notification-channel-status { padding: 5px 8px; border-radius: 999px; background: #eef1f5; color: #687384; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.notification-channel-status.enabled { background: #e7f8f0; color: #08794c; }
.notification-channel-status.ready { background: #fff4cc; color: #805a00; }
.notification-channel-card h3 { margin: 13px 0 4px; font-size: 15px; }
.notification-channel-card p { margin: 0; min-height: 36px; color: var(--slate); font-size: 11px; line-height: 1.55; }
.notification-channel-card footer { display: flex; justify-content: space-between; gap: 9px; margin-top: 11px; color: #7a8492; font-size: 9px; }
.notification-channel-card footer b { color: #344054; }
.notification-channel-form { position: sticky; top: 94px; display: grid; gap: 14px; padding: 20px; }
.notification-channel-form > label, .notification-form-grid > label { display: grid; gap: 7px; color: #344054; font-size: 11px; font-weight: 750; }
.notification-channel-form input:not([type="checkbox"]), .notification-channel-form select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d4dae3; border-radius: 10px; background: #fff; color: #1b2430; outline: none; }
.notification-channel-form input:focus, .notification-channel-form select:focus { border-color: #d8a700; box-shadow: 0 0 0 3px rgba(255,196,0,.14); }
.notification-channel-form label > small { color: #7a8492; font-size: 9px; font-weight: 500; }
.notification-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notification-toggle > span:last-child { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #d4dae3; border-radius: 10px; background: #f8fafc; font-size: 11px; font-weight: 650; }
.notification-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.notification-last-test { min-height: 18px; margin: -2px 0 0; padding: 9px 11px; border-radius: 9px; background: #f5f7fa; color: #657083; font-size: 10px; }
.notification-last-test.ok { background: #eaf8f1; color: #08794c; }
.notification-last-test.failed { background: #fff0ef; color: #ad2929; }
.notification-routing-note { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 15px; border-color: #ead487; background: #fffaf0; }
.notification-note-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ffc400; color: #1b2430; font-weight: 900; }
.notification-routing-note strong { display: block; font-size: 12px; }
.notification-routing-note p { margin: 4px 0 0; color: #6f6545; font-size: 10px; line-height: 1.55; }
.notification-template-studio, .notification-escalation-studio, .notification-case-history { margin-top: 18px; padding: 20px; }
.notification-template-studio .settings-card-heading p, .notification-escalation-studio .settings-card-heading p { margin: 4px 0 0; color: var(--slate); font-size: 10px; }
.notification-template-layout { display: grid; grid-template-columns: 190px minmax(360px, 1fr) minmax(300px, .8fr); gap: 16px; margin-top: 17px; align-items: start; }
.notification-template-tabs { display: grid; gap: 8px; }
.notification-template-tab { width: 100%; display: grid; gap: 4px; padding: 13px; border: 1px solid #dce1e8; border-radius: 11px; background: #f8fafc; color: #344054; cursor: pointer; text-align: left; }
.notification-template-tab strong { font-size: 12px; }.notification-template-tab small { color: #778292; font-size: 9px; }
.notification-template-tab.active { border-color: #d8aa08; background: #fff9e6; box-shadow: inset 3px 0 #ffc400; }
.notification-template-form { display: grid; gap: 12px; }
.notification-template-form label, .notification-escalation-form label { display: grid; gap: 7px; color: #344054; font-size: 11px; font-weight: 750; }
.notification-template-form input:not([type="checkbox"]), .notification-template-form textarea, .notification-escalation-form input:not([type="checkbox"]), .notification-escalation-form select { width: 100%; padding: 9px 11px; border: 1px solid #d4dae3; border-radius: 10px; background: #fff; color: #1b2430; outline: none; }
.notification-template-form input:focus, .notification-template-form textarea:focus, .notification-escalation-form input:focus, .notification-escalation-form select:focus { border-color: #d8a700; box-shadow: 0 0 0 3px rgba(255,196,0,.14); }
.notification-template-form textarea { min-height: 225px; resize: vertical; line-height: 1.55; }
.notification-variable-title { display: block; margin-bottom: 7px; color: #687384; font-weight: 750; }
.notification-template-variables { display: flex; flex-wrap: wrap; gap: 6px; }
.notification-template-variables button { padding: 5px 7px; border: 1px solid #d8dee7; border-radius: 7px; background: #f5f7fa; color: #344054; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
.notification-template-variables button:hover { border-color: #d8aa08; background: #fff9e6; }
.notification-template-preview { min-height: 360px; padding: 18px; border: 1px solid #303a48; border-radius: 14px; background: #17202c; color: #f5f7fa; box-shadow: 0 16px 32px rgba(20,28,39,.15); }
.notification-template-preview > span { color: #ffc400; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.notification-template-preview h3 { margin: 13px 0 14px; color: #fff; font-size: 15px; line-height: 1.45; }
.notification-template-preview pre { margin: 0; color: #d8e0ea; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.7 "Noto Sans Thai", sans-serif; }
.notification-escalation-form { display: grid; gap: 15px; margin-top: 17px; }
.notification-escalation-basics { display: grid; grid-template-columns: minmax(260px, 1fr) 220px 220px; gap: 12px; }
.notification-escalation-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding-top: 4px; border-top: 1px solid #e4e8ee; }
.notification-escalation-heading strong, .notification-escalation-heading small { display: block; }
.notification-escalation-heading strong { margin-top: 14px; font-size: 12px; }.notification-escalation-heading small { margin-top: 3px; color: #778292; font-size: 9px; }
.notification-escalation-steps { display: grid; gap: 9px; }
.notification-escalation-step { display: grid; grid-template-columns: 74px 130px minmax(180px, .8fr) minmax(300px, 1.4fr) 36px; gap: 10px; align-items: end; padding: 12px; border: 1px solid #dfe4eb; border-radius: 11px; background: #f9fafc; }
.notification-escalation-step .step-number { align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #1b2430; color: #ffc400; font-size: 12px; font-weight: 900; }
.notification-step-channels { display: flex; flex-wrap: wrap; gap: 6px; min-height: 42px; align-items: center; padding: 7px; border: 1px solid #d4dae3; border-radius: 10px; background: #fff; }
.notification-step-channels label { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 7px; background: #f0f3f7; font-size: 9px; font-weight: 650; }
.notification-step-remove { width: 34px; height: 38px; border: 1px solid #efc4c4; border-radius: 9px; background: #fff4f4; color: #b52f2f; cursor: pointer; }
.notification-case-list { display: grid; gap: 9px; margin-top: 15px; }
.notification-case-row { display: grid; grid-template-columns: 95px minmax(240px, 1fr) 145px 150px auto; gap: 12px; align-items: center; padding: 12px 13px; border: 1px solid #e0e5ec; border-radius: 11px; background: #fff; }
.notification-case-status { width: fit-content; padding: 5px 8px; border-radius: 999px; background: #fff1c2; color: #7c5700; font-size: 9px; font-weight: 850; }
.notification-case-status.acknowledged { background: #e6f7ef; color: #08794c; }
.notification-case-main strong, .notification-case-main small { display: block; }.notification-case-main strong { font-size: 11px; }.notification-case-main small { margin-top: 3px; color: #778292; font-size: 9px; }
.notification-case-meta { color: #5f6b7b; font-size: 9px; }.notification-case-meta b { display: block; color: #344054; margin-bottom: 2px; }
.notification-case-ack { white-space: nowrap; }

@media (max-width: 1320px) {
  .notification-layout { grid-template-columns: 1fr; }
  .notification-channel-form { position: static; }
  .notification-channel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notification-template-layout { grid-template-columns: 180px 1fr; }
  .notification-template-preview { grid-column: 1 / -1; min-height: 250px; }
  .notification-escalation-step { grid-template-columns: 58px 110px minmax(160px, .8fr) minmax(260px, 1.4fr) 36px; }
}

@media (max-width: 880px) {
  .notification-channel-list { grid-template-columns: 1fr; }
  .notification-form-grid { grid-template-columns: 1fr; }
  .notification-form-actions { flex-direction: column-reverse; }
  .notification-form-actions button { width: 100%; }
  .notification-template-layout, .notification-escalation-basics { grid-template-columns: 1fr; }
  .notification-template-preview { grid-column: auto; }
  .notification-template-tabs { grid-template-columns: repeat(3, 1fr); }
  .notification-escalation-step { grid-template-columns: 50px 1fr; }
  .notification-escalation-step > label, .notification-step-channels { grid-column: 2; }
  .notification-step-remove { grid-column: 1; grid-row: 2; }
  .notification-case-row { grid-template-columns: 1fr; }
}