:root {
  --bg-0: #0a111c;
  --bg-1: #0e1622;
  --bg-2: #131d2c;
  --bg-3: #1a2638;
  --bg-4: #233148;
  --line: #2a3a55;
  --text: #dbe5f4;
  --muted: #8ea0bd;
  --primary: #4a90ff;
  --primary-2: #2f6ee0;
  --primary-soft: #1c2c4a;
  --danger: #e25c6a;
  --danger-soft: #3a1d24;
  --ok: #4dd29c;
  --warn: #f0b549;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-1);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
button { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,255,0.15);
}
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
label > input, label > select, label > textarea {
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.btn:hover { background: var(--bg-4); }
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  font-weight: 600;
}
.btn.primary:hover { background: var(--primary-2); border-color: var(--primary-2); }
.btn.danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.btn.danger:hover { background: var(--danger); color: white; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.icon  { padding: 6px; width: 30px; height: 30px; }
.btn.icon .icon { width: 15px; height: 15px; }
.btn.sq    { padding: 10px; width: auto; aspect-ratio: 1; }
.btn.sq .icon { width: 18px; height: 18px; }
.btn.sq.small-sq { padding: 6px; }
.btn.sq.small-sq .icon { width: 15px; height: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.mobile-only  { display: none !important; }
@media (max-width: 768px) { .mobile-only { display: inline-flex !important; } }

/* ---------- Web Images ---------- */
/* Doc share badge — public link indicator on card */
.doc-share-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  z-index: 2;
  padding: 0;
  transition: transform .1s;
}
.doc-share-badge svg { width: 13px; height: 13px; }
.doc-share-badge:hover { transform: scale(1.15); }

/* Upload progress modal */
.wi-upload-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 8px;
}
.wi-upload-file-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wi-upload-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wi-upload-icon svg { width: 22px; height: 22px; }
.wi-upload-file-text { min-width: 0; }
.wi-upload-filename {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wi-upload-filesize {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.wi-progress-bar-track {
  height: 8px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.wi-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
  border-radius: 999px;
  width: 0%;
  transition: width 0.2s ease;
  position: relative;
  overflow: hidden;
}
.wi-progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  animation: wi-shimmer 1.1s linear infinite;
}
@keyframes wi-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.wi-progress-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.wi-progress-pct {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  min-width: 46px;
  line-height: 1;
}
.wi-progress-detail { flex: 1; }
.wi-progress-eta {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  letter-spacing: .01em;
}
/* Complete state */
.wi-upload-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0 12px;
  text-align: center;
}
.wi-complete-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  animation: wi-pop-in .35s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes wi-pop-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.wi-complete-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.wi-complete-sub {
  font-size: 13px;
  color: var(--muted);
}

/* Floating action button (used by SMD settings) */
.fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 30;
  transition: background .15s, transform .1s;
}
.fab:hover { background: var(--primary-2); }
.fab:active { transform: scale(0.95); }
.fab .icon { width: 22px; height: 22px; }

/* T212 API status indicator */
.t212-status {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow .2s;
  align-self: center;
}
.t212-status.green  { background: #4caf50; box-shadow: 0 0 6px #4caf5099; }
.t212-status.red    { background: #f44336; box-shadow: 0 0 6px #f4433699; cursor: pointer; animation: pulse-red .9s infinite; }
.t212-status.gray   { background: var(--muted); cursor: default; }
.t212-status:hover  { opacity: .85; }
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 4px #f4433699; } 50% { box-shadow: 0 0 10px #f44336cc; } }

/* SMD out-of-stock row tint */
tr.smd-empty td { background: rgba(220,50,50,.07); color: var(--muted); }

.smd-nm-glow {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Projects */

.error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ---------- Login ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, #15233a, #070b13 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.login-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.brand h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .04em;
}
.logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: white;
  box-shadow: var(--shadow);
  padding: 8px;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo.small {
  width: 32px;
  height: 32px;
  font-size: 14px;
  border-radius: 9px;
  padding: 5px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form .btn { margin-top: 4px; }

input[type="date"], input[type="time"] { min-width: 0; }

/* ---------- App shell ---------- */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}
.sidebar {
  width: 240px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 50;
}
.sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: .04em;
}
.apps-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}
.app-link:hover { background: var(--bg-3); color: var(--text); }
.app-link.active {
  background: var(--primary-soft);
  color: var(--text);
  border-left: 3px solid var(--primary);
  padding-left: 9px;
}
.app-link .icon { width: 16px; height: 16px; opacity: .85; }
.app-link.dragging { opacity: .4; }
.app-link.drop-before { box-shadow: 0 -2px 0 var(--primary); }
.app-link.drop-after  { box-shadow: 0  2px 0 var(--primary); }

.user-card {
  border-top: 1px solid var(--line);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--bg-2);
}
.user-card:hover { background: var(--bg-3); }
.user-card .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  flex-shrink: 0;
}
.user-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-card .meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.user-card .meta .name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card .meta .role {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.user-card .meta .role.admin { color: var(--primary); }
.user-card .logout-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.user-card .logout-btn:hover { background: var(--bg-4); color: var(--danger); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
  display: none;
}
.app.menu-open .sidebar-backdrop { display: block; }

.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 60;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

.main {
  flex: 1;
  padding: 24px;
  min-width: 0;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 260px;
    box-shadow: var(--shadow);
  }
  .app.menu-open .sidebar { transform: translateX(0); }
  .main { padding: 64px 16px 24px; }
}

/* ---------- Page header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .02em;
}
.page-header .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.page-header .actions input,
.page-header .actions select,
.page-header .actions .btn {
  height: 40px;
  box-sizing: border-box;
}
.page-header .actions input,
.page-header .actions select {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Tiles / Dashboard ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.tile {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--bg-4); }
.tile .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.tile .value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.tile .unit { color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 4px; }
.tiles.editing .tile {
  border-color: var(--danger);
  background: var(--danger-soft);
  cursor: grab;
}
.tiles.editing .tile:active { cursor: grabbing; }
.tile.dragging { opacity: .4; }
.tile.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.tile.add-tile {
  border: 1px dashed var(--line);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  min-height: 100px;
}
.tile.add-tile:hover { border-color: var(--primary); color: var(--primary); }
.tile-accent { background: var(--primary-soft); border-color: rgba(74,144,255,0.25); }

/* ---------- Dashboard free-positioned grid ---------- */
.tiles.dash-grid {
  display: block;
  position: relative;
  min-height: 200px;
  /* Visible grid backdrop in edit mode. */
  background-image: none;
  background-size: 214px 154px; /* CELL_W + GAP, CELL_H + GAP */
  background-position: 0 0;
}
.tiles.dash-grid.editing {
  background-image:
    linear-gradient(to right,  rgba(74,144,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(74,144,255,0.08) 1px, transparent 1px);
}
.tiles.dash-grid > .tile {
  position: absolute;
  margin: 0;
  min-height: 0 !important;
  overflow: hidden;
  transition: none; /* no transform/border anim during drag */
}
.tiles.dash-grid > .tile.add-tile.dash-empty {
  position: static;
  width: 200px;
  height: 140px;
}
.tiles.dash-grid.editing > .tile { cursor: grab; }
.tiles.dash-grid.editing > .tile:active,
.tiles.dash-grid > .tile.dragging { cursor: grabbing; }
.tiles.dash-grid > .tile.dragging {
  opacity: .85;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  border-color: var(--primary) !important;
}
.tiles.dash-grid > .tile.resizing {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.tile-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  display: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(74,144,255,0.85) 50%);
  border-bottom-right-radius: var(--radius);
  z-index: 3;
}
.tiles.dash-grid.editing .tile-resize { display: block; }
.osvch-supplier-tile { background: var(--primary-soft); border-color: rgba(74,144,255,0.25); border-left: 3px solid var(--primary); min-height: 100px; justify-content: center; }

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: middle;
}
th {
  background: var(--bg-3);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-3); }
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge.admin { background: var(--primary-soft); color: var(--primary); }
.badge.normal { background: var(--bg-4); color: var(--muted); }
.badge.locked { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 768px) {
  table, thead, tbody, tr, td, th { display: block; }
  thead { display: none; }
  tr {
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  td {
    border: none;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow);
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.modal.large { max-width: 760px; }
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.close-x {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
}
.close-x:hover { color: var(--text); }

/* ---------- Profile editor ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.profile-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .profile-grid { grid-template-columns: 1fr; }
}

.avatar-edit {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar-edit .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
}
.avatar-edit .avatar img { width: 100%; height: 100%; object-fit: cover; }

.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 8px 0 4px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* ---------- Documents ---------- */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.doc-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item .size { color: var(--muted); font-size: 12px; }

/* ---------- Toggle switch ---------- */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 0;
  user-select: none;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--bg-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.toggle .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.toggle input:checked + .track {
  background: var(--primary);
  border-color: var(--primary);
}
.toggle input:checked + .track::after {
  transform: translateX(18px);
  background: white;
}
.toggle input:focus-visible + .track {
  box-shadow: 0 0 0 3px rgba(74,144,255,0.3);
}
.toggle.compact { padding: 0; gap: 0; }

/* ---------- Compact app-toggle list (profile / admin app visibility) ---------- */
.app-toggle-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.app-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.app-toggle-row:last-child { border-bottom: none; }
.app-toggle-name { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.app-toggle-name .icon { width: 16px; height: 16px; opacity: .7; }

/* ---------- Sidebar separator ---------- */
.sidebar-separator {
  height: 1px;
  background: var(--line);
  margin: 4px 10px;
  cursor: grab;
  border-radius: 1px;
  flex-shrink: 0;
}
.sidebar-separator.dragging { opacity: .3; }
.sidebar-separator.drop-before { box-shadow: 0 -2px 0 var(--primary); }
.sidebar-separator.drop-after  { box-shadow: 0  2px 0 var(--primary); }

/* ---------- App sort list (manage visible apps dialog) ---------- */
.app-sort-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4px;
  max-height: 55vh;
  overflow-y: auto;
}
.app-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  cursor: default;
  user-select: none;
}
.app-sort-row:last-child { border-bottom: none; }
.app-sort-row.dragging { opacity: .4; }
.app-sort-row.drop-before { box-shadow: 0 -2px 0 var(--primary); }
.app-sort-row.drop-after  { box-shadow: 0  2px 0 var(--primary); }
.app-sort-row.is-hidden { opacity: .45; }
.app-sort-row.is-separator { background: var(--bg-1); }
.drag-handle { cursor: grab; color: var(--muted); display: flex; align-items: center; flex-shrink: 0; }
.drag-handle .icon { width: 16px; height: 16px; }
.app-sort-label { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 14px; }
.app-sort-label .icon { width: 16px; height: 16px; opacity: .7; }
.sep-label { color: var(--muted); font-size: 13px; }
.app-sort-actions { margin-left: auto; }
.icon-btn { padding: 2px 6px; font-size: 15px; line-height: 1; }
.app-sort-locked { font-size: 12px; color: var(--muted); margin-left: auto; padding: 2px 6px; background: var(--bg-3); border-radius: var(--radius-sm); }

/* ---------- Select with custom arrow ---------- */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238ea0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
  cursor: pointer;
}
select option { background: var(--bg-3); color: var(--text); }

/* ---------- Read-only field ---------- */
input[readonly] {
  color: var(--muted);
  background: var(--bg-2);
  cursor: text;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}

/* ---------- File input ---------- */
input[type="file"] {
  padding: 0;
  border: 1px dashed var(--line);
  background: var(--bg-2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  width: 100%;
}
input[type="file"]:hover { border-color: var(--primary); }
input[type="file"]::file-selector-button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 16px;
  margin-right: 14px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: background .15s;
}
input[type="file"]::file-selector-button:hover {
  background: var(--primary-2);
}
input[type="file"]::-webkit-file-upload-button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 16px;
  margin-right: 14px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.status {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}
