/* v1.1.6.312 (REV46): шар --n-* переведено на канонні імена.
   Обіцяно в .304 і зроблено окремо, щоб diff лишався читабельним.
   Рівність тут навіть простіша за минулий раз: канонні токени ВИЗНАЧЕНІ через
   ці ж --n-* (`--kp-color-surface: var(--n-bg-2)`), тож збіг не випадковий, а
   за побудовою. Однак я все одно звірив кожну пару після повного розкриття
   ланцюжка var() і ОКРЕМО у світлій та темній схемі — сім із семи.
   Жодне обчислене значення не змінюється. --n-* лишаються оголошеними в
   tokens.css: канонні токени спираються на них, і це шар значень під шаром імен. */
/* v1.1.6.291 (REV46, CANON-STEP-8): значення, які ВЖЕ дорівнювали кроку
   канонної шкали, отримали її ім'я: радіус 0, pill 0,
   відступи 2, вага 0. Жодне число не змінено — це
   перейменування, не редизайн. Значення поза шкалою лишились літералами
   свідомо: прев'ю канону саме вживає 10/14/6px для падінгів компонентів,
   тож стягувати їх до шкали означало б відійти ВІД прев'ю, а не до нього. */
/* v1.1.6.290 (REV46, CANON-STEP-7): 2 значень font-size переведено на
   канонну шкалу (--kp-text-xs/sm/md/lg/xl/2xl). Правило: найближчий крок,
   і лише коли зміна ≤12%%. Все, що далі (герой-цифри 3-5rem, мікропідписи
   <0.6rem), лишилось літералом — це не текстова шкала. Перелік: _meta/. */
/* widgets/ui/notice — v1.1.5.883. Лише токени. */
.kp-notice {
    display: flex;
    gap: 10px;
    padding: var(--kp-space-3) 14px;
    border: 1px solid var(--kp-color-border);
    border-radius: var(--n-r-md);
    background: var(--n-surface-2);
    color: var(--n-text-soft);
    font-size: var(--kp-text-sm);
    line-height: var(--n-lh);
}
.kp-notice__icon { font-size: var(--kp-text-md); line-height: 1.4; }
.kp-notice__body { display: flex; flex-direction: column; gap: var(--kp-space-1); min-width: 0; }
.kp-notice__title { color: var(--kp-color-text); font-weight: 600; }
.kp-notice__text { margin: 0; }
.kp-notice--info   { background: var(--n-info-soft); }
.kp-notice--good   { background: var(--n-good-soft); }
.kp-notice--warn   { background: var(--n-warn-soft); }
.kp-notice--danger { background: var(--n-danger-soft); color: var(--kp-color-text); }