.icon-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(40,60,52,0.6);
    background: linear-gradient(180deg, #28604d 0%, #143b2c 100%);
    color: #d6e8df;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    font: inherit;
    padding: 0;
  }
  @media (hover: hover) {
    .icon-btn:hover {
      background: linear-gradient(180deg, #2f7058 0%, #194534 100%);
      color: #f1f7f3;
    }
  }
  .icon-btn:active { transform: translateY(1px); }
  .icon-btn.active {
    background: linear-gradient(180deg, #36886c 0%, #1d513e 100%);
    color: #f1f7f3;
  }
  .icon-btn svg { width: 22px; height: 22px; display: block; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--r-sm);
    border: 1px solid var(--border-2);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    color: var(--text); cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.12s ease, transform 0.06s ease;
    font-weight: 500;
  }
  @media (hover: hover) {
    .btn:hover { background: linear-gradient(180deg, #322a23, var(--surface-2)); }
  }
  .btn:active { transform: translateY(1px); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn.primary {
    background: linear-gradient(180deg, #2e7e64 0%, #1a4f3e 100%);
    color: #eef5f1;
    border-color: rgba(70,110,95,0.55);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.07) inset,
      0 -1px 0 rgba(0,0,0,0.4) inset,
      0 2px 6px rgba(0,0,0,0.45);
  }
  @media (hover: hover) {
    .btn.primary:hover { background: linear-gradient(180deg, #348c70 0%, #225e4a 100%); }
  }
  .btn.danger {
    background: linear-gradient(180deg, #b95c43 0%, #883a26 100%);
    color: #fff; border-color: rgba(213,106,82,0.55);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.12) inset,
      0 -1px 0 rgba(0,0,0,0.25) inset,
      0 4px 14px rgba(180,80,60,0.3);
  }
  @media (hover: hover) {
    .btn.danger:hover { background: linear-gradient(180deg, #c96e54 0%, #98442e 100%); }
  }
  .btn.warn {
    background: linear-gradient(180deg, #c98e4f 0%, #946232 100%);
    color: #fff; border-color: rgba(213,145,72,0.55);
  }
  @media (hover: hover) {
    .btn.warn:hover { background: linear-gradient(180deg, #d9a062 0%, #a47140 100%); }
  }
  .btn.ghost {
    background: transparent;
    border-color: var(--border-2);
    color: var(--muted);
    box-shadow: none;
  }
  @media (hover: hover) {
    .btn.ghost:hover { background: var(--border-2); color: var(--text); }
  }
  .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

  /* HERO CTA — большая физическая зелёная кнопка */
  .cta-create {
    display: block; width: 100%;
    margin: 0 0 22px;
    padding: 28px 28px;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(70,110,95,0.45);
    border-radius: var(--r-lg);
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(255,200,150,0.06), transparent 55%),
      linear-gradient(180deg, #2a6e58 0%, #16442f 65%, #0e3022 100%);
    color: #eaf3ee;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.08) inset,
      0 -2px 0 rgba(0,0,0,0.45) inset,
      0 6px 18px rgba(0,0,0,0.5);
    transition: transform 0.08s ease, background 0.15s ease;
    font: inherit;
  }
  @media (hover: hover) {
    .cta-create:hover {
      background:
        radial-gradient(120% 140% at 100% 0%, rgba(255,200,150,0.09), transparent 55%),
        linear-gradient(180deg, #327d65 0%, #1a5039 65%, #103626 100%);
    }
  }
  .cta-create:active { transform: translateY(1px); }
  .cta-create .inner {
    display: flex; align-items: center; gap: 22px;
  }
  .cta-create .icon-wrap {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(180deg, #194739 0%, #0a2a1f 100%);
    border: 1px solid rgba(80,130,110,0.45);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 -1px 0 rgba(0,0,0,0.45) inset;
    display: grid; place-items: center;
    color: #b6d8c8;
  }
  .cta-create .icon-wrap svg { width: 30px; height: 30px; }
  .cta-create .label-block .ttl {
    font-size: 20px; font-weight: 700; letter-spacing: 0.2px;
    color: #f1f7f3;
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  }
  .cta-create .label-block .sub {
    font-size: 13px; color: #b3c8bd; margin-top: 4px;
  }
  .cta-create .spacer { flex: 1; }
  .cta-create .chev {
    color: #95b6a7; font-size: 24px; opacity: 0.7;
  }

  /* Tile-version of CTA inside grids */
  .cta-tile {
    aspect-ratio: 16/9;
    border-radius: var(--r-md);
    border: 1px dashed rgba(110,150,135,0.4);
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(255,200,150,0.05), transparent 55%),
      linear-gradient(180deg, #1f5443 0%, #122e22 100%);
    color: #cfe2d8;
    display: grid; place-items: center; cursor: pointer;
    transition: background 0.15s ease;
  }
  @media (hover: hover) {
    .cta-tile:hover { background: linear-gradient(180deg, #266753 0%, #163728 100%); }
  }
  .cta-tile .stack { align-items: center; gap: 8px; }
  .cta-tile svg { width: 36px; height: 36px; opacity: 0.85; }
  .cta-tile .label { font-weight: 600; }

  /* Square icon-button — variants for status hints in detail/case actions */
  .icon-btn.sm { width: 40px; height: 40px; border-radius: 10px; }
  .icon-btn.sm svg { width: 18px; height: 18px; }
  .icon-btn.warn {
    background: linear-gradient(180deg, #8a5a2b 0%, #4a2f15 100%);
    border-color: rgba(140,100,60,0.55);
    color: #f6e3c4;
  }
  @media (hover: hover) {
    .icon-btn.warn:hover { background: linear-gradient(180deg, #9a6735 0%, #58381a 100%); }
  }
  .icon-btn.danger {
    background: linear-gradient(180deg, #8a3a2b 0%, #4a1f15 100%);
    border-color: rgba(160,80,60,0.55);
    color: #f6d0c4;
  }
  @media (hover: hover) {
    .icon-btn.danger:hover { background: linear-gradient(180deg, #9a4735 0%, #58281a 100%); }
  }
  .icon-btn.ghost {
    background: linear-gradient(180deg, #1f1b18 0%, #14110f 100%);
    border-color: var(--border-2);
    color: var(--muted);
  }
  @media (hover: hover) {
    .icon-btn.ghost:hover { color: var(--text); }
  }

  /* Edit form rows with icon column */
  .form-row {
    display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
  }
  .form-row .ic {
    width: 24px; height: 32px; display: grid; place-items: center;
    color: var(--muted);
  }
  .form-row .ic svg { width: 16px; height: 16px; }
  .form-row textarea + .ic, .form-row .ic.ta { height: auto; padding-top: 9px; }

  /* Touch targets & keyboard focus */
  @media (hover: none) {
    .btn { min-height: 44px; }
    .icon-btn.sm { min-width: 44px; min-height: 44px; }
  }
  .btn:focus-visible,
  .icon-btn:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
  }