.status.ok { color: var(--ok); }
.status.error { color: var(--danger); }
.status.busy::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border: 2px solid var(--muted);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -2px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Grouped tile picker */
.picker-group { margin-bottom: 14px; }
.picker-group h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}
.picker-group .picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 4px;
  transition: border-color .15s, background .15s;
}
.picker-group .picker-item:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* ---------- Documents app grid ---------- */
.docs-path-crumb {
  font-size: 0.82rem;
  color: var(--fg-2);
  margin-bottom: 8px;
  padding: 4px 2px;
}
.docs-path-crumb a { color: var(--primary); text-decoration: none; }
.docs-path-crumb a:hover { text-decoration: underline; }
.docs-path-crumb .crumb-sep { color: var(--fg-3); }
.docs-path-crumb .crumb-current { color: var(--fg-1); font-weight: 500; }

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.doc-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s;
  position: relative;
  /* Suppress iOS Safari long-press "share/copy" callout that pops up on tap-hold. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.doc-card:hover { border-color: var(--bg-4); }

.docs-grid.editing .doc-card {
  border-color: var(--danger);
  background: var(--danger-soft);
  cursor: grab;
}
.docs-grid.editing .doc-card:active { cursor: grabbing; }
.doc-card.dragging { opacity: .4; }
.doc-card.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }

/* Ghost cells: empty grid placeholders that preserve user-chosen gaps.
   ALWAYS take grid space, but only visible (dashed grey) in edit mode. */
.doc-card.doc-ghost {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: var(--radius);
  /* No aspect-ratio — that's a hard constraint that prevents grid stretch.
     min-height gives all-ghost (trailing) rows a visible size; mixed rows
     stretch the ghost to match the real folder/file card height via grid's
     default align-items: stretch. */
  min-height: 240px;
  cursor: default !important;
  pointer-events: none;
}
.docs-grid.editing .doc-card.doc-ghost {
  border-color: var(--bg-4) !important;
  border-style: dashed !important;
  opacity: .55;
  pointer-events: auto;
  transition: opacity .15s, border-color .15s, background .15s;
}
/* Only highlight on active drop-target (during drag) — NO :hover, to avoid the
   source slot lighting up after a successful move (cursor stays over it). */
.docs-grid.editing .doc-card.doc-ghost.drop-target {
  opacity: 1;
  border-color: color-mix(in srgb, var(--bg-4) 100%, white 20%) !important;
  background: color-mix(in srgb, var(--bg-3) 40%, transparent) !important;
}
@media (max-width: 768px) {
  .doc-card.doc-ghost { display: none; }
}
/* Prevent the page from scrolling while user drags a card on a touch device. */
.docs-grid.editing .doc-card { touch-action: none; }
/* Drop INTO this folder: glow on the icon area */
.doc-card.drop-into .doc-thumb {
  background: color-mix(in srgb, var(--primary) 35%, transparent) !important;
  box-shadow: 0 0 0 3px var(--primary), 0 0 18px 2px color-mix(in srgb, var(--primary) 55%, transparent);
  transform: scale(1.04);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.doc-card.drop-into .doc-thumb .icon { color: #fff !important; opacity: 1 !important; }

.doc-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.doc-stl-thumb {
  position: absolute;
  inset: 0;
  display: block;
}
.doc-stl-thumb canvas,
.doc-stl-thumb img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }

/* EML preview styles */
.eml-header { padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.eml-subject { font-size: 16px; font-weight: 700; margin-bottom: 8px; word-break: break-word; }
.eml-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.eml-meta .eml-lbl { opacity: .6; }
.eml-body { margin-top: 4px; }
.eml-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; margin: 0; max-height: 60vh; overflow-y: auto; background: var(--bg-3); padding: 12px; border-radius: 8px; font-family: inherit; }
.doc-thumb-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}
.doc-thumb img,
.doc-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.doc-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity .2s;
}
.doc-play-icon .icon {
  width: 44px; height: 44px;
  color: #fff;
  opacity: .85;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.doc-thumb:hover .doc-play-icon { opacity: 0; }

/* Gerber thumbnails & viewers */
.doc-thumb.gerber-thumb { background: #1a2030; }
.gerber-thumb-svg { position: absolute; inset: 4px; display: flex; align-items: center; justify-content: center; }
.gerber-thumb-svg svg { max-width: 100%; max-height: 100%; }
.gerber-loading { opacity: .55; }
.gerber-preview-body { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 75vh; min-height: 0; }
.gerber-preview-stage { flex: 1; min-height: 0; background: #0e1622; border-radius: 8px; padding: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gerber-preview-stage svg { width: 100%; height: 100%; }
.gerber-zip-body { gap: 10px; }
.gerber-zip-tabs { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.doc-file-icon {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--bg-4);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.doc-bottom {
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.doc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.doc-size {
  font-size: 11px;
  color: var(--muted);
}

.doc-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.doc-settings { display: none !important; }
.docs-grid.editing .doc-settings {
  display: inline-flex !important;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.folder-color-presets {
  display: grid;
  grid-template-columns: repeat(8, minmax(18px, 1fr));
  gap: 8px;
  margin-top: 2px;
}
.folder-color-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.32);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.folder-color-swatch:hover {
  transform: scale(1.08);
  border-color: #fff;
}
.folder-color-swatch.selected {
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px var(--primary);
  transform: scale(1.18);
}
.folder-color-preview {
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--line);
  margin: 6px 0 0;
  transition: background 0.15s;
}
.folder-color-preview.no-color {
  background: repeating-conic-gradient(var(--bg-3) 0% 25%, var(--bg-2) 0% 50%) 0 0 / 10px 10px !important;
}
.btn.active {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  border-color: var(--primary);
}

.doc-delete,
.tile-delete {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  background: var(--danger);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .1s;
}
.doc-delete:hover,
.tile-delete:hover { transform: scale(1.15); }
.docs-grid.editing .doc-delete,
.tiles.editing .tile-delete { display: flex; }

@media (max-width: 480px) {
  .docs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ---------- Passwords ---------- */
.pw-list {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.pw-head,
.pw-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 0.9fr 1.6fr 80px;
  gap: 12px;
  padding: 10px 16px;
}

.pw-head { align-items: center; }
.pw-row  { align-items: start; }

.pw-head {
  background: var(--bg-3);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

.pw-row {
  border-top: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
}
.pw-row:hover { background: var(--bg-3); }

.pw-name { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pw-login { color: var(--muted); }
.pw-password-cell {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .06em;
}
.pw-phone { color: var(--muted); }
.pw-notes {
  color: var(--muted);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.pw-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.pw-list.editing .pw-row { cursor: grab; }
.pw-list.editing .pw-row:active { cursor: grabbing; }
.pw-row.dragging { opacity: .4; }
.pw-row.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }

/* Passwords route makes .main non-scrolling so the sticky page header tracks the body scroll. */
body.pw-route .main { overflow: visible; }
.page-header.pw-header-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-1);
  padding: 12px 0;
  margin: -12px 0 12px;
  border-bottom: 1px solid var(--line);
}

.pw-row.pw-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: default;
  background: transparent;
}
.pw-row.pw-separator:hover { background: transparent; }
.pw-separator-line {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}
.pw-separator-title {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 0 8px;
}
.pw-separator-del {
  flex-shrink: 0;
}

/* Per-row eye button: mobile-only (hidden on desktop where the global eye handles reveal) */
.pw-row-eye { display: none; }

/* Mobile: collapsed list — only name + actions visible. Eye expands the row. */
@media (max-width: 768px) {
  .pw-head { display: none; }
  .pw-global-eye { display: none; }
  .pw-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name actions";
    padding: 12px 16px;
    gap: 4px 8px;
    align-items: center;
  }
  .pw-row .pw-name { grid-area: name; }
  .pw-row .pw-actions { grid-area: actions; padding-top: 0; }
  .pw-row .pw-login,
  .pw-row .pw-password-cell,
  .pw-row .pw-phone,
  .pw-row .pw-notes { display: none; }

  .pw-row.expanded {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name actions"
      "login login"
      "pw pw"
      "phone phone"
      "notes notes";
  }
  .pw-row.expanded .pw-login { grid-area: login; display: block; }
  .pw-row.expanded .pw-password-cell { grid-area: pw; display: block; }
  .pw-row.expanded .pw-phone { grid-area: phone; display: block; }
  .pw-row.expanded .pw-notes { grid-area: notes; display: block; }

  .pw-cell::before {
    display: inline;
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
  }
  .pw-name::before { display: none; }

  .pw-row-eye { display: inline-flex; }
}

/* ---------- Trading212 ---------- */
.t212-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.t212-filter .btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.tile.t212-portfolio-tile { background: var(--primary-soft); border-color: rgba(74,144,255,0.25); border-left: 3px solid var(--primary); }
.t212-portfolio-val { color: var(--primary); }

.year-chart {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.year-chart-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 16px;
}
.year-chart-bars {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: 4px;
}
.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 48px;
  flex: 1;
  max-width: 80px;
}
.bar-value {
  font-size: 11px;
  color: var(--muted);
  white-space: normal;
  text-align: center;
  word-break: break-word;
}
.bar-track {
  width: 100%;
  height: 120px;
  background: var(--bg-4);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.bar-fill {
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height .3s ease;
  min-height: 2px;
}
.bar-year {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* URL editor row in admin dialog */
.url-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.url-row:last-child { border-bottom: none; }

/* ---------- Admin URL list page ---------- */
.url-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.url-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .15s;
}
.url-card.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.url-card.dragging { opacity: .4; }
.url-drag {
  color: var(--muted);
  cursor: grab;
  font-size: 18px;
  padding: 8px 4px;
  user-select: none;
  flex-shrink: 0;
}
.url-drag:active { cursor: grabbing; }
.url-fields { flex: 1; min-width: 0; }
.url-card .btn.small { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
/* URL input inside table stretches to fill cell */
td input[type="url"] { width: 100%; min-width: 200px; }

/* ---------- Folder cards in documents ---------- */
.doc-folder-card .doc-thumb { background: var(--primary-soft); }
.doc-folder-card:hover .doc-thumb { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.doc-folder-card.editing { cursor: grab; }
.doc-folder-card.editing:active { cursor: grabbing; }
.doc-folder-card.dragging { opacity: .4; }

/* Back button as drag target */
.doc-back-btn { display: inline-flex; align-items: center; gap: 6px; }
.doc-back-btn.drop-target { outline: 2px dashed var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.shared-back-btn.drop-target { outline: 2px dashed var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ---------- Shared folder public page ---------- */
.shared-page {
  min-height: 100vh;
  padding: 24px;
}
.shared-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.shared-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shared-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-mode {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.shared-mode.edit {
  color: var(--ok);
  border-color: rgba(77,210,156,.45);
  background: rgba(77,210,156,.12);
}
.shared-mode.readonly {
  color: var(--muted);
  border-color: var(--line);
}
.shared-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .shared-page { padding: 16px; }
  .shared-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .shared-title {
    white-space: normal;
    line-height: 1.25;
  }
}

/* ---------- Projects ---------- */
.projects-layout {
  display: flex;
  height: calc(100vh - 112px);
  overflow: hidden;
  margin: -8px -24px -24px;
}
.projects-left {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.projects-search-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.projects-search-bar input { width: 100%; }
.projects-search-bar select { width: 100%; }
.projects-search-bar .btn { white-space: nowrap; }
.proj-add-btns { display: flex; gap: 6px; }
.btn.icon-btn { display: flex; align-items: center; justify-content: center; padding: 0; width: 34px; height: 34px; flex-shrink: 0; }
.btn.icon-btn .icon { width: 17px; height: 17px; }
.projects-list {
  flex: 1;
  overflow-y: auto;
}
.proj-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .1s;
  border-left: 3px solid transparent;
}
.proj-item:hover { background: var(--bg-3); }
.proj-item.active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.proj-item.dragging { opacity: .4; }
.proj-item.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
/* DnD tree indicators */
.proj-dragging { opacity: .35; }
.proj-dnd-before { box-shadow: inset 0 2px 0 var(--primary); }
.proj-dnd-after  { box-shadow: inset 0 -2px 0 var(--primary); }
.proj-dnd-into   { background: var(--primary-soft) !important; outline: 1px solid var(--primary); outline-offset: -1px; }
.proj-item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.proj-item-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.proj-item-name-row .proj-category-badge {
  padding: 1px 7px;
  font-size: 10px;
}
.proj-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.proj-item-meta-part {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.proj-item-meta-sep {
  opacity: 0.5;
}
.proj-item-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.proj-item-content {
  flex: 1;
  min-width: 0;
}

/* Status dot */
@keyframes proj-dot-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.proj-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.proj-status-dot.in-progress {
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34, 197, 94, .7);
  animation: proj-dot-glow 1.8s ease-in-out infinite;
}
.proj-status-dot.waiting {
  background: #f59e0b;
  box-shadow: 0 0 5px rgba(245, 158, 11, .7);
  animation: proj-dot-glow 2.2s ease-in-out infinite;
}
.proj-status-dot.archived {
  background: #3b82f6;
  box-shadow: 0 0 4px rgba(59, 130, 246, .5);
}
.proj-item-inner .proj-status-dot {
  margin-top: 5px;
}
/* Tree action buttons (show on hover) */
.proj-tree-act-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .1s, color .1s;
  line-height: 1;
}
.proj-tree-act-btn svg { width: 12px; height: 12px; }
.proj-tree-act-btn:hover { background: var(--bg-2); color: var(--text); }
.proj-tree-act-btn.danger:hover { color: var(--danger); background: var(--bg-2); }
.proj-item:hover .proj-tree-act-btn,
.proj-folder-header:hover .proj-tree-act-btn {
  display: inline-flex;
}

/* Folder item */
.proj-folder-wrap { border-bottom: none; }
.proj-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: background .1s;
  border-left: 3px solid transparent;
}
.proj-folder-header:hover { background: var(--bg-3); }
.proj-folder-toggle {
  font-size: 10px;
  color: var(--muted);
  width: 12px;
  flex-shrink: 0;
}
.proj-folder-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-folder-acts {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.proj-folder-children { border-left: 2px solid var(--line); margin-left: 18px; }

/* Status row in project detail */
.proj-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 14px;
  flex-wrap: wrap;
}
.proj-status-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}
.proj-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.proj-status-btn:hover { border-color: var(--primary); color: var(--text); }
.proj-status-btn.active {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.projects-right {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-width: 0;
}
.proj-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.proj-detail-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  min-width: 0;
  word-break: break-word;
}
.proj-detail-actions { display: flex; gap: 8px; flex-shrink: 0; }

.proj-info-box {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0 20px;
}

.proj-detail-desc {
  color: var(--text);
  margin: 0;
  line-height: 1.6;
}
.proj-section {
  margin-top: 28px;
}
.proj-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.proj-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}
.proj-files-grid { margin-top: 0; }
.proj-comp-wrap { margin-top: 4px; }

/* Component search dialog */
.proj-comp-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 4px;
}
.proj-comp-row {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 56px auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.proj-comp-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--primary);
}
.proj-comp-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-comp-val  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-comp-stock {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.proj-comp-stock.empty { color: var(--danger); }
.proj-comp-act {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.proj-comp-act input[type="number"] { flex-shrink: 0; }

/* Git URL row */
.proj-git-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.proj-git-prefix {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .05em;
  flex-shrink: 0;
}

.proj-git-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.proj-git-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.proj-git-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.proj-git-copy-btn:hover { background: var(--bg-2); color: var(--text); }

.proj-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.proj-category-badge.clickable { cursor: pointer; }
.proj-category-badge.clickable:hover { filter: brightness(1.1); }
.proj-category-badge-empty {
  background: var(--bg-2);
  color: var(--muted);
  border: 1px dashed var(--line);
}

/* Category drag handle */
.cat-drag-handle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 16px;
  height: 20px;
  flex-shrink: 0;
  cursor: grab;
  opacity: 0.45;
  padding: 2px 1px;
}
.cat-drag-handle::before,
.cat-drag-handle b,
.cat-drag-handle::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}
.cat-drag-handle b { display: block; height: 2px; background: var(--text); border-radius: 1px; font: inherit; }
.cat-edit-row { display: flex; gap: 8px; align-items: center; border-radius: 6px; transition: background .1s; }
.cat-edit-row.drag-over { background: var(--primary-soft); }
.cat-edit-row.cat-row-dragging { opacity: .4; }

/* Category picker popup */
.cat-picker-popup {
  position: fixed;
  z-index: 9999;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 4px;
  min-width: 130px;
}
.cat-picker-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.cat-picker-opt:hover { background: var(--hover); }
.cat-picker-opt.active { color: var(--primary); font-weight: 600; }

.proj-comp-tr.expanded { background: var(--bg-3); }
.proj-comp-editor-row td { padding: 0; background: var(--bg-3); border-top: none; }
.proj-comp-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px dashed var(--line);
}
.proj-comp-editor-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 4px;
}

