:root{
  --bg:#fafafa;
  --text:#111;
  --muted:#6b7280;
  --card:#ffffff;
  --line:#e5e7eb;
  --accent:#d40000;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:16px;

  /* ✅ MOTION tokens */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.18,.89,.32,1.28);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 260ms;

  /* ✅ focus ring */
  --focus: rgba(212,0,0,.22);

  /* ✅ hover shadow (subtelnie mocniejszy) */
  --shadow-hover: 0 14px 36px rgba(0,0,0,.10);
}

html.theme-dark{
  --bg:#0b0d12;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --card:#141821;
  --line:#222a38;
  --accent:#ff4d4d;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --shadow-hover: 0 16px 40px rgba(0,0,0,.55);
  --focus: rgba(255,77,77,.22);
}

html.theme-glass{
  --bg: #eef1f7;
  --card: rgba(255,255,255,.32);
  --line: rgba(255,255,255,.18);
  --muted: #667085;
  background:
    radial-gradient(1100px 680px at 12% -20%, rgba(255,255,255,.75), rgba(255,255,255,0)),
    radial-gradient(980px 560px at 100% 12%, rgba(255,210,210,.18), rgba(255,255,255,0)),
    radial-gradient(900px 520px at 30% 85%, rgba(170,200,255,.18), rgba(255,255,255,0)),
    linear-gradient(180deg, #eef1f7 0%, #e6ebf7 100%);
}
html.theme-glass body{
  background: transparent;
}
html.theme-glass body::before{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(520px 360px at 16% 10%, rgba(212,0,0,.08), transparent 60%),
    radial-gradient(600px 420px at 86% 18%, rgba(255,120,120,.08), transparent 60%),
    radial-gradient(640px 440px at 40% 88%, rgba(120,160,255,.10), transparent 60%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(255,255,255,.08),
      rgba(120,180,255,.06),
      rgba(255,200,230,.06),
      rgba(255,255,255,.08));
  filter: blur(60px) saturate(140%);
  opacity: .35;
  z-index: 0;
}
html.theme-glass body,
html.theme-glass .app{
  position: relative;
  z-index: 1;
}
html.theme-glass .card,
html.theme-glass .hm-modal-card,
html.theme-glass .hm-preview-card,
html.theme-glass .hm-dialog-card,
html.theme-glass .hm-chat-panel,
html.theme-glass .hm-chat-msg.other,
html.theme-glass .hm-offer-expand,
html.theme-glass .hm-actions-dropdown,
html.theme-glass .hm-quick-item{
  background: var(--card);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  backdrop-filter: blur(36px) saturate(200%);
  box-shadow:
    0 22px 50px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: background 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

html.theme-glass #hmCopyOverlay .hm-modal{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  backdrop-filter: blur(36px) saturate(200%);
  box-shadow:
    0 22px 50px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.35);
}
html.theme-glass #hmCopyOverlay .hm-modal input,
html.theme-glass #hmCopyOverlay .hm-modal select{
  background: rgba(255,255,255,.5) !important;
  border-color: var(--line) !important;
}
html.theme-glass .sidebar,
html.theme-glass .topbar,
html.theme-glass .mobilebar{
  background: rgba(255,255,255,.35);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  backdrop-filter: blur(36px) saturate(200%);
  box-shadow:
    0 16px 34px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.28);
}
html.theme-glass .table th{
  background: rgba(255,255,255,.4);
}
html.theme-glass .input,
html.theme-glass select.input,
html.theme-glass textarea.input{
  background: rgba(255,255,255,.5);
  border-color: var(--line);
}
html.theme-glass .btn{
  background: rgba(255,255,255,.4);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
}
html.theme-glass .btn.primary{
  background: rgba(212,0,0,.9);
  border-color: rgba(212,0,0,.3);
  color:#fff;
}
html.theme-glass .hm-chat-messages{
  background: rgba(237,242,251,.45);
}

html.theme-glass .hm-preview-body,
html.theme-glass #hmOfferPreviewModal .hm-preview-body{
  background: rgba(237,242,251,.35) !important;
}

html.theme-glass .content{
  position: relative;
}
html.theme-glass .content > *{
  position: relative;
  z-index: 1;
}

