:root {
  --bg: #f7f4ef;
  --ink: #1a1a1a;
  --muted: #5c6b78;
  --blue: #0b4f9c;
  --blue-deep: #0a3a74;
  --line: #d0c8bc;
  --card: #fff;
  --orange: #c45c12;
  --sand: #f0ebe3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); }
.login-card form .btn { width: 100%; margin-top: 8px; }
.card, .sheet { background: var(--card); border: 1px solid #e0dbd2; border-radius: 8px; padding: 16px; }
.brand { font-size: 22px; font-weight: 700; color: var(--blue-deep); }
.sub { color: #3d4f63; font-size: 12px; font-weight: 600; margin: 2px 0 0; }
.who { display: inline-block; margin-top: 6px; background: #fff; border: 1px solid #b7d0ea; border-radius: 6px; padding: 3px 8px; color: var(--blue); font-size: 12px; font-weight: 700; }
.muted { color: #666; }
.msg { min-height: 1.2em; color: #8a3d0a; font-weight: 600; }
.msg.ok { color: #17835e; }
label { display: block; margin: 10px 0; font-weight: 600; color: #555; font-size: 12px; }
input, select, textarea { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
textarea { min-height: 64px; }
.btn { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.btn.ghost.printed { background: #17835e; color: #fff; border-color: #17835e; }
.btn.ok { background: #17835e; color: #fff; }
.btn.ok:disabled { opacity: 0.7; }
.btn.warn { background: var(--orange); }
.btn.slim { padding: 6px 10px; font-size: 12px; }
.btn.del { color: #b42318; border-color: #e7b2ac; }
.app { max-width: 1280px; margin: 0 auto; padding: 16px; }
#view { display: grid; gap: 12px; align-content: start; }
.shell { margin-top: 12px; }
.work { min-width: 0; display: grid; gap: 12px; align-content: start; }
.top { display: flex; flex-direction: column; align-items: stretch; gap: 10px; background: #eef5fc; border: 1.5px solid #b7d0ea; border-radius: 14px; padding: 12px; }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.top-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; text-decoration: none; }
.icon-btn.on { background: var(--blue); color: #fff; }
.set-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.set-icon { width: 74px; min-height: 64px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 4px; border: 1.5px solid #b7d0ea; border-radius: 10px; background: #fff; color: var(--blue-deep); cursor: pointer; font-size: 11px; font-weight: 800; line-height: 1.15; text-align: center; }
.set-icon svg { width: 22px; height: 22px; }
.set-icon.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.set-body { display: grid; gap: 12px; }
.icon-btn.busy { border-color: #c62828; color: #c62828; }
.icon-btn.busy svg { animation: pull-bob 0.7s ease-in-out infinite; }
.pull-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c62828; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.pair-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #17835e; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.pair-note { margin: 0; background: #e7f6ee; border: 1px solid #7ed0a8; color: #0a6b42; font-weight: 800; border-radius: 10px; padding: 8px 12px; }
.pair-pop { position: fixed; inset: 0; background: rgba(7, 17, 28, 0.45); display: grid; place-items: center; z-index: 40; padding: 16px; }
.pair-card { width: min(360px, 100%); background: #fff; border-radius: 14px; padding: 16px; display: grid; gap: 10px; justify-items: center; }
.pair-card .title { margin: 0; }
.pair-ok { width: 96px; height: 96px; border-radius: 50%; background: #17835e; color: #fff; display: grid; place-items: center; font-size: 56px; line-height: 1; }
@keyframes pull-bob { 50% { transform: translateY(3px); } }
.shop-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 7.4rem; min-height: 40px; padding: 3px 12px 4px; border: 1px solid #0b4f9c; border-radius: 8px; background: #07111c; line-height: 1; }
.shop-clock-date { font-family: "Share Tech Mono", Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: 0.04em; color: #9ad7ff; }
.shop-clock-time { margin-top: 2px; font-family: "Share Tech Mono", Consolas, "Courier New", monospace; font-size: 22px; letter-spacing: 0.05em; color: #5cff9a; font-variant-numeric: tabular-nums; }
.brand-block { display: flex; gap: 12px; align-items: center; }
.mark { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1.5px solid #8fb4d8; color: var(--blue); display: grid; place-items: center; font-weight: 800; font-size: 26px; }
.tabs { display: flex; flex-flow: row nowrap; gap: 6px; margin: 0; padding: 2px 0 0; overflow-x: auto; }
.tab { flex: 0 0 auto; width: auto; white-space: nowrap; text-align: center; border-radius: 10px; border: 1.5px solid var(--line); background: var(--sand); padding: 8px 12px; font-weight: 700; cursor: pointer; color: #3a4a44; }
.tab.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.tab.haz { background: #eef5fc; border-color: #8fb4d9; color: #0a3a74; }
.tab.kar { background: #e8f5ef; border-color: #7ed0a8; color: #17835e; }
.tab.tam { background: #d8f5e5; border-color: #7ed0a8; color: #0a6b42; }
.tab.olustur { background: #fff6eb; border-color: #e0a86a; color: #8a3d0a; }
.tab.kisiler { background: #f3f7ee; border-color: #9bbb7a; color: #1f5a2c; }
.view { display: grid; gap: 12px; }
.sheet-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 16px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row input { margin-top: 0; flex: 1; min-width: 160px; }
.chip { border-radius: 10px; padding: 7px 11px; border: 1.5px solid; font-weight: 800; cursor: pointer; background: #fff; }
.chip.haz { color: #0a3a74; background: #eef5fc; border-color: #8fb4d9; }
.chip.kar { color: #17835e; background: #e8f5ef; border-color: #7ed0a8; }
.chip.tam { color: #0a6b42; background: #d8f5e5; border-color: #7ed0a8; }
.chip.on { outline: 2px solid var(--blue); }
.phone-ticker { overflow: hidden; margin: 0; background: #e7f6ee; border: 1px solid #7ed0a8; border-radius: 10px; color: #0a6b42; font-weight: 800; font-size: 16px; }
.phone-ticker-track { display: flex; width: max-content; animation: phone-marquee 16s linear infinite; }
.phone-ticker-track span { padding: 10px 48px; white-space: nowrap; }
@keyframes phone-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.list { border: 1px solid #e8e4dc; border-radius: 6px; overflow: hidden; }
.ship-tools { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.ship-find { position: relative; flex: 1; }
.ship-find input { margin: 0; }
.ship-find .hits { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; background: #fff; box-shadow: 0 8px 20px rgba(26, 26, 26, 0.12); }
.ship-list .line { border: 2px solid #b7aea2; border-radius: 12px; padding: 12px; background: #fff; }
.ship-list .line.makro { background: #d9ebf8; border-color: #9ec3e0; color: #16324f; }
.ship-list .line.makro b,
.ship-list .line.makro .meta,
.ship-list .line.makro .ship-when { color: #16324f; }
.ship-list .line.makro .pill { background: #fff; color: #1f3a5f; }
.origin { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 8px; background: #1f3a5f; color: #fff; font-size: 12px; font-weight: 800; vertical-align: 1px; }
.sms-balance { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #1f3a5f; color: #f7f4ee; font-weight: 800; }
.sms-balance b { font-size: 22px; }
.ship-when { font-weight: 800; color: #1a1a1a; }
.ship-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid #efeae3; }
.ship-edit input[readonly] { background: #f6f3ee; color: #666; }
.print-ico { display: block; }
.line { display: grid; grid-template-columns: 6px 1fr auto; gap: 10px; align-items: start; padding: 8px 8px 8px 0; border-bottom: 1px solid #f0ebe3; background: #fff; }
.line:last-child { border-bottom: 0; }
.swatch { min-height: 100%; border-radius: 0 3px 3px 0; }
.line b { display: block; }
.meta { color: #777; font-size: 12px; margin-top: 2px; }
.carrier { font-weight: 800; }
.side { display: grid; gap: 6px; justify-items: end; }
.under-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.pill { border-radius: 10px; padding: 4px 10px; font-size: 11px; font-weight: 800; background: #e7f0ff; color: #1e4d8c; }
.pill.hata { background: #f8d7da; color: #721c24; }
.pill.kargolandi { background: #17835e; color: #fff; }
.pill.tamam { background: #d8f5e5; color: #0a6b42; }
.cargo-line { display: grid; grid-template-columns: minmax(200px, 1.1fr) auto minmax(0, 2.2fr); gap: 10px; align-items: end; }
.cargo-line label { margin-bottom: 0; }
.cargo-line .phone-fit { width: max-content; }
.cargo-line .phone-fit input { width: 15ch; padding-left: 8px; padding-right: 8px; }
.cargo-line .note-fit textarea { min-height: 0; height: 38px; resize: vertical; }
.ship-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(150px, 0.9fr); gap: 10px; align-items: start; }
.ship-grid > .ship-who { grid-column: 1; grid-row: 1; }
.ship-grid > .phone-fit { grid-column: 2; grid-row: 1; align-self: end; }
.ship-grid > .cargo-drop { grid-column: 3; grid-row: 1; }
.ship-grid > .addr-fit { grid-column: 1 / 3; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; }
.ship-grid > .loc-stack { grid-column: 3; grid-row: 2; }
.ship-grid label, .note-row label, .addr-fit { margin-bottom: 0; }
.loc-stack label + label { margin-top: 8px; }
.ship-who { position: relative; min-width: 0; }
.ship-grid .phone-fit { width: max-content; }
.ship-grid .phone-fit input { width: 15ch; padding-left: 8px; padding-right: 8px; }
.field-cap { display: block; margin: 10px 0 4px; font-weight: 600; color: #555; font-size: 12px; }
.ship-grid .cargo-drop-btn { padding: 8px 36px 8px 12px; }
#shipForm input, #shipForm textarea { border-width: 2px; border-color: #8f8578; }
.addr-fit textarea { flex: 1 1 auto; min-height: 74px; height: auto; resize: vertical; }
.note-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.note-row .note-fit textarea { min-height: 0; height: 38px; resize: vertical; }
.note-row .save-row { margin-top: 0; flex-wrap: nowrap; }
.note-row .save-row .btn { min-width: 0; }
.cargo-drop { position: relative; margin: 0; }
.cargo-drop-btn { position: relative; display: block; width: 100%; text-align: left; border: 0; border-radius: 10px; padding: 12px 40px 12px 14px; font-weight: 800; cursor: pointer; background: var(--tone); color: var(--on, #fff); }
.cargo-drop-btn::after { content: ""; position: absolute; right: 16px; top: 50%; margin-top: -3px; border: 6px solid transparent; border-top-color: currentColor; }
.cargo-drop-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; display: grid; gap: 6px; max-height: 262px; overflow-y: auto; background: #fff; border: 1px solid #e0dbd2; border-radius: 12px; padding: 8px; box-shadow: 0 10px 28px rgba(26, 26, 26, 0.12); }
.cargo-drop-list.hidden { display: none; }
.ship-pick { display: block; width: 100%; text-align: left; border: 2px solid var(--tone); background: #fff; color: var(--tone); border-radius: 8px; padding: 10px 12px; font-weight: 800; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.title { font-family: Georgia, "Times New Roman", serif; font-size: 26px; margin: 0 0 12px; }
.create-split { display: grid; grid-template-columns: minmax(0, 1fr) 50mm 50mm; gap: 12px; align-items: start; }
.create-split.cols-swapped #dayWrap { order: 1; }
.create-split.cols-swapped #favWrap { order: 2; }
.save-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.save-row .btn { min-width: 132px; }
.day-ok { min-height: 0; font-size: 70%; padding: 8px; box-sizing: border-box; border-width: 2px; border-color: #8f8578; }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.col-head .title { margin: 0; }
.col-swap { width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center; border: 1px solid #e0dbd2; border-radius: 6px; background: #fff; color: #0b4f9c; cursor: pointer; flex: 0 0 auto; }
.day-ok .title { font-size: 16px; margin-bottom: 8px; }
.day-ok .col-head .title { margin: 0; }
.day-ok .day-row { padding: 7px 8px; border-radius: 7px; border: 3px solid #6f675e; }
.day-ok .day-row:nth-child(odd) { background: #e7f1fb; }
.day-ok .day-row:nth-child(even) { background: #fff1e0; }
.day-ok .day-row b { font-size: 11px; }
.day-ok .day-carrier, .day-ok .day-code, .day-ok .day-foot { font-size: 11px; }
.day-ok .day-foot { display: block; margin-top: 4px; }
.day-ok .day-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.day-ok .btn { padding: 7px 10px; font-size: 11px; border-radius: 6px; }
.day-ok .btn.slim { padding: 4px 7px; font-size: 10px; }
.day-ok .day-fav { width: 24px; height: 24px; }
.day-ok .day-fav svg { width: 11px; height: 11px; }
.day-list { display: grid; gap: 12px; align-content: start; }
.day-row { display: grid; gap: 2px; border: 1px solid #e0dbd2; border-radius: 10px; padding: 10px 12px; background: #fafaf8; }
.day-row b { font-size: 15px; text-transform: uppercase; }
.day-carrier { font-weight: 800; }
.day-code { font-family: Consolas, ui-monospace, monospace; font-weight: 700; letter-spacing: 0.04em; }
.day-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: #17835e; font-weight: 800; }
.day-actions { display: flex; align-items: center; gap: 6px; }
.day-fav { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; color: #8a8175; }
.day-fav.on { color: #c9a227; border-color: #e2c56a; background: #fff8e6; }
.fav-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #e0dbd2; border-radius: 10px; padding: 8px 10px; background: #fff; }
.fav-row b { display: block; text-transform: uppercase; }
.fav-meta { font-weight: 800; }
.fav-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.recipient { background: #eef5fc; border-color: #8fb4d9; }
.sender { background: #fff6eb; border-color: #e0a86a; }
.hits { border: 1px solid #e8e4dc; background: #fafaf8; border-radius: 6px; max-height: 200px; overflow: auto; }
.hit { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #f0ebe3; padding: 8px 10px; cursor: pointer; }
.hit:hover { background: #eef5fc; }
.qr { display: flex; justify-content: center; background: #fff; border: 1px solid #e0e6e3; border-radius: 6px; padding: 8px; }
.apk-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 12px; }
.apk-side a { font-weight: 800; }
.server-qr { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; background: #fff; border: 1.5px solid #b7d0ea; border-radius: 14px; padding: 12px; }
.server-qr h2 { margin: 0 0 4px; font-size: 16px; color: var(--blue-deep); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cargo-list { display: grid; gap: 12px; }
.cargo-card { background: #fff; border: 1px solid #e0dbd2; border-radius: 16px; padding: 14px; box-shadow: 0 1px 0 rgba(26, 26, 26, 0.03); }
.cargo-card.open { border-color: var(--tone, #b7d0ea); box-shadow: 0 8px 24px rgba(11, 79, 156, 0.08); }
.cargo-top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cargo-mark { width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; flex: 0 0 auto; }
.cargo-meta { flex: 1; min-width: 0; }
.cargo-meta b { display: block; font-size: 16px; }
.cargo-name { display: flex; align-items: center; gap: 10px; }
.cargo-logo { height: 36px; width: auto; max-width: 120px; object-fit: contain; flex: 0 0 auto; }
.paper-sender { font-weight: 800; margin: 4px 0 8px; }
.cargo-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cargo-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid #efeae3; }
.cargo-form label:first-child { margin-top: 0; }
.market-icons { display: flex; gap: 12px; margin-bottom: 12px; }
.market-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 116px; min-height: 104px; border-radius: 16px; border: 2px solid #e4ddd2; background: #fff; font-weight: 700; color: var(--ink); }
.market-icon.on { border-color: var(--tone); box-shadow: 0 8px 24px rgba(11, 79, 156, 0.08); }
.market-mark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tone); color: #fff; font-size: 22px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.check input { width: auto; margin: 0; }
.paper { position: fixed; left: -10000px; top: 0; }
.cucu-slip { background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; width: 170mm; }
.cucu-slip-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cucu-slip-carrier { font-size: 16pt; font-weight: 700; line-height: 1.15; }
.cucu-slip-when { font-size: 11pt; padding-top: 4px; white-space: nowrap; }
.cucu-slip-pay, .cucu-slip-role, .cucu-slip-line { font-size: 11pt; line-height: 1.25; }
.cucu-slip-name { font-size: 14pt; font-weight: 700; line-height: 1.2; }
.cucu-slip-addr { margin-top: 4px; }
.cucu-slip canvas { display: block; margin-top: 8px; }
.cucu-slip-code { font-size: 12pt; font-weight: 700; margin-top: 4px; }
.print-kind { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.yci-label { background: #fff; color: #111; border: 1px solid #d0c8bc; padding: 0.65rem 0.75rem 0.85rem; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; width: var(--slip-w, 100mm); max-width: var(--slip-w, 100mm); box-sizing: border-box; zoom: var(--slip-scale, 1); }
.yci-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.45rem; }
.yci-yk { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.04em; }
.yci-time { font-size: 0.72rem; white-space: nowrap; padding-top: 0.15rem; }
.yci-frame { display: grid; grid-template-columns: 1fr 3.85rem; border: 1.5px solid #111; min-height: 11rem; }
.yci-body { display: flex; flex-direction: column; min-width: 0; }
.yci-block { display: grid; grid-template-columns: 1.1rem 1fr; border-bottom: 1.5px solid #111; }
.yci-block:last-child { border-bottom: 0; flex: 1; }
.yci-gon { min-height: 2.6rem; }
.yci-rail { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center; border-right: 1.5px solid #111; padding: 0.2rem 0; }
.yci-content { padding: 0.35rem 0.45rem; font-size: 0.72rem; line-height: 1.25; }
.yci-gon .yci-content { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; white-space: pre-wrap; }
.yci-name { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 800; text-transform: uppercase; }
.yci-addr, .yci-line, .yci-piece { margin: 0.15rem 0 0; }
.yci-piece { margin-top: 0.55rem; font-weight: 700; }
.yci-vbar { border-left: 1.5px solid #111; display: flex; overflow: hidden; min-height: 11rem; }
.yci-vbar-bc { flex: 1; position: relative; min-width: 0; }
.yci-vbar-rot { position: absolute; left: 50%; top: 50%; width: 10.5rem; height: 1.85rem; margin-left: -5.25rem; margin-top: -0.92rem; transform: rotate(-90deg); display: flex; align-items: center; justify-content: center; }
.yci-vbar-rot canvas, .yci-vbar-rot img { width: 100%; height: 100%; object-fit: contain; }
.yci-vcode { flex: 0 0 1.15rem; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 0.62rem/1.05 ui-monospace, Consolas, monospace; display: flex; align-items: center; justify-content: center; border-left: 1px solid #ddd; }
.yci-hbar { margin-top: 0.65rem; text-align: center; }
.yci-hbar canvas, .yci-hbar img { max-width: 100%; height: auto; }
.yci-hcode { margin: 0.2rem 0 0; font: 700 0.95rem/1 ui-monospace, Consolas, monospace; letter-spacing: 0.08em; }
.yci-free { position: relative; height: var(--slip-h, 150mm); padding: 0; overflow: hidden; }
.yci-part { position: absolute; box-sizing: border-box; overflow: hidden; color: #111; font-size: 12px; line-height: 1.2; background: #fff; }
.yci-part[data-part="title"] .yci-yk { font-size: 18px; }
.yci-part[data-part="when"] { display: flex; align-items: center; justify-content: flex-end; }
.yci-part[data-part="sender"] { display: grid; grid-template-columns: 16px 1fr; border: 1.5px solid #111; }
.yci-part[data-part="sender"] .yci-rail { height: 100%; }
.yci-part[data-part="name"],
.yci-part[data-part="address"],
.yci-part[data-part="phone"],
.yci-part[data-part="place"] { border: 1.5px solid #111; padding: 2px 4px; font-weight: 700; }
.yci-part[data-part="name"] { font-size: 15px; text-transform: uppercase; }
.yci-part[data-part="address"] { white-space: pre-wrap; }
.yci-part[data-part="vbar"] canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.yci-part[data-part="vcode"] { display: flex; align-items: center; justify-content: center; }
.yci-vcode-txt { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; }
.yci-part[data-part="hbar"] { display: flex; align-items: center; }
.yci-part[data-part="hcode"] { display: flex; align-items: center; justify-content: center; font: 700 14px/1 Consolas, ui-monospace, monospace; letter-spacing: 0.06em; }
.slip-stage { position: relative; background: #fff; border: 2px solid #8f8578; margin: 8px 0 12px; touch-action: none; }
.slip-stage .yci-label { width: 100%; max-width: none; height: 100%; border: 0; zoom: 1; }
.slip-stage .yci-part { outline: 1px dashed #0b4f9c; cursor: grab; overflow: visible; }
.slip-grip { position: absolute; width: 10px; height: 10px; background: #0b4f9c; border: 1px solid #fff; z-index: 2; }
.slip-grip.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.slip-grip.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.slip-grip.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.slip-grip.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
@media print {
  #login, #app, #paperPrint, #paperNote { display: none !important; }
  #paper, .paper { position: absolute; left: 0; top: 0; margin: 0; }
  .yci-label { border: 0; width: var(--slip-w, 100mm); max-width: var(--slip-w, 100mm); box-sizing: border-box; }
}
@media (max-width: 700px) {
  .app { padding: 8px; }
  .top-row { flex-direction: column; align-items: stretch; }
  .top-tools { align-self: flex-end; }
  .tab { padding: 8px 10px; font-size: 13px; }
  .grid2, .grid3, .pair, .server-qr, .cargo-line, .create-split, .ship-grid, .note-row { grid-template-columns: 1fr; }
  .ship-grid > .ship-who, .ship-grid > .phone-fit, .ship-grid > .cargo-drop, .ship-grid > .addr-fit, .ship-grid > .loc-stack { grid-column: auto; grid-row: auto; }
  .note-row .save-row { flex-wrap: wrap; }
  .cargo-top { align-items: flex-start; }
  .server-qr { flex-direction: column; align-items: stretch; }
  .line { grid-template-columns: 6px 1fr; }
  .side { justify-items: start; grid-column: 2; }
  input, select, textarea, .btn { font-size: 16px; }
  .btn, .tab, .chip { min-height: 44px; }
}