/* Project component card list */
.pc-table-view { display: block; }
.pc-card-view  { display: none !important; }

@media (max-width: 768px) {
  .pc-table-view { display: none !important; }
  .pc-card-view  { display: flex !important; }
}

.pc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pc-card.expanded { border-color: var(--primary); }
.pc-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.pc-main:hover { background: var(--bg-3); }
.pc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}
.pc-typeval {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-nums {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 13px;
}
.pc-qty { font-weight: 700; color: var(--text); }
.pc-nums-sep { color: var(--muted); }
.pc-stock { color: var(--muted); }
.pc-stock.low { color: var(--danger); font-weight: 600; }
.pc-del { flex-shrink: 0; }
.pc-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
}
.pc-editor-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}

.pcb-counter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 10px 4px 4px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.pcb-counter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcb-counter-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.pcb-counter-value {
  font-size: 18px;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
  line-height: 1;
}
.pcb-counter-value.pcb-zero { color: var(--danger); }
.pcb-counter-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.proj-mobile-back { display: none; }

/* Projects mobile */
@media (max-width: 768px) {
  .projects-layout {
    flex-direction: column;
    margin: -8px -16px -24px;
    height: calc(100vh - 112px);
    overflow: hidden;
  }
  .projects-left {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: none;
    max-height: none;
    flex: 1;
  }
  .projects-right {
    display: none;
  }
  .projects-layout.mobile-detail .projects-left {
    display: none;
  }
  .projects-layout.mobile-detail .projects-right {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 12px 16px 24px;
    overflow-y: auto;
    background: var(--bg-1);
    z-index: 100;
  }
  .proj-mobile-back {
    display: flex;
    margin-bottom: 12px;
  }
  .proj-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .proj-detail-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .proj-section {
    margin-top: 20px;
  }
  .proj-info-box {
    padding: 12px;
  }
  .fab {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 16px;
  }
  /* Components table - make scrollable on mobile */
  .proj-comp-wrap .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .proj-comp-wrap table {
    min-width: 650px;
  }
  .proj-comp-wrap table th,
  .proj-comp-wrap table td {
    white-space: nowrap;
    padding: 10px 12px;
  }
}

/* ---------- Notes ---------- */
.notes-layout {
  display: flex;
  height: calc(100vh - 112px);
  overflow: hidden;
  margin: -8px -24px -24px;
}
.notes-left {
  width: 300px;
  min-width: 300px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notes-search-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.notes-search-bar input { width: 100%; }
.notes-search-bar .btn { white-space: nowrap; }
.notes-list {
  flex: 1;
  overflow-y: auto;
}
.note-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .1s;
  border-left: 3px solid transparent;
}
.note-item:hover { background: var(--bg-3); }
.note-item.active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.note-item.dragging { opacity: .4; }
.note-item.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.note-item-title {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.note-item-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-item-date { flex-shrink: 0; opacity: .8; }
.note-item-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.notes-right {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.note-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.note-detail-date {
  font-size: 12px;
  color: var(--muted);
}
.note-title-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  padding: 0;
  margin: 0 0 4px 0;
  width: 100%;
  font-family: inherit;
}
.note-title-input::placeholder { color: var(--muted); opacity: .6; }
.note-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  margin: 2px 0 12px;
}
.note-tool-select {
  width: auto;
  min-width: 104px;
  padding: 7px 10px;
  font-size: 13px;
}
.note-tool-btn {
  min-width: 44px;
  border-color: var(--line);
}
.note-tool-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.note-tool-btn.mixed {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.note-tool-btn.mixed::after {
  content: "…";
  margin-left: 2px;
  color: var(--primary);
  font-weight: 700;
}
.note-tool-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.note-tool-speak .icon { width: 16px; height: 16px; }

/* Note themes — only the editor textbox, surrounding chrome stays default */
body.notes-theme-light .note-editor {
  background: #ffffff;
  color: #111111;
  border-color: #d0d3d8;
}
body.notes-theme-light .note-editor:focus {
  box-shadow: 0 0 0 3px rgba(74,144,255,0.18);
  border-color: var(--primary);
}
body.notes-theme-orange .note-editor {
  background: #fff4d6;
  color: #c2410c;
  border-color: #f5d28a;
}
body.notes-theme-orange .note-editor:focus {
  box-shadow: 0 0 0 3px rgba(234,88,12,0.18);
  border-color: #ea580c;
}

/* Theme toggle button — matches .btn.small height */
.notes-theme-toggle {
  padding: 6px 8px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notes-theme-toggle .icon { width: 14px; height: 14px; }
.notes-theme-toggle[data-theme="dark"] .icon { color: #b083f0; }
.notes-theme-toggle[data-theme="light"] .icon { color: #f1c40f; }
.notes-theme-toggle .notes-theme-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ea580c;
}
.notes-theme-toggle[data-theme="dark"] { border-color: #b083f0; }
.notes-theme-toggle[data-theme="light"] { border-color: #f1c40f; }
.notes-theme-toggle[data-theme="orange"] { border-color: #ea580c; }
.note-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 14px 16px;
  width: 100%;
  flex: 1;
  min-height: 300px;
  overflow-y: auto;
  outline: none;
  line-height: 1.35;
  font-size: 16px;
}
.note-editor:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,144,255,0.15);
}
.note-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}
.note-editor p { margin: 0; }
.note-editor h2,
.note-editor h3,
.note-editor blockquote,
.note-editor ul,
.note-editor ol {
  margin: 0 0 6px;
}
.note-editor div { margin: 0; }
.note-editor h2 {
  font-size: 34px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.note-editor h2.note-fold-heading {
  position: relative;
  padding-left: 18px;
  cursor: pointer;
}
.note-editor h2.note-fold-heading::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 2px;
  color: #88a7d8;
  font-size: 14px;
  font-weight: 700;
  transition: transform .15s;
}
.note-editor h2.note-fold-heading.collapsed::before {
  transform: rotate(90deg);
}
.note-editor .note-fold-hidden {
  display: none !important;
}
.note-editor h3 {
  font-size: 24px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: .96;
}
.note-editor blockquote {
  margin-left: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--primary);
  color: #bcd4ff;
  background: rgba(74, 144, 255, 0.08);
  border-radius: 8px;
}

.note-editor ul.note-checklist {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.note-editor ul.note-checklist li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 2px;
  line-height: 1.28;
}
.note-editor ul.note-checklist li input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  aspect-ratio: 1 / 1;
  margin-top: 0;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #6f87b0;
  border-radius: 999px;
  background: transparent;
  display: inline-grid;
  place-content: center;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.note-editor ul.note-checklist li input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  display: block;
  margin-top: -1px;
  transform: rotate(-45deg);
  transform-origin: center;
}
.note-editor ul.note-checklist li input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.2);
}
.note-editor ul.note-checklist li input[type="checkbox"]:checked::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}
.note-editor ul.note-checklist li span {
  flex: 1;
  min-width: 0;
}
.note-editor ul.note-checklist li.done span {
  text-decoration: none;
  color: inherit;
}

/* Form inline category picker */
.form-cat-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.form-cat-opt {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: border-color .12s, color .12s, background .12s;
}
.form-cat-opt:hover { border-color: var(--primary); color: var(--primary); }
.form-cat-opt.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* ── Mobile notes ────────────────────────────────── */
.note-mobile-back { display: none; }
.note-mobile-bar { display: none; }
.note-toolbar-mob-wrap { display: none; }
.note-toolbar-fab { display: none; }