html.theme-glass .hm-modal-backdrop{
  background: rgba(10,16,25,.18);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

/* intentionally no background animation for the "C" variant */
html.theme-dark .btn{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}
html.theme-dark .btn.btn-ghost{
  background: transparent;
  border-color: var(--line);
}
html.theme-dark .btn.danger{
  background: var(--card);
  color: #ff7a7a;
  border-color: rgba(255, 77, 77, .55);
}
html.theme-dark .table th{
  background: #0f131a;
  color: var(--text);
}
html.theme-dark .table tbody tr:hover{
  background: rgba(255,255,255,.03);
}
html.theme-dark .hm-kv{
  background: #0f131a;
  border-color: var(--line);
}

/* ✅ UX polish */
html{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}

/* ✅ tap polish */
a, button, .btn, .nav-item, .hm-bottombar-item{
  -webkit-tap-highlight-color: transparent;
}
button, .btn{
  touch-action: manipulation;
}

/* =========================================
   LAYOUT
========================================= */
.app{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:260px;
  background:var(--card);
  border-right:1px solid var(--line);
  padding:18px;
}

.main{flex:1; display:flex; flex-direction:column; min-width:0;}

.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.topbar-title{font-size:20px; font-weight:800}
.topbar-user{
  color:var(--muted);
  font-size:14px;
  display:flex;
  gap:10px;
  align-items:center;
}
.topbar-user a{
  color:var(--muted);
  text-decoration:none;
}

.content{padding:22px; min-width:0;}

/* =========================================
   BRAND + NAV
========================================= */
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  background:var(--card);
}

.brand-logo{
  height: 40px;
  max-height: 40px;
  max-width: 200px;
  width: auto;
  display: block;
  object-fit: contain;
}

.brand-mark{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  color:#fff;
  background:var(--accent);
}

.brand-name{font-weight:800; font-size:18px}
.brand-name span{color:var(--accent)}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}

