/* Czcionka jak w Base: Open Sans (300–700), w panelu — bez ładowania z Google */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/opensans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/opensans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Wygląd wzorowany na panelu Base (ciemny motyw). */
:root {
  --rail: #1f2226; --side: #2b2f33; --bg: #2b2f33; --panel: #33383d; --panel2: #3a3f45; --row: #31363b; --rowHover: #3a4047;
  --line: #44494f; --text: #e6e8eb; --muted: #9aa1a9; --link: #4ea1ff; --accent: #1a73e8; --accent2: #2f8cff;
  --green: #22a447; --ok: #27ae60; --warn: #f2994a; --err: #eb5757; --input: #2b2f33;
  --font: 13px/1.4 "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: var(--font); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 17px; } h2 { font-size: 15px; } h3 { font-size: 13px; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- układ ---------- */
.app { display: grid; grid-template-columns: 48px auto 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }
.rail { grid-row: 1 / 3; background: var(--rail); display: flex; flex-direction: column; align-items: center; padding-top: 6px; gap: 2px; position: sticky; top: 0; height: 100vh; z-index: 20; }
.rail .logo { font-weight: 800; font-size: 24px; color: #fff; margin: 4px 0 18px; letter-spacing: -1px; }
.rail .logo span { color: var(--accent2); }
.rail a { width: 40px; height: 40px; display: grid; place-items: center; color: #b7bec6; border-radius: 8px; position: relative; }
.rail a:hover { background: #2d3237; color: #fff; text-decoration: none; }
.rail a.on { color: var(--accent2); }
.rail a.on::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent2); }
.rail .bottom { margin-top: auto; margin-bottom: 12px; }
.rail a[data-tip]:hover::before { content: attr(data-tip); position: absolute; left: 46px; background: #111; color: #fff; padding: 4px 8px; border-radius: 4px; white-space: nowrap; font-size: 12px; z-index: 50; }

.topbar { grid-column: 2 / 4; background: var(--side); display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid #24282c; position: sticky; top: 0; z-index: 15; }
.topbar .quick { color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 150px; }
.topbar .search { flex: 1; max-width: 820px; margin: 0 auto; position: relative; }
.topbar .search input { width: 100%; background: #2b2f33; border: 1px solid #555b62; border-radius: 22px; padding: 9px 44px 9px 40px; color: var(--text); }
.topbar .search > svg { position: absolute; left: 14px; top: 9px; color: var(--muted); }
.topbar .search button { position: absolute; right: 10px; top: 5px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; }
.topbar .right { display: flex; align-items: center; gap: 10px; }
.circle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #555b62; display: grid; place-items: center; color: var(--text); background: none; cursor: pointer; position: relative; }
.circle .dotn { position: absolute; top: -3px; right: -3px; background: var(--err); color: #fff; border-radius: 8px; font-size: 10px; padding: 0 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; }
.engine { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.engine i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.engine i.err { background: var(--err); }

.side { background: var(--side); width: 200px; border-right: 1px solid #24282c; padding: 10px 0 20px; overflow-y: auto; height: calc(100vh - 56px); position: sticky; top: 56px; }
.side.hidden { display: none; }
.addbtn { white-space: nowrap; font-size: 12.5px; margin: 4px 8px 12px; background: var(--accent); color: #fff; border: 0; border-radius: 22px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; width: calc(100% - 16px); font-weight: 600; }
.addbtn .plus { width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; font-size: 15px; line-height: 1; }
.side a.s { display: flex; align-items: center; gap: 6px; padding: 3px 8px; color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; }
.side a.s:hover { background: #33383d; text-decoration: none; }
.side a.s.on { background: #3a4047; }
.side .all { padding: 7px 8px; font-size: 12.5px; gap: 8px; background: #33383d; margin-bottom: 4px; }
.cb { min-width: 16px; height: 13px; padding: 0 3px; font-size: 10px; line-height: 13px; text-align: center; color: #fff; border-radius: 2px; font-weight: 600; }
.side .gh { display: flex; align-items: center; gap: 4px; padding: 8px 8px 3px; font-weight: 700; font-size: 12px; cursor: pointer; user-select: none; }
.side .gh:hover { color: #fff; }
.side .sep { border-top: 1px solid var(--line); margin: 10px 0; }
.side .small-link { padding: 3px 8px; font-size: 12px; color: var(--text); display: block; }

.main { min-width: 0; padding: 14px 16px 60px; }

/* ---------- elementy ---------- */
.box { background: var(--panel); border-radius: 6px; margin-bottom: 14px; }
.box-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 52px; }
.box-b { padding: 14px 16px; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], select, textarea {
  background: var(--input); border: 1px solid #555b62; border-radius: 4px; padding: 6px 8px; width: 100%; color: var(--text);
}
input[type=date] { color-scheme: dark; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent2); }
select option, select optgroup { background: #2b2f33; }
.fld { position: relative; border: 1px solid #555b62; border-radius: 4px; padding: 14px 6px 4px; margin-top: 6px; }
.fld > label { position: absolute; top: -8px; left: 6px; background: var(--panel); padding: 0 3px; font-size: 12px; color: var(--text); }
.fld input, .fld select { border: 0; padding: 2px 2px; background: transparent; }
.fgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 8px; }
.fpair { display: grid; grid-template-columns: 1fr 1fr; }
label.f { display: block; margin-bottom: 10px; }
label.f > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.btn { border: 1px solid #5b6168; background: transparent; color: var(--text); border-radius: 4px; padding: 6px 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: #3d4349; text-decoration: none; }
.btn.blue { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; border-radius: 20px; }
.btn.round { border-radius: 20px; }
.btn.danger { color: var(--err); }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.ib { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #5b6168; background: transparent; color: var(--text); display: inline-grid; place-items: center; cursor: pointer; }
.ib:hover { background: #3d4349; }
.ib svg.i { width: 15px; height: 15px; }
.toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; flex-wrap: wrap; }
.tb { display: inline-flex; border: 1px solid #5b6168; border-radius: 4px; overflow: hidden; }
.tb button { background: transparent; border: 0; border-right: 1px solid #5b6168; color: var(--text); padding: 6px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.tb button:last-child { border-right: 0; }
.tb button:hover { background: #3d4349; }
.tb button.on { background: var(--accent); color: #fff; }
.tb svg.i { width: 15px; height: 15px; }
.dd { position: relative; display: inline-block; }
.dd-menu { position: absolute; top: calc(100% + 4px); left: 0; background: #2b2f33; border: 1px solid #555b62; border-radius: 6px; min-width: 220px; max-height: 420px; overflow: auto; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 4px 0; }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 12px; color: var(--text); background: none; border: 0; cursor: pointer; font-size: 12.5px; }
.dd-menu a:hover, .dd-menu button:hover { background: #3a4047; text-decoration: none; }
.dd-menu .hd { padding: 6px 12px 2px; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.pager { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pager b { text-decoration: underline; }
.pager .arrows { display: inline-flex; border: 1px solid #5b6168; border-radius: 18px; overflow: hidden; }
.pager .arrows button { background: none; border: 0; color: var(--text); width: 34px; height: 30px; cursor: pointer; }
.pager .arrows button + button { border-left: 1px solid #5b6168; }
.pager .arrows button:disabled { opacity: .35; }

/* ---------- tabele ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; color: var(--text); font-weight: 700; padding: 10px 6px 6px; text-transform: uppercase; vertical-align: bottom; white-space: nowrap; }
th .sub { display: block; color: var(--link); text-transform: none; font-weight: 400; }
td { padding: 7px 6px; border-top: 1px solid var(--line); vertical-align: top; font-size: 12px; }
.ot tr:hover td { background: var(--rowHover); }
.ot tr.sel td { background: #34465c; }
.ot td.no a { font-size: 13px; }
.ot .src { color: var(--link); font-size: 11.5px; }
.ot .items div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; font-size: 11.5px; }
.ot .when { white-space: nowrap; font-size: 11.5px; }
.ot .when .st { color: var(--link); }
.chip { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.ico { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 2px; font-size: 10px; font-weight: 700; margin-left: 2px; }
.ico.t { background: #1f9d55; color: #fff; } .ico.n { background: #9aa1a9; color: #222; } .ico.d { background: #1f9d55; color: #fff; } .ico.g { background: #6b7280; color: #fff; } .ico.m { background: #f2994a; color: #fff; }
.tag { display: inline-block; border-radius: 3px; padding: 1px 6px; font-size: 11px; background: #444a51; color: #dfe3e8; }
.tag.ok { background: #1f6b3a; } .tag.warn { background: #7a4a14; } .tag.err { background: #7f1d1d; }
.st-table td { font-size: 12.5px; padding: 9px 8px; vertical-align: middle; }
.st-table th { padding: 12px 8px 8px; }
.drag { color: #7b828a; cursor: default; user-select: none; }
.dotc { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.blue-head { background: var(--accent); color: #fff; padding: 14px 16px; border-radius: 6px 6px 0 0; font-size: 14px; }
.info { border: 1px solid #5b6168; border-left: 3px solid var(--accent2); border-radius: 6px; padding: 14px 18px; margin-bottom: 14px; display: flex; gap: 12px; }
.chipbox { display: inline-flex; border: 1px solid #5b6168; border-radius: 2px; margin: 1px 2px; font-size: 11px; }
.chipbox span { padding: 1px 6px; }
.chipbox span + span { border-left: 1px solid #5b6168; }
.chipbox span:first-child { background: #26292d; }
.toggle { width: 38px; height: 22px; border-radius: 12px; background: #555b62; border: 0; position: relative; cursor: pointer; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ccc; transition: left .15s; }
.toggle.on { background: #1f6b3a; }
.toggle.on::after { left: 19px; background: #2ecc71; }

/* ---------- karta zamówienia ---------- */
.od { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 5px 10px; }
.kv dt { color: var(--muted); font-size: 12px; }
.kv dd { margin: 0; word-break: break-word; }
.msg { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; white-space: pre-wrap; background: #2e3237; }
.msg.mine { background: #263547; border-color: #33507a; }
.msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; white-space: normal; }
.log { padding-left: 16px; margin: 0; max-height: 380px; overflow: auto; }
.log li { margin-bottom: 6px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs button { border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: #fff; border-color: var(--accent2); }

/* ---------- pulpit ---------- */
.dash { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 14px; margin-bottom: 14px; }
.tile { background: var(--panel); border-radius: 6px; padding: 18px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.tile b { font-size: 46px; font-weight: 600; line-height: 1.1; }
.tile.pink b { color: #e77b8a; } .tile.blue b { color: #8ab4f8; }
.chart { background: var(--panel); border-radius: 6px; padding: 12px 16px; }
.legend { display: flex; gap: 22px; justify-content: center; font-size: 11.5px; color: var(--muted); }
.legend i { display: inline-block; width: 22px; height: 2px; vertical-align: middle; margin-right: 6px; }

/* ---------- inne ---------- */
#toast { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toastmsg { background: #111417; color: #fff; padding: 10px 14px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.4); max-width: 400px; border-left: 3px solid var(--ok); }
.toastmsg.err { border-left-color: var(--err); }
.login { max-width: 360px; margin: 14vh auto; background: var(--panel); border-radius: 8px; padding: 26px; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px; z-index: 60; }
.modal { background: var(--panel); border-radius: 8px; width: 100%; max-width: 640px; max-height: 86vh; overflow: auto; }
.modal .box-b { padding: 16px; }
.tagslist code { background: #26292d; border-radius: 3px; padding: 1px 4px; margin: 2px; display: inline-block; cursor: pointer; font-size: 11.5px; }
.tagslist code:hover { background: var(--accent); }
.menu-btn { display: none; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 48px 1fr; }
  .side { position: fixed; left: 48px; top: 56px; z-index: 25; box-shadow: 4px 0 20px rgba(0,0,0,.5); display: none; }
  .side.open { display: block; }
  .side.hidden.open { display: none; }
  .topbar { grid-column: 2 / 3; padding: 0 10px; }
  .topbar .quick span, .engine span, .hide-m { display: none; }
  .menu-btn { display: inline-grid; }
  .od, .grid2, .dash { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .main { padding: 10px 8px 60px; grid-column: 2 !important; }
}

/* ---------- moduł "Wysyłka kodów" (styl Salemate) ---------- */
:root { --or: #f97316; --navy: #1e293b; --navy2: #26334a; --navyH: #475569; }
.sm { max-width: 1100px; margin: 0 auto; }
.sm h1 { font-size: 24px; margin-top: 6px; }
.sm .sub { color: var(--muted); margin: 4px 0 18px; }
.sm-card { background: var(--navy); border: 1px solid #334155; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.sm-card .t1 { font-weight: 600; }
.sm-card .t2 { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; background: #0f172a; border-radius: 8px; padding: 3px; margin-left: auto; }
.seg button { border: 0; background: none; color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--or); color: #fff; }
.sm-select { margin-left: auto; width: 230px !important; background: #0f172a !important; border-color: #334155 !important; border-radius: 8px !important; }
.sm-tabs { display: flex; gap: 4px; border-bottom: 1px solid #334155; margin: 18px 0 18px; }
.sm-tabs a { padding: 10px 18px; color: var(--text); display: flex; gap: 8px; align-items: center; border-bottom: 2px solid transparent; font-weight: 600; }
.sm-tabs a:hover { text-decoration: none; color: #fff; }
.sm-tabs a.on { color: var(--or); border-color: var(--or); }
.sm-box { background: var(--navy); border: 1px solid #334155; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.sm-box h2 { font-size: 16px; margin: 6px 0 12px; }
.sm-in { background: #0f172a !important; border: 1px solid #334155 !important; border-radius: 8px !important; padding: 9px 12px !important; }
.sm-btn { background: #475569; color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer; white-space: nowrap; font-weight: 500; }
.sm-btn:hover { filter: brightness(1.1); }
.sm-btn.or { background: var(--or); }
.sm-btn.sm2 { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.sm-btn:disabled { opacity: .5; cursor: default; }
.sm-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; }
.sm-table th { background: var(--navyH); color: #fff; font-size: 13px; text-transform: none; padding: 12px; font-weight: 700; cursor: default; }
.sm-table th.sort { cursor: pointer; }
.sm-table th.c, .sm-table td.c { text-align: center; }
.sm-table th.dark { background: #334155; }
.sm-table th small { display: block; font-weight: 400; color: #94a3b8; font-size: 10px; }
.sm-table td { background: var(--navy2); border-top: 1px solid #334155; padding: 11px 12px; font-size: 13px; vertical-align: middle; }
.sm-table tr:hover td { background: #2d3b55; }
.sm-table tr.neg td { background: #3a2530; }
.sm-table .orn { color: var(--or); }
.sm-table .grn { color: #22c55e; font-weight: 600; }
.sm-table .red { color: #ef4444; font-weight: 600; }
.sm-ic { background: none; border: 0; cursor: pointer; color: var(--or); padding: 2px 4px; }
.sm-ic.del { color: #ef4444; }
.sm-ic svg.i { width: 15px; height: 15px; }
.sm-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.sm-foot select { width: auto !important; }
.sm-pg { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sm-pg button { background: none; border: 1px solid #334155; color: var(--text); border-radius: 6px; min-width: 32px; height: 26px; cursor: pointer; }
.sm-pg button.on { background: var(--or); border-color: var(--or); color: #fff; }
.sm-pg button:disabled { opacity: .4; cursor: default; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.pill.av { background: #dcfce7; color: #166534; }
.pill.sent { background: #fee2e2; color: #b91c1c; }
.pill.res { background: #fef3c7; color: #92400e; }
.pill.blk { background: #e5e7eb; color: #374151; }
.sm-modal { background: var(--navy) !important; border: 1px solid #334155; border-radius: 14px !important; max-width: 640px; }
.sm-modal .box-h { border-color: #334155; }
.sm-modal.wide { max-width: 760px; }
.drop { border: 1px dashed #475569; border-radius: 10px; padding: 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; margin: 8px 0; }
.drop:hover { border-color: var(--or); }
.drop .up { width: 36px; height: 36px; border-radius: 8px; background: #334155; display: grid; place-items: center; color: var(--or); }
.codes-list { border: 1px solid #475569; border-radius: 6px; max-height: 320px; overflow: auto; }
.codes-list table td, .codes-list table th { padding: 7px 10px; font-size: 12.5px; }
.codes-list th { background: #0f172a; position: sticky; top: 0; text-transform: none; font-size: 12.5px; }
.codes-list td { border-top: 1px solid #334155; white-space: nowrap; }
.codes-list tr .rm { visibility: hidden; color: #ef4444; background: none; border: 0; cursor: pointer; }
.codes-list tr:hover .rm { visibility: visible; }
.vars { border: 1px solid #475569; border-radius: 6px; padding: 8px; max-height: 330px; overflow: auto; }
.vars div { margin-bottom: 8px; cursor: pointer; }
.vars code { display: block; background: #0f172a; border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.vars span { font-size: 11.5px; color: var(--muted); }
.vars div:hover code { background: var(--or); color: #fff; }
.tpl-grid { display: grid; grid-template-columns: 1fr 230px; gap: 16px; }
.lbl { display: block; font-size: 13px; margin: 10px 0 6px; font-weight: 600; }
.notice { background: #052e1b; border: 1px solid #14532d; color: #86efac; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.notice.warn { background: #3b2410; border-color: #7c2d12; color: #fdba74; }
@media (max-width: 1000px) { .tpl-grid { grid-template-columns: 1fr; } .seg, .sm-select { margin-left: 0; } }

/* =========================================================
   Wierne odwzorowanie Base (v3)
   ========================================================= */
:root { --rail: #24272b; --side: #2d3136; --bg: #2b2f33; --panel: #33383d; --line: #41464c; }
body { font-size: 12.5px; }
.app { grid-template-columns: 48px auto 1fr; }
.app.noside .side { display: none; }

/* pasek ikon */
.rail { padding-top: 8px; }
.rail .logo { font-weight: 800; font-size: 26px; color: #fff; margin: 0 0 22px; letter-spacing: -1px; width: auto; height: auto; text-decoration: none; }
.rail .logo span { color: var(--accent2); }
.rail .logo:hover { background: none; }
.rail > a:not(.logo):not(.progress) { margin-bottom: 4px; }
.rail a.on { color: var(--accent2); }
.quickbox { display: flex; flex-direction: column; gap: 14px; margin-top: 46px; align-items: center; }
.quickbox .qb { width: 24px; height: 18px; border: 1.4px solid #9aa1a9; border-radius: 3px; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: #cfd4da; text-decoration: none; position: relative; }
.quickbox .qb:hover, .quickbox .qb.on { border-color: var(--accent2); color: #fff; }
.quickbox .qb[data-tip]:hover::before { content: attr(data-tip); position: absolute; left: 34px; background: #111; color: #fff; padding: 4px 8px; border-radius: 4px; white-space: nowrap; font-size: 12px; z-index: 50; }
.progress { margin-top: auto; margin-bottom: 14px; width: 36px !important; height: 36px !important; position: relative; display: grid; place-items: center; text-decoration: none; }
.progress svg, .pring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.progress .bgc, .pring .bgc { fill: #2d3136; stroke: #3d4248; stroke-width: 3; }
.progress .fgc, .pring .fgc { fill: none; stroke: #27ae60; stroke-width: 3; stroke-linecap: round; }
.progress span { position: relative; font-size: 9px; color: #fff; font-weight: 600; }

/* górny pasek */
.topbar { height: 56px; gap: 10px; }
.tbtn { background: none; border: 0; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; font-size: 13px; }
.tbtn:hover { background: #3a3f45; }
.tbtn.quick { min-width: 120px; }
.tbtn .i { width: 20px; height: 20px; }
.tbtn.quick .i { width: 14px; height: 14px; }
.topbar .search { max-width: 830px; }
.topbar .search input { background: #2b2f33; border-color: #5b6168; height: 38px; font-size: 13px; }
.circle { width: 36px; height: 36px; border: 1.6px solid #9aa1a9; }
.circle:hover { border-color: #fff; text-decoration: none; }
.circle .ndot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #9aa1a9; border: 1.5px solid var(--side); }
.userbtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--text); cursor: pointer; font-size: 13px; letter-spacing: .3px; }
.userbtn .i { width: 14px; height: 14px; }
.avatar { width: 34px; height: 34px; background: #1a73e8; font-size: 14px; }

/* panel boczny statusów */
.side { width: 178px; padding: 10px 0 20px; }
.addbtn { margin: 6px 8px 14px; padding: 9px 10px; font-size: 13px; gap: 12px; border-radius: 24px; }
.addbtn .plus { width: 24px; height: 24px; font-size: 17px; }
.side a.s { padding: 2.5px 8px; font-size: 11.6px; gap: 5px; }
.side a.s .nm { overflow: hidden; text-overflow: ellipsis; }
.side a.s.all { padding: 7px 8px; font-size: 12px; background: #353a40; margin: 0 0 6px; gap: 8px; }
.side a.s.all .i { width: 16px; height: 16px; }
.side a.s.ic { padding: 4px 8px; font-size: 12px; gap: 8px; }
.side a.s.ic .i { width: 15px; height: 15px; }
.cb { min-width: 16px; height: 12px; line-height: 12px; font-size: 9.5px; border-radius: 1px; padding: 0 2px; }
.side .gh { padding: 9px 8px 3px; font-size: 11.6px; font-weight: 700; gap: 4px; }
.side .gh a { color: var(--text); text-decoration: none; }
.side .gh.on a { text-decoration: underline; }
.side .gh .car { font-size: 11px; }
.side .sep { margin: 10px 0 8px; border-color: #41464c; }
.addst { padding: 0 8px; font-size: 12px; }
.addst a { color: var(--text); }
.addst .i { width: 15px; height: 15px; color: #9aa1a9; }
.side-title { font-size: 16px; font-weight: 600; padding: 12px 14px 14px; }
.sn-h { display: flex; align-items: center; gap: 6px; padding: 7px 14px; color: var(--text); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.sn-h .i { width: 15px; height: 15px; }
.sn-h .car { margin-left: auto; font-size: 11px; }
.sn-h:hover { background: #353a40; text-decoration: none; }
.sn-h.on { color: var(--link); }
.sn { display: block; padding: 4px 14px 4px 36px; color: var(--text); font-size: 12px; text-decoration: none; border-radius: 0 14px 14px 0; margin: 1px 8px 1px 0; }
.sn:hover { background: #353a40; text-decoration: none; }
.sn.on { background: #1e3a5c; color: var(--link); }
.dis { opacity: .45; }
a.dis, button.dis { cursor: default; }

/* lista zamówień */
.orders-box { border-radius: 4px; }
.ob-head { display: flex; align-items: flex-start; padding: 16px 16px 6px; }
.ob-head h1 { font-size: 16px; font-weight: 700; }
.ob-head .sub { font-size: 11.5px; color: var(--muted); min-height: 14px; margin-top: 2px; }
.fbtn-wrap { display: flex; align-items: center; gap: 10px; }
.btn.round { border-radius: 20px; padding: 7px 14px; }
.btn.act { border-color: var(--accent2); color: var(--link); }
.clearf { font-size: 11px; line-height: 1.15; color: var(--text); text-align: center; }
.toolbar { padding: 10px 14px 12px; gap: 8px; }
.tb { border-color: #6b7178; border-radius: 4px; overflow: visible; }
.tb button { padding: 7px 9px; border-color: #6b7178; }
.tb button .i { width: 15px; height: 15px; }
.tb button .i.car { width: 11px; height: 11px; margin-left: 2px; }
.tb button.open { background: #3d4349; }
.tb > span.dd > button { border-right: 1px solid #6b7178; }
.tb.dd > button { border-right: 0; }
.tb span.dd { display: inline-flex; }
.tb button.on { background: #1a73e8; }
.pager { font-size: 12.5px; }
.pager .arrows button { width: 36px; height: 32px; font-size: 16px; }
.dd-menu { min-width: 230px; background: #2b2f33; border-color: #4a4f55; border-radius: 4px; padding: 6px 0; }
.dd-menu.right { left: auto; right: 0; }
.dd-menu .hd { padding: 10px 14px 6px; font-size: 11.5px; color: var(--text); font-weight: 700; letter-spacing: .3px; }
.dd-menu a, .dd-menu button { padding: 7px 14px; font-size: 12.5px; gap: 10px; }
.dd-menu button .i, .dd-menu a .i { width: 15px; height: 15px; color: #cfd4da; }
.dd-menu button.cur { background: #1f2e40; color: var(--link); }
.dd-menu button.dis { opacity: .5; }
.dd-menu button em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); }
.dd-menu .ulink { color: var(--muted); text-decoration: underline; padding: 6px 14px 10px; }
.starrow { display: flex; gap: 0; padding: 4px 14px 10px; }
.starrow button { width: 36px; height: 32px; border: 1px solid #5b6168; justify-content: center; padding: 0; }
.starrow button + button { border-left: 0; }
.starrow button .i { width: 18px; height: 18px; }
.ddsearch { display: flex; align-items: center; gap: 6px; margin: 6px 10px; border: 1px solid #5b6168; border-radius: 3px; padding: 0 8px; }
.ddsearch input { border: 0 !important; background: none !important; padding: 7px 0 !important; }
.ddsearch .i { width: 14px; height: 14px; color: var(--muted); }
.sfrow { display: flex; align-items: center; }
.sfrow a { flex: 1; }
.sfrow button { width: auto !important; color: var(--muted) !important; }
.ot th { font-size: 10px; padding: 12px 6px 6px; }
.ot td { padding: 7px 6px; font-size: 11.5px; border-top-color: #41464c; }
.ot td.cks { white-space: nowrap; width: 52px; }
.ot td.cks input { vertical-align: middle; margin: 0 4px 0 2px; }
.rstar { background: none; border: 0; padding: 0; cursor: pointer; color: #9aa1a9; vertical-align: middle; }
.rstar .i { width: 15px; height: 15px; }
.ot td.no a { font-size: 12.5px; color: var(--link); }
.ot .src { font-size: 11px; }
.ico.al { background: #9aa1a9; color: #222; font-size: 8.5px; width: 14px; height: 13px; margin: 0 3px 0 0; }
.ot .icons { white-space: nowrap; text-align: right; }
.ot .icons .ico { width: 15px; height: 15px; }
.ot .icons .ico .i { width: 11px; height: 11px; }
.amt { border-bottom: 1px dotted #9aa1a9; }
.chip { border-radius: 1px; font-size: 10px; padding: 1px 5px; }

/* filtry */
#ff { padding: 6px 16px 16px; border-bottom: 1px solid var(--line); }
.fgrid { grid-template-columns: repeat(6, 1fr); gap: 12px 8px; }
.fld { padding: 16px 6px 5px; border-color: #6b7178; }
.fld > label { background: var(--panel); font-size: 12px; top: -9px; }
.fld.dis { opacity: .35; }
.fpair { display: grid; grid-template-columns: 1fr 1fr; }
.fpair .fld.l { border-radius: 4px 0 0 4px; border-right: 0; }
.fpair .fld.r { border-radius: 0 4px 4px 0; }
.fpair.dis { opacity: .35; }
.fld.stars { display: flex; padding: 14px 0 0; border: 0; }
.fld.stars button { width: 34px; height: 32px; border: 1px solid #6b7178; background: none; display: grid; place-items: center; cursor: pointer; color: #cfd4da; }
.fld.stars button + button { border-left: 0; }
.fld.stars button.on { background: #3d4349; }
.fld.stars .i { width: 18px; height: 18px; }
.frow { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }

/* pola informacyjne Base */
.infobox { border: 1px solid #5b6168; border-left: 3px solid var(--accent2); border-radius: 6px; padding: 16px 18px; display: flex; gap: 12px; margin-bottom: 0; }
.infobox .i { flex: none; width: 18px; height: 18px; }
.infobox .more { margin-top: 10px; color: var(--muted); }
.morebtn { text-align: center; margin: -1px 0 14px; }
.morebtn a { color: var(--text); font-weight: 600; font-size: 12px; }
.tabsbar { display: flex; gap: 4px; border-bottom: 1px solid #24282c; margin: -14px -16px 16px; padding: 0 16px; background: var(--side); }
.tabsbar a { padding: 16px 12px 14px; color: var(--text); font-size: 13.5px; border-bottom: 2px solid transparent; }
.tabsbar a:hover { text-decoration: none; color: #fff; }
.tabsbar a.on { border-color: var(--accent2); color: #fff; }
.bluebar { background: #4592c8; color: #fff; text-align: center; padding: 12px; margin: -16px -16px 16px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.bluebar .btn { border-color: #fff; color: #fff; }

/* integracje */
.itree { padding: 24px 16px 30px; text-align: center; border: 1px solid #4a4f55; background: transparent; }
.iroot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: #f1f3f5; color: #111; width: 150px; height: 60px; border-radius: 2px; }
.iroot .logo-big { color: #111; font-size: 28px; line-height: 1; }
.iroot small { font-size: 9px; letter-spacing: 1px; color: #555; }
.ilinks { height: 20px; border-top: 1px dashed #8a9097; margin: 6px auto 0; width: calc(min(var(--n), 7) * 176px - 176px); position: relative; top: 10px; }
.itiles { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 0; }
.itile { width: 148px; height: 120px; background: #e9ecef; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-decoration: none; position: relative; }
.itile:hover { box-shadow: 0 0 0 2px var(--accent2); text-decoration: none; }
.alg { color: #ff5a00; font-size: 27px; font-weight: 600; letter-spacing: -1px; font-family: "Trebuchet MS", Arial, sans-serif; }
.woo { color: #7f54b3; font-size: 30px; font-weight: 900; }
.pill2 { border: 1px solid #2f80ed; color: #2f80ed; border-radius: 12px; padding: 1px 10px; font-size: 11px; }
.itile .demo { position: absolute; top: 6px; right: 8px; font-size: 9px; color: #b45309; font-weight: 700; }
.btn.green { border-radius: 24px; padding: 9px 16px; font-size: 13px; }
.btn.green-o { border: 1.5px solid #27ae60; color: #6fcf97; }
.blue-head { border-radius: 4px 4px 0 0; font-size: 13px; padding: 16px; }
.st-table.int td { vertical-align: middle; }
.typ { display: inline-flex; align-items: center; gap: 4px; background: #1a73e8; color: #fff; font-size: 10.5px; padding: 2px 6px; border-radius: 2px; }
.typ .i { width: 11px; height: 11px; }
.dchip { display: inline-flex; align-items: center; gap: 3px; background: #5b6168; color: #dfe3e8; font-size: 10px; padding: 2px 5px; margin: 1px 2px 1px 0; border-radius: 1px; white-space: nowrap; }
.dchip.g { background: #1f9d55; color: #fff; }
.dchip .i { width: 10px; height: 10px; }
.xbtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #5b6168; background: none; color: var(--text); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.xbtn:hover { background: #3d4349; }
.xbtn .i { width: 15px; height: 15px; }
.xbtn.ghost { border-color: transparent; cursor: default; }
.modal .box-h .xbtn { border: 0; }
.modal.xl { max-width: 1260px; }
.modal.full { max-width: calc(100vw - 30px); min-height: 86vh; }
.nsearch { max-width: 820px; margin: 10px auto 22px; display: flex; align-items: center; gap: 10px; border: 1.5px solid #1a73e8; border-radius: 3px; padding: 0 14px; background: #2b2f33; }
.nsearch input { border: 0 !important; background: none !important; padding: 13px 0 !important; }
.nh { font-size: 15px; margin: 14px 0 12px; }
.ngrid { display: flex; gap: 14px; flex-wrap: wrap; }
.ntile { width: 124px; height: 122px; background: #f4f6f8; border: 0; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ntile:hover { box-shadow: 0 0 0 2px var(--accent2); }
.ntile.dis { opacity: .55; }
.ntile .nt { color: #222; font-weight: 700; font-size: 15px; }
.ntile em { font-style: normal; font-size: 10px; color: #666; }
.mtabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #5b6168; margin-bottom: 14px; }
.mtabs button { background: none; border: 1px solid #5b6168; border-bottom: 0; color: var(--text); padding: 12px 22px; cursor: pointer; margin-right: -1px; font-size: 13px; }
.mtabs button.on { background: var(--panel); color: #fff; box-shadow: inset 0 -2px 0 var(--accent2); }
.pbox { border: 1px solid #5b6168; border-radius: 4px; padding: 14px; }
.sect { border: 1px solid #4a4f55; border-radius: 3px; margin-bottom: 4px; }
.sect-h { background: #2b2f33; padding: 14px 12px; font-weight: 600; display: flex; }
.sect-h .car { margin-left: auto; }
.sect-b { padding: 16px 12px 18px; max-width: 800px; margin: 0 auto; }
.sect.dis .sect-h { opacity: .6; }
.lbl2 { font-weight: 600; margin-bottom: 8px; font-size: 13px; }
.radio { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* statusy: przeciąganie */
.st-table tr[draggable] .drag { cursor: grab; }
.st-table tr.dragging td { opacity: .4; }
.drag { color: #8a9097; font-size: 15px; text-align: center; }

/* automatyczne akcje */
.vidtile { width: 214px; background: #f1f3f5; color: #111; border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 2px; position: relative; font-size: 12px; }
.vidtile b { font-size: 12px; }
.vidtile span:nth-child(2) { background: #1a73e8; color: #fff; padding: 2px 4px; font-weight: 700; margin-top: 14px; align-self: flex-start; }
.vidtile span:nth-child(3) { font-weight: 700; }
.vidtile i { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background: #1f2937; display: grid; place-items: center; }
.vidtile i .i { width: 13px; height: 13px; fill: #4ea1ff; stroke: #4ea1ff; }

/* pulpit */
.banner { display: flex; align-items: center; gap: 24px; background: var(--panel); border-radius: 6px; padding: 0 24px 0 0; margin-bottom: 14px; overflow: hidden; min-height: 104px; }
.banner .bimg { background: #0f1d33; color: #fff; display: flex; gap: 12px; align-items: center; padding: 18px 22px; align-self: stretch; min-width: 290px; }
.banner .bimg .i { width: 34px; height: 34px; color: #4ea1ff; }
.banner .bimg b { display: block; font-size: 14px; }
.banner .bimg span { color: #8ab4f8; font-size: 12px; }
.banner .btxt { flex: 1; font-size: 11.5px; }
.banner .btxt b { display: block; margin-bottom: 4px; }
.banner .btxt span { color: #cfd4da; }
.tile { color: inherit; text-decoration: none; }
.tile:hover { text-decoration: none; box-shadow: 0 0 0 1px #4a4f55; }
.tile b { font-size: 48px; }
.tile.pink b { color: #e88b97; }
.tile.blue b { color: #9cc2f5; }
.pring { width: 42px; height: 42px; position: relative; display: grid; place-items: center; flex: none; }
.pring span { position: relative; font-size: 11px; font-weight: 600; }
.acc { border-top: 1px solid var(--line); }
.acc-h { display: flex; align-items: center; gap: 8px; padding: 16px; cursor: pointer; background: #2f3439; }
.acc.open .acc-h { background: #2b2f33; }
.acc-h .okc { color: #6fcf97; font-size: 12px; }
.acc-h .car { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #5b6168; display: grid; place-items: center; font-size: 11px; }
.acc-b { padding: 10px 16px 18px 40px; }
.chk { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 6px 0; font-size: 13px; }
.chk:hover { text-decoration: none; color: #fff; }
.chk .cc { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #8a9097; display: grid; place-items: center; font-size: 11px; }
.chk.done .cc { border-color: #27ae60; color: #6fcf97; }
.bico { width: 26px; height: 26px; border-radius: 5px; background: #1a73e8; color: #fff; display: grid; place-items: center; }
.bico .i { width: 15px; height: 15px; }
.blog { max-height: 470px; overflow: auto; padding: 6px 16px 14px; }
.bl { display: flex; gap: 14px; align-items: center; padding: 6px 0; color: var(--text); font-size: 12.5px; }
.bl:hover { text-decoration: none; color: #fff; }
.bd { display: flex; align-items: center; gap: 4px; min-width: 62px; }
.bd b { font-size: 17px; }
.bd span { font-size: 8.5px; line-height: 1.15; color: #cfd4da; }
.help h3 { margin: 16px 0 6px; font-size: 14px; }
.help li { margin-bottom: 6px; }
.help code { background: #26292d; padding: 1px 5px; border-radius: 3px; }
.logo-big { font-weight: 800; font-size: 30px; letter-spacing: -1px; }
.logo-big span { color: var(--accent2); }

@media (max-width: 1000px) {
  .quickbox, .progress { display: none !important; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .tbtn.quick { min-width: 0; font-size: 0; }
  .banner { flex-direction: column; align-items: stretch; padding: 0 0 14px; }
  .banner .btxt, .banner .btn { margin: 0 14px; }
  .itiles { gap: 12px; }
  .ilinks { display: none; }
  .modal.full .mtabs button { padding: 8px 10px; font-size: 12px; }
}
@media print {
  .rail, .topbar, .side, .toolbar, .ob-head .fbtn-wrap, #filters { display: none !important; }
  .app { display: block; }
  body, .box { background: #fff !important; color: #000 !important; }
}

.rail .logo { display: flex !important; align-items: baseline; justify-content: center; }

/* ===== v4: menu wysuwane, szeroki pasek, zwroty ===== */
.flyout { position: fixed; left: 52px; z-index: 80; background: #1f2226; border-radius: 8px; padding: 10px 0; min-width: 190px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.flyout .fh { padding: 4px 16px 10px; font-size: 14px; color: #fff; }
.flyout a { display: block; padding: 7px 16px; margin: 1px 6px; border-radius: 16px; color: #cfd4da; font-size: 12.5px; text-decoration: none; }
.flyout a:hover { background: #2d3237; color: #fff; text-decoration: none; }
.flyout a.on { background: #26292e; color: var(--link); }
.flyout a.dis { opacity: .45; }

.app.wide { grid-template-columns: 230px auto 1fr; }
.rail.wide { width: 230px; align-items: stretch; padding: 12px 8px 10px; overflow-y: auto; }
.rail.wide .logo { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; padding: 0 10px; margin-bottom: 18px; font-size: 28px; }
.rail.wide .logo b { font-size: 15px; margin-left: 6px; letter-spacing: 0; }
.rail.wide .logo small { width: 100%; font-size: 10px; color: #9aa1a9; font-weight: 400; letter-spacing: 0; margin-top: -2px; }
.wn { margin-bottom: 2px; }
.wn .wl { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: #cfd4da; text-decoration: none; width: auto; height: auto; font-size: 13px; }
.wn .wl:hover { background: #2d3237; text-decoration: none; color: #fff; }
.wn.on > .wl { background: #2a2e33; color: #fff; }
.wn.on > .wl > .i { color: var(--accent2); }
.wn .wl .i { width: 18px; height: 18px; flex: none; }
.wcar { margin-left: auto; background: none; border: 0; color: #9aa1a9; cursor: pointer; padding: 2px; display: grid; }
.wcar .i { width: 14px !important; height: 14px !important; }
.wsub { padding: 2px 0 6px 40px; }
.wsub a { display: block; padding: 5px 10px; border-radius: 14px; color: #cfd4da; font-size: 12.5px; text-decoration: none; width: auto; height: auto; }
.wsub a:hover { background: #2d3237; text-decoration: none; }
.wsub a.on { color: var(--link); background: #26292e; }
.wsub a.dis { opacity: .45; }
.mk-h { display: flex; align-items: center; justify-content: space-between; padding: 22px 10px 8px; font-size: 11px; color: #9aa1a9; letter-spacing: .6px; }
.mk-plus { width: 22px !important; height: 22px !important; border: 1.4px solid #9aa1a9; border-radius: 50%; display: grid !important; place-items: center; color: #cfd4da; }
.mk-plus .i { width: 12px; height: 12px; }
.wn .wl .qb { width: 24px; height: 18px; border: 1.4px solid #9aa1a9; border-radius: 3px; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; flex: none; }
.progress.wide-p { margin: auto 0 4px 10px; }

.addbtn.purple { background: #8b5cf6; }
.addbtn.purple:hover { filter: brightness(1.08); }
@media (max-width: 1000px) { .app.wide { grid-template-columns: 48px 1fr; } .rail.wide { position: fixed; z-index: 40; height: 100vh; } }

/* ===== v5: integracje jak w Base ===== */
.itree { position: relative; padding: 24px 16px 34px; }
.iroot { position: relative; width: 150px; height: 60px; border: 1px solid #9aa1a9; }
.iwrap { display: flex; justify-content: center; }
.itiles { display: inline-flex; gap: 28px; flex-wrap: nowrap; position: relative; padding-top: 22px; margin-top: 0; max-width: 100%; overflow-x: auto; }
.itiles::before { content: ''; position: absolute; top: 8px; left: 74px; right: 74px; border-top: 1px dashed #8a9097; }
.iwrap { position: relative; }
.iwrap::before { content: ''; position: absolute; top: -1px; left: 50%; height: 10px; border-left: 1px dashed #8a9097; }
.itile { flex: none; border: 1px solid #9aa1a9; }
.itile::before { content: ''; position: absolute; top: -15px; left: 50%; height: 14px; border-left: 1px dashed #8a9097; }
.itile .ierr { position: absolute; top: 6px; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: #eb5757; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pill2.green { border-color: #8bc34a; color: #7cb342; }
.arn { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 22px; font-weight: 700; color: #111; letter-spacing: .5px; }
.arn i { font-style: normal; color: #111; position: relative; }
.arn i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e53935; }
.arn b { font-weight: 400; color: #9aa1a9; font-size: 18px; }
.woo { color: #873eff; font-size: 34px; font-weight: 900; font-family: "Arial Black", Arial, sans-serif; letter-spacing: -1px; }
.itoggle { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: none; border: 0; color: #cfd4da; cursor: pointer; font-size: 16px; }
.typ.woo-b { background: #6f9e3a; }
.ico.wo { background: #873eff; color: #fff; font-size: 8px; width: 14px; height: 13px; margin: 0 3px 0 0; }
.modal .box-h h2 .woo { font-size: 20px; }
.modal .box-h h2 .arn { font-size: 16px; color: #fff; }
.modal .box-h h2 .arn i { color: #fff; }

/* ===== karta zamówienia jak w Base ===== */
.chead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.chead h1 { font-size: 19px; font-weight: 400; }
.cstar { background: none; border: 0; color: #cfd4da; cursor: pointer; padding: 2px; }
.cstar .i { width: 20px; height: 20px; }
.chead .circle { font-size: 18px; color: #fff; }
.chead .circle:disabled { opacity: .35; cursor: default; }
.btn.blue-o { border-color: var(--accent2); color: var(--link); }
.btn.xs { padding: 2px 6px; font-size: 10.5px; border-radius: 2px; }
.btn.xs .i { width: 12px; height: 12px; }
.btn.sm.blue { background: var(--accent); border-color: var(--accent); color: #fff; }
.starrow.grid3 { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; padding: 8px; }
.starrow.grid3 button { border: 1px solid #5b6168 !important; border-radius: 2px; }
.cprod { padding: 6px 0 0; }
.ptab th { font-size: 10px; padding: 14px 8px 10px; }
.ptab th.r, .ptab td.r { text-align: right; }
.ptab td { font-size: 12px; padding: 9px 8px; }
.ptab .nowrap { white-space: nowrap; }
.pimg { width: 26px; height: 26px; border-radius: 3px; background: #3d4349; display: inline-grid; place-items: center; }
.pimg .i { width: 15px; height: 15px; color: #9aa1a9; }
.pempty { display: flex; justify-content: center; align-items: center; padding: 12px 0 4px; }
.pempty .pbox { width: 46px; height: 46px; display: grid; place-items: center; margin-right: -8px; z-index: 1; }
.pempty .pbox .i { width: 42px; height: 42px; color: #dfe3e8; }
.pempty .pmsg { background: #2b2f33; padding: 7px 70px; border-radius: 2px; }
.addp-link { color: var(--link); }
.splitbtn { display: inline-flex; }
.splitbtn .btn:first-child { border-radius: 20px 0 0 20px; }
.splitbtn .btn:last-child { border-radius: 0 20px 20px 0; border-left: 0; padding: 7px 10px; }
.splitbtn .btn .i { width: 13px; height: 13px; }
.xbtn.sm { width: 26px; height: 26px; }
.xbtn.sq { border-radius: 3px; width: 28px; height: 28px; }
.cinfo .box-h { gap: 8px; }
.cinfo .btn.sm { padding: 5px 12px; }
.cinfo .btn .i { width: 13px; height: 13px; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 0 12px 14px; }
.cleft { border-right: 0; }
.cpaid { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.paidchip { background: #1f9d55; color: #fff; font-weight: 600; padding: 3px 12px; border-radius: 2px; font-size: 12px; }
.paidchip.part { background: #6b7280; }
.csect { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.csect:last-child { border-bottom: 0; }
.ckv { display: grid; grid-template-columns: 135px 1fr; gap: 10px; padding: 2px 0; font-size: 12px; align-items: center; }
.ckv span { color: #dfe3e8; }
.ckv b { font-weight: 400; word-break: break-word; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ckv .warnc { color: #f2c94c; }
.cright { padding: 12px 4px; }
.cright .ckv { grid-template-columns: 105px 1fr; padding: 3px 0; }
.ckv.st span { display: flex; align-items: center; gap: 4px; }
.ckv.st span .i { width: 14px; height: 14px; }
.stsel { width: auto !important; min-width: 170px; padding: 4px 8px !important; font-size: 12px; }
.btn.confirm { border-color: #5b6168; }
.btn.confirm .i { width: 18px; height: 18px; background: #f2994a; color: #fff; border-radius: 50%; padding: 2px; fill: #fff; }
.c3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.c3 .box-b .ckv { grid-template-columns: 1fr 1.2fr; }
.bdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); margin-right: 8px; vertical-align: 2px; }
.cbottom { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.cacc { border: 1px solid #4a4f55; border-radius: 3px; margin-bottom: 8px; }
.cacc-h { padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.cacc-h .i { width: 13px; height: 13px; }
.cacc-b { display: none; padding: 4px 12px 12px; font-size: 12px; }
.cacc.open .cacc-b { display: block; }
.htab { width: 100%; }
.htab th { font-size: 11px; padding: 6px 4px; }
.htab td { font-size: 12px; padding: 6px 4px; }
.modal.mid { max-width: 920px; }
.modal .box-h h2:empty + .grow { display: none; }
.nogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 10px 14px; }
.nh2 { font-size: 16px; margin-bottom: 18px; }
.selectlike { background: #2b2f33 !important; border: 1px solid #5b6168 !important; padding: 9px 10px !important; }
.cres { position: absolute; left: 0; right: 0; background: #2b2f33; border: 1px solid #5b6168; border-top: 0; z-index: 5; max-height: 260px; overflow: auto; }
.cres button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; cursor: pointer; }
.cres button:hover { background: #3a4047; }
@media (max-width: 1000px) { .cgrid, .c3, .cbottom, .nogrid { grid-template-columns: 1fr; } .chead .btn { display: none; } }
@media print { .chead .circle, .chead .btn, .splitbtn, .cinfo .box-h .dd, .cinfo .box-h .splitbtn, #cWrite, .cextra { display: none !important; } }

.shipbtns { display: flex; gap: 6px; justify-content: flex-start; }
.cright .ckv b { justify-content: flex-start; }

/* ===== edytor szablonu e-mail jak w Base ===== */
.modal.tplm { max-width: 780px; }
.tform { display: grid; grid-template-columns: 170px 1fr; gap: 10px 14px; align-items: center; margin: 4px 0 14px; }
.tform > label { text-align: right; font-size: 12px; color: #dfe3e8; align-self: start; padding-top: 9px; }
.tform input, .tform select { background: #2b2f33; }
.tform .help { font-size: 11.5px; color: #cfd4da; margin-top: 6px; line-height: 1.45; }
.tform .help a { color: #fff; text-decoration: underline; font-weight: 600; }
.tedit { display: grid; grid-template-columns: 185px 1fr; gap: 14px; margin-bottom: 18px; }
.tagbox { border: 1px solid #5b6168; border-radius: 3px; padding: 10px; height: 470px; overflow-y: auto; background: #2b2f33; }
.tagbox input { margin: 10px 0; }
.tg { margin-top: 10px; padding-bottom: 8px; border-bottom: 1px solid #4a4f55; }
.tg b { display: block; font-size: 12px; margin-bottom: 4px; }
.tg a { display: block; font-size: 11.5px; color: #dfe3e8; cursor: pointer; line-height: 1.55; }
.tg a:hover { color: var(--link); text-decoration: none; }
#bt_body { height: 470px; min-height: 470px; font-size: 12.5px; line-height: 1.5; background: #2b2f33; }
.pframe { width: 100%; height: 420px; border: 1px solid #5b6168; background: #fff; border-radius: 3px; }

/* ===== edytor automatycznej akcji jak w Base ===== */
.actt tr.aedit-row > td { padding: 0; background: #23272b; }
.aedit { display: grid; grid-template-columns: 1fr 1fr 130px; min-height: 160px; }
.ae-col { padding: 10px 12px; border-right: 1px solid #41464c; position: relative; padding-bottom: 28px; }
.ae-col select, .ae-col input { background: #2b2f33; font-size: 12px; padding: 6px 8px; }
.ae-side { padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ae-side .toggle { align-self: center; }
.ae-side input { font-size: 12px; padding: 6px 8px; background: #2b2f33; }
.ae-side .btn { justify-content: center; }
.ae-add { display: block; text-align: center; color: #27ae60; margin: 16px 0 6px; font-size: 12.5px; }
.ae-hint { text-align: center; color: #6b7178; font-size: 11.5px; max-width: 260px; margin: 6px auto; }
.ae-id { position: absolute; left: 12px; bottom: 8px; font-size: 11px; color: #8a9097; }
.crow { display: grid; grid-template-columns: 220px 1fr 30px; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid #41464c; }
.crow:first-child { border-top: 1px solid #41464c; margin-top: 10px; }
.vbox { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: 1px solid #5b6168; border-radius: 3px; padding: 3px 4px; min-height: 31px; background: #2b2f33; }
.vbox input, .vbox select { border: 0 !important; background: transparent !important; padding: 3px 4px !important; flex: 1; min-width: 120px; width: auto; }
.vgrid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.vchip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #6b7178; border-radius: 3px; padding: 1px 6px; font-size: 11.5px; background: #33383d; white-space: nowrap; }
.vchip i { font-style: normal; cursor: pointer; color: #9aa1a9; }
.vchip i:hover { color: var(--err); }
.srow { padding: 0 0 12px; border-bottom: 1px solid #41464c; margin-bottom: 10px; }
.shead { display: grid; grid-template-columns: 20px 1fr 28px 28px 28px; gap: 6px; align-items: center; margin-bottom: 8px; }
.snum { background: #1a73e8; color: #fff; font-size: 10px; text-align: center; border-radius: 2px; padding: 1px 0; }
.sf { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; margin: 5px 0 0 26px; font-size: 12px; }
.sf > span:first-child { color: #dfe3e8; }
.xbtn.sq:disabled { opacity: .35; cursor: default; }
.vizstep { border-top: 1px solid var(--line); padding: 10px 0; }
@media (max-width: 1000px) { .aedit, .tedit, .tform { grid-template-columns: 1fr; } .tform > label { text-align: left; } .crow { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }
.shipbtns { flex-wrap: wrap; }
.shipbtns .btn { flex: 0 0 auto; width: auto; margin: 0; }

/* wymiana wiadomości jak w Base */
.mx { margin: 0 0 14px; }
.mx-h { display: flex; align-items: center; gap: 14px; padding: 8px 4px; font-size: 12px; flex-wrap: wrap; }
.mx-h i { font-style: italic; color: #dfe3e8; }
.mbadge { background: #f3f4f6; color: #111; font-size: 10px; padding: 1px 6px; border-radius: 2px; font-weight: 600; }
.mbadge.al { background: #ff5a00; color: #fff; }
.merr { color: #ff8a8a; font-style: normal; }
.mx-r { background: #2b2f33; border-bottom: 1px solid #41464c; padding: 9px 10px; font-size: 12px; }
.mx-b { background: #2b2f33; padding: 14px 10px; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; border-radius: 0 0 3px 3px; }

/* ===== karta zamówienia v2: edycja w miejscu, edytor wiadomości (jak w Base) ===== */
.ibtns { display: flex; gap: 4px; }
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1d2024; color: #e7eaee; font-size: 11px; font-weight: 400; padding: 6px 9px; border-radius: 4px; white-space: normal; width: max-content; max-width: 240px; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; text-align: center; line-height: 1.35; }
.csect.cedit { cursor: pointer; border-radius: 3px; }
.csect.cedit:hover { background: rgba(255,255,255,.03); }
.csect.cedit[data-tip]:hover::after { bottom: auto; top: -6px; left: auto; right: 0; transform: none; }
.iform .frow { display: grid; grid-template-columns: 135px 1fr; gap: 10px; align-items: center; padding: 3px 0; font-size: 12px; }
.iform .frow > label { color: #dfe3e8; }
.iform input:not([type=checkbox]):not([type=radio]), .iform select, .iform textarea { width: 100%; background: #2b2f33; border: 1px solid #4a4f55; color: #e7eaee; border-radius: 3px; padding: 6px 9px; font-size: 12px; }
.iform input:focus, .iform select:focus, .iform textarea:focus { border-color: #2f80ed; outline: 0; box-shadow: 0 0 0 1px #2f80ed; }
.iform textarea { min-height: 100px; resize: vertical; }
.iform .fbtns { display: flex; gap: 8px; margin-top: 14px; }
.iform .chk { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 0 0 8px; }
.c3 .iform .frow { grid-template-columns: 120px 1fr; }
.nipg { display: flex; gap: 4px; align-items: center; }
.nipg input, .nipg select { flex: 1; min-width: 0; }
.invwant { font-size: 12px; color: #6fcf97; margin-bottom: 6px; }
.paypop { padding: 10px; width: 240px; }
.cx-by { font-weight: 600; margin: 0 0 6px; }
.cx-tr { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-bottom: 12px; word-break: break-all; }
.cx-tr .i { width: 13px; height: 13px; }
.cx-info { background: #2b2f33; border-radius: 3px; padding: 8px 10px; margin-bottom: 12px; }
.cacc { border: 0; margin-bottom: 6px; }
.cacc-h { border: 1px solid #4a4f55; border-radius: 3px; }
.cacc-b { padding: 8px 0 6px; font-size: 12px; }
.htab td.r, .htab th.r { text-align: right; }
/* edytor wiadomości */
.cmp { background: #2b2f33; border-radius: 4px; padding: 14px 14px 12px; margin: 10px 0 14px; }
.cmp .frow { display: grid; grid-template-columns: 105px 1fr; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid #41464c; }
.cmp .frow:last-child, .cmp .frow:nth-last-child(2) { border-bottom: 0; }
.cmp .frow.cmp-type { padding: 8px 0; }
.cmp .rad { display: inline-flex; gap: 6px; align-items: center; margin-right: 70px; cursor: pointer; }
.cmp-sel { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #33373c; border: 1px solid #4a4f55; color: #e7eaee; border-radius: 3px; padding: 6px 9px; font-size: 12px; cursor: pointer; }
.cmp-sel .i { width: 12px; height: 12px; }
.cmp-dd { display: block; position: relative; }
.cmp-dd .dd-menu { left: 0; right: 0; min-width: 0; max-width: none; }
.tplscroll { max-height: 360px; overflow: auto; }
.tplscroll button.on { color: #e7eaee; }
.tplscroll .ok { float: right; }
.cmp-subj { width: 100%; margin: 8px 0; background: #33373c; border: 1px solid #4a4f55; color: #e7eaee; border-radius: 3px; padding: 8px 10px; font-size: 12px; }
.rte { border: 1px solid #4a4f55; border-radius: 3px; background: #33373c; }
.rte-tb { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-bottom: 1px solid #4a4f55; }
.rte-tb .g { display: inline-flex; border: 1px solid #555b62; border-radius: 3px; overflow: visible; position: relative; }
.rte-tb button { background: #2b2f33; color: #e7eaee; border: 0; border-right: 1px solid #555b62; min-width: 26px; height: 24px; padding: 0 6px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.rte-tb .g button:last-of-type { border-right: 0; }
.rte-tb button:hover, .rte-tb button.on { background: #41464c; }
.rte-tb button .i { width: 13px; height: 13px; }
.rte-tb .sw { width: 12px; height: 12px; display: inline-block; border: 1px solid #222; }
.rte-tb .dd-menu { top: 26px; min-width: 150px; }
.cpal { display: grid; grid-template-columns: repeat(6, 18px); gap: 4px; padding: 4px 10px 8px; }
.cpal i { width: 18px; height: 18px; display: block; border: 1px solid #555; cursor: pointer; border-radius: 2px; }
.rte-ed { min-height: 150px; max-height: 520px; overflow: auto; padding: 10px 12px; font: 13px/1.5 "Open Sans", Arial, sans-serif; color: #e7eaee; outline: 0; resize: vertical; }
.rte-ed a { color: #6ea8fe; }
.rte-ed table td { border: 1px solid #666; }
.rte-src { width: 100%; min-height: 150px; background: #23262a; color: #b5f5c8; border: 0; font: 12px/1.5 Consolas, monospace; padding: 10px; resize: vertical; }
.cmp .frow .fin select { width: 100%; background: #33373c; border: 1px solid #4a4f55; color: #e7eaee; border-radius: 3px; padding: 6px 9px; font-size: 12px; }
.cmp-send { display: flex; }
.cmp-send select { border-radius: 3px 0 0 3px !important; }
.cmp-send .btn { border-radius: 0 3px 3px 0; padding: 0 12px; }
.cmp > .frow:first-child { border-bottom: 1px solid #41464c; }
.cmp.full { position: fixed; inset: 20px; z-index: 300; overflow: auto; box-shadow: 0 0 0 9999px rgba(0,0,0,.6); }
.cmp.full .rte-ed { min-height: calc(100vh - 360px); }
.mbadge.pg { background: #2f80ed; color: #fff; }
.mbadge.hid { background: #6b7280; color: #fff; }
.mx.hid .mx-b { border-left: 3px solid #6b7280; }
.mx-b.html { white-space: normal; }
.mx-b.html a { color: #6ea8fe; }
@media (max-width: 760px) { .iform .frow, .cmp .frow { grid-template-columns: 1fr; gap: 4px; } }
.iform input:not([type=checkbox]):not([type=radio]), .iform select { height: 28px; margin: 0; padding: 4px 9px; }
.iform .frow { padding: 2px 0; }
.iform .hr { margin: 8px 0; }
.cmp .frow .fin select, .cmp-subj { height: 30px; margin-top: 0; }
.cmp-subj { margin: 8px 0; }
.iform .frow, .cmp .frow { margin-top: 0; flex-wrap: nowrap; }
.ddsearch input { flex: 1; }

/* ===== Konta e-mail jak w Base ===== */
.infobar.eabar { display: flex; gap: 12px; border: 1px solid #4a4f55; border-left: 3px solid #2f80ed; border-radius: 3px; padding: 14px 16px; font-size: 12px; line-height: 1.6; }
.infobar.eabar > .i { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.infobar.plain { border: 1px solid #4a4f55; border-radius: 3px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; margin-bottom: 18px; }
.ea-add { background: #1e8e4f; padding: 10px 18px; font-weight: 600; }
.eatab th { font-size: 10.5px; text-transform: uppercase; font-weight: 700; }
.eatab th.c, .eatab td.c { text-align: center; width: 56px; }
.eatab td.drag { cursor: grab; color: #8a9097; text-align: center; }
.eatab tr.dragging { opacity: .4; }
.xbtn.circ { border-radius: 50%; width: 30px; height: 30px; }
.pgnum { border: 1px solid #2f80ed; color: #6ea8fe; padding: 1px 7px; border-radius: 2px; }
.iform.std .frow { grid-template-columns: 240px 1fr; padding: 6px 0; }
.iform.std .frow > label { text-align: right; }
.iform.std .fin input { height: 34px; }
.iform.eaform .frow { grid-template-columns: 200px 1fr; padding: 7px 0; align-items: start; }
.iform.eaform .frow > label { text-align: right; padding-top: 8px; }
.iform.eaform .fin input, .iform.eaform .fin select { height: 34px; }
.iform.eaform .small { margin-top: 6px; line-height: 1.5; }
@media (max-width: 760px) { .iform.std .frow, .iform.eaform .frow { grid-template-columns: 1fr; } .iform.std .frow > label, .iform.eaform .frow > label { text-align: left; } }

/* ===== Lista zamówień — rozbudowa w stronę Base ===== */
.ob-sums { display: flex; gap: 22px; margin: 0 6px 0 24px; }
.osum { display: flex; flex-direction: column; gap: 2px; }
.osum span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; }
.osum b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.osum b.ok { color: #6fcf97; }
.fcount { background: var(--accent2); color: #fff; border-radius: 9px; font-size: 10.5px; padding: 1px 6px; margin-left: 2px; font-weight: 700; }
.selc { color: var(--link); }
.sellink { margin-left: 10px; font-size: 11.5px; color: var(--muted); text-decoration: underline; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #5b6168; border-radius: 14px; padding: 3px 4px 3px 10px; font-size: 11.5px; background: #353a40; }
.fchip span { color: var(--muted); }
.fchip b { font-weight: 600; }
.fchip a { color: var(--muted); padding: 0 5px; text-decoration: none; }
.fchip a:hover { color: var(--err); text-decoration: none; }

.otwrap { overflow-x: auto; }
.ot th.sortable { cursor: pointer; user-select: none; }
.ot th.sortable:hover { color: #fff; background: #3a4047; }
.ot th.sortable.on { color: var(--link); }
.ot td.r, .ot th.r { text-align: right; }
.ot td.nowrap { white-space: nowrap; }
.ot tfoot td { border-top: 2px solid #5b6168; background: #2f343a; font-weight: 700; font-size: 12px; padding: 9px 6px; }
.ot tbody tr { cursor: default; }
.ot tbody tr .rstar { cursor: pointer; }
.starrow button.on { outline: 1px solid #2f8cff; border-radius: 4px; }
.ot.dense td { padding: 3px 6px; font-size: 11.5px; }
.ot.dense .items div { font-size: 11px; }

/* wiersz grupy */
.grow-row td { background: #2f343a !important; border-top: 1px solid #555b68; padding: 7px 6px; font-size: 12px; cursor: pointer; }
.grow-row:hover td { background: #363c43 !important; }
.grow-row .gtog { display: inline-block; width: 16px; color: var(--muted); }
.grow-row .dotc { vertical-align: 0; }
.grow-row b { margin-right: 2px; }

/* stopka listy */
.ofoot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 12px; }
.ofoot .pg-per { width: 76px; }
.sm-pg { display: inline-flex; border: 1px solid #5b6168; border-radius: 4px; overflow: hidden; }
.sm-pg button { background: none; border: 0; color: var(--text); padding: 5px 10px; cursor: pointer; font-size: 12px; }
.sm-pg button + button { border-left: 1px solid #5b6168; }
.sm-pg button:hover { background: #3d4349; }
.sm-pg button.on { background: var(--accent); color: #fff; }
.sm-pg button:disabled { opacity: .35; cursor: default; }

/* menu kontekstowe wiersza */
.dd-menu.ctxmenu { position: fixed; min-width: 250px; z-index: 60; }
.dd-menu .ckb { width: 14px; display: inline-block; color: #6fcf97; font-weight: 700; }
.clearf { white-space: nowrap; }
.fbtn-wrap .btn.round { display: inline-flex; }

/* import z Base */
.bibar { height: 8px; background: #2b2f33; border-radius: 4px; overflow: hidden; border: 1px solid #41464c; }
.bibar i { display: block; height: 100%; width: 0; background: #22a564; transition: width .4s; }
.iform .rad { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; margin: 3px 0; }

/* asystent zbierania i pakowania */
.pkbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; }
.pkgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.pkscan { display: flex; align-items: center; gap: 8px; background: #2b2f33; border: 1px solid #2f80ed; border-radius: 4px; padding: 4px 10px; margin-bottom: 12px; }
.pkscan input { border: 0 !important; background: transparent !important; flex: 1; height: 34px; font-size: 14px; }
.pktab tr.done td { color: #6fcf97; }
.pktab tr.done td:nth-child(2) { text-decoration: line-through; }
.pktab td.r, .pktab th.r { text-align: right; }
.stchip { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; }
@media (max-width: 900px) { .pkgrid { grid-template-columns: 1fr; } }
@media print { .pkbar, .chead, .box-b.row, .rail, .side, .top { display: none !important; } }
.box-b.row #pkSt { width: auto; min-width: 280px; }

/* import przelewów */
.trtab td.r, .trtab th.r { text-align: right; }
.trtab tr.muted td { opacity: .55; }
.trtab .trsel { min-width: 260px; }
.trtab .trno { background: #2b2f33; border: 1px solid #4a4f55; color: #e7eaee; border-radius: 3px; padding: 6px 8px; height: 30px; }

/* skróty klawiszowe */
.kbgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.kbh { font-weight: 700; font-size: 12px; text-transform: uppercase; color: #9aa3ad; margin-bottom: 8px; }
.kbrow { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #3a3f45; font-size: 12.5px; }
.kbrow b { font-weight: 400; text-align: right; }
kbd { display: inline-block; background: #2b2f33; border: 1px solid #555b62; border-bottom-width: 2px; border-radius: 3px; padding: 1px 6px; font: 11px Consolas, monospace; color: #e7eaee; }

/* strony informacyjne */
.pggrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 1100px) { .pggrid { grid-template-columns: 1fr; } }

/* grupy akcji */
tr.agh td { background: #2b2f33; border-top: 2px solid #41464c; padding-top: 10px; padding-bottom: 10px; }
tr.agh.off td b { color: #8a9097; text-decoration: line-through; }
#ae_grp { margin-top: 8px; width: 100%; }

/* ===== lista zamówień: układ i gęstość jak w Base ===== */
.ot th { font-size: 10px; letter-spacing: .02em; vertical-align: bottom; line-height: 1.25; }
.ot th .sub { display: block; font-weight: 400; color: var(--link); text-transform: none; font-size: 10px; }
.ot td { padding: 6px 6px; font-size: 11.5px; vertical-align: top; line-height: 1.35; }
.ot td.cks { width: 46px; padding-top: 5px; }
.ot td.cks .rstar { background: none; border: 0; padding: 0; margin-left: 2px; cursor: pointer; vertical-align: middle; color: #9aa1a9; }
.ot td.cks .rstar .i { width: 13px; height: 13px; }
.ot td.no a { font-size: 12px; }
.ot td.oinfo { width: 200px; }
.ot td.oinfo .irow { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ot td.oinfo .icons { display: inline-flex; gap: 1px; }
.ot td.oinfo .icons .ico { width: 15px; height: 15px; margin-left: 1px; }
.ot td.oinfo .icons .ico .i { width: 10px; height: 10px; }
.ot td.oinfo .src { margin-top: 2px; font-size: 11px; line-height: 1.3; }
.ot td.when { width: 110px; font-size: 11.5px; }
.ot td.when .st { color: var(--link); }
.ot td.items div { max-width: 640px; }
.ot td.r .amt { font-size: 11.5px; }
.orders-box .ob-head h1 { font-size: 17px; }

/* karta: nazwisko obok numeru (jak w Base) */
.chead h1 .cname { font-weight: 400; margin-left: 18px; color: #dfe3e8; }

/* zdarzenia własne: przyciski w karcie (jak w Base) */
.cevbtns { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.cevb .i { width: 11px; height: 11px; }
.cevdot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.mx.in .mx-b { border-left: 3px solid #2f80ed; }
#ae_err { width: 100%; margin-top: 4px; }
.cevbtns .cevb { width: auto !important; flex: 0 0 auto; min-width: 0; justify-content: flex-start; }

/* wydruki i eksporty */
.modal.wide { width: min(1180px, 96vw); }
.pedit { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.pedit textarea.mono { font: 12px/1.45 Consolas, monospace; min-height: 0; }
.petags { max-height: 560px; overflow: auto; border: 1px solid #41464c; border-radius: 4px; padding: 6px; }
.petags button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #6ea8fe; font: 12px Consolas, monospace; padding: 3px 4px; cursor: pointer; }
.petags button span { display: block; color: #9aa3ad; font: 11px Arial, sans-serif; }
.petags button:hover { background: #33373c; }
.peframe { width: 100%; height: 420px; border: 1px solid #41464c; background: #fff; border-radius: 4px; }
.pecsv { max-height: 300px; overflow: auto; background: #23262a; padding: 10px; font-size: 11.5px; white-space: pre; }
.dd-menu button em { margin-left: auto; font-style: normal; font-size: 10px; color: #9aa3ad; padding-left: 10px; }
@media (max-width: 900px) { .pedit { grid-template-columns: 1fr; } }

/* karta zwrotu */
.rvsteps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; }
.rvsteps span { padding: 3px 8px; border-radius: 3px; background: #2b2f33; color: #9aa3ad; }
.rvsteps span.on { background: #2f80ed; color: #fff; }
.rvsteps span.rej { background: #d54839; }
.rvsteps i { color: #6b7280; font-style: normal; }
.ptab .rv-reason { min-width: 220px; }
.ptab input.rv-comment, .ptab input.rv-qty, .ptab input.rv-price, .ptab select.rv-reason { background: #2b2f33; border: 1px solid #4a4f55; color: #e7eaee; border-radius: 3px; padding: 4px 6px; height: 28px; }

/* karta klienta */
.custgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.custstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.custstats div { background: #2b2f33; border-radius: 4px; padding: 10px; }
.custstats b { display: block; font-size: 15px; }
.custstats span { font-size: 11px; color: #9aa3ad; }
.notice.err { background: rgba(213,72,57,.15); border: 1px solid #d54839; border-radius: 4px; padding: 8px 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 1100px) { .custgrid { grid-template-columns: 1fr; } }

/* ===== Analityka / Statystyki jak w Base ===== */
.antiles { display: flex; gap: 22px; justify-content: center; align-items: stretch; min-height: 70vh; align-content: center; flex-wrap: wrap; padding-top: 18vh; }
.antile { width: 300px; background: #33373c; border-radius: 6px; padding: 34px 26px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; color: #e7eaee; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.25); height: fit-content; }
.antile:hover { background: #3a3f45; }
.antile .anico .i { width: 40px; height: 40px; color: #9aa3ad; }
.antile b { font-size: 15px; } .antile span { font-size: 12px; color: #c9ced4; } .antile .btn { margin-top: 18px; color: #6ea8fe; }
.sth1 { font-size: 20px; font-weight: 400; margin: 6px 0 16px; }
.stfilters { padding: 12px 18px; margin-bottom: 18px; }
.stgrid { display: grid; grid-template-columns: 1fr 1fr auto 260px; grid-template-rows: auto auto; gap: 10px 12px; align-items: center; }
.stgrid > .dd { position: relative; }
.stpill { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #2b2f33; border: 1px solid #555b62; border-radius: 20px; padding: 7px 16px; color: #e7eaee; font-size: 12px; cursor: pointer; text-align: left; }
.stpill b { font-weight: 600; } .stpill:hover, .stpill.open { border-color: #2f80ed; color: #6ea8fe; }
.stpill .i { width: 14px; height: 14px; flex: 0 0 auto; }
.starrows { display: flex; } .stpill.sq { width: 38px; justify-content: center; border-radius: 20px 0 0 20px; padding: 7px 0; } .starrows .stpill.sq + .stpill.sq { border-radius: 0 20px 20px 0; border-left: 0; }
.stshow { width: 100%; justify-content: center; }
.stgrid .dd-menu { min-width: 100%; max-height: 420px; overflow: auto; }
.msel-top { display: flex; gap: 6px; padding: 8px 10px; } .msel-top button, .msel-g button { background: #2b2f33 !important; border: 1px solid #555b62 !important; color: #e7eaee; border-radius: 3px; padding: 3px 8px !important; font-size: 10.5px; width: auto !important; display: inline-flex !important; gap: 4px; }
.msel-g { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; } .msel-g b { font-size: 12.5px; }
.msel-l { margin: 0 10px; border: 1px solid #41464c; } .msel-l label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid #41464c; font-size: 12px; cursor: pointer; } .msel-l label:last-child { border-bottom: 0; }
.msel-foot { position: sticky; bottom: 0; background: #2b2f33; padding: 8px 10px; text-align: right; }
.strng { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid #41464c; } .strng input { height: 30px; }
.stcurlist { display: grid; grid-template-columns: repeat(3, 1fr); } .stcur .dd-menu { min-width: 260px; }
.stsmall { width: auto; height: 30px; margin-right: 6px; }
.slegend { display: flex; gap: 22px; justify-content: center; font-size: 12px; margin-bottom: 4px; } .slegend i { display: inline-block; width: 22px; height: 3px; vertical-align: middle; margin-right: 6px; }
.schart { width: 100%; height: 300px; }
.schart .sgrid { stroke: #4a5058; stroke-width: 1; } .schart .sgrid.v { stroke: #3d4248; }
.schart .saxis { fill: #c9ced4; font-size: 11px; } .schart .saxis.ttl { font-style: italic; }
.sttiles { display: grid; grid-template-columns: 1fr 2fr 3fr; gap: 16px; margin: 16px 0; }
.sttile { display: flex; align-items: flex-end; gap: 14px; padding: 24px; min-height: 170px; position: relative; }
.stico { position: absolute; top: 24px; left: 24px; width: 56px; height: 56px; border-radius: 50%; background: #23262a; display: grid; place-items: center; } .stico .i { width: 24px; height: 24px; color: #2f8cff; }
.stbig { font-size: 46px; font-weight: 300; } .stbig small { font-size: 16px; }
.stlbl { margin-left: auto; text-align: right; } .stlbl b { display: block; font-size: 16px; } .stlbl span { font-size: 12px; color: #c9ced4; }
.stsum { padding: 20px 24px; } .stsum h3 { margin: 0 0 10px; font-size: 16px; display: flex; gap: 6px; align-items: center; } .stsum h3 .i { color: #2f8cff; }
.strow { display: flex; justify-content: space-between; align-items: center; border: 1px solid #4a4f55; border-bottom: 0; padding: 9px 16px; font-size: 12.5px; } .strow:last-of-type { border-bottom: 1px solid #4a4f55; }
.strow b { font-size: 10.5px; padding: 2px 6px; border-radius: 2px; color: #fff; } .strow b.g { background: #1f9d55; } .strow b.o { background: #f2994a; } .strow b.n { background: #6b7280; }
.sttab td.r, .sttab th.r { text-align: right; } .stbar { height: 4px; background: #23262a; border-radius: 2px; margin-top: 3px; } .stbar i { display: block; height: 100%; background: #2f8cff; border-radius: 2px; }
@media (max-width: 1100px) { .stgrid { grid-template-columns: 1fr; } .sttiles { grid-template-columns: 1fr; } }
.msel-foot .btn { width: auto !important; display: inline-flex !important; padding: 5px 16px !important; }

/* tryb bez wysyłki */
.pausebar { display: flex; gap: 10px; align-items: center; background: rgba(213,72,57,.16); border: 1px solid #d54839; border-radius: 4px; padding: 8px 12px; margin: 0 0 12px; font-size: 12px; }
.pausebar > .i { color: #ff8a8a; flex: 0 0 16px; } .pausebar div { flex: 1; }
.pausebox { display: flex; gap: 16px; align-items: center; justify-content: space-between; border: 1px solid #4a4f55; border-radius: 6px; padding: 12px 14px; margin-bottom: 18px; }
.pausebox.on { border-color: #d54839; background: rgba(213,72,57,.10); }

/* łączenie konta Allegro — kroki */
.cstep { border: 1px solid #4a4f55; border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; }
.cstep.done { border-color: #1f9d55; } .cstep.off { opacity: .55; }
.cstep .infobox { margin: 8px 0; }

/* okno „Konto Allegro” — zakładki Zamówienia / Zwroty / Statusy jak w Base */
.sect-h { cursor: pointer; user-select: none; }
.sect-h .car svg { width: 14px; height: 14px; transition: transform .15s; }
.sect.closed .sect-b { display: none; }
.sect.closed .sect-h .car svg { transform: rotate(180deg); }
.afld { padding: 12px 0; border-bottom: 1px solid #3a3f44; }
.afld:last-child { border-bottom: 0; }
.afld .lbl2 { margin: 0 0 8px; }
.afld select, .afld input[type=text] { width: 100%; }
.ahelp { font-size: 12px; color: #c5c9cd; margin-top: 6px; }
.qmark { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: #5b6168; color: #fff; font-size: 10px; align-items: center; justify-content: center; cursor: help; }
.arow { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.arow > span { width: 164px; text-align: right; font-size: 12px; flex: none; }
.arow select { flex: 1; }
table.rmap { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.rmap td { padding: 7px 4px; border-bottom: 1px solid #3a3f44; font-size: 13px; }
table.rmap td:first-child { width: 45%; }
table.rmap td.arr { width: 10%; text-align: center; color: #c5c9cd; }
table.rmap select { width: 100%; }

table.rmap td { vertical-align: middle; }

/* pasek ładowania + płynniejsze przełączanie widoków */
#topload { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: #2f8cff; z-index: 9999; opacity: 0; transition: width .3s ease, opacity .2s; pointer-events: none; }
#topload.on { width: 70%; opacity: 1; transition: width 2s cubic-bezier(.1,.6,.3,1), opacity .1s; }
button, .btn, a, .xbtn, tr { -webkit-tap-highlight-color: transparent; }
.btn, .xbtn, .sm-ic { transition: background-color .12s, border-color .12s, color .12s; }

/* nagłówek listy zamówień jak w Base */
.ot thead th { font-size: 11px; padding-top: 16px; padding-bottom: 8px; color: #e6e8eb; }
.ot thead th .sub { font-size: 11px; }
.ot thead th .hl { cursor: pointer; }
.ot thead th .hl:hover { text-decoration: underline; }
.ot thead th .sarr { font-style: normal; font-size: 8px; margin-left: 3px; color: #9aa1a9; }

/* ===== telefon: lista zamówień jako kafelki, bez przewijania w bok ===== */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .box-h { flex-wrap: wrap; gap: 8px; }
  .box-h h1 { font-size: 18px; }
  .otoolbar, .tbar, .toolbar { flex-wrap: wrap; }
  .otwrap { overflow-x: visible; }
  .ot thead { display: none; }
  .ot, .ot tbody { display: block; width: 100%; }
  .ot tbody tr[data-id] { display: grid; grid-template-columns: 30px 1fr auto; gap: 3px 8px; padding: 10px 8px; border-bottom: 1px solid #3a3f44; }
  .ot tbody tr[data-id] > td { display: block; border: 0; padding: 0; min-width: 0; }
  .ot td[data-k="cks"] { grid-column: 1; grid-row: 1 / span 3; }
  .ot td[data-k="no"] { grid-column: 2; grid-row: 1; font-weight: 600; }
  .ot td[data-k="total"] { grid-column: 3; grid-row: 1; text-align: right; font-weight: 600; }
  .ot td[data-k="buyer"] { grid-column: 2 / span 2; }
  .ot td[data-k="items"] { grid-column: 2 / span 2; white-space: normal; font-size: 12px; color: #c5c9cd; }
  .ot td[data-k="info"] { grid-column: 2; }
  .ot td[data-k="dates"] { grid-column: 3; text-align: right; font-size: 11px; }
  .ot td[data-k]:not([data-k="cks"]):not([data-k="no"]):not([data-k="total"]):not([data-k="buyer"]):not([data-k="items"]):not([data-k="info"]):not([data-k="dates"]) { grid-column: 2 / span 2; }
}
@media (max-width: 700px) {
  .app { grid-template-columns: 44px minmax(0, 1fr) !important; }
  .main, .topbar { min-width: 0; }
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .search { min-width: 0; }
  .topbar .search input { padding-left: 32px; padding-right: 30px; }
  .topbar .right { gap: 4px; flex-shrink: 1; min-width: 0; }
  .topbar .right .circle:not(:first-child) { display: none; }
  .topbar .userbtn .uname, .topbar .userbtn > span:not(.avatar) { display: none; }
  .ob-head { flex-wrap: wrap; gap: 8px; }
  .fbtn-wrap { flex-wrap: wrap; gap: 6px; }
  .toolbar { flex-wrap: wrap; gap: 6px; }
  .pager { flex-wrap: wrap; }
  .orders-box, .box { max-width: 100%; }
  .main { padding: 8px !important; }
}
@media (max-width: 700px) {
  .ot tbody tr[data-id] { grid-template-columns: 26px minmax(0, 1fr) auto; width: 100%; box-sizing: border-box; }
  .ot td[data-k="items"], .ot td[data-k="items"] * { white-space: normal !important; overflow-wrap: anywhere; }
  .ot td[data-k="dates"] { white-space: nowrap; }
  .ot td[data-k="total"] { white-space: nowrap; }
  .otwrap { overflow: hidden; }
}
@media (max-width: 700px) {
  .ot td[data-k="info"] { grid-column: 2 / span 2; }
  .ot td[data-k="dates"] { grid-column: 2 / span 2; text-align: left; }
  .ot td[data-k="dates"] br { display: none; }
}

.cplogin { cursor: copy; }
.cplogin:hover { text-decoration: underline; }
/* jak w Base: rączka i podkreślenie na numerze i loginie, „1x” kursywą */
.ot td[data-k="no"] a, .ot td.no a { cursor: pointer; }
.ot td[data-k="no"] a:hover, .ot td.no a:hover { text-decoration: underline; }
.cplogin { cursor: pointer !important; }
.ot .items .qx { font-style: italic; }

/* okno potwierdzenia jak w Base */
.modal.cfm { max-width: 580px; }
.modal.cfm .box-h h2 { font-size: 15px; font-weight: 600; }
.cfm-text { font-size: 13px; line-height: 1.5; color: #d6d9dc; margin: 2px 0 22px; }
.cfm-btns { display: flex; justify-content: flex-end; gap: 10px; }
.btn.red { background: #eb5757; border-color: #eb5757; color: #fff; }
.btn.red:hover { background: #d94848; }
/* bliżej Base: grubszy numer zamówienia, większe nazwy statusów w menu */
.ot td[data-k="no"] a, .ot td.no a { font-size: 13px; font-weight: 600; letter-spacing: .1px; }
.side a.s .nm { font-size: 12.4px; }
.side a.s .cb { font-size: 10px; min-width: 18px; }
.ot td[data-k="info"] .stbadge, .ot td[data-k="info"] > span:first-child { font-size: 10.5px; }
@media (max-width: 700px) { .ot td[data-k="no"] a { font-size: 14px; } }
@media (min-width: 1001px) {
  .ot td[data-k="buyer"] { min-width: 150px; }
  .ot td[data-k="buyer"] .src { white-space: nowrap; }
  .ot td[data-k="items"] { width: 100%; }
}
@media (min-width: 1001px) {
  .ot td[data-k="items"] { width: 100%; max-width: 1px; }
  .ot td[data-k="items"] > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ===== telefon v2: dolny pasek nawigacji, zwarty nagłówek, krótsze kafelki ===== */
@media (max-width: 700px) {
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .topbar, .main { grid-column: 1 / -1 !important; }
  .main { padding-bottom: 76px !important; }
  .rail { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; height: 56px !important; width: 100% !important;
    flex-direction: row !important; justify-content: space-around; align-items: center; padding: 0 !important; z-index: 50;
    background: var(--side, #1f2326); border-top: 1px solid #3a3f44; }
  .rail > a { margin: 0 !important; padding: 10px !important; }
  .rail .logo, .rail .quickbox, .rail .progress { display: none !important; }
  .side { left: 0 !important; top: 56px !important; bottom: 56px; width: 86vw !important; max-width: 340px; overflow-y: auto; }
  .topbar .dd:has(.quick), .topbar > .dd { display: none; }
  /* nagłówek listy */
  .ob-head { flex-direction: column; align-items: stretch !important; }
  .ob-head h1 { font-size: 17px; margin: 0; }
  .fbtn-wrap { flex-wrap: nowrap !important; }
  .fbtn-wrap .btn { padding: 6px 10px; font-size: 12px; }
  .toolbar { padding: 6px 8px 8px !important; }
  .toolbar .tb button, .toolbar > button { padding: 5px 7px; }
  /* kafelek */
  .ot td[data-k="info"] .src { display: none; }
  .ot td[data-k="dates"] .st { display: none; }
  .ot td[data-k="info"] { grid-column: 2 !important; }
  .ot td[data-k="dates"] { grid-column: 3 !important; text-align: right !important; align-self: center; color: #9aa1a9; }
  .ot tbody tr[data-id] { padding: 9px 6px; gap: 2px 8px; }
  .ot td[data-k="items"] { -webkit-line-clamp: 2; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 700px) {
  .chead h1 { font-size: 16px !important; line-height: 1.3; }
  .box.cprod { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ptab { font-size: 12px; }
  .ptab th, .ptab td { padding: 6px 5px !important; }
  .ptab td:first-child, .ptab th:first-child { display: none; }
}
/* ===== telefon: tabele w ustawieniach przewijane palcem, zakładki i kafelki w ekranie ===== */
@media (max-width: 700px) {
  .main .st-table, .main .sm-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: nowrap; }
  .main .st-table td, .main .sm-table td { white-space: normal; min-width: 70px; }
  .tabsbar { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap !important; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabsbar::-webkit-scrollbar { display: none; }
  .bluebar { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
  .itiles { flex-wrap: wrap; }
  .iwrap { overflow-x: auto; max-width: 100%; }
  .itile { flex: 0 0 auto; }
  .box-b, .box { max-width: 100%; box-sizing: border-box; }
  .iform .frow { flex-direction: column; align-items: stretch; }
  .iform .frow > label { width: auto !important; text-align: left !important; margin-bottom: 4px; }
  input, select, textarea { font-size: 16px; } /* bez automatycznego powiększania na iPhonie */
  .modal { width: calc(100vw - 16px) !important; max-width: none !important; margin: 8px auto !important; max-height: calc(100vh - 80px); overflow-y: auto; }
  .modal-bg { align-items: flex-start !important; padding-top: 8px; }
  .btn, .xbtn, .tb button { min-height: 34px; }
}
/* telefon: bez „przyklejonego” podświetlenia po dotknięciu, odstęp gwiazdka–numer */
@media (hover: none) { .ot tbody tr:hover, .ot tbody tr:hover td { background: transparent !important; } }
@media (max-width: 700px) {
  .ot td[data-k="cks"] .rstar, .ot .rstar { margin-right: 6px; }
  .ot td[data-k="no"] { padding-left: 2px !important; }
}

/* ===== sekcja „Statusy” nad listą (jak w Base, gdy lewe menu jest schowane) ===== */
.schips { display: none; }
@media (max-width: 1000px) {
  .schips { display: block; padding: 10px 14px 12px; margin-bottom: 12px; }
  .schips-h { display: flex; align-items: center; font-size: 14px; margin-bottom: 8px; }
  .schips-h a { color: var(--text); font-size: 12px; }
  .schips-b { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 12.5px; }
  .schips-b a { color: var(--text); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 2px 0; }
  .schips-b a.on { color: var(--link); font-weight: 600; }
  .schips-b a.all { background: #3a3f44; padding: 5px 10px; border-radius: 4px; }
  .schips-b a.all.on { color: #fff; }
  .schips-b .sg { font-weight: 700; flex-basis: auto; }
  .schips-b .cb { display: inline-block; min-width: 16px; padding: 0 3px; border-radius: 3px; font-size: 10px; font-weight: 600; color: #fff; text-align: center; line-height: 15px; }
  .schips-b svg { width: 14px; height: 14px; }
}

/* telefon (widok 960 px jak w Base): produkty zawijane w kilka linii */
@media (min-width: 701px) and (max-width: 1000px) {
  .ot td[data-k="items"] > div { white-space: normal; }
  .ot td[data-k="buyer"] { min-width: 110px; }
}

/* ikonka Allegro przy kliencie — pomarańczowa (kolor Allegro) */
.ico.al { background: #ff5a00 !important; color: #fff !important; }

/* ===== wykończenie jak w Base: zaokrąglenia, wyśrodkowane cyfry, czytelna kolumna informacji ===== */
.ico, .chip, .cb, .side a.s .cb, .schips-b .cb {
  display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; text-align: center; vertical-align: middle;
}
.ico { border-radius: 3px; }
.chip { border-radius: 4px; padding: 3px 7px !important; font-size: 10.5px !important; letter-spacing: .2px; }
.cb, .side a.s .cb, .schips-b .cb { border-radius: 3px !important; height: 15px !important; min-width: 18px; padding: 0 4px !important; box-sizing: border-box; }
/* znaczki źródła przy kliencie */
.ico.al, .ico.ar, .ico.wo { width: 17px !important; height: 14px !important; font-size: 8.5px !important; font-weight: 800; border-radius: 3px; margin: 0 4px 0 0 !important; letter-spacing: -.2px; text-transform: lowercase; }
.ico.ar { background: #2f6fe4 !important; color: #fff !important; }
.ico.wo { background: #873eff !important; color: #fff !important; }
/* kolumna „Informacje dodatkowe”: status po lewej, ikonki dosunięte do prawej, wysyłka pod spodem */
.ot td.oinfo { width: 215px; }
.ot td.oinfo .irow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ot td.oinfo .icons { display: inline-flex; gap: 3px; margin-left: auto; }
.ot td.oinfo .icons .ico { width: 16px !important; height: 16px !important; margin: 0 !important; font-size: 10px; }
.ot td.oinfo .icons .ico .i { width: 11px; height: 11px; }
.ot td.oinfo .src { margin-top: 4px; line-height: 1.35; }
.nw { white-space: nowrap; }
/* wyraźny podział wierszy */
@media (min-width: 701px) { .ot tbody tr[data-id] > td { border-top: 0; border-bottom: 1px solid #3b4046; padding-top: 9px; padding-bottom: 9px; vertical-align: top; } }
@media (max-width: 700px) { .ot tbody tr[data-id] > td { border: 0 !important; } }
/* zaokrąglone przyciski, pola i ramki */
button, select, input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], textarea { border-radius: 5px; }
.toolbar .tb > button, .toolbar > button, .tb button { border-radius: 5px; }
.box { border-radius: 6px; }
.modal { border-radius: 8px; }
.dd-menu { border-radius: 6px !important; }
.amt { border-radius: 2px; }

.chart.clickable { cursor: pointer; transition: background-color .15s; }
.chart.clickable:hover { background-color: #383d43; }
/* Arena.pl w kolorach logo: czarne „arena”, szare „.pl”, białe tło */
.arn { font-family: "Nunito", "Varela Round", "Trebuchet MS", Arial, sans-serif; font-weight: 800; color: #1d1d1f; letter-spacing: -.3px; }
.arn i { color: #1d1d1f; }
.arn i::after { display: none; }
.arn b { color: #a0a4a8; font-weight: 600; }
.ico.ar { background: #ffffff !important; color: #1d1d1f !important; box-shadow: inset 0 0 0 1px #c9cdd1; font-weight: 800; }

/* podpowiedź na wykresie statystyk (jak w Base) */
.schart-wrap { position: relative; }
.schart .shov { fill: transparent; cursor: pointer; }
.schart .shline { stroke: #9aa1a9; stroke-width: 1; stroke-dasharray: 3 3; }
.schart .shdot { stroke: #fff; stroke-width: 2; }
.schart .shdot.n { fill: #f2994a; } .schart .shdot.v { fill: #56a8e0; }
.stip { position: absolute; z-index: 5; pointer-events: none; background: #2b2f33; border: 1px solid #5b6168; border-radius: 6px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.45); min-width: 190px; font-size: 12px; line-height: 1.6; }
.stip b { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
.stip span { font-weight: 700; }

/* ===== animacje i przejścia ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes drawLine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes areaIn { from { opacity: 0; } to { opacity: 1; } }

/* wejście ekranu: sekcje wsuwają się kolejno */
.main.enter > * { animation: fadeUp .38s cubic-bezier(.2,.75,.25,1) both; }
.main.enter > *:nth-child(2) { animation-delay: .05s; }
.main.enter > *:nth-child(3) { animation-delay: .1s; }
.main.enter > *:nth-child(4) { animation-delay: .15s; }
.main.enter > *:nth-child(n+5) { animation-delay: .2s; }
/* wiersze zamówień pojawiają się po kolei */
.main.enter .ot tbody tr { animation: rowIn .34s cubic-bezier(.2,.75,.25,1) both; }
.main.enter .ot tbody tr:nth-child(1) { animation-delay: 0.102s; }
.main.enter .ot tbody tr:nth-child(2) { animation-delay: 0.124s; }
.main.enter .ot tbody tr:nth-child(3) { animation-delay: 0.146s; }
.main.enter .ot tbody tr:nth-child(4) { animation-delay: 0.168s; }
.main.enter .ot tbody tr:nth-child(5) { animation-delay: 0.190s; }
.main.enter .ot tbody tr:nth-child(6) { animation-delay: 0.212s; }
.main.enter .ot tbody tr:nth-child(7) { animation-delay: 0.234s; }
.main.enter .ot tbody tr:nth-child(8) { animation-delay: 0.256s; }
.main.enter .ot tbody tr:nth-child(9) { animation-delay: 0.278s; }
.main.enter .ot tbody tr:nth-child(10) { animation-delay: 0.300s; }
.main.enter .ot tbody tr:nth-child(11) { animation-delay: 0.322s; }
.main.enter .ot tbody tr:nth-child(12) { animation-delay: 0.344s; }
.main.enter .ot tbody tr:nth-child(13) { animation-delay: 0.366s; }
.main.enter .ot tbody tr:nth-child(14) { animation-delay: 0.388s; }
.main.enter .ot tbody tr:nth-child(15) { animation-delay: 0.410s; }
.main.enter .ot tbody tr:nth-child(16) { animation-delay: 0.432s; }
.main.enter .ot tbody tr:nth-child(17) { animation-delay: 0.454s; }
.main.enter .ot tbody tr:nth-child(18) { animation-delay: 0.476s; }
.main.enter .ot tbody tr:nth-child(19) { animation-delay: 0.498s; }
.main.enter .ot tbody tr:nth-child(20) { animation-delay: 0.520s; }

/* wykresy: linie się rysują, wypełnienie wyłania się */
.main.enter .sline { stroke-dasharray: 1; animation: drawLine 1s cubic-bezier(.3,.6,.2,1) .15s both; }
.main.enter .schart path[fill^="rgba"], .main.enter .chart path[fill^="rgba"] { animation: areaIn .8s ease .5s both; }
/* okna, menu, komunikaty */
.modal-bg { animation: fadeIn .18s ease both; }
.modal { animation: popIn .26s cubic-bezier(.2,.85,.25,1.05) both; }
.dd-menu { animation: menuIn .16s cubic-bezier(.2,.8,.2,1) both; transform-origin: top left; }
.toastmsg { animation: toastIn .3s cubic-bezier(.2,.85,.25,1.05) both; }
/* przyciski i kafelki: delikatne uniesienie i „wciśnięcie” */
.btn, .tb button, .xbtn, .sm-ic, .addbtn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover:not(:disabled), .addbtn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.btn:active:not(:disabled), .tb button:active, .xbtn:active, .addbtn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.tile, .antile, .itile, .sttile { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background-color .18s ease; }
.tile:hover, .antile:hover, .itile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
/* menu i wiersze: płynne podświetlenie */
.side a.s, .schips-b a, .rail a, .tabsbar a, .ot tbody tr, .st-table tbody tr { transition: background-color .15s ease, color .15s ease; }
.rail a { transition: color .15s ease, transform .15s ease; }
.rail a:hover { transform: scale(1.08); }
.chip, .ico { transition: filter .15s ease; }
.ot tbody tr:hover .chip { filter: brightness(1.12); }
#topload { background: linear-gradient(90deg, #2f8cff, #7cc0ff, #2f8cff); background-size: 200% 100%; animation: loadShine 1.2s linear infinite; }
@keyframes loadShine { from { background-position: 0 0; } to { background-position: 200% 0; } }
/* osoby z ograniczeniem ruchu: bez animacji */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* filtrowanie zamówień — zwarte jak w Base */
.fgrid { row-gap: 4px !important; column-gap: 8px !important; }
.fgrid .fld { margin-top: 6px !important; padding-top: 14px !important; padding-bottom: 4px !important; min-height: 0; }
.fgrid .fld input, .fgrid .fld select { height: 24px; }
.fgrid:not(.showadv) .adv { display: none !important; }
.fgrid.showadv .adv { animation: fadeUp .25s ease both; }
#fadv.act { border-color: var(--link); color: var(--link); }
#fadv svg { transition: transform .2s ease; }
#fadv.act svg { transform: rotate(180deg); }
@media (min-width: 1001px) {
  .fgrid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .fgrid .fpair { grid-column: span 2; }
}
.fgrid .fld label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 12px); }
.fgrid .fld input, .fgrid .fld select { min-width: 0; width: 100%; }

/* ===== okno szablonu e-mail jak w Base ===== */
.modal.tplm { max-width: 990px !important; }
.modal.tplm .box-b { padding: 22px 28px; }
.tform { grid-template-columns: 180px 1fr; gap: 12px 18px; }
.tform > label { padding-top: 10px; font-size: 12px; color: #d6dae0; }
.tform input:not([type=radio]):not([type=checkbox]), .tform select, .tagbox input, #bt_body {
  background: #2b2f33 !important; border: 1px solid #555b62 !important; border-radius: 6px !important; color: #e6e8eb !important;
  transition: border-color .15s ease, box-shadow .15s ease; box-shadow: none !important;
}
.tform input:not([type=radio]):not([type=checkbox]), .tform select { height: 36px; padding: 0 12px; font-size: 12.5px; width: 100%; box-sizing: border-box; }
.tform input:focus, .tform select:focus, .tagbox input:focus, #bt_body:focus { outline: none; border-color: #2f8cff !important; box-shadow: 0 0 0 3px rgba(47,140,255,.18) !important; }
.tform .radio { display: inline-flex; align-items: center; gap: 7px; margin-right: 22px; font-size: 12.5px; cursor: pointer; }
.tform input[type=radio] { accent-color: #2f8cff; width: 16px; height: 16px; }
.tedit { grid-template-columns: 218px 1fr; gap: 16px; }
.tagbox { background: #2b2f33 !important; border: 1px solid #555b62 !important; border-radius: 6px !important; padding: 14px 14px 10px !important; height: 610px !important; overflow-x: hidden !important; overflow-y: auto; }
.tagbox > .small { font-size: 11px; line-height: 1.4; color: #e6e8eb; }
.tagbox input { height: 34px; padding: 0 12px; width: 100%; box-sizing: border-box; margin: 12px 0 14px !important; font-size: 12px; }
.tagbox .tg { margin-bottom: 14px; }
.tagbox .tg b { display: block; font-size: 12px; margin-bottom: 5px; color: #fff; }
.tagbox .tg a { display: block; font-size: 10.8px; font-weight: 600; line-height: 1.32; color: #d6dae0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; border-radius: 3px; transition: color .12s, background-color .12s; }
.tagbox .tg a:hover { color: #fff; background: #3a4047; }
#bt_body { width: 100%; box-sizing: border-box; height: 610px; padding: 14px 16px; font-size: 12.5px; line-height: 1.6; font-family: "Open Sans", Arial, sans-serif; resize: vertical; }
.tagbox::-webkit-scrollbar, #bt_body::-webkit-scrollbar { width: 8px; }
.tagbox::-webkit-scrollbar-thumb, #bt_body::-webkit-scrollbar-thumb { background: #4a4f55; border-radius: 4px; }
.tform .help { font-size: 11.5px; }

/* ===== Statystyki: czytelniejsze ===== */
.schart { height: auto !important; max-height: 360px; display: block; }
.schart .saxis { font-size: 13px !important; fill: #d6dae0 !important; }
.schart .saxis.ttl { font-size: 13px !important; fill: #aeb4bb !important; }
.slegend { font-size: 13.5px !important; gap: 28px !important; margin-bottom: 8px !important; }
.slegend i { width: 26px !important; height: 3px !important; border-radius: 2px; }
.stbig { font-size: 52px !important; font-weight: 300; line-height: 1; } .stbig small { font-size: 18px !important; margin-left: 4px; color: #c9ced4; }
.stlbl b { font-size: 18px !important; } .stlbl span { font-size: 13px !important; }
.stsum h3 { font-size: 18px !important; margin-bottom: 14px !important; }
.strow { padding: 13px 18px !important; font-size: 14.5px !important; }
.strow b { font-size: 15px !important; font-weight: 700; padding: 5px 12px !important; border-radius: 6px !important; letter-spacing: .2px; min-width: 110px; text-align: center; }
.stsum .small.muted { font-size: 12px; margin-top: 10px !important; }

/* wykres statystyk jak w Base (trochę większa czcionka) */
.schart { max-height: 420px !important; }
.schart .saxis { font-size: 14.5px !important; fill: #e2e5e9 !important; }
.schart .saxis.ttl { font-size: 14.5px !important; }
.schart .sgrid { stroke: #4a5056; stroke-width: 1; }
.schart .sgrid.minor { stroke: #3d4248; }
.schart .sgrid.v { stroke: #3f454b; }
.slegend { font-size: 15px !important; justify-content: flex-start !important; padding-left: 90px; }
.slegend i.lmk { position: relative; width: 30px !important; height: 3px !important; background: var(--c) !important; margin-right: 8px; border-radius: 2px; }
.slegend i.lmk::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--c); transform: translate(-50%, -50%); }

.offall td { vertical-align: middle; }
.offall .cplogin { color: var(--link); }

/* wybór platformy w Wysyłce kodów (jak w Salemate) */
.mkpick { display: flex; gap: 10px; margin: 6px 0 14px; }
.mkbtn { width: 64px; height: 50px; border-radius: 10px; border: 1px solid #3a4250; background: #1b2230; display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s, box-shadow .15s, transform .12s; }
.mkbtn:hover { border-color: #f97316; transform: translateY(-1px); }
.mkbtn.on { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,.35); background: #2a1f17; }
.mkbtn .alg { font-size: 10px; font-weight: 700; color: #ff5a00; }
.mkbtn .woo { font-size: 13px; font-weight: 800; color: #a46cf5; }
.mkbtn .arn { font-size: 10px !important; color: #e6e8eb !important; letter-spacing: -.2px; }
.mkbtn .arn i { color: #e6e8eb !important; }

/* okno przypisania oferty (jak w Salemate) */
.asg { display: flex; flex-direction: column; }
.asg .lbl { margin: 14px 0 7px; font-size: 13px; color: #cbd5e1; }
.asg .lbl:first-child { margin-top: 2px; }
.asg select.sm-in, .asg input.sm-in { width: 100%; box-sizing: border-box; height: 42px; font-size: 13.5px; }
.asg select.sm-in:focus, .asg input.sm-in:focus { border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,.18); outline: none; }
.asg-q { margin-bottom: 8px; }
.asg-date { display: grid; grid-template-columns: 1fr 130px; gap: 10px; margin-top: 10px; }
.asg-help { font-size: 11.5px; color: #94a3b8; margin-top: 6px; line-height: 1.4; }
.asg-more { margin-top: 14px; font-size: 12.5px; color: #94a3b8; } .asg-more summary { cursor: pointer; }
.asg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.asg-btns .sm-btn { height: 44px; border-radius: 10px; font-size: 14px; }
.asg-btns .sm-btn.ghost { background: transparent; border: 1px solid #475569; color: #e2e8f0; }
.asg-btns .sm-btn.or:disabled { opacity: .55; cursor: not-allowed; }
.sm-modal .box-h h2 { font-size: 17px; line-height: 1.35; }

/* zwrot na liście zamówień */
.ico.rz { background: #f2994a; color: #fff; padding: 0 2px; }
.ico.rz svg { width: 12px; height: 12px; stroke-width: 2.6; flex-shrink: 0; }
.ico.rz.paid { background: #e5484d; width: auto !important; min-width: 28px; display: inline-flex !important; justify-content: center; align-items: center; gap: 1px; padding: 0 3px; }
.ico.rz.paid b { font-size: 9px; font-weight: 800; line-height: 1; }
.retamt { color: #ff6b6b; font-size: 11px; font-weight: 600; margin-top: 2px; }

/* zwrot przez sklep WooCommerce */
.rfshop { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 1px solid #2f8cff55; border-radius: 6px; background: #2f8cff12; cursor: pointer; }
.rfshop input { margin-top: 3px; }

/* sekcja Zwroty w karcie zamówienia (jak w Base) */
.oret .box-h h2 { display: flex; align-items: center; gap: 6px; }
.oret .box-h h2 svg { width: 16px; height: 16px; }
.oret tr.clk { cursor: pointer; }
.oret tr.clk:hover td { background: #ffffff08; }
.oret .pill { display: inline-block; padding: 2px 8px; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 700; }

/* pola dat: tekst do kopiowania/wklejania + kalendarz */
.dx { position: relative; display: inline-flex; align-items: center; width: 100%; vertical-align: middle; }
.dx > .dx-t { width: 100%; padding-right: 30px !important; }
.dx > .dx-cal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 2px; color: inherit; opacity: .65; cursor: pointer; line-height: 0; }
.dx > .dx-cal:hover { opacity: 1; }
.dx > .dx-n { position: absolute; right: 0; bottom: 0; width: 1px !important; height: 1px !important; min-width: 0 !important; opacity: 0; pointer-events: none; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.dx > .dx-bad { border-color: #e5484d !important; }

/* kafelek Wysyłam z Allegro */
.swa { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.swa small { font-size: 11px; color: #333; font-weight: 600; }

/* Integracje kurierskie (jak w Base) */
.cship-h { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 12px; }
.ctabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cform { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; align-items: center; margin: 12px 0; }
.cform > label:not(.rad) { text-align: right; color: var(--muted); font-size: 13px; }
.cpks { border: 1px solid var(--line, #3a3f44); border-radius: 8px; padding: 10px 12px; }
.cpk { position: relative; padding: 6px 0; }
.cpk + .cpk { border-top: 1px dashed var(--line, #3a3f44); }
.cpk .cpk-x { position: absolute; right: 0; top: 4px; }
.cpk-g { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 8px; margin-top: 6px; }
.cpk-g label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .cform { grid-template-columns: 1fr; } .cform > label:not(.rad) { text-align: left; } .cpk-g { grid-template-columns: repeat(2, 1fr); } }

.ctabs { justify-content: flex-start; }
.ctabs .btn { flex: 0 0 auto; width: auto; }
.cship-h { justify-content: flex-start; }
.ctabs .btn { margin: 0 !important; }
.cship-h > * { margin: 0 !important; }

/* Wysyłam z Allegro — okno ustawień jak w Base */
.btabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #3a3f44; margin: -4px 0 16px; }
.btabs a { padding: 12px 18px 10px; color: var(--text); font-size: 13.5px; border: 1px solid #3a3f44; border-bottom: none; margin-right: -1px; position: relative; }
.btabs a:hover { text-decoration: none; color: #fff; }
.btabs a.on { color: #fff; }
.btabs a.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: #2f80ed; }
.bform { display: grid; grid-template-columns: minmax(180px, 32%) 1fr; gap: 10px 18px; align-items: start; margin: 8px 0 14px; }
.bform > label { text-align: right; color: var(--muted); font-size: 12.5px; padding-top: 9px; }
.bform input[type=text], .bform select { width: 100%; }
.bhint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.bunit { display: flex; align-items: center; gap: 8px; }
.bunit span { color: var(--muted); font-size: 12.5px; }
.bsep { border: none; border-top: 1px solid #3a3f44; margin: 14px 0; }
.bsave { padding-left: calc(min(32%, 9999px) + 18px); margin-top: 6px; }
@media (max-width: 700px) { .bform { grid-template-columns: 1fr; } .bform > label { text-align: left; padding-top: 0; } .bsave { padding-left: 0; } .btabs a { padding: 9px 10px 8px; font-size: 12.5px; } }