@media (max-width: 768px) {
  .notes-layout {
    margin: -8px -16px -24px;
  }
  .notes-left {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: none;
    max-height: none;
  }
  .notes-right {
    padding: 16px;
    display: none;
    width: 100%;
  }
  .notes-layout.mobile-detail .notes-left { display: none; }
  .notes-layout.mobile-detail .notes-right {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 12px 16px 0;
    overflow: hidden;
    background: var(--bg-1);
    z-index: 100;
  }
  .note-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
  }
  .note-mobile-acts { display: flex; gap: 6px; }
  .note-editor-mobile {
    flex: 1;
    overflow-y: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 12px 4px 100px;
    background: transparent;
  }
  .note-toolbar-mob-wrap {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    z-index: 201;
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .note-toolbar-mob-wrap.open { transform: translateY(0); }
  .note-toolbar-mob-wrap .note-toolbar {
    border: none;
    border-radius: 0;
    background: transparent;
    margin: 0;
    gap: 6px;
    padding: 10px 12px;
  }
  .note-toolbar-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px; left: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    z-index: 202;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    transition: bottom .25s ease, background .15s, color .15s, border-color .15s;
  }
  .note-toolbar-fab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    bottom: calc(var(--mob-toolbar-h, 58px) + 20px);
  }
  .note-toolbar-fab svg { width: 18px; height: 18px; }
  .note-tool-select { min-width: 94px; font-size: 12px; padding: 6px 8px; }
  .note-tool-btn { padding: 6px 8px; }
}