.nav{margin-top:16px; display:flex; flex-direction:column; gap:6px}
.nav-item{
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;

  /* ✅ motion */
  transition:
    background var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.nav-item:hover{
  background:#f7f7f7;
  transform: translateY(-1px);
}
.nav-item:active{
  transform: translateY(0);
}
.nav-item.active{
  border-color: rgba(212,0,0,.25);
  background: rgba(212,0,0,.06);
  color: var(--accent);
  font-weight:700;
}

/* =========================================
   UI ELEMENTS
========================================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  min-width:0;
  position: relative;
  z-index: 0;

  /* ✅ motion */
  transition:
    box-shadow var(--t) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    border-color var(--t) var(--ease-out);
}
.hm-card-overflow-visible{
  overflow: visible !important;
}
.card:hover{
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.card:active{
  transform: translateY(0);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  user-select:none;

  /* ✅ motion */
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t) var(--ease-out),
    background var(--t) var(--ease-out),
    border-color var(--t) var(--ease-out),
    filter var(--t) var(--ease-out);
}
.btn.btn-small{
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}
.btn.btn-ghost{
  background: transparent;
  border-color: var(--line);
}
.btn.danger{
  border-color: rgba(212,0,0,.55);
  color: #d40000;
  background: #fff;
}
.btn.danger:hover{ border-color: rgba(212,0,0,.85); }
.btn.status{
  font-weight:800;
}
.btn.status.delivered{
  border-color: rgba(0,160,90,.35);
  background: rgba(0,160,90,.08);
}
.btn.status.not-delivered{
  border-color: rgba(212,0,0,.35);
  background: rgba(212,0,0,.06);
}
.btn:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0) scale(.99);
  box-shadow: none;
}
.btn.primary{
  background:var(--accent);
  border-color: var(--accent);
  color:#fff;
}
.btn.primary:hover{
  filter: brightness(0.98);
}
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
}
.table th, .table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.table th{background:#f6f6f6; color:#111; font-weight:800}
.table tr:last-child td{border-bottom:none}

/* ✅ subtle row hover (desktop) */
@media (hover:hover){
  .table tbody tr{
    transition: background var(--t) var(--ease-out);
  }
  .table tbody tr:hover{
    background: rgba(0,0,0,.02);
  }
}

/* table standard like protocol_list */
.hm-proto-table{
  table-layout: fixed;
  width:100%;
}
.table.hm-proto-table{
  overflow: visible !important;
}
.table.hm-proto-table thead,
.table.hm-proto-table tbody,
.table.hm-proto-table tr,
.table.hm-proto-table td{
  overflow: visible;
}
.hm-proto-table th,
.hm-proto-table td{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}
.hm-cell-wrap{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hm-proto-table tbody tr{
  transition: background 160ms ease, transform 120ms ease;
}
@media (hover:hover){
  .hm-proto-table tbody tr:hover{
    background: rgba(0,0,0,.02);
    transform: translateY(-1px);
  }
  .hm-proto-table tbody tr:active{
    transform: translateY(0);
  }
}
.hm-actions-cell{ vertical-align: middle; }
.hm-actions-cell{
  position: relative;
  z-index: 20;
  white-space: nowrap;
  overflow: visible;
  max-width: none;
}
.hm-actions-head{
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
}
.hm-actions-cell{
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}
.hm-actions-menu > summary.btn{
  max-width: 100%;
}
.hm-status-head{
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  white-space: nowrap;
}
.hm-status-cell{
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  white-space: normal;
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;

  /* ✅ motion */
  transition: transform var(--t-fast) var(--ease-out);
}
.badge:hover{ transform: translateY(-1px); }

.badge.ok{background:rgba(16,185,129,.12); color:#065f46; border:1px solid rgba(16,185,129,.25)}
.badge.bad{background:rgba(239,68,68,.12); color:#7f1d1d; border:1px solid rgba(239,68,68,.25)}
.badge.na{background:rgba(107,114,128,.12); color:#374151; border:1px solid rgba(107,114,128,.25)}

/* ✅ inputs polish (focus ring) */
input, textarea, select{
  outline: none;
  transition: box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
input:focus, textarea:focus, select:focus{
  box-shadow: 0 0 0 4px var(--focus);
  border-color: rgba(212,0,0,.35);
}

/* =========================================
   FORM UTILITIES (shared)
========================================= */
.hm-form{
  display:grid;
  gap:12px;
}
.hm-field{
  display:block;
  min-width:0;
}
.hm-label{
  font-size:13px;
  color: var(--muted);
  margin-bottom:6px;
  font-weight:800;
}
.hm-help{
  margin-top:6px;
  font-size:12.5px;
  color: var(--muted);
  line-height:1.25;
}
.hm-error{
  margin-top:6px;
  font-size:12.5px;
  color:#b00020;
  font-weight:700;
}
.hm-actions-row{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

/* shared inputs for hm-form */
.hm-form select,
.hm-form input[type="text"],
.hm-form input[type="number"],
.hm-form input[type="email"],
.hm-form input[type="tel"],
.hm-form input[type="date"],
.hm-form input[type="datetime-local"],
.hm-form textarea{
  width:100%;
  min-width:220px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background: var(--card, #fff);
  color: var(--text, #111);
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hm-form textarea{
  min-height:110px;
  resize:vertical;
}
.hm-form select{
  padding-right:36px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.hm-form select:hover,
.hm-form input:hover,
.hm-form textarea:hover{
  border-color: rgba(212,0,0,.22);
}
.hm-form select:focus,
.hm-form input:focus,
.hm-form textarea:focus{
  border-color: rgba(212,0,0,.55);
  box-shadow: 0 0 0 3px rgba(212,0,0,.12);
}

/* =========================================
   MOBILE BAR (to co mamy w base.html)
========================================= */
.mobilebar{ display:none; }

/* =========================================
   RESPONSIVE (iPhone / mobile)
========================================= */
@media (max-width: 920px){

  /* desktopowe elementy chowamy */
  .sidebar{display:none;}
  .topbar{display:none;}

  /* a pokazujemy mobilebar */
  .mobilebar{
    display:block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .mobilebar-top{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
  }

  .mobilebrand{
    display:flex;
    gap:10px;
    align-items:center;
    min-width:0;
  }
  .mobilebrand-mark{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    background: var(--accent);
    color: #fff;
    flex: 0 0 auto;
  }
  .mobilebrand-text{ min-width:0; }
  .mobilebrand-name{
    font-weight:900;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobilebrand-name img{
    height: 32px;
    max-width: 160px;
    width: auto;
    display: block;
    object-fit: contain;
  }

  .mobilebrand-name span{ color: var(--accent); }
  .mobilebrand-sub{
    font-size:12px;
    color: var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobileuser{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    flex: 0 0 auto;
  }
  .mobileuser-name{
    font-size:12px;
    color: var(--muted);
    line-height:1.1;
  }
  .mobileuser-logout{
    font-size:12px;
    text-decoration:none;
    color: var(--muted);
  }

  .mobilenav{
    display:flex;
    gap:8px;
    margin-top:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:2px;
  }
  .mobilenav-item{
    flex: 0 0 auto;
    text-decoration:none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    white-space:nowrap;

    /* ✅ motion */
    transition: transform var(--t-fast) var(--ease-out), background var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
  }
  .mobilenav-item:active{ transform: scale(.99); }
  .mobilenav-item.active{
    border-color: rgba(212,0,0,.35);
    color: var(--accent);
    font-weight: 800;
    background: rgba(212,0,0,.06);
  }

  /* content ciaśniej */
  .content{padding:12px;}

  /* karty ciaśniej */
  .card{padding:12px;}

  /* tabele: scroll zamiast łamania */
  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* na iOS zapobiega auto-zoom przy focus */
  input, select, textarea, button{
    font-size:16px;
  }

  /* często na mobile przyciski lepiej pełna szerokość */
  .row .btn{
    width:100%;
  }

  /* ✅ mobile: mniej hover-u na kartach */
  .card:hover{ transform:none; box-shadow: var(--shadow); }
}

/* =========================================
   MOBILE: switch table -> cards
========================================= */
.only-desktop{ display:block; }
.only-mobile{ display:none; }

@media (max-width: 920px){
  .only-desktop{ display:none; }
  .only-mobile{ display:block; }
}

.hm-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hm-item{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;

  /* ✅ motion */
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.hm-item:hover{
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.hm-item:active{
  transform: translateY(0);
}

.hm-item-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.hm-item-title{
  font-weight:900;
  font-size:15px;
  line-height:1.2;
}

.hm-item-sub{
  margin-top:4px;
  color: var(--muted);
  font-size:13px;
  line-height:1.2;
}

.hm-item-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.hm-kv{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size:12px;
  font-weight:800;
  background:#fff;

  /* ✅ motion */
  transition: transform var(--t-fast) var(--ease-out);
}
.hm-kv:active{ transform: scale(.99); }

.hm-kv-wrap{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height:1.2;
  max-width:100%;
}

/* cards actions (grid variants) */
.hm-actions-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}
.hm-actions-grid .btn{
  width:100%;
  min-width:0;
}
.hm-actions-1{ grid-template-columns: 1fr; }
.hm-actions-2{ grid-template-columns: 1fr 1fr; }
.hm-actions-grid form{ margin:0; }

/* inline actions (tables) */
.hm-actions-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.hm-inline-form{ display:inline; margin:0; }

/* actions dropdown (desktop tables) */
.hm-actions-menu{
  position: relative;
  display: inline-block;
  z-index: 1;
}
.hm-actions-menu[data-portal="body"] > .hm-actions-dropdown{
  display: block;
}
.hm-actions-fixed{
  z-index: 200000;
}
.hm-actions-menu[open]{
  z-index: 999;
}
.hm-actions-menu[open] > summary{
  position: relative;
  z-index: 1000;
}
.hm-actions-menu summary{
  list-style: none;
}
.hm-actions-menu summary::-webkit-details-marker{
  display: none;
}
.hm-actions-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 100000;
  background: #fff !important;
  mix-blend-mode: normal;
  isolation: isolate;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
}
.hm-actions-menu[open] .hm-actions-dropdown{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* tables: avoid stacking context issues for dropdowns */
.hm-proto-table .hm-stagger-item,
.hm-proto-table .hm-row-reveal{
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.hm-proto-table tr{
  position: relative;
  z-index: 0;
}
.hm-proto-table tr:has(.hm-actions-menu[open]){
  z-index: 500;
}
.hm-proto-table tr.hm-row-open{
  z-index: 600;
}
.hm-actions-item{
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
}
.hm-actions-item:hover{
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}
.hm-actions-item.danger{
  color: #d40000;
}
.hm-actions-item.muted{
  color: var(--muted);
  cursor: default;
}
.hm-actions-dropdown form{
  margin: 0;
}

html.theme-dark .hm-actions-dropdown{
  background: #0f131a !important;
  border-color: var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
html.theme-dark .hm-actions-item{
  background: #0f131a;
  color: var(--text);
}
html.theme-dark .hm-actions-item:hover{
  background: rgba(255,255,255,.06);
}

@media (max-width: 920px){
  .hm-actions-grid{
    grid-template-columns: 1fr 1fr;
  }
  .hm-actions-inline{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
  }
  .hm-actions-inline .btn,
  .hm-actions-inline form{
    width:100%;
  }
  .hm-actions-inline form .btn{
    width:100%;
  }
}

/* desktop/mobile switch */
.hm-only-desktop{ display:block !important; }
.hm-only-mobile{ display:none !important; }
@media (max-width: 920px){
  .hm-only-desktop{ display:none !important; }
  .hm-only-mobile{ display:block !important; }
}

.hm-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.hm-actions .btn{
  width:auto;
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
}

.hm-actions .btn.primary{
  flex: 1 1 100%;
}

/* === checkboxy: podpis i pieczątki === */
.chk{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}

.chk input[type="checkbox"]{
  width:auto;
  padding:0;
  margin:0;
}

/* TEMP EDIT – wymuś 1 kolumnę na mobile (bo inline grid-template-columns trzyma 2 kolumny) */
@media (max-width: 920px){
  div[style*="grid-template-columns: 1.2fr .8fr"]{
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: 1.2fr .8fr"] > div{
    min-width: 0;
  }
}

/* dodatkowy bezpiecznik na poziomy overflow */
html, body, .app, .main, .content{
  max-width: 100%;
  overflow-x: hidden;
}
.hm-allow-overflow .app,
.hm-allow-overflow .main,
.hm-allow-overflow .content{
  overflow: visible !important;
}

/* =========================================
   iOS-like bottom tab bar (scrollable)
========================================= */

/* usuń iOS-owe "niebieskie linki" w toolbarze */
.hm-bottombar a,
.hm-bottombar a:visited,
.hm-bottombar a:hover,
.hm-bottombar a:active{
  color: inherit !important;
  text-decoration: none !important;
}

/* ukryte na desktop */
.hm-bottombar{ display:none; }

@media (max-width: 920px){

  .hm-bottombar{
    display:flex;
    position:fixed;
    left:12px; right:12px; bottom:12px;
    z-index: 60;

    background: rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);

    border: 1px solid rgba(255,255,255,.35);

    padding: 8px 10px;
    gap: 10px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x proximity;
    border-radius: 22px;
    box-shadow:
      0 18px 40px rgba(15,23,42,.18),
      inset 0 1px 0 rgba(255,255,255,.65);
    transition: transform 220ms ease, opacity 220ms ease;
  }
  .hm-bottombar.is-hidden{
    transform: translateY(110%);
    opacity: 0;
  }
  .hm-bottombar-system{
    overflow-x: hidden;
    justify-content: center;
  }
  .hm-bottombar-system .hm-bottombar-item{
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  .hm-bottombar-system .hm-bottombar-item{
    gap: 2px;
    padding: 6px 6px;
  }
  .hm-bottombar-system .hm-bottombar-item .hm-ico{
    font-size: 18px;
  }
  .hm-bottombar-system .hm-bottombar-item .hm-txt{
    font-size: 10.5px;
  }

  .hm-bottombar::-webkit-scrollbar{ height: 0; }

  .hm-bottombar-item{
    flex: 0 0 auto;
    min-width: 72px;
    max-width: 92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 4px;

    padding: 8px 10px;

    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;

    font-weight: 800;
    color: var(--muted);

    -webkit-tap-highlight-color: transparent;
    user-select:none;

    scroll-snap-align: center;

    /* ✅ motion */
    transition:
      transform var(--t-fast) var(--ease-out),
      background var(--t) var(--ease-out),
      border-color var(--t) var(--ease-out),
      color var(--t) var(--ease-out);
  }

  .hm-bottombar-item:active{
    transform: scale(.98);
  }

  .hm-bottombar-item .hm-ico{
    font-size: 20px;
    line-height: 1;
    display:block;
  }

  .hm-bottombar-item .hm-txt{
    font-size: 11.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display:block;
  }

  .hm-bottombar-item.active{
    border-color: transparent;
    background: transparent;
    color: var(--accent);
  }

  .hm-bottombar-item.active .hm-txt{
    color: var(--accent);
  }
  .hm-bottombar-item.active::after{
    content:"";
    width:6px;
    height:6px;
    border-radius:999px;
    background: var(--accent);
    margin-top:2px;
  }

  .content{
    padding-bottom: 116px;
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }
}

.hm-actions-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hm-actions-list .hm-actions-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background: var(--card);
}

.hm-mobile-sheet{
  width: min(520px, 96vw);
}

@media (max-width: 900px){
  .hm-mobile-sheet{
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

@media (max-width: 920px){
  html.theme-dark .mobilebar{
    background: var(--card);
    border-bottom-color: var(--line);
  }
  html.theme-dark .mobilenav-item{
    color: var(--text);
    border-color: var(--line);
    background: #0f131a;
  }
  html.theme-dark .mobilenav-item.active{
    background: rgba(255,77,77,.12);
    border-color: rgba(255,77,77,.35);
  }
html.theme-dark .hm-bottombar{
  background: rgba(10,12,18,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}

html.theme-dark .brand-logo,
html.theme-dark .mobilebrand-logo{
  filter: invert(1) hue-rotate(180deg) saturate(1.1);
}
  html.theme-dark .hm-bottombar-item{
    color: var(--muted);
  }
  html.theme-dark .hm-bottombar-item.active{
    color: var(--accent);
  }
}

/* =========================================
   TABLE helpers (Twoje)
========================================= */
.hm-table-fixed{
  table-layout: fixed;
  width: 100%;
}
.hm-table-fixed th,
.hm-table-fixed td{
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.hm-col-actions{
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.hm-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.hm-actions .btn{
  padding: 8px 10px;
}
.table-scroll{ overflow-x:auto; }
.table-scroll .table{ width:100%; }
.hm-table-wrap{ overflow: visible; }

/* =========================================
   REDUCED MOTION – global kill switch
========================================= */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   HM FULL MOTION SYSTEM (GLOBAL)
   Animacje odpalają się dopiero gdy:
   html.hm-ready i nie ma html.hm-nav-loading
   oraz body ma klasę hm-animate (restartowana po loaderze)
========================================================= */

:root{
  --hm-stagger-step: 42ms;
  --hm-reveal-dist: 10px;
}

@keyframes hmFadeUp{
  from { opacity: 0; transform: translateY(var(--hm-reveal-dist)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hmPop{
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hmSlideIn{
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 1) Domyślna animacja kart */
html.hm-ready:not(.hm-nav-loading) body.hm-animate .card{
  animation: hmPop 260ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
}

/* 2) Reveal dla dowolnego elementu */
.hm-reveal{
  opacity: 0;
  transform: translateY(var(--hm-reveal-dist));
}
html.hm-ready:not(.hm-nav-loading) body.hm-animate .hm-reveal{
  animation: hmFadeUp 280ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
}

/* 3) Stagger list/table items */
.hm-stagger-item{
  opacity: 0;
  transform: translateY(6px);
}
html.hm-ready:not(.hm-nav-loading) body.hm-animate .hm-stagger-item{
  animation: hmFadeUp 300ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
  animation-delay: calc(var(--i, 0) * var(--hm-stagger-step));
}

/* 4) Sidebar nav “slide in” (desktop) */
@media (min-width: 921px){
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item{
    animation: hmSlideIn 240ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
  }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(1){ animation-delay: 20ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(2){ animation-delay: 40ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(3){ animation-delay: 60ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(4){ animation-delay: 80ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(5){ animation-delay: 100ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(6){ animation-delay: 120ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(7){ animation-delay: 140ms; }
  html.hm-ready:not(.hm-nav-loading) body.hm-animate .nav-item:nth-child(8){ animation-delay: 160ms; }
}

/* 5) Reduced motion kill-switch */
@media (prefers-reduced-motion: reduce){
  .hm-reveal, .hm-stagger-item{ opacity: 1 !important; transform: none !important; }
  body.hm-animate .card{ animation: none !important; }
  body.hm-animate .hm-reveal{ animation: none !important; }
  body.hm-animate .hm-stagger-item{ animation: none !important; }
  .nav-item{ animation: none !important; }
}
/* =========================
   GLOBAL MOTION (po loaderze)
   ========================= */
@keyframes hmFadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes hmPop{
  from{ opacity:0; transform: translateY(8px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* animujemy “duże klocki”, nie każdy span */
html.hm-ready:not(.hm-nav-loading) body:not(.hm-animate) .content > .card:not(.hm-no-anim),
html.hm-ready:not(.hm-nav-loading) body:not(.hm-animate) .content > *:not(.card):not(.hm-no-anim){
  animation: hmPop 260ms cubic-bezier(.2,.8,.2,1) both;
}

/* STAGGER: tabela (rows) */
html.hm-ready:not(.hm-nav-loading) body:not(.hm-animate) table tbody tr:not(.hm-no-anim){
  opacity:0;
  transform: translateY(10px);
  animation: hmFadeUp 320ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

/* STAGGER: listy kart */
html.hm-ready:not(.hm-nav-loading) body:not(.hm-animate) .hm-list > .hm-item:not(.hm-no-anim){
  opacity:0;
  transform: translateY(10px);
  animation: hmFadeUp 320ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

/* szanuj accessibility */
@media (prefers-reduced-motion: reduce){
  html.hm-ready:not(.hm-nav-loading) *{
    animation: none !important;
    transition: none !important;
  }
}