/* ---------- Tools ---------- */
.tools-layout {
  display: flex;
  height: calc(100vh - 112px);
  overflow: hidden;
  margin: -8px -24px -24px;
}
.tools-left {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tools-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.tool-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .1s;
  border-left: 3px solid transparent;
  user-select: none;
}
.tool-item:hover { background: var(--bg-3); }
.tool-item.active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.tool-item.dragging { opacity: .4; }
.tool-item.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.tool-item svg.icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.tool-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tools-right {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  min-width: 0;
}
.tool-detail-header { margin-bottom: 16px; }
.tool-detail-header h3 { margin: 0; }
.tool-desc { color: var(--muted); margin: 0 0 16px; font-size: 13px; }
.tool-body { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.tool-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-row > input,
.tool-row > select,
.tool-row > textarea {
  width: 100%;
  font-family: inherit;
}
.tool-row textarea { resize: vertical; min-height: 60px; }
.tool-row-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.tool-row-hint {
  font-size: 11px;
  color: var(--muted);
  opacity: .8;
}
.tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tool-status {
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
.tool-error {
  background: rgba(220, 60, 60, .15);
  color: #ff8080;
  border: 1px solid rgba(220, 60, 60, .35);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.tool-qr-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-qr-preview {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}
.tool-food-people {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-food-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}
.food-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.food-qr-item img {
  width: 140px;
  height: 140px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
  border-radius: 6px;
  transition: box-shadow .15s;
}
.food-qr-item img:hover { box-shadow: 0 0 0 2px var(--primary); }
.food-qr-label { text-align: center; }
.food-qr-name { font-size: 13px; font-weight: 600; }
.food-qr-price { font-size: 12px; color: var(--muted); }
.food-qr-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  padding: 8px 0;
}
.tool-enc-mode {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.enc-mode-btn { opacity: .6; }
.enc-mode-btn.active { opacity: 1; background: var(--primary); color: #fff; border-color: var(--primary); }
/* Split layout (form left, preview right) */
.tool-body.tool-body-split {
  flex-direction: row;
  align-items: flex-start;
  max-width: none;
  gap: 32px;
}
.tool-form-col {
  flex: 0 0 360px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-preview-col {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.tool-qr-preview img {
  max-width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}
/* Food row: name + price inputs + toggle + remove button */
.tool-food-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.tool-food-row .toggle {
  padding: 0;
  white-space: nowrap;
  font-size: 13px;
}
.tool-mobile-bar { display: none; }
@media (max-width: 900px) {
  .tool-body.tool-body-split {
    flex-direction: column;
  }
  .tool-form-col { flex: none; width: 100%; min-width: 0; }
}

@media (max-width: 768px) {
  .tools-layout { margin: -8px -16px -24px; }
  .tools-left {
    width: 100%;
    min-width: 0;
    border-right: none;
  }
  .tools-right {
    padding: 16px;
    display: none;
    width: 100%;
  }
  .tools-layout.mobile-detail .tools-left { display: none; }
  .tools-layout.mobile-detail .tools-right {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 12px 16px 24px;
    overflow-y: auto;
    background: var(--bg-1);
    z-index: 100;
  }
  .tool-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .tool-mobile-title {
    font-size: 16px;
    font-weight: 600;
  }
  .tool-food-row {
    grid-template-columns: 1fr 1fr auto auto;
  }
}

/* ── YouTube download progress ─────────────────────────────────────────── */
.yt-progress {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.yt-bar-track {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.yt-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.yt-bar-fill.yt-bar-pulse {
  width: 100% !important;
  background: linear-gradient(90deg, var(--primary) 0%, #7ab4ff 50%, var(--primary) 100%);
  background-size: 200% 100%;
  animation: yt-pulse 1.4s linear infinite;
}
.yt-bar-fill.yt-bar-done {
  width: 100% !important;
  background: #22c55e;
  transition: none;
}
@keyframes yt-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.yt-stats-row {
  display: grid;
  grid-template-columns: 52px 110px 70px;
  gap: 12px;
  margin-top: 8px;
  align-items: center;
}
.yt-stat {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-pct {
  font-weight: 600;
  color: var(--text);
}
.yt-phase {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}




/* ── Music app ──────────────────────────────────────────────────────────── */
.music-layout {
  display: flex;
  height: calc(100vh - 112px);
  overflow: hidden;
  margin: -8px -24px -24px;
}
body.has-music-player .music-layout {
  height: calc(100vh - 112px - 76px);
}
.music-left {
  width: 320px;
  min-width: 280px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-1);
}
.music-search-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.music-search-bar input { width: 100%; }
.music-search-bar .btn { white-space: nowrap; }
.music-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  touch-action: pan-y;
}
.playlist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background .15s;
  user-select: none;
}
.playlist-item:hover { background: var(--bg-3); }
.playlist-item.selected {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.playlist-item.dragging { opacity: .4; }
.playlist-item.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.playlist-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-count {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.playlist-item.selected .playlist-count {
  background: var(--primary);
  color: #fff;
}

.music-detail {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 24px;
  min-width: 0;
}
.music-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.music-detail-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
  padding: 2px 4px;
  margin-left: -4px;
  border-radius: 6px;
  transition: background .15s;
}
.music-detail-title:hover {
  background: var(--bg-3);
}
.music-detail-sub {
  font-size: 13px;
  color: var(--muted);
}
.music-detail-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.music-upload-area:not(:empty) {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.song-rows {
  display: flex;
  flex-direction: column;
}
.song-row {
  display: grid;
  grid-template-columns: 32px 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s;
  user-select: none;
}
.song-row:hover { background: var(--bg-3); }
.song-row.dragging { opacity: .4; }
.song-row.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.song-row.playing { background: var(--primary-soft); }
.song-row.playing .song-row-num,
.song-row.playing .song-row-title { color: var(--primary); }
.song-row-num {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.song-row-cover {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}
.song-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.song-row-cover .icon { width: 20px; height: 20px; }
.song-row-info { min-width: 0; }
.song-row-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-row-artist {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-row-dur {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.song-row-acts {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.song-row-acts .btn { padding: 4px 8px; font-size: 12px; }

/* ── Download / pending / failed states ───────────────────────────────── */
.song-row.pending,
.song-row.downloading { opacity: .85; }
.song-row.pending,
.song-row.downloading,
.song-row.failed { cursor: default; }
.song-row.failed .song-row-title { color: var(--danger); }
.song-row-dlwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 200px;
}
.song-row-bar {
  width: 120px;
  height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.song-row-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2, var(--primary)));
  transition: width .3s ease;
}
.song-row-bar-pct {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.song-row-x {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.song-row-x:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.song-row-warn {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.song-row-warn:hover { background: var(--danger); color: #fff; }

/* ── Equalizer (settings modal) ───────────────────────────────────────── */
.music-eq-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  padding: 12px 4px;
  background: var(--bg-2);
  border-radius: 8px;
  margin-top: 4px;
  overflow-x: auto;
}
.music-eq-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 28px;
}
.music-eq-slider-wrap {
  width: 28px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}
.music-eq-val {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.music-eq-label {
  font-size: 10px;
  color: var(--muted);
}
.music-eq-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 22px;
  transform: rotate(-90deg);
  cursor: pointer;
  accent-color: var(--primary);
  touch-action: none;
  flex-shrink: 0;
}

/* ── Floating player (compact, pill-shaped) ───────────────────────────── */
.music-player {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 32px));
  z-index: 200;
  background: linear-gradient(180deg, rgba(20,30,48,0.96), rgba(14,22,34,0.96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  display: grid;
  grid-template-columns: 40px minmax(120px, 1.2fr) minmax(180px, 2fr) auto;
  gap: 12px;
  align-items: center;
  height: 52px;
}
.mp-cover {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.mp-cover img { width: 100%; height: 100%; object-fit: cover; }
.mp-cover .icon { width: 18px; height: 18px; }
.mp-info { min-width: 0; padding: 0 4px; }
.mp-title {
  font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-artist {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.mp-progress-wrap {
  display: flex; align-items: center; gap: 8px;
}
.mp-time-cur, .mp-time-total {
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 34px; text-align: center;
}
.mp-seek {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: var(--bg-4);
  cursor: pointer;
  outline: none;
}
.mp-seek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--bg-4);
}
.mp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mp-seek::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff; cursor: pointer;
}
.mp-seek:disabled { opacity: .5; cursor: default; }
.mp-controls { display: flex; gap: 2px; align-items: center; }
.mp-btn {
  background: transparent;
  color: var(--text);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  position: relative;
}
.mp-btn:hover { background: var(--bg-3); }
.mp-btn.mp-play {
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  width: 34px; height: 34px;
}
.mp-btn.mp-play:hover { background: var(--primary-2); }
.mp-btn.mp-loop.active { color: var(--primary); }
.mp-btn.mp-loop.loop-once::after {
  content: "1";
  position: absolute;
  top: 1px; right: 3px;
  font-size: 8px;
  font-weight: 700;
  color: var(--primary);
  background: var(--bg-1);
  border-radius: 50%;
  width: 10px; height: 10px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

@media (max-width: 900px) {
  .music-layout {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 112px);
  }
  body.has-music-player .music-layout {
    height: auto;
    padding-bottom: 110px;
  }
  .music-left {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 45vh;
  }
  .music-detail { padding: 16px; }
  .music-player {
    width: calc(100vw - 16px);
    border-radius: 18px;
    height: auto;
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "cover info ctrl"
      "prog prog prog";
    gap: 6px 10px;
    padding: 8px 12px 10px;
    bottom: 8px;
  }
  .mp-cover { grid-area: cover; }
  .mp-info { grid-area: info; padding: 0; }
  .mp-controls { grid-area: ctrl; }
  .mp-progress-wrap { grid-area: prog; }
  .mp-btn { width: 30px; height: 30px; font-size: 12px; }
  .mp-btn.mp-play { width: 32px; height: 32px; }
}

/* ── Music: mobile detail mode + back button ─────────────────────────── */
.music-back {
  display: none;
  margin-bottom: 12px;
}
.music-back .icon { width: 18px; height: 18px; }

/* ── Music: equalizer bars (used in collapsed player) ────────────────── */
.mp-bars {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.mp-bars span {
  display: block;
  width: 3px;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(0.25);
  transition: transform .2s;
}
.music-player.is-playing .mp-bars span {
  animation: mp-bar 0.9s ease-in-out infinite;
}
.music-player.is-playing .mp-bars span:nth-child(1) { animation-delay: 0s; }
.music-player.is-playing .mp-bars span:nth-child(2) { animation-delay: 0.18s; }
.music-player.is-playing .mp-bars span:nth-child(3) { animation-delay: 0.36s; }
.music-player.is-playing .mp-bars span:nth-child(4) { animation-delay: 0.54s; }
@keyframes mp-bar {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

/* ── Music: collapsed (mini) player on the right ─────────────────────── */
/* Collapsed widget sits to the LEFT of where the .fab settings icon lives
   (right: 24px, width: 52px) so it never overlaps the settings button on
   pages that have one (SMD, etc.). On pages without a FAB this just leaves
   a small gap in the corner. */
.music-player.collapsed {
  left: auto;
  right: 24px;
  bottom: 26px;
  transform: none;
  width: auto;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-template-areas: "bars play";
  gap: 6px;
  padding: 6px 8px 6px 14px;
  height: 48px;
  border-radius: 999px;
}
body.has-fab .music-player.collapsed {
  right: calc(24px + 52px + 14px);
}
.music-player.collapsed .mp-cover,
.music-player.collapsed .mp-info,
.music-player.collapsed .mp-progress-wrap,
.music-player.collapsed .mp-loop,
.music-player.collapsed .mp-prev,
.music-player.collapsed .mp-next,
.music-player.collapsed .mp-stop {
  display: none;
}
.music-player.collapsed .mp-controls {
  grid-area: play;
  gap: 0;
}
.music-player.collapsed .mp-bars {
  display: flex;
  grid-area: bars;
}
.music-player.collapsed .mp-btn.mp-play {
  width: 36px; height: 36px;
}

@media (max-width: 900px) {
  .music-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
  }
  .music-layout {
    margin: 0 -16px -24px;
    overflow-x: hidden;
  }
  .music-layout.mobile-detail .music-left { display: none; }
  .music-layout.mobile-detail .music-detail {
    width: 100%;
    flex: 1;
  }
  .music-layout:not(.mobile-detail) .music-detail { display: none; }
  .music-layout:not(.mobile-detail) .music-left {
    width: 100%;
    max-height: none;
    border-bottom: none;
    flex: 1;
  }
  /* Collapsed player ve stejné výšce jako FAB */
  .music-player.collapsed {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 16px;
  }
  body.has-fab .music-player.collapsed {
    right: calc(16px + 52px + 14px);
  }
}

/* ============================================================================
   Auto app
   ============================================================================ */
.auto-wrap { display: flex; flex-direction: column; gap: 14px; }

.auto-topbar { display: flex; gap: 8px; align-items: center; }
.auto-carbtn {
  flex: 1; min-height: 44px; font-size: 16px; font-weight: 600;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 14px; text-align: left;
}
.auto-carbtn:hover { border-color: var(--primary); }

.auto-tiles { display: flex; flex-direction: column; gap: 10px; }
.auto-tile-big { padding: 18px 20px; }
.auto-tile-big .label { font-size: 12px; }
.auto-tile-big .value { font-size: 32px; font-weight: 700; }
.auto-tiles-row {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.auto-tile-small { padding: 10px 12px; cursor: pointer; transition: transform .1s; }
.auto-tile-small:hover { transform: translateY(-1px); }
.auto-tile-small .label { font-size: 11px; }
.auto-tile-small .value { font-size: 16px; font-weight: 600; }
.auto-tile-active { background: var(--bg-3); border-color: var(--primary); }

.auto-record {
  width: 100%; min-height: 52px; font-size: 16px; font-weight: 600;
  border-radius: 12px;
}

.auto-list { display: flex; flex-direction: column; gap: 6px; }
.auto-row {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; transition: background .1s;
}
.auto-row:hover { background: var(--bg-3); }
.auto-row-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.auto-row-date { font-size: 12px; color: var(--muted); min-width: 70px; }
.auto-row-title { font-weight: 600; flex: 1; }
.auto-row-body { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-top: 2px; padding-left: 80px; }
.auto-row-detail { font-size: 12px; color: var(--muted); }
.auto-row-amt { font-weight: 600; }
.auto-amt-pos  { color: #10b981; }
.auto-amt-neg  { color: #ef4444; }
.auto-amt-blue { color: #3b82f6; }
.auto-row-purchase { border-left: 3px solid #84cc16; cursor: default; }
.auto-row-purchase:hover { background: var(--bg-2); }
.form-sep { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
@media (max-width: 480px) {
  .auto-row-body { padding-left: 0; }
}

/* Car picker */
.auto-carlist { display: flex; flex-direction: column; gap: 6px; }
.auto-carlist-row {
  display: flex; gap: 6px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px;
}
.auto-carlist-row.active { border-color: var(--primary); }
.auto-carpick { flex: 1; text-align: left; font-weight: 600; padding: 10px; }

/* Editor */
.auto-form .auto-form-sub { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.auto-cat-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
.auto-cat-btn {
  background: var(--bg-2); border: 2px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px; font-weight: 600; cursor: pointer;
  border-left-width: 4px; border-left-color: var(--cat, var(--line));
}
.auto-cat-btn:hover { border-color: var(--cat, var(--primary)); }
.auto-cat-btn.active { background: var(--bg-3); border-color: var(--cat, var(--primary)); }

.auto-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.auto-chip {
  background: var(--bg-2); border: 2px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 500;
}
.auto-chip.active { background: var(--cat, var(--primary)); border-color: var(--cat, var(--primary)); color: #fff; }

.auto-toggle { display: flex; gap: 0; }
.auto-toggle-btn {
  flex: 1; padding: 10px; background: var(--bg-2); border: 2px solid var(--line);
  color: var(--muted); cursor: pointer; font-weight: 600;
}
.auto-toggle-btn:first-child { border-radius: 8px 0 0 8px; }
.auto-toggle-btn:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.auto-toggle-btn.neg.active { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #ef4444; }
.auto-toggle-btn.pos.active { background: rgba(16,185,129,0.15); border-color: #10b981; color: #10b981; }

.auto-hint { font-size: 12px; color: var(--muted); padding: 4px 0; }

.auto-svc-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Auto: settings rows (name full row, intervals 2-col) ── */
.auto-svc-row { display: flex; flex-direction: column; gap: 8px; }
.auto-svc-name { display: flex; flex-direction: column; gap: 4px; }
.auto-svc-int { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auto-svc-int label { display: flex; flex-direction: column; gap: 4px; }
.auto-svc-acts { display: flex; gap: 6px; margin-top: 4px; }

/* ── Auto: car avatar + small car-select button in pageHeader ── */
.auto-car-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-3); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; overflow: hidden; flex-shrink: 0;
}
.auto-car-avatar.lg { width: 40px; height: 40px; font-size: 16px; }
.auto-car-avatar img { width: 100%; height: 100%; object-fit: cover; }
.auto-carbtn-sm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 13px;
}
.auto-rec-sm { padding: 6px 12px; font-size: 13px; }

/* ── Auto: car icon upload area in picker ── */
.auto-car-iconwrap { cursor: pointer; display: inline-flex; }

/* ── Auto: fuel-price card (top of overview) ── */
.auto-fuelcard {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; cursor: pointer;
  transition: transform .1s, border-color .15s;
}
.auto-fuelcard:hover { border-color: var(--primary); }
.auto-fuelcard:active { transform: scale(0.99); }
.auto-fuelcard-l { display: flex; flex-direction: column; gap: 2px; }
.auto-fuelcard-label { font-size: 12px; color: var(--muted); }
.auto-fuelcard-value { font-size: 22px; font-weight: 700; }
.auto-fuelcard-age { font-size: 11px; color: var(--muted); }
.auto-fuelcard-r { display: flex; align-items: center; }
.auto-fuelcard-refresh { font-size: 22px; color: var(--muted); }

/* ── Refresh spin animation (used by .auto-spin on cards/tiles) ── */
@keyframes auto-spin-kf { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes auto-pulse-kf {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.auto-spin { animation: auto-pulse-kf .9s ease-out; position: relative; }
.auto-spin::after {
  content: "↻";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  animation: auto-spin-kf .8s linear infinite;
  pointer-events: none;
  z-index: 5;
}
.auto-spin .auto-fuelcard-refresh { animation: auto-spin-kf .8s linear infinite; display: inline-block; }
.auto-spin .value, .auto-spin .label { opacity: 0.35; transition: opacity .15s; }

/* ── Dashboard: fuel tile color theme ── */
.tile-fuel { cursor: pointer; }
.tile-fuel-diesel { background: #111418; color: #fff; border-color: #2a2f36; }
.tile-fuel-diesel .label, .tile-fuel-diesel .value { color: #fff; }
.tile-fuel-benzin { background: #14532d; color: #fff; border-color: #166534; }
.tile-fuel-benzin .label, .tile-fuel-benzin .value { color: #fff; }

/* ── Fuel history modal ── */
.fuel-hist-body { display: flex; flex-direction: column; gap: 14px; }
.fuel-hist-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.fuel-hist-tab {
  padding: 5px 13px; border-radius: 6px; border: 1px solid #334155;
  background: #1e293b; color: #94a3b8; cursor: pointer; font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.fuel-hist-tab.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.fuel-hist-tab:hover:not(.active) { background: #334155; color: #e2e8f0; }
.fuel-hist-chart { min-height: 160px; }
.fuel-hist-ranges { display: flex; gap: 8px; flex-wrap: wrap; }
.fuel-hist-custom {
  display: none; gap: 10px; align-items: center; flex-wrap: wrap;
}
.fuel-hist-custom input[type="date"] {
  padding: 5px 10px; border-radius: 6px; border: 1px solid #334155;
  background: #1e293b; color: #e2e8f0; font-size: 13px;
}
.fuel-hist-custom-lbl { color: #94a3b8; font-size: 13px; }
.fuel-hist-empty, .fuel-hist-loading {
  text-align: center; padding: 40px 20px; color: #64748b; font-size: 14px;
}
.line-chart-tooltip {
  position: absolute; background: #1e293b; border: 1px solid #334155;
  border-radius: 6px; padding: 6px 10px; pointer-events: none;
  z-index: 10; text-align: center; white-space: nowrap;
}
.line-chart-tooltip-val { font-size: 14px; font-weight: 600; color: #e2e8f0; line-height: 1.2; }
.line-chart-tooltip-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.tile-graph-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0.28;
  pointer-events: none;
  color: #94a3b8;
  line-height: 0;
}
.tile-graph-hint .icon { width: 13px; height: 13px; stroke-width: 2; }
.tile:hover .tile-graph-hint { opacity: 0.55; }
.tile-config {
  display: none;
  position: absolute;
  top: 6px;
  right: 40px;
  width: 28px;
  height: 28px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .1s, background .15s;
  padding: 0;
}
.tile-config:hover { transform: scale(1.15); background: var(--primary); color: #fff; }
.tile-config svg { width: 14px; height: 14px; }
.tiles.editing .tile-config { display: inline-flex; }

/* ── Auto: 2-col area (entries left, upcoming service right) ── */
.auto-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 14px; align-items: start; }
.auto-col-sep { background: var(--line); align-self: stretch; }

/* ── Auto: Top trio of equal tiles (Celkem / Nafta / Nájezd) ── */
.auto-top3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.auto-top-tile {
  padding: 14px 14px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.auto-top-tile .label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.auto-top-tile .value { font-size: 22px; font-weight: 700; }
.auto-top-fuel { cursor: pointer; }
.auto-top-fuel:hover { border-color: var(--primary); }
.auto-top-fuel-age { font-size: 10px; color: var(--muted); margin-top: 2px; }
.auto-top-mileage .value { display: flex; align-items: baseline; gap: 4px; }
.auto-mileage-val input { width: 70px; font-size: 22px; font-weight: 700; padding: 4px 6px; }
.auto-mileage-unit { font-size: 12px; color: var(--muted); }
.tile.auto-top-total {
  background: var(--primary-soft);
  border-color: rgba(74,144,255,0.25);
  border-left: 3px solid var(--primary);
}
.auto-top-total .label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.auto-top-total .value { color: var(--primary); font-size: 32px; }
@media (max-width: 600px) {
  .auto-top3 { grid-template-columns: 1fr; }
  .auto-top-tile { min-height: 64px; }
}

/* Inline gear inside a tile (top right corner) */
.tile-config-inline {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.tile-config-inline:hover { background: var(--primary); color: #fff; }
.tile-config-inline svg { width: 12px; height: 12px; }

/* Separator below small tiles row */
.auto-sep { height: 0; border-top: 1px solid var(--line); margin: 8px 0 0; }
.auto-tiles-sep { border-top-width: 2px; margin-bottom: 8px; }

/* Push upcoming column down 20px */
.auto-cols .auto-upcoming { margin-top: 20px; }

/* Mobile: hide upcoming column, show as popup via header button */
.auto-upcoming-mbtn { display: none; padding: 6px 10px; font-size: 13px; }
@media (max-width: 800px) {
  .auto-cols { grid-template-columns: 1fr; }
  .auto-cols .auto-upcoming { display: none; }
  .auto-col-sep { display: none; }
  .auto-upcoming-mbtn { display: inline-flex; }
}
.auto-year-sep {
  font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 1px;
  padding: 10px 4px 4px; border-top: 1px solid var(--border); margin-top: 6px;
}
.auto-year-sep:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ── Auto: upcoming service column ── */
.auto-upcoming { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.auto-upcoming-h { font-weight: 700; margin-bottom: 8px; }
.auto-upcoming-list { display: flex; flex-direction: column; gap: 6px; }
.auto-up-row { padding: 8px 10px; border-radius: 8px; background: var(--bg-3); border-left: 3px solid var(--border); }
.auto-up-row.sev-warn { border-left-color: #f87171; background: rgba(248,113,113,0.12); }
.auto-up-row.sev-due  { border-left-color: #ef4444; background: rgba(239,68,68,0.18); color: #fca5a5; }
.auto-up-name { font-weight: 600; font-size: 13px; }
.auto-up-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.auto-up-row.sev-due .auto-up-detail { color: #fca5a5; }

/* ── Auto: current mileage bar at top of overview ── */
.auto-mileagebar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
}
.auto-mileagebar-lbl { font-size: 13px; color: var(--muted); }
.auto-mileagebar input { width: 100px; }
.auto-mileagebar-unit { color: var(--muted); font-size: 13px; }

/* ── Auto: service item grid selector (in entry editor) ── */
.auto-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.auto-svc-pick {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 8px; font-size: 13px; cursor: pointer; text-align: center;
}
.auto-svc-pick:hover { border-color: var(--primary); }
.auto-svc-pick.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Dashboard: service tile (wide, multi-row) ── */
.tile-wide { grid-column: span 2; }
@media (max-width: 700px) { .tile-wide { grid-column: span 1; } }
.tile-tall { grid-row: span 2; min-height: 280px; }
@media (max-width: 700px) { .tile-tall { grid-row: span 1; min-height: 0; } }
.tile-pg-stats-body { display: flex; flex-direction: column; gap: 4px; margin-top: -3px; }
.tile-pg-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,0.04); font-size: 12px; }
.tile-pg-stats-lbl { color: var(--muted); }
.tile-pg-stats-val { font-weight: 600; margin-left: auto; }
.tile-pg-stats-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  color: #94a3b8; opacity: 0.45;
  line-height: 0; flex-shrink: 0;
}
.tile-pg-stats-icon .icon { width: 12px; height: 12px; stroke-width: 2; }
.tile-pg-stats-clickable { cursor: pointer; transition: background 0.15s; }
.tile-pg-stats-row.tile-pg-stats-clickable:hover { background: rgba(255,255,255,0.09); }
.tile-pg-stats-row.tile-pg-stats-clickable:hover .tile-pg-stats-icon { opacity: 0.85; }
.value.tile-pg-stats-clickable:hover .tile-pg-stats-icon { opacity: 0.85; }
.value .tile-pg-stats-icon { margin-left: 8px; vertical-align: middle; opacity: 0.35; }
.tile-service-body { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.tile-svc-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); }
.tile-svc-row.sev-warn { background: rgba(248,113,113,0.18); }
.tile-svc-row.sev-due  { background: rgba(239,68,68,0.25); color: #fca5a5; }
.tile-svc-name { font-weight: 600; font-size: 13px; }
.tile-svc-detail { font-size: 11px; color: var(--muted); text-align: right; }
.tile-svc-row.sev-due .tile-svc-detail { color: #fca5a5; }
.tile-pg-body { margin-top: 8px; }
.tile-pg-month { font-size: 13px; color: var(--muted); }
.tile-cnb-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tile-cnb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tile-cnb-rate { font-size: 22px; font-weight: 700; }
.tile-cnb-unit { font-size: 12px; color: var(--muted); }
.btn.btn-spinning { opacity: 0.7; cursor: wait; }
.btn.btn-spinning .spin-icon { display: inline-block; animation: spin .8s linear infinite; }



/* Published Games */
.pg-wrap { display: flex; flex-direction: column; gap: 14px; }
.pg-tiles-all { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pg-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.pg-tile .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pg-tile .value { font-size: 22px; font-weight: 700; }
.pg-tile-sub { font-size: 11px; color: var(--muted); }
.pg-group-pocket { font-size: 22px; font-weight: 700; color: #60a5fa; }
.pg-group-sub { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pg-error { padding: 10px 14px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; color: #fca5a5; font-size: 13px; }

.pg-clickable { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.pg-clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }

.pg-chart-wrap { padding: 8px 0; }
.pg-chart-max { font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.pg-chart { display: flex; align-items: flex-end; gap: 3px; padding: 0 4px; }
.pg-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pg-chart-val { font-size: 9px; color: var(--muted); height: 14px; white-space: nowrap; overflow: hidden; text-align: center; }
.pg-chart-track { width: 100%; height: 280px; background: var(--bg-4); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.pg-chart-fill { width: 100%; background: var(--primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 2px; transition: height 0.3s ease; }
.pg-chart-lbl { font-size: 10px; color: var(--muted); }
.pg-chart.pg-chart-many .pg-chart-val { visibility: hidden; }
.pg-chart.pg-chart-many .pg-chart-col:hover .pg-chart-val { visibility: visible; }
.pg-chart.pg-chart-many .pg-chart-lbl { font-size: 9px; writing-mode: vertical-lr; white-space: nowrap; overflow: hidden; height: 28px; }
.pg-chart-total { margin-top: 12px; text-align: right; font-size: 13px; color: var(--muted); }

.pg-stats-wrap { margin-top: 12px; }
.pg-stats-tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.pg-stats-tiles .tile { flex: 0 0 calc(25% - 9px); min-width: 140px; padding: 13px 20px; gap: 8px; }
.pg-stats-wrap .pg-section-head { margin-bottom: 10px; }
.pg-medailon-time { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; }
.pg-medailon-err { font-size: 12px; color: #fca5a5; margin-top: 4px; }
@media (max-width: 700px) { .pg-stats-tiles { grid-template-columns: 1fr; } }
.pg-steamdb-field input { font-family: monospace; font-size: 12px; }

.pg-section-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pg-section-head h3 { margin: 0; font-size: 16px; }

.pg-totals { margin-bottom: 8px; max-width: 280px; }
.pg-totals.pg-totals-link { cursor: pointer; }
.pg-totals.pg-totals-link:hover { opacity: .85; }
.pg-total-czk { font-size: 42px; font-weight: 700; color: var(--primary); line-height: 1.1; }
.pg-total-czk.pg-total-link { cursor: pointer; text-decoration: underline dotted var(--muted); }
.pg-total-czk.pg-total-link:hover { opacity: .75; }
.pg-total-usd { font-size: 13px; color: var(--muted); }

.pg-payments { display: flex; flex-direction: column; gap: 6px; }
.pg-pay-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--card); border-radius: 8px; border: 1px solid var(--border); }
.pg-pay-row .btn.small.danger { opacity: 0; transition: opacity 0.15s; }
.pg-pay-row:hover .btn.small.danger { opacity: 1; }
.pg-pay-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-pay-month { font-weight: 600; }
.pg-pay-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.pg-pay-source { padding: 1px 6px; border-radius: 4px; font-weight: 700; font-size: 10px; }
.pg-src-steam { background: #1b2838; color: #66c0f4; }
.pg-src-epic { background: #2a2a2a; color: #ffffff; }
.pg-pay-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pg-pay-czk { font-size: 18px; font-weight: 700; color: var(--primary); }
.pg-pay-usd { font-size: 11px; color: var(--muted); }

@media (max-width: 720px) {
  .pg-tiles-all { grid-template-columns: repeat(2, 1fr); }
  .pg-pay-row { grid-template-columns: 1fr auto; }
  .pg-pay-row > .btn.small.danger { grid-column: 2; opacity: 1; }
}

/* ── Weather app ─────────────────────────────────────────────────────── */
.weather-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.weather-tab {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--bg-4);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  transition: background .15s, border-color .15s;
}
.weather-tab:hover { background: var(--bg-4); }
.weather-tab.active { background: var(--primary); border-color: var(--primary); color: white; }

.weather-body { display: flex; flex-direction: column; gap: 14px; }
.weather-loading { color: var(--text); opacity: .6; padding: 20px; text-align: center; }

.weather-current {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--bg-4); border-radius: 14px; padding: 18px 20px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 24px;
}
.weather-current-left { display: flex; gap: 16px; align-items: center; }
.weather-current-icon { font-size: 56px; line-height: 1; }
.weather-current-meta { display: flex; flex-direction: column; gap: 4px; }
.weather-current-loc { font-weight: 600; font-size: 18px; }
.weather-current-cond { color: var(--text); opacity: .85; font-size: 14px; }
.weather-current-now { color: var(--text); opacity: .55; font-size: 12px; }
.weather-current-right { text-align: right; justify-self: end; }
.weather-current-temp { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -2px; }
.weather-current-feels { font-size: 12px; opacity: .65; margin-top: 4px; }
.weather-current-stats {
  display: flex; flex-direction: column; gap: 10px; padding-left: 32px;
}
.weather-stat { display: flex; gap: 10px; align-items: center; }
.weather-stat-i { font-size: 20px; }
.weather-stat-l { font-size: 11px; opacity: .55; text-transform: uppercase; letter-spacing: .5px; }
.weather-stat-v { font-size: 14px; font-weight: 600; }

.weather-hourly-card, .weather-daily-card, .weather-radar-card {
  background: var(--bg-2); border: 1px solid var(--bg-4); border-radius: 12px; padding: 14px 16px;
}
.weather-hourly-card h3, .weather-daily-card h3, .weather-radar-card h3 {
  margin: 0 0 12px 0; font-size: 14px; font-weight: 600; opacity: .8;
}
.weather-hourly { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.weather-hour {
  background: var(--bg-3); border: 1px solid var(--bg-4); border-radius: 10px;
  padding: 10px 8px; min-width: 64px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; flex-shrink: 0;
}
.weather-hour-t { font-size: 11px; opacity: .6; }
.weather-hour-i { font-size: 22px; line-height: 1; }
.weather-hour-temp { font-size: 14px; font-weight: 600; }
.weather-hour-pp { font-size: 10px; color: var(--primary); }
.weather-hour.current {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 12px rgba(74,144,255,.35);
}
.weather-hour.current .weather-hour-t,
.weather-hour.current .weather-hour-temp,
.weather-hour.current .weather-hour-pp { color: #fff; opacity: 1; }
.weather-hour-midnight {
  flex-shrink: 0; width: 1px; align-self: stretch;
  background: var(--primary); opacity: .35; margin: 2px 2px;
}

.weather-daily { display: flex; flex-direction: column; }
.weather-day {
  display: grid;
  grid-template-columns: 70px 32px 50px 42px 1fr 42px;
  gap: 10px; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--bg-3);
}
.weather-day:last-child { border-bottom: none; }
.weather-day-dow { font-weight: 600; font-size: 13px; }
.weather-day-icon { font-size: 22px; text-align: center; }
.weather-day-pp { font-size: 11px; color: var(--primary); text-align: right; }
.weather-day-lo { text-align: right; opacity: .65; font-size: 13px; }
.weather-day-hi { text-align: left; font-weight: 600; font-size: 13px; }
.weather-day-bar {
  position: relative; height: 6px; background: var(--bg-4); border-radius: 3px; overflow: hidden;
}
.weather-day-bar-fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, #38bdf8, #fbbf24, #ef4444);
  border-radius: 3px;
}
@media (max-width: 600px) {
  .weather-day { grid-template-columns: 56px 26px 40px 36px 1fr 36px; gap: 6px; font-size: 12px; }
}

.weather-radar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.weather-radar-head h3 { margin: 0; }
.weather-radar-box { width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--bg-4); }
.weather-radar-map { width: 100%; height: 420px; background: var(--bg-3); }
.weather-radar-ctrls {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 10px;
}
.weather-radar-slider {
  flex: 1; min-width: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  height: 16px; background: transparent; outline: none; padding: 0; margin: 0;
}
.weather-radar-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--primary); cursor: pointer;
  margin-top: -6px;
}
.weather-radar-slider::-webkit-slider-runnable-track {
  height: 4px; background: var(--bg-4); border-radius: 2px;
}
.weather-radar-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); border: none; cursor: pointer;
}
.weather-radar-slider::-moz-range-track { height: 4px; background: var(--bg-4); border-radius: 2px; }
.weather-radar-time { font-size: 12px; opacity: .75; width: 178px; white-space: nowrap; overflow: hidden; flex-shrink: 0; }
.weather-radar-type { display: flex; gap: 4px; }

/* Weather settings modal */
.weather-set-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.weather-set-cities { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.weather-set-city {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--bg-3); border: 1px solid var(--bg-4); border-radius: 8px; padding: 8px 12px;
}
.weather-set-city-n { font-weight: 600; font-size: 14px; }
.weather-set-city-c { font-size: 11px; opacity: .6; margin-top: 2px; }
.weather-set-city-actions { display: flex; gap: 6px; }
.weather-set-add { display: flex; gap: 6px; margin-top: 8px; }
.weather-set-add input { flex: 1; }
.weather-set-sug {
  display: flex; flex-direction: column; gap: 2px; margin-top: 6px;
  max-height: 220px; overflow-y: auto;
}
.weather-set-sug-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  background: var(--bg-3); border: 1px solid transparent;
}
.weather-set-sug-item:hover { background: var(--bg-4); border-color: var(--primary); }
.weather-set-sug-n { font-weight: 600; font-size: 13px; }
.weather-set-sug-c { font-size: 11px; opacity: .6; }

/* ── Weather History ──────────────────────────────────────────────────────── */
.wh-root { display: flex; flex-direction: column; gap: 14px; }
.wh-tabs { display: flex; gap: 6px; }
.wh-statsbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--bg-4); border-radius: 12px; padding: 14px 18px;
}
.wh-statsbar-item { display: flex; flex-direction: column; gap: 3px; }
.wh-statsbar-lbl { font-size: 10px; opacity: .5; text-transform: uppercase; letter-spacing: .5px; }
.wh-statsbar-val { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.wh-statsbar-sep { width: 1px; align-self: stretch; background: var(--bg-4); margin: 0 4px; }
.wh-chart-wrap {
  overflow-x: auto; overflow-y: hidden;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--bg-4); border-radius: 12px; padding: 10px 0 4px;
  scrollbar-width: thin;
}
.wh-chart-wrap::-webkit-scrollbar { height: 4px; }
.wh-chart-wrap::-webkit-scrollbar-track { background: transparent; }
.wh-chart-wrap::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }
.wh-cards-head { font-size: 11px; opacity: .45; text-transform: uppercase; letter-spacing: .5px; padding: 0 2px; }
.wh-cards {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.wh-cards::-webkit-scrollbar { height: 4px; }
.wh-cards::-webkit-scrollbar-track { background: transparent; }
.wh-cards::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }
.wh-card {
  flex: 0 0 auto; width: 138px;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--bg-4); border-radius: 10px; padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .15s, transform .1s;
}
.wh-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.wh-chart-tip { filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.wh-chart-tip .wh-card { box-shadow: 0 0 0 1px var(--primary); }
.wh-card-time { font-size: 10px; opacity: .5; }
.wh-card-hour { font-weight: 600; opacity: 1; color: var(--text); }
.wh-card-temp { font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -1.5px; }
.wh-card-cond { font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-card-feels { font-size: 10px; opacity: .4; }
.wh-card-range { font-size: 11px; opacity: .6; letter-spacing: .3px; }
.wh-card-stats { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; border-top: 1px solid var(--bg-4); padding-top: 7px; }
.wh-card-stat { font-size: 11px; opacity: .75; display: flex; align-items: center; gap: 3px; }

.wh-inline-chart {
  overflow-x: auto; scrollbar-width: none; padding: 6px 0 2px;
}
.wh-inline-chart::-webkit-scrollbar { display: none; }
.wh-statsbar-range { flex: 1 1 auto; }
.wh-statsbar-range-val { font-size: 12px; font-weight: 600; opacity: .75; margin-top: 2px; }
.wh-custom-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--bg-4); border-radius: 8px; padding: 10px 14px;
}
.wh-custom-lbl { font-size: 11px; opacity: .55; }
.wh-custom-date { width: 130px; }

/* Dashboard tile: weather forecast */
.tile-weather-fc-body {
  display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0 0; overflow: hidden;
}
.tile-weather-radar-body {
  display: flex; flex-direction: column;
}
.tile-wfc-current {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 2px 10px 2px; border-bottom: 1px solid var(--bg-3);
}
.tile-wfc-cur-icon { font-size: 38px; line-height: 1; }
.tile-wfc-cur-temp { font-size: 28px; font-weight: 300; letter-spacing: -1px; }
.tile-wfc-cur-meta { font-size: 11px; opacity: .65; line-height: 1.4; }
.tile-wfc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tile-wfc-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; background: var(--bg-3); border-radius: 6px;
}
.tile-wfc-day-dow, .tile-wfc-day-d { font-size: 10px; opacity: .6; text-transform: uppercase; }
.tile-wfc-day-icon, .tile-wfc-day-i { font-size: 18px; line-height: 1; }
.tile-wfc-day-hi { font-size: 12px; font-weight: 600; }
.tile-wfc-day-lo { font-size: 10px; opacity: .55; }
.tile-wfc-day-pp { font-size: 9px; color: var(--primary); opacity: .75; }

/* Dashboard tile: radar (in-pocasi.cz / ČHMÚ image) */
.tile-weather-fc.tile-tall { grid-row: auto; min-height: 0; }
.tile-weather-fc, .tile-weather-radar { display: flex; flex-direction: column; overflow: hidden; }
.tile-weather-fc .tile-weather-fc-body, .tile-weather-radar .tile-weather-radar-body { flex: 1; min-height: 0; }
.tile-weather-radar { padding: 3px; gap: 0; }
.tile-weather-radar .label { display: none; }
.tile-weather-radar .tile-weather-radar-body { padding: 0; gap: 0; position: relative; }
.tile-weather-radar-img {
  width: 100%; height: auto; object-fit: contain; border-radius: 5px;
  background: var(--bg-3) url("/mapa-radar.png") center/contain no-repeat;
  display: block;
}
.tile-weather-radar-time {
  position: absolute; bottom: 5px; left: 3px; right: 3px;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  font-size: 10px; opacity: .85; text-align: center;
  background: rgba(0,0,0,.5); padding: 1px 4px; border-radius: 4px;
}
.tile-radar-nav {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 3px; opacity: .9; flex-shrink: 0;
}
.tile-radar-nav:disabled { opacity: .25; cursor: default; }
.tile-radar-nav:not(:disabled):hover { opacity: 1; }

/* Defensive: keep any Leaflet stacking inside its container */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }

/* Full radar view in Weather page */
.weather-radar-imgwrap {
  width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--bg-4);
  background: var(--bg-3) url("/mapa-radar.png") center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; min-height: 200px;
}
.weather-radar-img { width: 100%; height: auto; display: block; }
.weather-radar-img.error { opacity: .3; }

/* OSVČ invoice item rows */
.osvch-item-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.osvch-item-headers {
  display: flex;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* profile-grid labels always stack vertically so inputs fill their cell */
.profile-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-grid label input,
.profile-grid label select {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .modal-backdrop { padding: 10px; align-items: flex-start; }
  .modal {
    overflow-x: hidden;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .modal-body { overflow-x: hidden; }
  .modal-foot {
    flex-wrap: wrap;
    padding-bottom: 14px;
  }
  .osvch-item-headers { display: none; }
  .osvch-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "desc  desc"
      "qty   unit"
      "price total"
      "del   del";
    row-gap: 6px;
  }
  .osvch-item-row > *:nth-child(1) { grid-area: qty;   width: 100% !important; }
  .osvch-item-row > *:nth-child(2) { grid-area: unit;  width: 100% !important; }
  .osvch-item-row > *:nth-child(3) { grid-area: desc;  width: 100% !important; min-width: 0 !important; }
  .osvch-item-row > *:nth-child(4) { grid-area: price; width: 100% !important; }
  .osvch-item-row > *:nth-child(5) { grid-area: total; min-width: 0 !important; text-align: right; }
  .osvch-item-row > *:nth-child(6) { grid-area: del;   justify-self: end; }
}

/* OSVČ segmented selector (due-date mode) */
.osvch-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.osvch-seg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.osvch-seg-btn:last-child { border-right: 0; }
.osvch-seg-btn:hover { color: var(--text); }
.osvch-seg-btn.active { background: var(--primary); color: #fff; }

/* ============================================================================
   Mobile: prevent zoom on input focus (iOS)
   ============================================================================ */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px;
    touch-action: manipulation;
  }
  label > input, label > select, label > textarea {
    font-size: 16px;
  }
}

/* ============================================================================
   Split Payments
   ============================================================================ */

/* Tool-body override when split tool is active */
.tool-body.split-in-tool {
  max-width: none;
  gap: 0;
  margin: 0 -32px -24px;
  overflow: hidden;
}
.split-inner-layout {
  display: flex;
  height: calc(100vh - 192px);
  overflow: hidden;
}
.split-left {
  width: 300px;
  min-width: 300px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.split-search-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.split-search-bar input[type="search"] { width: 100%; padding: 7px 10px; font-size: 13px; }
.split-search-bar .btn { padding: 7px 12px; font-size: 13px; }
.split-list { flex: 1; overflow-y: auto; }
.split-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .1s;
  border-left: 3px solid transparent;
}
.split-item:hover { background: var(--bg-3); }
.split-item.active { background: var(--primary-soft); border-left-color: var(--primary); }
.split-item-title {
  font-weight: 600; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.split-item-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.split-right { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.split-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}
.split-detail-title { font-size: 20px; font-weight: 700; margin: 0; }
.split-detail-actions { display: flex; gap: 6px; }

.split-section {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.split-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.split-section-header h3 { font-size: 15px; font-weight: 600; margin: 0; }
.split-empty-hint { color: var(--text-3); font-size: 13px; padding: 4px 0; }

.split-participants { display: flex; flex-direction: column; gap: 6px; }
.split-participant-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--bg-3); border-radius: 6px;
}
.split-participant-info { display: flex; flex-direction: column; gap: 2px; }
.split-participant-name { font-weight: 600; font-size: 14px; }
.split-participant-account { font-size: 12px; color: var(--text-3); font-family: monospace; }
.split-participant-account.muted { font-style: italic; }
.split-row-actions { display: flex; gap: 4px; }

.split-payments-list { display: flex; flex-direction: column; gap: 6px; }
.split-payment-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 12px; background: var(--bg-3); border-radius: 6px; gap: 8px;
}
.split-payment-info { flex: 1; }
.split-payment-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.split-payment-desc { font-weight: 600; font-size: 14px; }
.split-payment-amount { font-weight: 700; color: var(--primary); white-space: nowrap; }
.split-payment-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.split-payment-payer { color: var(--text-2); }

.split-modal-body { display: flex; flex-direction: column; gap: 12px; min-width: 340px; }
.split-modal-body .form-row { display: flex; flex-direction: column; gap: 4px; }
.split-modal-body .form-row label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.split-modal-body input[type=text],
.split-modal-body input[type=number],
.split-modal-body select { width: 100%; }
.split-mode-toggle { display: flex; gap: 20px; }
.split-mode-opt { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.split-equal-section, .split-exact-section { padding: 10px; background: var(--bg-3); border-radius: 6px; }
.split-equal-label, .split-exact-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.split-checkboxes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.split-check-label { display: flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
.split-exact-inputs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.split-exact-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.split-exact-row label { font-size: 14px; flex: 1; }
.split-exact-row input { width: 120px; }
.split-exact-total { font-size: 13px; font-weight: 600; margin-top: 6px; }

.split-settled-msg { color: var(--green, #3c9); font-weight: 600; padding: 6px 0; }
.split-transfers-title { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.split-transfers { display: flex; flex-direction: column; gap: 6px; }
.split-transfer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg-3); border-radius: 6px; gap: 10px;
}
.split-transfer-text { font-size: 14px; flex: 1; }

.split-chart-wrap { margin-bottom: 16px; }
.split-chart {
  display: flex; align-items: flex-end; gap: 16px; padding: 0 0 8px; overflow-x: auto;
}
.split-chart-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.split-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; }
.split-bar { width: 22px; border-radius: 4px 4px 0 0; min-height: 3px; transition: height .3s; }
.split-bar.paid { background: var(--primary); }
.split-bar.owed { background: var(--text-3); opacity: .6; }
.split-chart-name {
  font-size: 12px; font-weight: 600; text-align: center;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.split-chart-balance { font-size: 12px; font-weight: 700; }
.split-chart-balance.positive { color: var(--green, #3c9); }
.split-chart-balance.negative { color: var(--red, #e55); }
.split-chart-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.split-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.split-legend-dot.paid { background: var(--primary); }
.split-legend-dot.owed { background: var(--text-3); opacity: .6; }

.split-qr-body { display: flex; flex-direction: column; gap: 12px; min-width: 300px; }
.split-qr-body .form-row { display: flex; flex-direction: column; gap: 4px; }
.split-qr-body .form-row label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.split-qr-body input { width: 100%; }
.split-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.split-qr-img { width: 220px; height: 220px; border-radius: 6px; }
.split-qr-account { font-size: 12px; color: var(--text-3); font-family: monospace; }

@media (max-width: 768px) {
  .split-inner-layout { flex-direction: column; height: auto; }
  .tool-body.split-in-tool { margin: 0 -16px -24px; }
  .split-left { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .split-right { padding: 16px; }
  .split-chart { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   Processes app
   ═══════════════════════════════════════════════════════════════ */

.procs-layout {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 112px);
  overflow: hidden;
  margin: -8px -24px -24px;
}

/* ── Left panel ── */
.procs-left {
  width: 260px;
  min-width: 200px;
  max-width: 320px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.procs-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.procs-list-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.procs-list-header .btn { width: 100%; justify-content: center; }

.proc-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background .1s;
}
.proc-item:hover { background: var(--bg-3); }
.proc-item.active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.proc-item.dragging { opacity: .4; }
.proc-item.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }

.proc-item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.proc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  transition: background 0.3s;
}
.proc-status-dot.running { background: var(--ok); box-shadow: 0 0 6px var(--ok); }

.proc-item-name {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.proc-item-cmd {
  font-size: 11px;
  color: var(--muted);
  font-family: "SF Mono", "Fira Code", "Menlo", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 14px;
}

/* ── Process type tags ── */
.proc-type-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ptype-bash     { background: #1e3a5f; color: #5aabff; }
.ptype-python   { background: #2e2a0a; color: #f0b549; }
.ptype-minecraft { background: #0e2d1a; color: #4dd29c; }
.ptype-other    { background: var(--bg-4); color: var(--muted); }

/* ── Right panel ── */
.procs-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.proc-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex-shrink: 0;
  gap: 8px;
}

.proc-detail-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.proc-detail-title {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proc-detail-header-right {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.proc-pid-badge {
  font-size: 11px;
  font-family: "SF Mono", "Fira Code", "Menlo", monospace;
  color: var(--muted);
  background: var(--bg-4);
  padding: 0 8px;
  border-radius: 6px;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* ── Terminal output ── */
.proc-terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  background: #07090f;
  font-family: "SF Mono", "Fira Code", "Menlo", "Consolas", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #c8d8f0;
  word-break: break-all;
}

.proc-output-line {
  white-space: pre-wrap;
  min-height: 1em;
}
.proc-output-line:empty::before { content: "\00a0"; }

/* ── Input row ── */
.proc-terminal-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  flex-shrink: 0;
}

.proc-terminal-input {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 10px;
  font-family: "SF Mono", "Fira Code", "Menlo", monospace;
  font-size: 13px;
}
.proc-terminal-input:focus { outline: none; border-color: var(--primary); }

.proc-send-btn { flex-shrink: 0; }

/* ── Add process dialog ── */
.proc-dialog-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  min-width: 380px;
}
.proc-dialog-body input {
  width: 100%;
}
.proc-autorun-row {
  grid-column: 1 / -1;
  padding: 4px 0 2px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.proc-type-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  padding: 2px 0;
}
.proc-type-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 0.15s, opacity 0.15s;
  opacity: 0.7;
}
.proc-type-btn:hover { opacity: 1; }
.proc-type-btn.active { border-color: #fff; opacity: 1; }
.proc-type-btn.ptype-bash     { background: #1e3a5f; color: #5aabff; }
.proc-type-btn.ptype-python   { background: #2e2a0a; color: #f0b549; }
.proc-type-btn.ptype-minecraft { background: #0e2d1a; color: #4dd29c; }
.proc-type-btn.ptype-other    { background: var(--bg-4); color: var(--muted); }

/* ── Context menu ── */
.proc-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 140px;
  overflow: hidden;
}
.proc-ctx-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.proc-ctx-item:hover { background: var(--bg-4); }
.proc-ctx-item.danger { color: var(--danger); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .procs-left { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; }
  .procs-layout { flex-direction: column; }
  .proc-dialog-body { grid-template-columns: 1fr; min-width: 0; }
  .form-label { margin-top: 4px; }
}

/* ============================================================================
   Trello board (dedicated page)
   ============================================================================ */
.trello-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-1);
}
.trello-page svg.icon { width: 16px; height: 16px; flex-shrink: 0; }
.trello-loading, .trello-error {
  margin: auto;
  color: var(--muted);
  font-size: 15px;
  padding: 40px;
}
.trello-error { color: var(--danger); }

.trello-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex-shrink: 0;
}
.trello-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trello-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--muted); background: var(--bg-3); border: 1px solid var(--line);
  flex-shrink: 0;
}
.trello-back:hover { color: var(--text); text-decoration: none; }
.trello-back .icon { width: 18px; height: 18px; }
.trello-title {
  font-size: 19px; font-weight: 700; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trello-save-ind { font-size: 12px; color: var(--muted); padding: 2px 8px; border-radius: 6px; }
.trello-save-ind.saving { color: var(--warn); }
.trello-save-ind.dirty { color: var(--danger); }
.trello-public-badge {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary);
}
.trello-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trello-top-right .btn svg { width: 15px; height: 15px; }

.trello-board-area {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  overflow-x: auto;
  overflow-y: hidden;
}
.trello-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 12px; align-items: center; }

.trello-col {
  width: 290px;
  flex-shrink: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.trello-col.collapsed { width: 52px; }
.trello-col.dragging { opacity: 0.5; }

.trello-col-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 10px;
  cursor: grab;
}
.trello-col.collapsed .trello-col-head {
  writing-mode: vertical-rl;
  height: 100%;
  cursor: pointer;
}
.trello-col-collapse {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 10px; padding: 2px; flex-shrink: 0;
}
.trello-col-title {
  font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text;
}
.trello-col-title-edit {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14px;
  padding: 2px 6px; border-radius: 6px;
}
.trello-col-count {
  font-size: 12px; color: var(--muted); background: var(--bg-4);
  border-radius: 999px; padding: 1px 8px; flex-shrink: 0;
}
.trello-col-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 2px; flex-shrink: 0; opacity: 0;
}
.trello-col-head:hover .trello-col-del { opacity: 1; }
.trello-col-del svg { width: 15px; height: 15px; }
.trello-col-del:hover { color: var(--danger); }

.trello-col-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 10px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 12px;
}
.trello-col-body.drop-hover { background: var(--bg-3); border-radius: 8px; }
/* Drop indicator — drawn with pseudo-elements so it never reflows the list (no flicker) */
.trello-card.drop-before::before,
.trello-card.drop-after::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
  pointer-events: none;
  z-index: 2;
}
.trello-card.drop-before::before { top: -6px; }
.trello-card.drop-after::after { bottom: -6px; }

.trello-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.trello-card:hover { border-color: var(--primary); }
.trello-card.dragging { opacity: 0.4; }
.trello-card-cover {
  margin: -9px -11px 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}
.trello-card-cover img { width: 100%; display: block; }
.trello-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.trello-tag-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.trello-card-title { font-size: 13.5px; line-height: 1.35; word-break: break-word; }
.trello-card-meta { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
.trello-card-meta-ic { display: inline-flex; align-items: center; gap: 3px; }
.trello-card-meta-ic svg { width: 14px; height: 14px; }

/* Separator card (title "---") */
.trello-card-sep { background: none; border: none; box-shadow: none; padding: 6px 4px; cursor: pointer; }
.trello-card-sep:hover { background: none; }
.trello-card-sep-line { height: 2px; border-radius: 999px; background: var(--line); }
.trello-card-sep:hover .trello-card-sep-line { background: var(--primary); }

.trello-add-card {
  margin: 0 10px 10px;
  background: none; border: none; color: var(--muted);
  text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; font-size: 13px;
}
.trello-add-card:hover { background: var(--bg-3); color: var(--text); }
.trello-add-card svg { width: 14px; height: 14px; }

.trello-add-col { flex-shrink: 0; width: 290px; }
.trello-add-col-btn {
  width: 100%; background: var(--bg-2); border: 1px dashed var(--line);
  color: var(--muted); padding: 12px; border-radius: var(--radius); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px;
}
.trello-add-col-btn:hover { color: var(--text); border-color: var(--primary); }
.trello-add-col-btn svg { width: 15px; height: 15px; }

.trello-bottom {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-top: 1px solid var(--line);
  background: var(--bg-2); overflow-x: auto; flex-shrink: 0;
}
.trello-tab {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--muted); padding: 7px 12px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; font-size: 13px; position: relative;
}
.trello-tab.active { background: var(--primary-soft); border-color: var(--primary); color: var(--text); }
.trello-tab.add { color: var(--muted); padding: 7px 10px; }
.trello-tab-menu { display: inline-flex; opacity: 0.7; }
.trello-tab-menu svg { width: 13px; height: 13px; }
.trello-tab-menu:hover { opacity: 1; }
.trello-tab svg { width: 14px; height: 14px; }
.trello-tab.dragging { opacity: 0.4; }
.trello-tab.tab-drop-before::before {
  content: ""; position: absolute; left: -5px; top: 2px; bottom: 2px;
  width: 3px; background: var(--primary); border-radius: 2px; pointer-events: none;
}
.trello-tab.tab-drop-after::after {
  content: ""; position: absolute; right: -5px; top: 2px; bottom: 2px;
  width: 3px; background: var(--primary); border-radius: 2px; pointer-events: none;
}

.trello-board-menu { display: flex; flex-direction: column; gap: 8px; }
.trello-board-menu .btn { justify-content: flex-start; }

/* Card modal */
.trello-card-modal { display: flex; flex-direction: column; gap: 14px; position: relative; }
.trello-card-modal.file-drop { outline: 2px dashed var(--primary); outline-offset: 6px; border-radius: 8px; }
.trello-card-modal.file-drop::after {
  content: "Pusťte soubory sem pro nahrání";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 38, 56, 0.82);
  color: var(--primary); font-weight: 600; font-size: 15px;
  border-radius: 8px; pointer-events: none; z-index: 5;
}
.trello-cm-title { font-size: 16px; font-weight: 600; padding: 9px 11px; }
.trello-cm-section { display: flex; flex-direction: column; gap: 7px; }
.trello-cm-move-foot { margin-right: auto; display: flex; align-items: center; gap: 8px; }
.trello-cm-move-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.trello-cm-move-sel {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text); font-size: 13px; max-width: 200px;
}
.trello-cm-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.trello-cm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.trello-cm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; font-size: 12.5px;
}
.trello-cm-tag.add { background: var(--bg-3); color: var(--muted); border-style: dashed; }
.trello-cm-tag svg { width: 12px; height: 12px; }
.trello-cm-tag-edit { display: inline-flex; opacity: 0.7; margin-left: 2px; }
.trello-cm-desc { resize: vertical; padding: 9px 11px; line-height: 1.4; }

.trello-cm-atts { display: flex; flex-direction: column; gap: 8px; }
.trello-att { display: flex; gap: 10px; align-items: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 7px; }
.trello-att-thumb { width: 56px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg-4); display: flex; align-items: center; justify-content: center; }
.trello-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trello-att-thumb.file svg { width: 20px; height: 20px; color: var(--muted); }
.trello-att-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.trello-att-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trello-att-size { font-size: 11px; color: var(--muted); }
.trello-att-acts { display: flex; gap: 6px; margin-top: 3px; }
.trello-att-acts svg { width: 13px; height: 13px; }

.trello-tag-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.trello-tag-color { width: 30px; height: 30px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; }
.trello-tag-color.on { border-color: var(--text); }

/* Share modal */
.trello-share { display: flex; flex-direction: column; gap: 14px; }
.trello-share-intro { color: var(--muted); font-size: 13px; margin: 0; }
.trello-share-row { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.trello-share-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trello-share-label { font-weight: 600; }
.trello-share-link { display: flex; gap: 6px; align-items: center; }
.trello-share-url { flex: 1; min-width: 0; font-size: 12px; }
.trello-share-link svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .trello-col { width: 84vw; }
  .trello-add-col { width: 84vw; }
}