:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --danger: #dc2626;
  --ok: #059669;
  --bar: #0f172a;
  --bar-text: #cbd5e1;
  --bar-hover: #1e293b;
  --bar-active: #f4f5f7;
  --bar-active-text: #0f172a;
  --shadow: 0 10px 30px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
  --radius: 10px;
  --chip-mix: 16%;
  color-scheme: light;
}
/* night look: automatically by the system, or chosen in the hub (html[data-theme]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #0f172a;
    --text: #e5e7eb;
    --muted: #a8b4c7;
    --border: #2a3547;
    --chip-mix: 30%;
    --accent: #3b82f6;
    --bar: #020617;
    --bar-text: #94a3b8;
    --bar-hover: #111827;
    --bar-active: #0b1120;
    --bar-active-text: #f1f5f9;
    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #0f172a;
    --text: #e5e7eb;
    --muted: #a8b4c7;
    --border: #2a3547;
    --chip-mix: 30%;
    --accent: #3b82f6;
    --bar: #020617;
    --bar-text: #94a3b8;
    --bar-hover: #111827;
    --bar-active: #0b1120;
    --bar-active-text: #f1f5f9;
    --shadow: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#root { height: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---- buttons & inputs ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 7px 12px; font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: default; }
.input {
  width: 100%; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 8px 10px;
}
.input:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
label.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ---- auth screens ---- */
.auth { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px; box-shadow: var(--shadow); display: grid; gap: 14px;
}
.auth-card h1 { margin: 0; font-size: 22px; }
.auth-card p { margin: 0; color: var(--muted); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.brand img { width: 28px; height: 28px; }

/* ---- shell ---- */
.shell { height: 100%; display: flex; flex-direction: column; }
.bar {
  flex: none; height: 46px; background: var(--bar); color: var(--bar-text);
  display: flex; align-items: flex-end; gap: 4px; padding: 0 8px; position: relative; z-index: 5;
}
.bar-btn {
  height: 34px; margin-bottom: 6px; border: 0; background: transparent; color: var(--bar-text);
  border-radius: 8px; padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; flex: none;
}
.bar-btn:hover { background: var(--bar-hover); color: #fff; }
.bar-btn.home { font-weight: 700; color: #f1f5f9; }
.bar-btn.home img { width: 22px; height: 22px; }
.bar-btn.home.active { background: var(--bar-hover); }
.tabs { display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px;
  border-radius: 9px 9px 0 0; color: var(--bar-text); cursor: pointer; flex: none; max-width: 220px;
  user-select: none; border: 0; background: transparent;
}
.tab:hover { background: var(--bar-hover); color: #fff; }
.tab.active { background: var(--bar-active); color: var(--bar-active-text); }
.tab .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tab .x {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; opacity: .6; border: 0; background: transparent; color: inherit; padding: 0;
}
.tab .x:hover { opacity: 1; background: rgba(127, 127, 127, .25); }
.app-icon {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none;
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: -.02em;
}
.app-icon.lg { width: 48px; height: 48px; border-radius: 12px; font-size: 17px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #334155; color: #f1f5f9;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}

.stage { flex: 1; position: relative; min-height: 0; }
.frame { position: absolute; inset: 0; background: var(--bg); }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.frame .loading {
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--muted);
}
.frame .loading div { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 16px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- home ---- */
.homepage { position: absolute; inset: 0; overflow: auto; padding: 40px 16px; }
.homepage-inner { max-width: 960px; margin: 0 auto; }
.homepage h1 { font-size: 26px; margin: 0 0 4px; }
.homepage .sub { color: var(--muted); margin: 0 0 28px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tile {
  text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; display: grid; gap: 14px; transition: transform .12s, box-shadow .12s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile .t-name { font-weight: 600; font-size: 16px; }
.tile .t-url { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .t-open { font-size: 12px; color: var(--ok); font-weight: 600; }
.empty { color: var(--muted); padding: 24px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; }

/* ---- menus & modal ---- */
.menu {
  position: fixed; z-index: 50; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 220px;
}
.menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent;
  text-align: left; padding: 8px 10px; border-radius: 7px;
}
.menu button:hover { background: var(--surface-2); }
.menu .head { padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu .head small { display: block; color: var(--muted); }
.menu .muted { color: var(--muted); font-size: 12px; margin-left: auto; }

.overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-width: 900px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
}
.modal.narrow { max-width: 420px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 17px; flex: 1; }
.modal-body { padding: 18px; overflow: auto; display: grid; gap: 14px; }
.seg { display: flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 9px; border: 1px solid var(--border); }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; }
.seg button.on { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); font-weight: 600; }

.card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 12px; background: var(--surface); }
.card.off { opacity: .65; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.grid-form .wide { grid-column: span 2; }
.hint { color: var(--muted); font-size: 12.5px; margin: 0; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.pill.ok { color: var(--ok); }
.spacer { flex: 1; }
input[type=color] { width: 100%; height: 37px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #0f172a; color: #f1f5f9; padding: 9px 16px; border-radius: 9px; box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  .bar-btn.home span, .tab .name { display: none; }
  .tab { padding: 0 4px 0 8px; }
  .grid-form .wide { grid-column: auto; }
  .homepage { padding: 24px 16px; }
}

/* ---- home / workspace ---- */
.homepage-inner { max-width: 1280px; }
.home-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.home-head .sub { margin: 0; text-transform: capitalize; }
.app-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 5px 12px 5px 6px; font-weight: 500; }
.app-chip:hover { box-shadow: var(--shadow); }
.open-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ws-nav { display: flex; gap: 4px; align-items: center; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 18px; scrollbar-width: none; }
.ws-nav::-webkit-scrollbar { display: none; }
.ws-nav [role=tab] { border: 0; background: transparent; padding: 9px 12px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.ws-nav [role=tab]:hover { color: var(--text); }
.ws-nav [role=tab].on { color: var(--text); border-bottom-color: var(--accent); }
.ws-nav .btn { flex: none; margin-bottom: 4px; }
.ws-loading { display: grid; place-items: center; padding: 60px; }
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.callout.warn { border-left-color: #f59e0b; }
.linklike { border: 0; background: none; color: var(--accent); padding: 0; text-align: left; font: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }

.widgets { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 14px; }
.widget { grid-column: span 6; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; min-height: 140px; max-height: 560px; }
.widget.size-s { grid-column: span 4; }
.widget.size-l { grid-column: span 12; }
.widget header { display: flex; align-items: center; gap: 6px; padding: 12px 14px 8px; }
.widget h2 { font-size: 15px; margin: 0; }
.count { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 6px; }
.icon-btn { border: 0; background: transparent; width: 26px; height: 26px; border-radius: 6px; color: var(--muted); font-size: 14px; padding: 0; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.widget header .icon-btn:not(:first-of-type) { opacity: .35; }
.widget:hover header .icon-btn, .widget:focus-within header .icon-btn { opacity: 1; }
@media (hover: none) { .widget header .icon-btn:not(:first-of-type) { opacity: 1; } } /* touch: no hover to reveal them */
.w-body { overflow: auto; padding: 0 8px 10px; flex: 1; }
.w-empty { color: var(--muted); padding: 14px 8px; font-size: 13px; }
.w-empty.small { padding: 4px 8px; }

.it-list { display: grid; }
.it { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.it:hover, .it:focus-visible { background: var(--surface-2); outline: none; }
.it-main { min-width: 0; flex: 1; }
.it-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it.unread .it-title { font-weight: 600; }
.it .from { color: var(--muted); font-weight: 500; }
.it.done .it-title { text-decoration: line-through; color: var(--muted); }
.it-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); margin-top: 1px; }
.it-sub .over { color: var(--danger); font-weight: 500; }
.it-sub .src { font-weight: 500; }
.it-sub .err { color: var(--danger); }
.done-check { width: 17px; height: 17px; margin: 2px 0 0; flex: none; cursor: pointer; }
.fe-row .check, .fe-wrap .check { flex: none; white-space: nowrap; }
.kind-bar { width: 4px; align-self: stretch; min-height: 18px; border-radius: 2px; flex: none; display: inline-block; }
.msg-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid; margin-top: 5px; flex: none; }
.tag { font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 0 7px; color: var(--muted); }

.agenda { display: grid; gap: 4px; }
.ag-day { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.ag-day:first-child { border-top: 0; }
.ag-date { padding: 7px 8px; display: grid; font-size: 13px; }
.ag-date span { color: var(--muted); font-size: 12px; }
.ag-day.today .ag-date strong { color: var(--accent); }

.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 4px; }
.note { position: relative; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 12px 10px 16px; display: grid; gap: 6px; align-content: start; min-height: 120px; overflow: hidden; }
.note:hover { box-shadow: var(--shadow); }
.note-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.note p { margin: 0; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar .input { width: auto; min-width: 160px; }
.group { margin-bottom: 16px; }
.group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px 8px; }
.empty { text-align: center; }

.cal { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.cal-title { margin: 0 6px; font-size: 18px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); gap: 1px; margin-top: 10px; }
.cal-wd { background: var(--surface-2); padding: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.cal-cell { background: var(--surface); min-height: 96px; padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.cal-cell.other { background: var(--surface-2); }
.cal-cell.other .cal-num { opacity: .6; }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-num { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.cal-cell.today .cal-num { background: var(--accent); color: #fff; }
.cal-chip { border: 0; text-align: left; font-size: 12px; font-weight: 500; padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--c) var(--chip-mix), transparent); border-left: 3px solid var(--c); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-more { font-size: 11px; color: var(--muted); padding-left: 4px; }
.cal-side { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; position: sticky; top: 0; }
.cal-side h3 { margin: 0; font-size: 15px; text-transform: capitalize; }

.views { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.views-side { display: grid; gap: 4px; }
.view-btn { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.view-btn:hover { background: var(--surface); }
.view-btn.on { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); color: var(--accent); }
.views-main { display: grid; gap: 12px; min-width: 0; }
.board { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; }
.board-col { flex: 0 0 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px; }
.board-col h3 { font-size: 14px; margin: 0 0 6px 8px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td:nth-child(2) { white-space: normal; min-width: 200px; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.rules { display: grid; gap: 10px; }
.rules .hint { margin: 0; }

.editor { display: grid; gap: 12px; }
.editor h3 { margin: 4px 0 0; font-size: 14px; }
textarea.input { resize: vertical; font: inherit; line-height: 1.5; }
textarea.input.grow { resize: none; overflow-y: auto; min-height: 36px; }
.msg-head h3 { margin: 10px 0 6px; }
.msg-body { white-space: pre-wrap; margin: 0; color: var(--text); }
.links { display: grid; gap: 4px; }
.link-row { display: flex; gap: 8px; align-items: center; }
.search-results { display: grid; gap: 4px; }
.pill.err { color: var(--danger); }
.filter-ed { display: grid; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.fe-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.fe-label { font-size: 12px; color: var(--muted); width: 70px; }
.fe-wrap { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 150px; overflow: auto; }
.containers { display: grid; gap: 6px; margin-top: 8px; }
details summary { cursor: pointer; color: var(--accent); font-size: 13px; }
pre.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 0; }

@media (max-width: 900px) {
  .widget, .widget.size-s, .widget.size-l { grid-column: span 12; }
  .cal, .views { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; }
  .cal-chip { font-size: 10.5px; }
  .ag-day { grid-template-columns: 1fr; gap: 0; }
}

/* ---- signatures ---- */
.sg { display: grid; gap: 14px; }
.sg-top { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-tab { border: 1px solid var(--border); background: var(--surface); border-radius: 99px; padding: 6px 14px; font-weight: 500; }
.sg-tab.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.sg-tab.add { border-style: dashed; color: var(--muted); }
.sg-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sg-name { max-width: 320px; font-weight: 600; font-size: 15px; }
.sg-status { color: var(--muted); font-size: 12.5px; }
.sg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr); gap: 18px; align-items: start; }
.sg-form { display: grid; gap: 12px; }
.sg-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: grid; gap: 12px; }
.sg-sec header h3 { margin: 0; font-size: 15px; }
.sg-sec header .hint { margin: 2px 0 0; }
.sg-sec h4 { margin: 0 0 8px; font-size: 13px; }
.row.nowrap { flex-wrap: nowrap; }
.tpl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tpl { text-align: left; border: 2px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 8px; display: grid; gap: 2px; transition: border-color .15s, transform .15s; }
.tpl:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.tpl.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.tpl small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.tpl-view { height: 104px; overflow: hidden; border-radius: 8px; background: #fff; position: relative; margin-bottom: 6px; pointer-events: none; border: 1px solid #eef0f3; }
.sig-frame { border: 0; width: 100%; display: block; background: #fff; }
.sig-frame.thumb { position: absolute; left: 0; top: 0; width: 230%; height: 230%; transform: scale(0.435); transform-origin: 0 0; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.img-pick { display: grid; gap: 8px; }
.img-pick.busy { opacity: .6; pointer-events: none; }
.drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 96px; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-2); color: var(--muted); padding: 10px; text-align: left; }
.drop:hover, .drop.over { border-color: var(--accent); color: var(--text); }
.drop img { max-height: 80px; max-width: 100%; object-fit: contain; }
.drop-url { min-width: 0; overflow-wrap: anywhere; }
.drop-ico { font-size: 22px; }
.drop-act { position: absolute; right: 8px; bottom: 6px; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px; }
.swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); padding: 0; }
.sw.on { box-shadow: 0 0 0 2px var(--text); }
.swatches input[type=color] { width: 40px; height: 30px; }
.range { display: flex; gap: 10px; align-items: center; }
.range input { flex: 1; accent-color: var(--accent); }
.range output { font-size: 12px; color: var(--muted); min-width: 44px; text-align: right; }
.sg-preview { position: sticky; top: 0; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.seg.small button { padding: 3px 10px; font-size: 12.5px; }
.sg-mail { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; transition: max-width .2s; margin: 0 auto; width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.sg-mail.dark { background: #1f2023; border-color: #303236; }
.sg-mail.mobile { max-width: 375px; }
.sg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.big { padding: 10px 18px; font-size: 15px; }
.warn-hint { background: color-mix(in srgb, #f59e0b 12%, transparent); border-radius: 8px; padding: 8px 10px; }
.howto dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 13px; }
.howto dt { font-weight: 600; }
.howto dd { margin: 0; color: var(--muted); }
.sg-empty { text-align: center; padding: 50px 16px; display: grid; justify-items: center; gap: 10px; }
.sg-empty-art { font-size: 44px; }
.sg-empty h2 { margin: 0; }
.sg-empty p { max-width: 520px; }
@media (max-width: 980px) { .sg-grid { grid-template-columns: 1fr; } .sg-preview { position: static; } }
.app-icon.len-2 { font-size: 9px; }
.app-icon.len-3 { font-size: 7px; letter-spacing: -.04em; }
.app-icon.lg.len-2 { font-size: 15px; }
.app-icon.lg.len-3 { font-size: 13px; }
.mir-row { gap: 12px; }
.mir-side { display: inline-flex; align-items: center; gap: 8px; }
.mir-dir { font-size: 20px; color: var(--accent); font-weight: 700; }
.mir-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.mir-mid select { width: auto; }
@media (max-width: 700px) { .mir-grid { grid-template-columns: 1fr; } }

/* ---- files ---- */
.file-row { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.file-row:hover, .file-row:focus-visible { background: var(--surface-2); outline: none; }
.file-ico { font-size: 20px; width: 26px; text-align: center; flex: none; }
.file-acts { display: flex; gap: 2px; opacity: .6; }
.file-row:hover .file-acts { opacity: 1; }
.crumbs { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.crumbs .linklike { font-weight: 500; }
.gd-box { margin-top: 12px; padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 13px; }
.empty .gd-box { border: 0; align-items: center; }

/* ---- JM Autodíly ---- */
.jm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.jm-head { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)) 1fr; gap: 10px; align-items: stretch; }
.jm-kpi { display: grid; text-align: left; gap: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.jm-kpi:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.jm-kpi-n { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jm-kpi-l { font-size: 12.5px; color: var(--muted); }
.jm-sync { justify-self: end; align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; font-size: 12px; max-width: 640px; }
.jm-sync > .error { flex-basis: 100%; text-align: right; } .jm-sync > .linklike { font-size: 12px; white-space: nowrap; }
.spinner.small { display: inline-block; width: 12px; height: 12px; border-width: 2px; vertical-align: -2px; }
.jm-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jm-nav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.jm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 13px; font-weight: 500; white-space: nowrap; }
.jm-chip.on { border-color: var(--c, var(--accent)); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); }
.jm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.jm-chip-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.jm-search { width: 240px; max-width: 100%; }
.jm-tools { margin-bottom: 0; }
.jm-facets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.jm-facet { border: 1px dashed var(--border); background: transparent; border-radius: 8px; padding: 3px 9px; font-size: 12.5px; color: var(--muted); }
.jm-facet.on { border-style: solid; color: var(--text); background: var(--surface); font-weight: 500; }
.jm-facet .count { margin-left: 4px; }
.jm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.jm-types { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); grid-auto-flow: row dense; container-type: inline-size; } /* half columns: S = 1, normal = 2 */
.jm-types > section { grid-column: span 2; }
.jm-types.jm-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; } /* row spans set by jmBrick (jm.js) */
/* dashboard card of one type */
.jm-tcard { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: 12px; background: var(--surface); min-width: 0; }
.jm-tcard-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }
.jm-tcard-name { font-weight: 700; font-size: 15px; color: color-mix(in srgb, var(--c) 70%, var(--text)); } /* the type colour, readable on light and dark */
.jm-tcard-n { font-size: 28px; font-weight: 700; line-height: 1; grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; }
.jm-mini-list { display: grid; gap: 2px; }
.jm-mini { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; padding: 5px 6px; margin: 0 -6px; border-radius: 7px; min-width: 0; font-size: 13.5px; }
.jm-mini:hover { background: var(--surface-2); }
.jm-mini.unread .jm-mini-title { font-weight: 600; }
.jm-mini-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-mini-st { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.jm-tcard-empty { padding: 6px 0; }
.jm-tcard-all { align-self: flex-start; margin-top: auto; font-size: 13px; }
/* case card */
.jm-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 10px; background: var(--surface); cursor: pointer; min-width: 0; }
.jm-card:hover, .jm-card:focus-visible { border-color: color-mix(in srgb, var(--c) 55%, var(--border)); outline: none; box-shadow: var(--shadow); }
.jm-card.done { opacity: .62; }
.jm-card-top { display: flex; align-items: center; gap: 6px; }
.jm-card-title { margin: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jm-card.unread .jm-card-title { font-weight: 700; }
.jm-card > .pill { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-card-text { margin: 0; font-size: 13px; color: var(--text); opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.jm-card-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: auto; min-width: 0; }
.jm-card-foot > span { white-space: nowrap; flex: none; }
.jm-card-foot > .jm-card-sub { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jm-card-foot > .spacer { flex: 1 1 0; }
.jm-newdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.jm-tag { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; color: color-mix(in srgb, var(--c) 70%, var(--text)); background: color-mix(in srgb, var(--c) 13%, transparent); white-space: nowrap; }
.jm-when { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pill.jm-pill-new { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.jm-more { padding: 6px; text-align: center; }
.jm-num { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; margin-right: 6px; }
.jm-mini .jm-num { margin-right: 4px; font-size: 12.5px; }
/* quick actions on a card: on hover (always on touch screens) */
.jm-quick { display: flex; gap: 2px; flex-wrap: wrap; margin: 2px -4px -4px; padding-top: 6px; border-top: 1px dashed var(--border); opacity: 0; transition: opacity .12s; }
.jm-card:hover .jm-quick, .jm-card:focus-within .jm-quick { opacity: 1; }
@media (hover: none) { .jm-quick { opacity: 1; } }
.jm-q { display: inline-flex; align-items: center; gap: 3px; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 3px 5px; font-size: 12.5px; color: var(--muted); }
.jm-q:hover, .jm-q:focus-visible { border-color: var(--border); background: var(--surface-2); color: var(--text); outline: none; }
.jm-q-l { font-size: 12px; }
/* detail */
.jm-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 10px; }
.jm-step { position: relative; padding-left: 10px; }
.jm-step::before { content: ''; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.jm-step.last::before { background: var(--accent); }
.jm-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.jm-step-event { font-weight: 600; }
.jm-step-note { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.jm-raw { margin-top: 8px; display: grid; gap: 8px; justify-items: start; }
.jm-table { margin-top: 8px; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.jm-table .tbl td, .jm-table .tbl th { white-space: nowrap; }
.jm-table .tbl tbody tr { cursor: default; }
.jm-fields { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.jm-fields dt { color: var(--muted); }
.jm-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.jm-actions { flex-wrap: wrap; }
.jm-h { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.jm-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13.5px; margin: 0; max-height: 420px; overflow: auto; width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
  .jm-head { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jm-sync { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; max-width: none; } .jm-sync > .error { text-align: left; }
  .jm-kpi { padding: 8px 10px; }
  .jm-kpi-n { font-size: 21px; }
  .jm-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; flex-basis: 100%; }
  .jm-search { width: 100%; }
  .jm-tools .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .jm-tools .seg button { white-space: nowrap; flex: none; }
  .jm-quick { gap: 0; }
  .jm-q { padding: 3px 4px; }
  .jm-grid, .jm-types { grid-template-columns: minmax(0, 1fr); }
  .jm-fields { grid-template-columns: 1fr; gap: 2px; }
  .jm-fields dd { margin-bottom: 6px; }
}

/* ---------- AI assistant (Claude) ---------- */
.ai-page { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; height: calc(100vh - 260px); min-height: 360px; }
.ai-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: 14px; }
.ai-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ai-msg.user p { margin: 0; }
.ai-msg.assistant { align-self: flex-start; background: var(--card, var(--bg)); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-md p { margin: 0 0 6px; } .ai-md p:last-child { margin-bottom: 0; }
.ai-md ul, .ai-md ol { margin: 4px 0 8px; padding-left: 20px; } .ai-md h4 { margin: 8px 0 4px; font-size: 14px; }
.ai-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-acts .pill, .ai-examples .pill { cursor: pointer; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; font-size: 13px; }
.ai-empty { margin: auto; text-align: center; max-width: 560px; }
.ai-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.ai-bar { display: flex; gap: 8px; align-items: flex-end; }
.ai-input { flex: 1; resize: vertical; min-height: 44px; }
.ai-btns { display: flex; flex-direction: column; gap: 6px; }
.ai-box { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.ai-box:empty { display: none; }
.ai-label { font-weight: 600; color: var(--accent); font-size: 13px; }
.ai-out:empty { display: none; }
.ai-out { font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.ai-tasks { display: flex; flex-direction: column; gap: 4px; }
.ai-task { display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) { .ai-msg { max-width: 100%; } .ai-page { height: calc(100vh - 200px); } }

/* ---------- Google Disk ---------- */
.gd-connect { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: 40px auto; }
.gd-connect h2 { margin: 0; } .gd-logo { font-size: 40px; }
.gd-drop { border: 2px dashed transparent; border-radius: 12px; transition: border-color .15s, background .15s; }
.gd-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.gd-uploads { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.gd-uploads:empty { display: none; }
.gd-up { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.gd-up span:first-child { flex: 0 1 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-up progress { flex: 1; max-width: 300px; }
.module-chip { background: var(--surface-2); }

/* ---------- main modules of the hub (Google Disk, JM Autodíly) in their own tab ---------- */
.module-frame { overflow-y: auto; }
.module-page { max-width: 1280px; margin: 0 auto; padding: 22px 24px 40px; }
.module-title { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 16px; }
@media (max-width: 640px) { .module-page { padding: 14px 16px 30px; } }
.gd-inv { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.gd-inv .row { flex-wrap: wrap; align-items: center; }

/* ---------- overview: today at a glance, widget gallery, new widgets ---------- */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 12px; margin-bottom: 16px; }
.sum-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text); font: inherit; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.sum-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.sum-ico { grid-row: span 2; font-size: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); }
.sum-n { font-size: 24px; font-weight: 700; line-height: 1.1; }
.sum-l { font-size: 12.5px; color: var(--muted); }
.sum-card.warn .sum-ico { background: color-mix(in srgb, #ef4444 16%, transparent); } .sum-card.warn .sum-n { color: #ef4444; }
.sum-card.info .sum-ico { background: color-mix(in srgb, var(--accent) 16%, transparent); } .sum-card.info .sum-n { color: var(--accent); }
.sum-card.next { grid-template-columns: auto 1fr; }
.sum-card.next .sum-ico { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.sum-next { display: grid; gap: 2px; min-width: 0; } .sum-next strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-ico { font-size: 16px; line-height: 1; }
.add-widget { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: 2px dashed var(--border); border-radius: 14px;
  background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
.add-widget span { font-size: 20px; } .add-widget:hover { border-color: var(--accent); color: var(--accent); }
.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wg-tile { display: grid; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.wg-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.wg-ico { font-size: 24px; }
.wg-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; padding: 6px; }
.wg-app { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.wg-app:hover { background: var(--surface-2); border-color: var(--border); }
.wg-app .app-icon { width: 38px; height: 38px; border-radius: 11px; }
.inv-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 10px; }
.inv-sum strong { font-size: 20px; }
.inv-row { display: grid; grid-template-columns: 10px auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.inv-row:hover { background: var(--surface-2); }
.inv-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; } .inv-dot.ok { background: #10b981; } .inv-dot.late { background: #ef4444; }
.inv-num { font-weight: 600; font-variant-numeric: tabular-nums; } .inv-cl { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-tot { font-variant-numeric: tabular-nums; }
.files-side .side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 10px 4px; font-weight: 600; }
.files-side .side-note { padding: 2px 10px 6px; font-size: 12px; }
@media (max-width: 900px) { .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum-card.next { grid-column: span 2; } }

/* ---------- info widgets ---------- */
.mw { padding: 4px 6px; } .mw-title { font-weight: 600; text-transform: capitalize; margin: 2px 2px 8px; }
.mw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mw-h { font-size: 11px; color: var(--muted); padding: 2px 0; }
.mw-d { position: relative; aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.mw-d:hover { background: var(--surface-2); } .mw-d.today { color: var(--accent); font-weight: 700; } .mw-d.sel { background: var(--accent); color: var(--accent-text); }
.mw-dot { position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.mw-dot.many { width: 10px; margin-left: -5px; border-radius: 2px; } .mw-d.sel .mw-dot { background: var(--accent-text); }
.mw-day { font-size: 12.5px; color: var(--muted); margin: 10px 2px 4px; text-transform: capitalize; }
.clk { text-align: center; padding: 10px 6px; } .clk-t { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.clk-d { color: var(--muted); text-transform: capitalize; } .clk-z { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.wx { padding: 4px 8px; } .wx-now { display: flex; align-items: center; gap: 14px; } .wx-ico { font-size: 44px; } .wx-t { font-size: 30px; font-weight: 700; }
.wx-place { margin-left: auto; align-self: flex-start; font-weight: 600; color: var(--muted); }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.wx-day { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 10px; background: var(--surface-2); font-size: 13px; } .wx-di { font-size: 22px; }
.fx { padding: 4px 8px; display: grid; gap: 10px; } .fx-list { display: grid; gap: 4px; }
.fx-row { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.fx-conv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .fx-in { width: auto; max-width: 110px; }
.qn { display: grid; gap: 8px; padding: 4px 8px; }
.nd { display: grid; gap: 6px; padding: 4px 8px; } .nd-row { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.nd-row.today { background: color-mix(in srgb, var(--accent) 14%, transparent); } .nd-row.today strong { font-size: 17px; }
.cd { text-align: center; padding: 10px; display: grid; gap: 2px; } .cd-n { font-size: 44px; font-weight: 800; color: var(--accent); line-height: 1; } .cd-l { color: var(--muted); }
.widgets { align-items: start; }

/* ---- travel to an event (travel.js) ---- */
.travel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.travel .travel-nav { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.travel .btn.small { padding: 3px 9px; font-size: 12.5px; text-decoration: none; }
.travel.compact { margin-top: 6px; gap: 4px 8px; }
.travel-field { grid-column: 1 / -1; }
.sum-place { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-card.next { cursor: pointer; }

/* ---- widget display variants ---- */
.widget.variant-compact .it { padding: 4px 8px; }
.widget.variant-compact .it-sub { display: none; }
.wv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.wv-card { display: grid; gap: 4px; align-content: start; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 10px; background: var(--surface); min-width: 0; }
.wv-card:hover { box-shadow: var(--shadow); }
.wv-card.done { opacity: .6; }
.wv-card strong { font-size: 13.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wv-card-text { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wv-number { display: grid; justify-items: start; gap: 2px; padding: 4px 2px; }
.wv-n { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wv-peek { display: grid; gap: 2px; margin-top: 8px; justify-items: start; font-size: 13px; }
.wv-peek .linklike { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---------- event location: suggestions and map ---------- */
.geo-row { display: flex; gap: 6px; align-items: flex-start; }
.geo-wrap { position: relative; flex: 1; min-width: 0; }
.geo-list { position: fixed; z-index: 1000; width: max-content; max-width: min(560px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; max-height: min(360px, 50vh); overflow: auto; color: var(--text); font-size: 15px; font-weight: 400; }
.geo-opt { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 15px; line-height: 1.35; cursor: pointer; }
.geo-pin { flex: none; }
.geo-opt:hover, .geo-opt.on { background: var(--surface-2); }
.geo-map { height: min(60vh, 460px); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.geo-addr { min-height: 1.4em; }
.modal .geo-map + .geo-addr { font-size: 14px; color: var(--text); }

/* ---- JM widgets on the dashboard ---- */
.jmw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.jmw-tile { display: grid; justify-items: start; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: 10px; background: var(--surface); text-align: left; }
.jmw-tile:hover { box-shadow: var(--shadow); }
.jmw-tile-n { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jmw-tile-l { font-size: 12.5px; color: var(--c); font-weight: 600; }
.jmw-row { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; text-align: left; min-width: 0; font-size: 13.5px; }
.jmw-row:hover { background: var(--surface-2); }
.jmw-row.unread .jmw-name { font-weight: 600; }
.jmw-row .jm-dot { flex: none; }
.jmw-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jmw-st { flex: none; max-width: 45%; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jmw-card.unread strong { font-weight: 700; }
.jmw-more { margin-top: 6px; font-size: 13px; }
.jm-new { display: inline-block; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 600; border-radius: 99px; padding: 0 7px; line-height: 18px; }

/* calendar widget: week columns */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 4px; }
.wk-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px; border-radius: 10px; background: var(--surface-2); min-height: 120px; }
.wk-day.today { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.wk-head { display: flex; justify-content: space-between; font-size: 12.5px; text-transform: capitalize; color: var(--muted); } .wk-day.today .wk-head { color: var(--accent); }
.wk-it { display: grid; gap: 1px; text-align: left; border: 0; border-left: 3px solid var(--c); border-radius: 6px; padding: 4px 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; overflow: hidden; }
.wk-it span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wk-it.done { opacity: .55; text-decoration: line-through; }
.wk-t { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .wk-free { color: var(--muted); font-size: 12px; text-align: center; margin-top: 8px; }
@media (max-width: 900px) { .wk { grid-template-columns: 1fr; } .wk-day { min-height: 0; } }
.grid-form > .geo-field { grid-column: 1 / -1; } .geo-wrap .input { width: 100%; min-width: 220px; }

/* ---- look switch in the user menu ---- */
.menu-label { padding: 8px 12px 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.theme-seg { display: flex; gap: 4px; padding: 0 8px 8px; }
.theme-seg button { flex: 1; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 6px; font-size: 12.5px; white-space: nowrap; }
.theme-seg button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-weight: 600; }
.travel-leave { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.travel-leave.late { color: var(--danger); }
.backup-row { display: flex; align-items: center; gap: 10px; }

/* ---------- Soubory: folders apart from files ---------- */
.fv { display: grid; gap: 22px; }
.fv-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; flex-wrap: wrap; }
.fv-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fv-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fv-folder { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color .12s, box-shadow .12s, transform .12s; }
.fv-folder:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.fv-fico { font-size: 22px; flex: none; } .fv-fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-list { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 4px; }
.fv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fv-tile { display: grid; justify-items: center; gap: 6px; padding: 16px 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; cursor: pointer; min-width: 0; }
.fv-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); }
.fv-tico { font-size: 36px; } .fv-tname { font-size: 13px; font-weight: 500; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-empty { padding: 40px 10px; text-align: center; }
.views-main > .crumbs { font-size: 15px; margin: 0 2px 14px; }
.pf-list { display: grid; gap: 2px; max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 4px; min-height: 160px; }
.pf-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pf-item:hover { background: var(--surface-2); } .pf-item span:nth-child(2) { flex: 1; } .pf-go { color: var(--muted); }
.pf-crumbs { font-size: 14px; }
.folder-pick { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.folder-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }

/* phones and touch screens: tiles grow with the page instead of scrolling inside (nested scrolling traps the finger) */
.w-more { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .widget { max-height: none; }
  .w-body { overflow: visible; }
  .widget:not(.expanded) .w-body .it-list > :nth-child(n+7),
  .widget:not(.expanded) .w-body .wv-cards > :nth-child(n+7),
  .widget:not(.expanded) .w-body .notes > :nth-child(n+7) { display: none; }
  .w-more { display: block; width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; border-radius: 0 0 14px 14px; }
  .homepage { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
}
@media (max-width: 900px) { .wk-day:not(.today):has(.wk-free) { display: none; } } /* phone: the week shows only days with something */

/* ---------- item editor: clear layout, readable text ---------- */
.ed-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; align-items: end; }
.ed-form > * { grid-column: span 6; }
.ed-form > .ed-when { grid-column: span 2; }
.ed-form > .ed-check { grid-column: span 1; align-self: center; padding-top: 18px; white-space: nowrap; }
.ed-form > .ed-half { grid-column: span 3; }
.ed-form label.field, .ed-more label.field, .ed-more > .editor > .field { font-size: 13px; font-weight: 600; color: var(--text); gap: 6px; }
.ed-form .input, .ed-more .input { font-size: 15px; color: var(--text); padding: 10px 12px; }
.ed-form .ed-title .input { font-size: 18px; font-weight: 600; padding: 11px 13px; }
.ed-form label.check { font-size: 14px; color: var(--text); }
.ed-form .geo-field { font-size: 13px; font-weight: 600; color: var(--text); }
.ed-form textarea.input { min-height: 44px; }
.ed-more { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.ed-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ed-more[open] > summary { margin-bottom: 10px; }
@media (max-width: 640px) {
  .ed-form > .ed-when, .ed-form > .ed-half { grid-column: span 6; }
  .ed-form > .ed-check { grid-column: span 3; padding-top: 0; }
}

/* ---------- arranging the overview ---------- */
.dash-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.dash-edit .de-tile { min-height: 0; max-height: none; padding: 12px 14px; gap: 10px; cursor: grab; border-style: dashed; }
.dash-edit .de-tile.dragging { opacity: .4; } .dash-edit .de-tile.drop { outline: 2px solid var(--accent); outline-offset: 2px; }
.de-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.de-grip { color: var(--muted); font-size: 18px; cursor: grab; }
.de-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dash-edit .de-tile .icon-btn { opacity: 1; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) { .dash-edit .de-tile { cursor: default; } }

/* ---------- calendar: stronger tiles and type ---------- */
.cal-grid { border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.cal-wd { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); opacity: .7; padding: 9px 6px; }
.cal-cell { min-height: 108px; padding: 6px; gap: 3px; transition: background .12s; }
.cal-cell:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.cal-cell.weekend:not(.other) { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.cal-cell.today { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cal-num { font-size: 14px; font-weight: 700; width: 26px; height: 26px; margin-bottom: 2px; }
.cal-cell.other .cal-num { opacity: .4; font-weight: 500; }
.cal-chip { display: flex; gap: 5px; align-items: baseline; font-size: 12.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--c) calc(var(--chip-mix) + 8%), var(--surface)); border-left: 3px solid var(--c); white-space: normal; cursor: pointer; }
.cal-chip:hover { background: color-mix(in srgb, var(--c) calc(var(--chip-mix) + 18%), var(--surface)); }
.cal-t { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.cal-tt { min-width: 0; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cal-more { font-size: 12px; font-weight: 600; color: var(--accent); padding-left: 6px; }
.cal-title { font-size: 22px; font-weight: 700; }
.cal-side { padding: 16px; }
.cal-side h3 { font-size: 17px; }
@media (max-width: 760px) { .cal-chip { font-size: 11px; padding: 2px 4px; } .cal-tt { -webkit-line-clamp: 1; } .cal-t { display: none; } .cal-cell { min-height: 70px; } }
/* narrow windows: the day panel goes under the month; tight day cells put the time above the title */
@media (max-width: 1150px) { .cal { grid-template-columns: 1fr; } .cal-side { position: static; } }
.cal-cell { container-type: inline-size; }
@container (max-width: 125px) {
  .cal-chip { flex-direction: column; align-items: stretch; gap: 0; padding: 2px 5px; }
  .cal-t { font-size: 11px; }
  .cal-tt { font-size: 12px; }
}
.cal-main { min-width: 0; } .cal > * { min-width: 0; }

/* ---------- source pill (list / folder / mailbox) ---------- */
.it-sub .src, .src { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; line-height: 1.5; padding: 0 8px; border-radius: 99px;
  color: color-mix(in srgb, var(--c, var(--muted)) 78%, var(--text)); background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); white-space: nowrap; }

/* ---------- notes: coloured cards by folder ---------- */
.note { background: color-mix(in srgb, var(--c) 9%, var(--surface)); border-color: color-mix(in srgb, var(--c) 30%, var(--border)); }
.note:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); }
.note-bar { background: var(--c); width: 5px; }
.note strong { font-size: 15px; }
.note p { color: var(--text); opacity: .8; }
.note-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.nf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.nf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nf-chip.on { background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface)); border-color: var(--c, var(--accent)); }
.nf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.nf-group { margin: 0 0 22px; }
.nf-group > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }

/* ---------- tasks: columns of cards ---------- */
.tk-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.tk-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.tk-col > header { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.tk-col > header h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.tk-col.over > header h3 { color: var(--danger); } .tk-col.today > header h3 { color: var(--accent); }
.tk-col.over { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.tk-card { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.tk-card:hover { box-shadow: var(--shadow); }
.tk-card.done { opacity: .55; } .tk-card.done .tk-title { text-decoration: line-through; }
.tk-card .done-check { margin-top: 3px; accent-color: var(--c); width: 17px; height: 17px; flex: none; }
.tk-main { min-width: 0; display: grid; gap: 4px; }
.tk-title { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.tk-note { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.tk-when.over { color: var(--danger); font-weight: 600; }
.tk-empty { font-size: 13px; color: var(--muted); padding: 8px 4px; }

/* ---------- messages: mailboxes + days ---------- */
.mb { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.mb-side { display: grid; gap: 2px; position: sticky; top: 0; }
.mb-box { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; min-width: 0; }
.mb-box:hover { background: var(--surface-2); } .mb-box.on { background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); font-weight: 600; }
.mb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-main { display: grid; gap: 14px; min-width: 0; }
.mb-day > h3 { margin: 0 0 6px; font-size: 14px; text-transform: capitalize; }
.mb-day .it-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
@media (max-width: 760px) { .mb { grid-template-columns: 1fr; } .mb-side { position: static; display: flex; overflow-x: auto; gap: 6px; } .mb-box { flex: none; border: 1px solid var(--border); } .mb-name { max-width: 160px; } }

/* overview in a narrow window: the tab bar keeps its buttons, the week keeps its columns down to phones */
.ws-nav { flex-wrap: wrap; }
@media (max-width: 900px) and (min-width: 641px) { .wk { grid-template-columns: repeat(7, minmax(0, 1fr)); } .wk-day:not(.today):has(.wk-free) { display: flex; } .wk-it { font-size: 11.5px; } }
.mb-day .it { min-width: 0; } .mb-day .it-main { min-width: 0; } .mb-day .it-title { overflow-wrap: anywhere; }

/* ---------- overview tabs and sections ---------- */
.board-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.board-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.board-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.board-x { font-weight: 700; opacity: .8; padding-left: 4px; }
.board-add { padding: 6px 12px; border: 1px dashed var(--border); border-radius: 99px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.board-add:hover { color: var(--accent); border-color: var(--accent); }
.sections { display: grid; gap: 18px; margin-bottom: 14px; }
.sections > .widgets { margin-bottom: 0; }
.dash-sec { display: grid; gap: 10px; }
.dash-sec-h { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; font-weight: 700; padding: 2px 2px; cursor: pointer; text-align: left; border-bottom: 2px solid var(--border); padding-bottom: 6px; }
.dash-caret { color: var(--muted); width: 14px; }
.dash-sec.folded .dash-sec-h { opacity: .75; }
.de-sel { width: auto; max-width: 170px; padding: 4px 8px; font-size: 13px; }
.board-empty { padding: 30px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; margin-bottom: 14px; }
/* month widget on the overview: the Calendar page's grid, a bit tighter */
.mw-grid2 { margin-top: 4px; }
.mw-grid2 .cal-cell { min-height: 84px; padding: 4px; }
.widget.size-s .mw-grid2 .cal-cell { min-height: 58px; }
.mw-grid2 .cal-wd { padding: 6px 2px; font-size: 11px; }
.it { min-width: 0; } .it-main { min-width: 0; } .it-title { overflow-wrap: anywhere; }

/* ---------- notes like Apple Notes: folders | list | note ---------- */
.nt { display: grid; grid-template-columns: 230px 300px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); height: calc(100vh - 300px); min-height: 460px; }
.nt-side { background: var(--surface-2); border-right: 1px solid var(--border); padding: 10px 8px; overflow-y: auto; display: grid; align-content: start; gap: 1px; }
.nt-acc { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 8px 4px; }
.nt-folder { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; min-width: 0; }
.nt-folder:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.nt-folder.on { background: color-mix(in srgb, var(--c, var(--accent)) 18%, var(--surface)); font-weight: 600; }
.nt-ficon { width: 16px; display: grid; place-items: center; flex: none; }
.nt-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-list { border-right: 1px solid var(--border); overflow-y: auto; padding: 6px; display: grid; align-content: start; gap: 2px; }
.nt-item { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border: 0; border-left: 3px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.nt-item:hover { background: var(--surface-2); }
.nt-item.on { background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left-color: var(--c); }
.nt-item strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-when { font-weight: 600; color: var(--text); opacity: .75; margin-right: 6px; }
.nt-item .src { justify-self: start; }
.nt-view { overflow-y: auto; padding: 18px 26px; }
.nt-vhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nt-view h2 { margin: 0 0 12px; font-size: 24px; }
.nt-body { white-space: pre-wrap; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .nt { grid-template-columns: 200px minmax(0, 1fr); } .nt-view { display: none; } }
@media (max-width: 700px) { .nt { grid-template-columns: 1fr; height: auto; } .nt-side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); } .nt-acc { display: none; } .nt-folder { flex: none; } .nt-list { border-right: 0; } }

/* ---------- messages as conversation tiles ---------- */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cv { display: grid; gap: 6px; text-align: left; padding: 14px; border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.cv:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.cv.unread { background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.cv-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cv-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.cv-who { display: grid; min-width: 0; flex: 1; }
.cv-who strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-src { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-right { display: grid; justify-items: end; gap: 3px; flex: none; }
.cv-badge { background: var(--c); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 99px; min-width: 20px; padding: 1px 7px; text-align: center; }
.cv-subj { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv.unread .cv-subj, .cv.unread .cv-who strong { font-weight: 800; }
.cv-snip { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cv-n { font-size: 12px; }
.cv-chat { display: flex; flex-direction: column; gap: 6px; max-height: 65vh; overflow-y: auto; padding: 6px 2px; }
.cv-day { align-self: center; font-size: 12px; color: var(--muted); background: var(--surface-2); padding: 2px 10px; border-radius: 99px; margin: 8px 0 2px; text-transform: capitalize; }
.cv-msg { align-self: flex-start; max-width: 80%; display: grid; gap: 3px; text-align: left; padding: 8px 12px; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.cv-msg.out { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.cv-msg.new { border-color: var(--accent); }
.cv-from { font-size: 12px; font-weight: 700; color: var(--accent); }
.cv-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-time { justify-self: end; font-size: 11px; color: var(--muted); }

/* ---------- notes: folders + tiles ---------- */
.nt.nt-tiles { grid-template-columns: 230px minmax(0, 1fr); }
.nt-grid { overflow-y: auto; padding: 14px 16px; }
.nt-gtitle { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 20px; }
.nt-grid .notes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 700px) { .nt.nt-tiles { grid-template-columns: 1fr; } }
.app-chip { cursor: grab; white-space: nowrap; will-change: transform; user-select: none; }
.app-chip:active { cursor: grabbing; }
.app-chip.dragging { opacity: .35; border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.app-chip-name { white-space: nowrap; }
.feat-row { padding: 4px 0; font-size: 14px; gap: 10px; }

/* status & finance widgets */
.st { display: grid; gap: 3px; padding: 4px 8px; }
.st-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 2px; }
.st-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.st-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #94a3b8; }
.st-dot.ok { background: #10b981; } .st-dot.bad { background: #ef4444; box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent); }
.fin { display: grid; gap: 12px; padding: 4px 8px; }
.fin-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-top > div { display: grid; gap: 2px; } .fin-top strong { font-size: 20px; } .fin-bad { color: var(--danger); }
.fin-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 110px; padding-bottom: 16px; position: relative; }
.fin-col { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 2px; justify-content: center; }
.fin-bar { width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; } .fin-bar.inv, .fin-sw.inv { background: var(--accent); } .fin-bar.paid, .fin-sw.paid { background: #10b981; }
.fin-m { position: absolute; bottom: -16px; font-size: 10.5px; color: var(--muted); }
.fin-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; } .fin-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fin-limit { display: grid; gap: 5px; }
.fin-prog { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.fin-prog-in { height: 100%; background: #10b981; border-radius: 99px; } .fin-prog-in.warn { background: #f59e0b; } .fin-prog-in.bad { background: #ef4444; }

/* ---------- Kniha jízd ---------- */
.tr-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tr-card { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.tr-card strong { font-size: 20px; } .tr-card.total { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.tr-list, .tr-sg { display: grid; gap: 6px; }
.tr-sg { margin-bottom: 18px; } .tr-sg h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.tr-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px minmax(140px, 220px) 150px 28px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tr-row.sg { grid-template-columns: 110px minmax(0, 1fr) 80px auto; background: var(--surface-2); border-style: dashed; }
.tr-row.private { opacity: .65; }
.tr-when { display: grid; } .tr-when strong { text-transform: capitalize; }
.tr-route { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; font-size: 14px; }
.tr-route > span { overflow-wrap: anywhere; } .tr-arrow { color: var(--muted); } .tr-src { font-size: 11.5px; color: var(--muted); width: 100%; }
.tr-km { text-align: right; font-variant-numeric: tabular-nums; }
.tr-purpose, .tr-co { padding: 6px 8px; font-size: 13px; }
@media (max-width: 900px) { .tr-row, .tr-row.sg { grid-template-columns: 1fr auto; } .tr-route, .tr-purpose, .tr-co { grid-column: 1 / -1; } }

/* Hledání všude (Cmd+K) */
.srch { display: flex; flex-direction: column; gap: 10px; min-width: min(640px, 86vw); }
.srch-in { font-size: 16px; padding: 12px 14px; }
.srch-list { max-height: min(60vh, 520px); overflow: auto; }
.srch-g { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 8px 4px; }
.srch-r { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.srch-r.sel { background: var(--accent-soft, rgba(99,102,241,.12)); }
.srch-ico { width: 24px; text-align: center; flex: none; }
.srch-ico .app-ico, .srch-ico img { width: 22px; height: 22px; }
/* added to the home screen (iPhone): the bar goes under the status bar / notch */
.bar { height: calc(46px + env(safe-area-inset-top, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
.steps { margin: 6px 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.steps code { word-break: break-all; }

/* Kontakty */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.pp { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: inherit; cursor: pointer; position: relative; min-width: 0; }
.pp:hover { border-color: var(--accent, #6366f1); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pp.unread { border-left: 4px solid var(--accent, #6366f1); }
.pp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pp-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; white-space: normal; }
.pp-src { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(99,102,241,.12); }
.pp-src.wa { background: rgba(37,211,102,.16); }
.pp-unread { position: absolute; top: 10px; right: 10px; }
.pp-card { display: flex; flex-direction: column; gap: 12px; }
.pp-head { display: flex; align-items: center; gap: 12px; }
.cv-av.big { width: 52px; height: 52px; font-size: 18px; }
.pp-acts { flex-wrap: wrap; gap: 6px; }
.pp-tl { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow: auto; }
.pp-ti { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.pp-ti:hover { background: var(--hover, rgba(0,0,0,.04)); }
.pp-ti-ico { width: 22px; flex: none; text-align: center; }
.pp-ti-body { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-search { width: min(420px, 100%); }
a.btn { text-decoration: none; }
@media (max-width: 700px) { .pp-tl { max-height: none; overflow: visible; } .pp-grid { grid-template-columns: 1fr; } }

/* dialogs on a phone: never wider than the screen, full-screen sheet, "Zavřít" always reachable (also under the notch) */
.overlay > .modal { min-width: 0; }
.modal-body { grid-template-columns: minmax(0, 1fr); }
.modal-body > *, .modal-body > * > * { min-width: 0; max-width: 100%; }
.modal .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.modal .seg::-webkit-scrollbar { display: none; }
.modal .seg button { flex: none; white-space: nowrap; }
.modal pre, .modal .code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.modal .card { min-width: 0; }
.modal .row > * { min-width: 0; }
.modal input.input, .modal select.input, .modal textarea.input { max-width: 100%; }
@media (max-width: 640px) {
  .overlay { padding: 0; place-items: stretch; }
  .modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .modal.narrow { height: auto; max-height: calc(100% - 32px); align-self: center; margin: 0 16px; width: auto; border-radius: 14px; }
  .modal.narrow .modal-head { padding-top: 12px; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .modal-head button { min-height: 40px; padding: 0 16px; }
  .modal-body { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  .modal .row { gap: 8px; }
  .modal .seg { flex-wrap: wrap; overflow: visible; }
  .modal .seg button { flex: 1 1 auto; }
}

/* menu in a column on the left while an app is open (wide screens) */
.side-apps, .side-gap, .side-toggle { display: none; }
@media (min-width: 900px) {
  .shell.side { flex-direction: row; }
  .shell.side .bar { flex-direction: column; align-items: stretch; width: 216px; height: auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 10px; gap: 2px; overflow-y: auto; overflow-x: hidden; }
  .shell.side .bar-btn { margin: 0; justify-content: flex-start; height: 38px; }
  .shell.side .bar-btn.home { margin-bottom: 8px; }
  .shell.side .tabs { flex-direction: column; align-items: stretch; flex: none; overflow: visible; gap: 2px; }
  .shell.side .tab { border-radius: 9px; max-width: none; height: 38px; }
  .shell.side .tab .name { flex: 1; }
  .shell.side .side-apps { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .2); }
  .shell.side .side-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .55; padding: 2px 10px 6px; }
  .shell.side .side-app { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--bar-text); cursor: pointer; text-align: left; }
  .shell.side .side-app:hover { background: var(--bar-hover); color: #fff; }
  .shell.side .side-app .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell.side .side-gap { display: block; flex: 1; min-height: 12px; }
  .shell.side .side-toggle { display: inline-flex; }
  .shell.side .stage { flex: 1; min-width: 0; }
  /* icons only */
  .shell.side.mini .bar { width: 60px; }
  .shell.side.mini .bar .name, .shell.side.mini .bar-btn.home span, .shell.side.mini .side-h, .shell.side.mini .tab .x { display: none; }
  .shell.side.mini .tab, .shell.side.mini .side-app, .shell.side.mini .bar-btn { justify-content: center; padding: 0; }
  .shell.side.mini .chev { transform: rotate(180deg); display: inline-block; }
}

/* Kniha jízd: vozidla, náklady, termíny */
.tr-tabs { margin-bottom: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tr-tabs button { white-space: nowrap; }
.tr-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tr-alert { text-align: left; border: 1px solid #f59e0b; background: rgba(245, 158, 11, .1); color: inherit; border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.tr-alert.late { border-color: #ef4444; background: rgba(239, 68, 68, .1); }
.tr-cost { cursor: pointer; }
.tr-car { margin-bottom: 12px; }
.tr-car-ico { font-size: 26px; }
.tr-odo { display: flex; flex-direction: column; align-items: flex-end; margin-right: 8px; }
.tr-terms { display: flex; flex-direction: column; gap: 6px; }
.tr-term { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid #22c55e; border-radius: 10px; }
.tr-term.soon { border-left-color: #f59e0b; background: rgba(245, 158, 11, .06); }
.tr-term.late { border-left-color: #ef4444; background: rgba(239, 68, 68, .06); }
.tr-term .it-main { flex: 1; min-width: 180px; }
.tr-left { font-weight: 600; font-size: 13px; }
.tr-term.late .tr-left { color: #dc2626; }
.tr-term.soon .tr-left { color: #b45309; }

.pp-bar { flex-wrap: wrap; gap: 8px; }
.pp-sel { width: auto; max-width: 240px; }
.pp-count { margin-top: 6px; }
.pp-src.s-iMessage { background: rgba(52, 170, 220, .16); }
.pp-src.s-Kontakty { background: rgba(148, 163, 184, .2); }
.pp-tag { font-size: 11px; color: var(--accent, #6366f1); font-weight: 600; }
.pp-bday { font-size: 11px; font-weight: 600; }
.pp-sec h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 15px; }
.mod-style { gap: 6px; flex-wrap: nowrap; }
.mod-style input[type=color] { width: 38px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
@media (max-width: 640px) { .feat-row { flex-wrap: wrap; } }

/* Zprávy: zdroj → schránka */
.msg-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.msg-types { width: fit-content; max-width: 100%; overflow-x: auto; }
.msg-types button { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.msg-types button.on { box-shadow: inset 0 -2px 0 var(--c, var(--accent)), 0 1px 2px rgba(0, 0, 0, .1); }
.msg-subs { margin: 0; padding-left: 4px; }
.msg-subs .nf-chip { font-size: 12px; padding: 4px 10px; }

/* Finance */
.fin-tabs { margin-left: 8px; }
.pos { color: #16a34a; } .neg { color: #dc2626; }
.fin-sum .fin-in strong { color: #16a34a; } .fin-sum .fin-out strong { color: #dc2626; }
.fin-sum button.tr-card { text-align: left; cursor: pointer; color: inherit; font: inherit; }
.fin-sec h3 { margin: 18px 0 8px; font-size: 15px; }
.fin-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fin-acc { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--surface); color: inherit; cursor: pointer; min-width: 0; }
.fin-acc:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.fin-acc-top { display: flex; justify-content: space-between; gap: 6px; }
.fin-acc-top strong, .fin-acc .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-bal { font-size: 20px; font-weight: 700; }
.fin-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 900px) { .fin-cols { grid-template-columns: 1fr; } }
.fin-cat { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; gap: 10px; align-items: center; border: 0; background: transparent; color: inherit; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; }
.fin-cat-name { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fin-bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .fin-bar span { display: block; height: 100%; border-radius: 99px; }
.fin-trend { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 160px; align-items: end; }
.fin-tm { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; border-radius: 6px; }
.fin-tm.on { background: var(--surface-2); }
.fin-tb { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.fin-tb span { width: 40%; border-radius: 3px 3px 0 0; min-height: 1px; } .fin-tb .in { background: #16a34a; } .fin-tb .out { background: #ef4444; }
.fin-legend { display: flex; align-items: center; gap: 6px; }
.fin-filters { flex-wrap: wrap; gap: 8px; } .fin-filters .input { width: auto; max-width: 240px; }
.fin-tot { margin: 4px 0 8px; }
.fin-list { display: flex; flex-direction: column; gap: 4px; }
.fin-rec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.fin-rec .it-main { flex: 1; min-width: 0; }
.fin-connect { max-width: 640px; }
.fin-connect .row .input { flex: 1; min-width: 200px; }
.callout.warn { border-left-color: #f59e0b; }
.pp-src.s-Teams { background: rgba(91, 95, 199, .16); }

.fin-loan { margin-bottom: 12px; }
.fin-prog { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; } .fin-prog span { display: block; height: 100%; background: linear-gradient(90deg, #16a34a, #22c55e); border-radius: 99px; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.fin-table th, .fin-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; } .fin-table th:nth-child(-n+2), .fin-table td:nth-child(-n+2) { text-align: left; }
.fin-table tr.past td { color: var(--muted); } .fin-table tr.extra td { color: #16a34a; font-weight: 600; }
.fin-plan { max-height: 70vh; overflow: auto; }
.fin-so { border-bottom: 1px solid var(--border); padding: 6px 0; }
/* side menu: always exactly the window's height – the app lists scroll, the buttons at the bottom stay visible */
@media (min-width: 900px) {
  .shell.side { height: 100vh; height: 100dvh; overflow: hidden; }
  .shell.side .bar { height: 100%; overflow: hidden; }
  .shell.side .tabs { flex: 0 1 auto; max-height: 45%; overflow-y: auto; overflow-x: hidden; min-height: 0; }
  .shell.side .side-apps { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; }
  .shell.side .side-gap { flex: 0 0 8px; min-height: 8px; }
  .shell.side .bar > .bar-btn:not(.home) { flex: none; }
  .shell.side .stage { height: 100%; }
}
.bar-btn.gear .name { display: none; } .gear-ico { font-size: 18px; line-height: 1; }
@media (min-width: 900px) { .shell.side:not(.mini) .bar-btn.gear .name { display: inline; } }
.fin-why { font-size: 11px; opacity: .8; white-space: normal !important; }
.fin-paid { font-size: 12px; color: #16a34a; font-weight: 600; }
.fin-month { margin-bottom: 12px; } .fin-src { width: 22px; text-align: center; flex: none; }
.sp-site h3 { margin: 16px 0 8px; font-size: 14px; color: var(--muted); }
.fs-tabs { margin-bottom: 12px; width: fit-content; max-width: 100%; overflow-x: auto; } .fs-tabs button { white-space: nowrap; font-weight: 600; }
.views.no-side { grid-template-columns: minmax(0, 1fr); }

/* side menu v2: one list (open apps on top), collapse button on the edge */
@media (min-width: 900px) {
  .shell.side .tabs { display: none; }
  .shell.side .bar { overflow: visible; }
  .shell.side .side-apps { margin-top: 4px; padding-top: 0; border-top: 0; }
  .shell.side .side-h2 { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .2); }
  .shell.side .side-app { position: relative; will-change: transform; }
  .shell.side .side-app.open { color: #f1f5f9; }
  .shell.side .side-app.active { background: var(--bar-active); color: var(--bar-active-text); }
  .shell.side .side-app .name { flex: 1; }
  .shell.side .side-app .x { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; opacity: 0; border: 0; background: transparent; color: inherit; padding: 0; flex: none; transition: opacity .15s; }
  .shell.side .side-app:hover .x, .shell.side .side-app.active .x { opacity: .7; }
  .shell.side .side-app .x:hover { opacity: 1; background: rgba(127, 127, 127, .25); }
  .shell.side .side-toggle { position: absolute; top: 18px; right: -13px; width: 26px; height: 26px; padding: 0; margin: 0; border-radius: 50%; justify-content: center;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); z-index: 20; font-size: 13px; }
  .shell.side .side-toggle:hover { background: var(--surface-2); color: var(--text); }
  .shell.side .bar-btn.home { margin-right: 10px; }
  .shell.side.mini .side-app { justify-content: center; padding: 0; }
  .shell.side.mini .side-app .x, .shell.side.mini .side-h { display: none; }
  .shell.side.mini .side-h2 { display: block; font-size: 0; padding: 0; margin: 8px 6px 4px; }
}

/* side menu v3: also on the home page, with the hub's sections; the collapse button in the middle of the edge */
@media (min-width: 900px) {
  .shell.side .ws-nav > button[role=tab] { display: none; }
  .shell.side .ws-nav { border-bottom: 0; justify-content: flex-end; }
  .shell.side .bar-btn.home.active { background: transparent; }
  .shell.side .side-toggle { top: 50%; transform: translateY(-50%); }
  .shell.side .ws-ico { width: 20px; text-align: center; flex: none; font-size: 14px; }
  .shell.side .side-ws { height: 32px; }
}
@media (min-width: 900px) { .shell.side .side-apps > * { flex: none; } .shell.side .side-app { height: 34px; } .shell.side .side-ws { height: 32px; } }

/* side menu: the list fades out above the bottom buttons instead of being cut; the buttons are a separate footer */
@media (min-width: 900px) {
  .shell.side .side-apps { padding-bottom: 22px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
  .shell.side .side-gap { flex: 0 0 auto; min-height: 0; height: 0; border-top: 1px solid rgba(148, 163, 184, .22); margin: 4px 4px 8px; }
}

.bar-foot { display: contents; }
@media (min-width: 900px) {
  .shell.side .bar-foot { display: flex; align-items: center; justify-content: space-between; gap: 2px; flex: none; padding: 0 2px; }
  .shell.side .bar-foot .bar-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .shell.side.mini .bar-foot { flex-direction: column; }
  /* thin dark scrollbar, only while hovering the list */
  .shell.side .side-apps { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .shell.side .side-apps:hover { scrollbar-color: rgba(148, 163, 184, .35) transparent; }
  .shell.side .side-apps::-webkit-scrollbar { width: 6px; }
  .shell.side .side-apps::-webkit-scrollbar-track { background: transparent; }
  .shell.side .side-apps::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
  .shell.side .side-apps:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .35); }
}
.cv-reply { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.cv-reply-in { flex: 1; min-width: 220px; resize: vertical; }
/* phone: no light strip above the dark bar (rubber-band scrolling, the status bar area) */
html { background: var(--bar); overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
.shell { background: var(--bg); }

/* phone with an app open: a narrow icon rail on the left; the arrow opens it over the page with the names */
@media (max-width: 899px) {
  .shell.side { flex-direction: row; height: 100vh; height: 100dvh; overflow: hidden; }
  .shell.side .bar { flex-direction: column; align-items: stretch; width: 56px; height: 100%; padding: calc(8px + env(safe-area-inset-top, 0px)) 6px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 2px; overflow: visible; z-index: 30; transition: width .2s ease, box-shadow .2s; }
  .shell.side .tabs { display: none; }
  .shell.side .stage { flex: 1; min-width: 0; height: 100%; }
  .shell.side .side-apps { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; margin-top: 6px; }
  .shell.side .side-apps > * { flex: none; }
  .shell.side .side-app { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--bar-text); }
  .shell.side .side-app.active { background: var(--bar-active); color: var(--bar-active-text); }
  .shell.side .side-app .name, .shell.side .side-app .x, .shell.side .side-h, .shell.side .bar-btn.home span { display: none; }
  .shell.side .side-h2 { display: block; font-size: 0; height: 0; margin: 6px 4px; border-top: 1px solid rgba(148, 163, 184, .25); }
  .shell.side .ws-ico { width: 22px; text-align: center; font-size: 16px; }
  .shell.side .bar-btn { margin: 0; height: 40px; justify-content: center; padding: 0; }
  .shell.side .bar-foot { display: flex; flex-direction: column; flex: none; gap: 2px; }
  .shell.side .side-gap { display: block; height: 0; border-top: 1px solid rgba(148, 163, 184, .22); margin: 4px; }
  /* the arrow sits inside the rail (above the bottom buttons) – it never reaches into the app, whose own menu tab is at its left edge */
  .shell.side .side-toggle { display: inline-flex; position: static; transform: none; align-self: center; justify-content: center; align-items: center; flex: none; width: 34px; height: 34px; margin: 2px auto; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: var(--bar-text); border: 1px solid rgba(148, 163, 184, .3); box-shadow: none; }
  .shell.side .chev { display: inline-block; transform: rotate(180deg); }
  /* opened: names visible, over the page */
  .shell.side.mopen .bar { position: absolute; left: 0; top: 0; bottom: 0; width: min(260px, 80vw); box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  .shell.side.mopen .stage { margin-left: 56px; }
  .shell.side.mopen .side-app { justify-content: flex-start; padding: 0 10px; }
  .shell.side.mopen .side-app .name { display: inline; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell.side.mopen .side-app.open .x { display: grid; width: 26px; height: 26px; place-items: center; border: 0; background: transparent; color: inherit; opacity: .7; }
  .shell.side.mopen .side-h { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .55; padding: 6px 10px 4px; }
  .shell.side.mopen .side-h2 { height: auto; padding-top: 10px; }
  .shell.side.mopen .bar-foot { flex-direction: row; justify-content: space-between; }
  .shell.side.mopen .chev { transform: none; }
  .shell.side .side-gap { flex: none; }
}
.fin-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .fin-tabs button { white-space: nowrap; }
@media (max-width: 640px) { .fin-tabs { margin-left: 0; order: 10; width: 100%; } }
/* iPhone: fields at 16 px so Safari never zooms the page in (a zoomed page looks blurry) */
@media (max-width: 899px) { input, select, textarea, .input { font-size: 16px; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* side menu: the active item is a soft highlight with an accent line, not a white block (looked like a glow on the iPhone) */
.shell.side .side-app.active, .shell.side .side-app.active:hover { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 #60a5fa; }
.shell.side .side-app { -webkit-font-smoothing: antialiased; }
@media (max-width: 899px) {
  .shell.side .bar { transition: none; }
  .shell.side .side-app.active { box-shadow: inset 3px 0 0 #60a5fa; }
  .shell.side .app-icon { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
}
/* iPhone, app open (side rail): the app frame starts below the status bar and ends above the home indicator –
   a frame can't see the safe-area insets itself; the strips around it are dark like the rail */
@media (max-width: 899px) {
  .shell.side, .shell.side .stage { background: var(--bar); }
  .shell.side .frame { top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px); }
}
/* iOS 26 tints the status-bar area (and its soft edge) with the page background: keep the page dark there and the
   light background only under the content */
html, body { background: var(--bar); }
#root { background: var(--bg); min-height: 100%; }
/* iPhone app (home screen): iOS blurs the top edge of the page under the status bar – keep the bar's icons below it */
@media (display-mode: standalone) and (max-width: 899px) {
  .bar { height: calc(60px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .shell.side .bar { padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
}
.hub-ver { font-size: 10px; font-weight: 600; opacity: .55; margin-left: -2px; align-self: center; }
.shell.side.mini .hub-ver { display: none; }
@media (max-width: 899px) { .shell.side .hub-ver { display: none; } }

/* calendar page: views */
.cal.cal-wide { grid-template-columns: minmax(0, 1fr); }
.cal-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-navrow { flex-wrap: nowrap; } .cal-navrow .cal-title { white-space: nowrap; text-transform: capitalize; }
.cal-tools { gap: 8px; }
.cal-views button { min-width: 58px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-wcol { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-height: 160px; cursor: pointer; min-width: 0; }
.cal-wcol.sel { border-color: var(--accent, #6366f1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #6366f1) 20%, transparent); }
.cal-wcol.weekend { background: color-mix(in srgb, var(--surface) 92%, var(--border)); }
.cal-dh { display: flex; align-items: baseline; gap: 6px; padding-bottom: 4px; text-transform: capitalize; }
.cal-dh span { color: var(--muted); } .cal-dh.today strong, .cal-dh.today span { color: var(--accent, #6366f1); }
.cal-free { color: var(--muted); font-size: 12px; }
.cal-day { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.cal-allday { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.cal-slot { display: flex; gap: 14px; align-items: stretch; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.cal-slot-t { display: flex; flex-direction: column; font-weight: 700; min-width: 52px; font-variant-numeric: tabular-nums; } .cal-slot-t small { color: var(--muted); font-weight: 500; }
.cal-slot-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-agenda { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.cal-agenda section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-wcol { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cal-wcol .cal-dh { width: 100%; }
  .cal-wcol .cal-chip { width: 100%; }
  .cal-head { flex-direction: column; align-items: stretch; }
  .cal-views { width: 100%; } .cal-views button { flex: 1; }
  .cal-tools { justify-content: space-between; }
}
/* line icons */
.ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: -0.15em; }
.ico svg { display: block; }
.sum-ico .ico { font-size: 22px; }
.w-ico .ico { font-size: 18px; }
.ws-ico .ico { font-size: 17px; opacity: .9; }
.wg-ico .ico { font-size: 22px; }

/* ---- JM: goods from the Nenalezené zboží report ---- */
.jm-gstate { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.jm-gstate.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.jm-gstate.warn { color: #d97706; background: color-mix(in srgb, #d97706 16%, transparent); }
.jm-gstate.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.jm-goods-route { font-size: 13px; overflow-wrap: anywhere; }
.jm-goods .jm-num { color: var(--text); }
.jmw-goods { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.jmw-goods .jm-card { padding: 10px 12px; }

/* calendar: week as rows of days */
.wk2 { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.wk2-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); cursor: pointer; align-items: start; }
.wk2-day:first-child { border-top: 0; }
.wk2-day.weekend { background: color-mix(in srgb, var(--surface) 94%, var(--border)); }
.wk2-day.sel { background: color-mix(in srgb, var(--accent, #6366f1) 7%, var(--surface)); }
.wk2-day.free { padding-top: 6px; padding-bottom: 6px; }
.wk2-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-top: 2px; }
.wk2-wd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wk2-n { font-size: 22px; }
.wk2-day.free .wk2-n { font-size: 16px; color: var(--muted); }
.wk2-day.today .wk2-n { background: var(--accent, #6366f1); color: #fff; border-radius: 999px; min-width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; }
.wk2-day.today .wk2-wd { color: var(--accent, #6366f1); }
.wk2-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; justify-content: center; min-height: 34px; }
.wk2-day.free .wk2-list { min-height: 0; }
.wk-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; text-align: left; border: 0; background: transparent; color: inherit; font: inherit;
  padding: 6px 10px; border-radius: 10px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); cursor: pointer; }
.wk-line:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.wk-line.done { opacity: .55; } .wk-line.done .wk-title { text-decoration: line-through; }
.wk-time { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.wk-text { display: flex; flex-direction: column; min-width: 0; }
.wk-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-place { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .wk2-day { grid-template-columns: 46px minmax(0, 1fr); padding: 10px; gap: 8px; } .wk-line { grid-template-columns: 50px minmax(0, 1fr); } }

/* Kniha jízd – Přehled */
.tr-sum button.tr-card { text-align: left; cursor: pointer; color: inherit; font: inherit; }
.tr-card.warn { border-color: #f59e0b; background: rgba(245, 158, 11, .08); }
.tr-cos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.tr-co-pill { padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: inherit; text-decoration: none; font-size: 13px; }
.tr-ov-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-ov-h { display: flex; align-items: center; justify-content: space-between; } .tr-ov-h h3 { margin: 0; font-size: 15px; }
.tr-ov-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tr-ov-car { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.tr-ov-kv { display: flex; justify-content: space-between; gap: 8px; }
.tr-ov-term { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: rgba(34, 197, 94, .1); }
.tr-ov-term.soon { background: rgba(245, 158, 11, .14); } .tr-ov-term.late { background: rgba(239, 68, 68, .14); }
.tr-ov-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 900px) { .tr-ov-cols { grid-template-columns: 1fr; } }
.tr-ov-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.tr-ov-route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.warn { background: rgba(245, 158, 11, .18); }
.ai-prop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 10px; } .ai-prop.done { border-style: solid; opacity: .8; } .ai-prop.skip { opacity: .5; }
/* touch: bigger hit areas for icon buttons */
@media (pointer: coarse) { .icon-btn { min-width: 36px; min-height: 36px; } .tab .x { min-width: 32px; min-height: 32px; } .shell.side .side-toggle { width: 34px; height: 34px; } }
/* phone side menu open over an app: a tap on the dimmed area closes it (taps inside an app frame never reach the hub) */
@media (max-width: 899px) { .shell.side.mopen .stage::after { content: ''; position: absolute; inset: 0; background: rgba(2, 6, 23, .35); z-index: 25; } }
/* iPhone app: the icons sit well below the status bar's blurred edge */
@media (display-mode: standalone) and (max-width: 899px) {
  .bar { height: calc(72px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .shell.side .bar { padding-top: calc(34px + env(safe-area-inset-top, 0px)); }
}
/* soft edges around an app: rounded frame and a gentle fade into the dark menu instead of a hard cut */
.shell.side .frame { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 24px rgba(0, 0, 0, .35); }
.shell.side .frame iframe { border-radius: inherit; }
@media (min-width: 900px) { .shell.side .stage { background: var(--bar); padding: 8px 8px 8px 0; } .shell.side .frame { inset: 8px 8px 8px 0; } }
@media (max-width: 899px) {
  .shell.side .frame { top: calc(env(safe-area-inset-top, 0px) + 6px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); left: 6px; right: 6px; border-radius: 16px; }
  .shell.side .stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 14px);
    background: linear-gradient(to bottom, var(--bar) 60%, transparent); z-index: 2; pointer-events: none; }
}
/* iPhone app (home screen): iOS blurs ~2 cm below the status bar – the app window starts below that band */
@media (display-mode: standalone) and (max-width: 899px) {
  .shell.side .frame { top: calc(env(safe-area-inset-top, 0px) + 30px); }
  .shell.side .stage::before { display: none; }
}

/* =====================================================================================================
   Liquid Glass – the hub's look (2026-10): soft colourful backdrop, translucent glass surfaces with blur,
   pill buttons and segmented controls, Apple-style app tiles. Tokens first, components after.
   ===================================================================================================== */
:root {
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .8);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-edge: rgba(15, 23, 42, .07);
  --glass-shadow: 0 1px 1px rgba(15, 23, 42, .03), 0 8px 28px rgba(15, 23, 42, .08);
  --glass-blur: saturate(170%) blur(22px);
  --backdrop: radial-gradient(1200px 700px at 8% -10%, rgba(99, 102, 241, .16), transparent 60%),
              radial-gradient(900px 600px at 105% 5%, rgba(16, 185, 129, .13), transparent 60%),
              radial-gradient(900px 700px at 50% 110%, rgba(14, 165, 233, .12), transparent 60%), #eef1f7;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --glass: rgba(22, 30, 48, .55); --glass-strong: rgba(26, 35, 56, .78); --glass-line: rgba(255, 255, 255, .09); --glass-edge: rgba(0, 0, 0, .35);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .35);
  --backdrop: radial-gradient(1200px 700px at 8% -10%, rgba(99, 102, 241, .22), transparent 60%),
              radial-gradient(900px 600px at 105% 5%, rgba(16, 185, 129, .14), transparent 60%),
              radial-gradient(900px 700px at 50% 110%, rgba(14, 165, 233, .14), transparent 60%), #070b16;
} }
:root[data-theme="dark"] {
  --glass: rgba(22, 30, 48, .55); --glass-strong: rgba(26, 35, 56, .78); --glass-line: rgba(255, 255, 255, .09); --glass-edge: rgba(0, 0, 0, .35);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .35);
  --backdrop: radial-gradient(1200px 700px at 8% -10%, rgba(99, 102, 241, .22), transparent 60%),
              radial-gradient(900px 600px at 105% 5%, rgba(16, 185, 129, .14), transparent 60%),
              radial-gradient(900px 700px at 50% 110%, rgba(14, 165, 233, .14), transparent 60%), #070b16;
}
/* the colourful backdrop behind everything (the glass shows it through) */
#root, .shell { background: var(--backdrop); background-attachment: fixed; }
.homepage, .stage { background: transparent; }

/* glass surfaces */
.widget, .card, .sum-card, .tr-card, .tr-ov-sec, .fin-acc, .wk2, .cal-grid, .cal-side, .pp, .cv, .tk-card, .nt-card, .fin-rec, .tr-row, .cal-slot, .cal-agenda section,
.fv-folder, .fv-tile, .file-row, .wg-tpl, .empty, .callout, .modal, .menu, .auth-card, .views-side, .gd-connect {
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.widget, .card, .tr-ov-sec, .wk2, .cal-grid, .cal-side, .modal { border-radius: 20px; }
.sum-card, .tr-card, .fin-acc, .pp, .cv, .tk-card, .nt-card, .fv-folder, .fv-tile { border-radius: 18px; }
/* small rows inside a glass card: no second blur (lighter, faster on the phone) */
.widget .file-row, .card .file-row, .wk2 .wk2-day, .tr-ov-sec .tr-ov-row, .fin-list .fin-rec, .tr-list .tr-row { -webkit-backdrop-filter: none; backdrop-filter: none; }
.wk2-day { background: transparent; border-color: var(--glass-line); }
.modal { background: var(--glass-strong); }
.overlay { background: rgba(2, 6, 23, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu { background: var(--glass-strong); border-radius: 14px; }

/* top bar and side menu: dark glass */
.bar { background: rgba(10, 15, 30, .78); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.shell.side .bar { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .06); }
.tab.active, .shell.side .side-app.active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.shell.side .side-app.active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 3px 0 0 #60a5fa; }

/* buttons, segmented controls and fields */
.btn { border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.btn:hover { background: var(--surface); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.seg { background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--glass-line); border-radius: 999px; padding: 3px; }
.seg button { border-radius: 999px; }
.seg button.on { background: var(--glass-strong); box-shadow: 0 2px 8px rgba(15, 23, 42, .12), inset 0 0 0 1px var(--glass-line); }
.input { border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-line); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.nf-chip, .app-chip { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.ws-nav button[role=tab] { border-radius: 999px; padding: 7px 14px; }
.ws-nav button[role=tab].on { background: var(--glass-strong); box-shadow: 0 2px 10px rgba(15, 23, 42, .1); }
.ws-nav { border-bottom: 0; }

/* Apple-style app tiles: squircle, gradient from the app colour, white symbol, soft highlight */
.app-icon { --c: #64748b; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000) 100%) !important;
  border-radius: 28%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .25); color: #fff; }
.app-icon.has-glyph .ico { font-size: .66em; } .app-icon.has-glyph { font-size: 20px; }
.app-icon.has-glyph .ico svg { stroke-width: 2.2; }
.app-icon.lg.has-glyph { font-size: 46px; }
.shell.side .app-icon, .tab .app-icon { width: 24px; height: 24px; }
@media (max-width: 899px) { .shell.side .app-icon { width: 30px; height: 30px; } .shell.side .app-icon.has-glyph { font-size: 26px; } }
.theme-btn .ico { font-size: 18px; }
.shell.side .side-app.dragging { opacity: .4; }
.shell.side .side-app.drop-before { box-shadow: inset 0 2px 0 #60a5fa; } .shell.side .side-app.drop-after { box-shadow: inset 0 -2px 0 #60a5fa; }
.shell.side .side-app[draggable=true] { cursor: grab; }
/* Fitko – the app's dark Fitness look inside the hub (whatever the hub's theme) */
.fitko { --fx-bg: #0b0d12; --fx-card: rgba(28, 30, 38, .72); --fx-line: rgba(255, 255, 255, .08); --fx-text: #f5f5f7; --fx-dim: #8e8e93;
  color: var(--fx-text); background: radial-gradient(900px 500px at 0% 0%, rgba(158, 240, 41, .10), transparent 60%), radial-gradient(800px 500px at 100% 10%, rgba(250, 17, 79, .10), transparent 60%),
  radial-gradient(800px 600px at 50% 110%, rgba(10, 132, 255, .12), transparent 60%), var(--fx-bg);
  border-radius: 22px; padding: 16px; min-height: calc(100% - 8px); }
.fitko .fx-dim { color: var(--fx-dim); font-size: 13px; }
.fx-card { background: var(--fx-card); border: 1px solid var(--fx-line); border-radius: 20px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); }
.fx-card h3 { margin: 0 0 10px; font-size: 15px; }
.fx-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fx-tabs, .fx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--fx-line); }
.fx-tabs button, .fx-seg button { border: 0; background: transparent; color: var(--fx-dim); font: inherit; font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fx-tabs button.on, .fx-seg button.on { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.fx-tabs button.on .ico { color: #9EF029; }
.fx-seg { margin-bottom: 12px; }
.fx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.fx-stat { background: var(--fx-card); border: 1px solid var(--fx-line); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fx-stat span { color: var(--fx-dim); font-size: 13px; font-weight: 600; } .fx-stat strong { font-size: 26px; color: var(--c); letter-spacing: -.02em; }
.fx-today { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 2px 12px; color: var(--fx-dim); font-size: 14px; } .fx-today b { font-size: 17px; }
.fx-coach { margin-bottom: 12px; font-size: 14px; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; } .fx-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .fx-grid { grid-template-columns: 1fr; } }
.fx-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.fx-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.fx-bar i { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #9EF029, #4caf1a); }
.fx-bar.today i { background: linear-gradient(180deg, #00F0FF, #0A84FF); }
.fx-bar span { font-size: 11px; color: var(--fx-dim); height: 14px; }
.fx-up { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--fx-line); }
.fx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.fx-main { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.fx-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.fx-rec { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); } .fx-rec strong { font-size: 18px; color: #FFD60A; }
.fx-calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fx-calhead h3 { margin: 0 6px; min-width: 150px; text-align: center; text-transform: capitalize; }
.fx-nav { border: 1px solid var(--fx-line); background: rgba(255, 255, 255, .07); color: #fff; border-radius: 999px; width: 34px; height: 34px; font: inherit; cursor: pointer; } .fx-nav.wide { width: auto; padding: 0 14px; }
.fx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.fx-wd { text-align: center; color: var(--fx-dim); font-size: 12px; font-weight: 700; padding-bottom: 4px; }
.fx-day { min-height: 74px; border-radius: 14px; border: 1px solid transparent; background: rgba(255, 255, 255, .04); color: inherit; font: inherit; padding: 6px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.fx-day.empty { background: transparent; cursor: default; } .fx-day:not(.empty):hover { background: rgba(255, 255, 255, .08); }
.fx-day.today .fx-dn { background: #FA114F; color: #fff; border-radius: 999px; padding: 0 7px; } .fx-day.sel { border-color: rgba(255, 255, 255, .35); }
.fx-dn { font-weight: 700; font-size: 13px; align-self: flex-start; }
.fx-marks { display: flex; flex-wrap: wrap; gap: 3px; }
.fx-mark { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--c); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #000; }
.fx-mark.done { background: var(--c); }
.fx-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fx-tpl { border-top: 3px solid var(--c); } .fx-tpl-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .fx-tpl-h h3 { margin: 0; }
.fx-tpl-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #000; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); flex: none; }
.fx-ex-r { display: grid; grid-template-columns: minmax(0, 1fr) auto 80px; gap: 8px; padding: 7px 0; border-top: 1px solid var(--fx-line); font-size: 14px; align-items: center; } .fx-ex-r .fx-dim { text-align: right; }
.fx-hist { display: flex; flex-direction: column; gap: 8px; }
.fx-w { padding: 0; border-left: 3px solid var(--c); } .fx-w-h { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.fx-ok { color: #9EF029; }
.fx-sets { padding: 0 16px 12px 38px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.fx-g strong { display: block; margin-bottom: 4px; font-size: 14px; }
.fx-set { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; font-size: 13px; padding: 3px 0; }
.fx-sn { width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.fit-connect { max-width: 680px; }

/* =====================================================================================================
   Menu in colour + daylight glass (2026-10): every hub section gets its own Apple-style tile; in light mode
   the menu is a light frosted sidebar (macOS-like) on a livelier backdrop, glass gets a top highlight.
   ===================================================================================================== */
.ws-tile { --c: #64748b; width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .22); }
.ws-tile .ico { font-size: 13px; opacity: 1; } .ws-tile .ico svg { stroke-width: 2.3; }
.shell.side .ws-ico.ws-tile { width: 24px; height: 24px; font-size: inherit; }
@media (max-width: 899px) { .shell.side .ws-ico.ws-tile { width: 30px; height: 30px; border-radius: 9px; } .shell.side .ws-tile .ico { font-size: 16px; } }
.ws-nav button[role=tab] { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 6px; }
.ws-nav .ws-tile { width: 22px; height: 22px; }

/* light mode: tokens (dark mode keeps the dark glass menu) */
:root {
  --sb-bg: rgba(255, 255, 255, .55); --sb-fg: #334155; --sb-fg-strong: #0f172a; --sb-h: #64748b;
  --sb-hover: rgba(15, 23, 42, .06); --sb-active: rgba(255, 255, 255, .85); --sb-line: rgba(15, 23, 42, .08);
  --sb-active-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(255, 255, 255, .9);
  --glass: rgba(255, 255, 255, .55);
  --glass-line: rgba(255, 255, 255, .85);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(30, 41, 59, .1);
  --backdrop: radial-gradient(1000px 650px at 6% -8%, rgba(99, 102, 241, .30), transparent 62%),
              radial-gradient(850px 600px at 104% 4%, rgba(16, 185, 129, .24), transparent 62%),
              radial-gradient(800px 600px at 70% 60%, rgba(236, 72, 153, .14), transparent 62%),
              radial-gradient(900px 700px at 30% 112%, rgba(14, 165, 233, .24), transparent 62%), #e8ecf4;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --sb-bg: rgba(10, 15, 30, .78); --sb-fg: #cbd5e1; --sb-fg-strong: #fff; --sb-h: #94a3b8; --sb-hover: rgba(255, 255, 255, .07);
  --sb-active: rgba(255, 255, 255, .14); --sb-line: rgba(255, 255, 255, .06); --sb-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  --glass: rgba(22, 30, 48, .55); --glass-line: rgba(255, 255, 255, .09);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .35);
  --backdrop: radial-gradient(1200px 700px at 8% -10%, rgba(99, 102, 241, .22), transparent 60%),
              radial-gradient(900px 600px at 105% 5%, rgba(16, 185, 129, .14), transparent 60%),
              radial-gradient(900px 700px at 50% 110%, rgba(14, 165, 233, .14), transparent 60%), #070b16;
} }
:root[data-theme="dark"] {
  --sb-bg: rgba(10, 15, 30, .78); --sb-fg: #cbd5e1; --sb-fg-strong: #fff; --sb-h: #94a3b8; --sb-hover: rgba(255, 255, 255, .07);
  --sb-active: rgba(255, 255, 255, .14); --sb-line: rgba(255, 255, 255, .06); --sb-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  --glass: rgba(22, 30, 48, .55); --glass-line: rgba(255, 255, 255, .09);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .35);
}
/* desktop: the menu (top bar on the hub, column beside an app) follows the theme; the phone keeps its dark bar (status bar tint) */
@media (min-width: 900px) {
  .bar { background: var(--sb-bg); color: var(--sb-fg); border-bottom-color: var(--sb-line); }
  /* the menu and the area around the app are one glass surface – no line between them, the app floats on it */
  .shell.side .bar { border-right: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .shell.side { background: linear-gradient(var(--sb-bg), var(--sb-bg)), var(--backdrop); background-attachment: fixed; }
  .bar-btn, .tab, .shell.side .side-app { color: var(--sb-fg); }
  .bar-btn.home, .shell.side .side-app.open { color: var(--sb-fg-strong); }
  .bar-btn:hover, .tab:hover, .shell.side .side-app:hover { background: var(--sb-hover); color: var(--sb-fg-strong); }
  .bar-btn.home.active { background: var(--sb-hover); }
  .shell.side .side-h { color: var(--sb-h); opacity: 1; }
  .tab.active, .shell.side .side-app.active, .shell.side .side-app.active:hover { background: var(--sb-active); color: var(--sb-fg-strong); box-shadow: var(--sb-active-shadow); }
  .shell.side .frame { box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 34px rgba(15, 23, 42, .14); }
  .shell.side .stage { background: transparent; }
}
.ws-nav button[role=tab].on { box-shadow: var(--glass-shadow); }
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --sb-bg: var(--surface); }
  .bar, .widget, .card, .modal, .menu { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* Ranní brífink, Peníze tento měsíc, návrh účelu jízdy */
.brief-text p { margin: 0 0 8px; line-height: 1.45; } .brief-text ul { margin: 0 0 10px; padding-left: 18px; } .brief-text li { margin: 2px 0; line-height: 1.4; }
.brief-foot { align-items: center; margin-top: 4px; }
.money-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.money-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--glass-line); background: var(--glass-strong); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.money-t strong { font-size: 17px; } .money-t.in strong { color: #16a34a; } .money-t.out strong, .money-t.bad strong { color: #dc2626; } .money-t.due strong { color: #ea580c; }
.money-r { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 2px; border-top: 1px solid var(--glass-line); font-size: 13px; }
.money-d { font-weight: 700; color: var(--muted); } .money-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-pcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tr-guess { align-self: flex-start; max-width: 100%; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text);
  border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-guess:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
@media (max-width: 900px) { .tr-pcol { grid-column: 1 / -1; } }
.fin-pair { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--glass-line); }
.fin-pair.nomatch { grid-template-columns: minmax(0, 1fr) auto auto; }
.fin-pair-arrow { color: var(--muted); text-align: center; }
@media (max-width: 700px) { .fin-pair { grid-template-columns: 1fr; } .fin-pair-arrow { display: none; } }
.fin-invpay .card { padding: 14px 16px; margin-bottom: 12px; } .fin-invpay h3 { margin: 0 0 6px; font-size: 15px; }
/* emoji replaced by symbols (icons.js iconize): Apple-style tiles in tabs / headings / cards, line icons in buttons */
.ico-tile { --c: #64748b; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 30%; margin-right: .45em; vertical-align: -.32em; flex: none; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .2); }
.ico-tile .ico { font-size: .82em; line-height: 0; } .ico-tile .ico svg { stroke-width: 2.4; }
.seg > button .ico-tile, .tr-tabs button .ico-tile, .fin-tabs button .ico-tile { width: 1.35em; height: 1.35em; margin-right: .4em; }
.btn .ico, .linklike .ico, .menu button .ico { vertical-align: -.14em; }
.w-ico .ico-tile { margin-right: 0; width: 22px; height: 22px; font-size: 14px; }
.fitko .fx-tabs .ico-tile { display: none; }
.jm-cnt { display: inline-flex; align-items: center; gap: 3px; }
.jm-q .ico, .jm-cnt .ico, .travel .ico { font-size: 14px; }
/* Předplatné a smlouvy */
.sub-list { display: flex; flex-direction: column; gap: 8px; }
.sub-row { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 12px 14px;
  border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); color: inherit; font: inherit; cursor: pointer; }
.sub-row:hover { background: var(--glass-strong); } .sub-row.off { opacity: .55; }
.sub-row .ico-tile { width: 32px; height: 32px; font-size: 20px; margin: 0; }
.sub-main, .sub-when, .sub-end, .sub-amt { display: flex; flex-direction: column; min-width: 0; } .sub-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-amt { align-items: flex-end; } .sub-warn { color: #dc2626; }
.sub-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin-top: 8px; gap: 2px; min-width: 160px; }
.sub-sg { margin-top: 14px; padding: 14px 16px; } .sub-sg h3 { margin: 0 0 4px; }
.sub-sgr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--glass-line); }
@media (max-width: 800px) { .sub-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .sub-when, .sub-end { display: none; } }
/* size of an app's view: a frame is scaled (any app, also cross-origin), a hub module uses CSS zoom */
.frame.zoomed > iframe { width: calc(100% / var(--z)); height: calc(100% / var(--z)); transform: scale(var(--z)); transform-origin: 0 0; }
.frame.zoomed > .module-page { zoom: var(--z); }
.zoom-ctl { padding: 4px 10px 8px; } .zoom-ctl .menu-label { display: block; padding: 4px 0; }
.zoom-seg { display: flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 999px; padding: 3px; }
.zoom-seg button { flex: none; width: 32px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.zoom-seg button:hover { background: var(--glass-strong); } .zoom-v { flex: 1; text-align: center; font-weight: 700; font-size: 13px; min-width: 52px; }
/* phone: segmented tabs scroll sideways instead of wrapping or overflowing */
.seg, .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.seg::-webkit-scrollbar, .fx-tabs::-webkit-scrollbar { display: none; }
.seg > button, .fx-tabs button { white-space: nowrap; flex: none; }
@media (max-width: 600px) {
  .fitko { padding: 12px; border-radius: 18px; }
  .fx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fx-stat strong { font-size: 21px; }
  .fx-head { gap: 8px; } .fx-head .spacer { display: none; }
  .fx-day { min-height: 54px; padding: 4px; } .fx-mark { width: 14px; height: 14px; font-size: 9px; border-radius: 4px; }
  .fx-sets { padding-left: 16px; } .fx-ex-r { grid-template-columns: minmax(0, 1fr) auto; } .fx-ex-r .fx-dim { display: none; }
  .tr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Co je nového */
.news { padding: 14px 16px; margin-bottom: 14px; } .news-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .news-h h3 { margin: 0; font-size: 16px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 18px; }
.news-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--glass-line); }
.news-r .ico-tile { width: 30px; height: 30px; font-size: 19px; margin: 0; } .news-t { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.sub-mobile { display: none; } @media (max-width: 800px) { .sub-mobile { display: block; } }
/* a hub module in the side layout scrolls inside its frame (the rounded frame clips, the page scrolls) */
.shell.side .frame.module-frame { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
/* phone, hub's own page: side rail like with an app; the home page sits beside it and doesn't repeat the apps / sections */
@media (max-width: 899px) {
  .shell.side.home .homepage { top: env(safe-area-inset-top, 0px); bottom: 0; padding: 18px 14px calc(30px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 0 0 0; background: var(--backdrop); background-attachment: fixed; }
  .shell.side.home .app-chips, .shell.side.home .ws-nav [role=tab] { display: none; }
  .shell.side.home .homepage h1 { font-size: 24px; }
}
/* JM – Reporting */
.jmr-tile.due { box-shadow: 0 0 0 2px #4f46e5, var(--glass-shadow); }
.jmr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: default; } .jmr-head .ico-tile { margin: 0; width: 26px; height: 26px; font-size: 16px; }
.jmr-meta { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 12px; font-size: 14px; }
.jmr-hist { width: auto; max-width: 200px; padding: 6px 10px; font-size: 13px; }
.jmr-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr); gap: 14px; align-items: start; }
.jmr-in { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.jmr-area { width: 100%; min-height: 90px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px; }
.jmr-area.tall { min-height: 340px; }
.jmr-out { display: flex; flex-direction: column; gap: 10px; }
.jmr-sec { padding: 12px 14px; } .jmr-sec-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.btn.loading { opacity: .6; pointer-events: none; } .btn.loading::after { content: ' …'; }
@media (max-width: 900px) { .jmr-grid { grid-template-columns: 1fr; } .jmr-in { position: static; } .jmr-area.tall { min-height: 200px; } }
/* Složky z Macu */
.mac-setup { max-width: 820px; } .mac-card { padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.mac-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--glass-line); }
label.mac-f { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.4fr); }
.mac-f .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .mac-f { grid-template-columns: 1fr auto; } .mac-f > .hint:nth-child(2) { display: none; } }
/* JM – Kontroly provozoven */
.jmi-list { display: flex; flex-direction: column; margin: 8px 0 12px; }
.jmi-b { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border: 0; border-top: 1px solid var(--glass-line); background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.jmi-b:hover { color: var(--accent); }
.jmi-days { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.jmi-days.ok { background: rgba(22, 163, 74, .12); color: color-mix(in srgb, #16a34a 70%, var(--text)); } .jmi-days.warn { background: rgba(217, 119, 6, .14); color: color-mix(in srgb, #d97706 70%, var(--text)); }
.jmi-days.bad { background: rgba(220, 38, 38, .12); color: color-mix(in srgb, #dc2626 75%, var(--text)); } .jmi-days.none { background: rgba(100, 116, 139, .12); color: var(--muted); }
.jmi-branch { width: 180px; font-weight: 700; } .jmi-date { width: 150px; }
.jmi-rates { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.jmi-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.jmi-seg button { padding: 4px 10px; font-size: 12px; font-weight: 700; }
.jmi-prev { padding: 10px 14px; } .jmi-prev summary { cursor: pointer; font-weight: 600; } .jmi-prev pre, .jmi-mail pre { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 8px 0 0; }
@media (max-width: 600px) { .jmi-rate { grid-template-columns: 1fr; } .jmi-branch, .jmi-date { width: 100%; } }
/* folders as larger tiles with an Apple-style coloured folder (Soubory: Google Disk, SharePoint, Mac) */
.fv-folders { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fv-folder { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 12px 14px; min-height: 128px; text-align: center; }
.fv-fico { font-size: 0; line-height: 0; } .fv-svg { width: 64px; height: 54px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.fv-fname { max-width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.25; }
.fv-more { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 16px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.fv-folder:hover .fv-more, .fv-more:focus-visible { opacity: 1; } .fv-more:hover { background: var(--glass-strong); }
@media (hover: none) { .fv-more { opacity: .7; } }
.fc-swatches { display: grid; grid-template-columns: repeat(5, 28px); gap: 8px; padding: 6px 10px 10px; }
.fc-sw { width: 28px; height: 28px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer; }
.fc-sw.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 10px 4px; }
.mb-group { margin-bottom: 18px; }
.ask-group { display: flex; flex-direction: column; gap: 12px; min-width: min(460px, 80vw); } .ask-group .input { flex: 1; }
@media (max-width: 600px) { .fv-folders { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fv-folder { min-height: 110px; } .fv-svg { width: 52px; height: 44px; } }
.mb-group .fv .fv-head { display: none; }
/* JM – Pátek s OZ */
.jmo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jmo-wait { display: flex; gap: 14px; align-items: center; padding: 30px 10px; }
.jmo-card { padding: 6px 14px; }
.jmo-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.2fr) minmax(0, 2.4fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--glass-line); }
.jmo-row:first-child { border-top: 0; }
.jmo-oz { display: flex; flex-direction: column; }
.jmo-prev { display: flex; flex-wrap: wrap; gap: 6px; } .jmo-old { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.jmo-set { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jmo-chip { --c: #64748b; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: transparent; color: var(--c); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.jmo-chip.on { background: var(--c); color: var(--accent-text); }
.jmo-text { width: 160px; padding: 5px 10px; font-size: 13px; } .jmo-sel { width: auto; }
.jmo-num { display: flex; flex-direction: column; gap: 4px; } .jmo-num .input { max-width: 140px; }
@media (max-width: 800px) { .jmo-row { grid-template-columns: 1fr; } }
.jmo-log { display: flex; flex-direction: column; gap: 6px; min-width: min(560px, 85vw); }
.jmo-logrow { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--glass-line); font-size: 13px; }
.jmc-sheet { padding: 12px 14px; margin-top: 10px; } .jmc-sheet.off { opacity: .55; }
.jmc-rows { display: flex; flex-direction: column; font-size: 13px; }
.jmc-row { display: grid; grid-template-columns: minmax(0, 2fr) 110px 110px minmax(0, 1.4fr); gap: 10px; padding: 4px 0; border-top: 1px solid var(--glass-line); }
.jmc-row span:nth-child(2), .jmc-row span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.jmc-row.warn { background: rgba(245, 158, 11, .12); border-radius: 6px; }
.jmc-in { margin-top: 10px; gap: 16px; }
@media (max-width: 700px) { .jmc-row { grid-template-columns: 1fr auto; } .jmc-row span:nth-child(3), .jmc-row span:nth-child(4) { display: none; } }
.hooks-card { padding: 14px 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.hook-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--glass-line); }
.hook-main { display: flex; flex-direction: column; min-width: 0; }
.hook-new { flex-wrap: wrap; gap: 8px; margin-top: 8px; } .hook-new .input { width: auto; flex: 1; min-width: 140px; }
@media (max-width: 700px) { .hook-row { grid-template-columns: 1fr auto; } }
.jmo-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.jmo-tools { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.jmo-tool { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass-strong); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.jmo-tool:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line)); }
.jmo-tool .ico-tile { width: 30px; height: 30px; font-size: 18px; margin: 0; } .jmo-tool-t { display: flex; flex-direction: column; min-width: 0; }
.jmi-bset { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 85vw); } .jmi-blist { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.jmi-b2 { display: flex; gap: 8px; align-items: center; } .jmi-b2 span { flex: 1; }
/* Kontroly provozoven – item by item, for the phone */
.jmi-new { display: flex; flex-direction: column; gap: 12px; min-width: min(400px, 85vw); }
.jmi-page { max-width: 860px; margin: 0 auto; }
.jmi-top { position: sticky; top: 0; z-index: 3; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 16px; padding: 8px 10px; margin-bottom: 10px; box-shadow: var(--glass-shadow); }
.jmi-title { white-space: nowrap; } .jmi-score { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding: 0 4px 2px; }
.jmi-bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .jmi-bar-in { height: 100%; background: #0d9488; transition: width .2s; }
.jmi-items { display: flex; flex-direction: column; gap: 8px; }
.jmi-item { padding: 12px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 8px; border-left: 4px solid transparent; }
.jmi-item.full { border-left-color: #16a34a; } .jmi-item.low { border-left-color: #f59e0b; } .jmi-item.needs { border-left-color: #dc2626; }
.jmi-item.needs .jmi-com { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.jmi-item-h { display: flex; gap: 8px; align-items: baseline; } .jmi-item-h strong { flex: 1; }
.jmi-n { min-width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--text) 8%, transparent); }
.jmi-pts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jmi-pt { min-width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass-strong); font: inherit; font-weight: 700; font-size: 16px; color: inherit; cursor: pointer; }
.jmi-pt.max { color: color-mix(in srgb, #16a34a 70%, var(--text)); } .jmi-pt.on { background: #0d9488; color: #fff; border-color: #0d9488; } .jmi-pt.on.max { background: #16a34a; border-color: #16a34a; }
.jmi-num { width: 90px; height: 40px; font-size: 16px; }
.jmi-com { min-height: 40px; resize: vertical; font: inherit; font-size: 15px; }
.jmi-end { padding: 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.jmi-tpl { display: flex; flex-direction: column; gap: 10px; min-width: min(560px, 90vw); } .jmi-tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.jmi-tpl-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 32px; gap: 6px; align-items: center; }
@media (max-width: 600px) { .jmi-top .toolbar { flex-wrap: wrap; } .jmi-branch, .jmi-date { width: 48%; } .jmi-pt { min-width: 44px; height: 44px; } }

/* ---- JM: board by step, branches ---- */
.jm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.jm-col { flex: 0 0 270px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: grid; gap: 8px; max-height: 75vh; grid-template-rows: auto 1fr; }
.jm-col header { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.jm-col-name { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-stuck-n { font-size: 11px; font-weight: 600; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-radius: 6px; padding: 0 6px; }
.jm-col-list { display: grid; gap: 6px; overflow-y: auto; align-content: start; }
.jm-bcard { display: grid; gap: 3px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 8px; background: var(--surface); min-width: 0; }
.jm-bcard:hover { box-shadow: var(--shadow); }
.jm-bcard.unread .jm-bcard-t { font-weight: 700; }
.jm-bcard.stuck { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); border-left-color: var(--danger); }
.jm-bcard-t { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.jm-bcard-s { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jm-bcard-d { font-size: 11.5px; color: var(--muted); }
.jm-bcard.stuck .jm-bcard-d { color: var(--danger); font-weight: 600; }
.jm-branches { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.jm-branch { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.jm-branch h4 { margin: 0; font-size: 15px; }
.jm-branch-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jm-bn { display: grid; justify-items: start; gap: 0; text-align: left; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.jm-bn strong { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jm-bn span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.jm-bn.warn strong { color: #d97706; }
.jm-bn.bad strong { color: var(--danger); }
@media (max-width: 760px) { .jm-col { flex-basis: 82vw; } }
.jmr-extra { min-height: 34px; margin-top: 6px; font-size: 13px; resize: vertical; }
.jmm-prev { padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.jmm-qa { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: 1px solid var(--glass-line); }
.jmm-a { min-height: 60px; font: inherit; font-size: 14px; }
.jmm-oz { padding: 10px 14px; margin: 8px 0; } .jmm-oz summary { cursor: pointer; } .jmm-one { padding: 8px 0; border-top: 1px solid var(--glass-line); }
@media (max-width: 600px) {
  .jmi-pts { flex-wrap: wrap; gap: 4px; } .jmi-pt { flex: 1 0 36px; min-width: 36px; height: 42px; padding: 0; } /* 11 points wrap instead of 25 px buttons */
  .jmi-top .toolbar { gap: 6px; } .jmi-top .jmi-branch { width: calc(100% - 150px); } .jmi-top .jmi-date { width: 140px; } .jmi-title { width: auto; }
  .jmi-item { padding: 10px 12px; }
}
/* Fitko – Dnes, jídlo, voda, plánování */
.fx-pending { margin-bottom: 12px; font-size: 13px; border-color: rgba(255, 159, 10, .4); }
.fx-goals { display: flex; flex-direction: column; gap: 4px; } .fx-goal { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--fx-line); }
.fx-goal.done span:first-child { color: #9EF029; font-weight: 800; }
.fx-stats2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
.fx-macro { display: flex; flex-direction: column; gap: 3px; } .fx-macro strong { font-size: 18px; } .fx-macro small { color: var(--fx-dim); font-weight: 500; font-size: 12px; }
.fx-mbar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; } .fx-mbar i { display: block; height: 100%; border-radius: 999px; }
.fx-foods { display: flex; flex-direction: column; } .fx-food { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 24px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--fx-line); font-size: 14px; }
.fx-x { border: 0; background: transparent; color: var(--fx-dim); font: inherit; cursor: pointer; border-radius: 6px; } .fx-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fx-chip { border: 1px solid var(--fx-line); background: rgba(255, 255, 255, .07); color: var(--fx-text); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fx-chip:hover { background: rgba(255, 255, 255, .14); } .fx-chip small { color: var(--fx-dim); }
.fx-addfood { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, .8fr)) auto; gap: 6px; margin-top: 10px; }
.fitko .input { background: rgba(255, 255, 255, .07); border-color: var(--fx-line); color: var(--fx-text); }
/* Fitko – Recepty (Co uvařit?) */
.fx-pantry { width: 100%; margin: 6px 0 10px; resize: vertical; }
.fx-rcp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fx-rcp-form .input { width: auto; flex: 1 1 140px; }
.fx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fx-text); }
.fx-rcp-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: flex-end; }
.fx-rcps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.fx-rcp-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; cursor: pointer; }
.fx-rcp-emoji { font-size: 28px; line-height: 1; text-align: center; } .fx-rcp-head .fx-main { display: flex; flex-direction: column; gap: 2px; }
.fx-star { border: 0; background: transparent; color: var(--fx-dim); font-size: 22px; cursor: pointer; border-radius: 8px; padding: 2px 6px; } .fx-star.on { color: #FFD60A; } .fx-star:hover { background: rgba(255, 255, 255, .1); }
.fx-rcp-m { display: flex; gap: 14px; margin: 8px 0 4px; font-size: 13px; color: var(--fx-dim); }
.fx-rcp-miss { font-size: 13px; color: #FF9F0A; margin: 4px 0; }
.fx-rcp h4 { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-dim); }
.fx-rcp-list { list-style: none; padding: 0; margin: 0; } .fx-rcp-list li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--fx-line); font-size: 14px; }
.fx-rcp-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; } .fx-rcp-steps li { margin-bottom: 4px; }
.fx-plan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.fx-rev { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .fx-rev ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.fx-review p { margin: 0 0 10px; }
@media (max-width: 600px) { .fx-addfood { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fx-addfood .input:first-child { grid-column: 1 / -1; } .fx-addfood button { grid-column: 1 / -1; } }
.jm-bchip { display: inline-flex; align-items: center; gap: 6px; }
.jm-bchip .jm-chip { font-size: 12px; padding: 3px 9px; }
.jm-bsel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; max-height: 50vh; overflow: auto; }

/* scrolling menus fade at the top / bottom edge instead of a hard cut (same as Mailer); only on inner scroll containers –
   a mask would also clip a panel's shadow */
.edge-fade { --ft: 0px; --fb: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
.edge-fade.fade-t { --ft: 18px; } .edge-fade.fade-b { --fb: 36px; }

/* two-factor login */
.totp-qr { display: block; margin: 0 auto; border-radius: 12px; background: #fff; padding: 6px; }
.totp-code { font-size: 22px; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.totp-codes { font: 600 16px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border-radius: 10px; padding: 12px 16px; columns: 2; user-select: all; }

/* JM – Zeptej se Claudie */
.jmk-ask { display: flex; gap: 6px; } .jmk-ask .input { flex: 1; min-width: 0; }
.jmk-chat { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.jmk-msg { max-width: min(760px, 92%); padding: 10px 14px; border-radius: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.jmk-msg.me { align-self: flex-end; background: #db2777; color: var(--accent-text); border-bottom-right-radius: 4px; }
.jmk-msg.claudie { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; display: flex; flex-direction: column; gap: 6px; }
.jmk-msg.err { border-color: #ef4444; color: #ef4444; }
.jmk-who { font-size: 12px; font-weight: 700; color: #db2777; }
.jmk-src { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; white-space: normal; } .jmk-src .pill { font-size: 12px; text-decoration: none; }
.jmk-compose { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.jmk-compose .input { flex: 1; min-width: 0; resize: vertical; }
.jmk-docs ul { columns: 2 280px; margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
/* JM: own dashboard (Upravit přehled) */
.jm-layout-tools { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.jm-types > .jm-size-s { grid-column: span 1; }
.jm-types > .jm-size-s { overflow: hidden; } .jm-size-s .row, .jm-size-s .toolbar, .jm-size-s .jm-edit-bar { flex-wrap: wrap; } .jm-size-s .btn { white-space: normal; max-width: 100%; }
.jm-types > .jm-size-l { grid-column: span 4; }
.jm-types > .jm-size-xl { grid-column: 1 / -1; }
/* not enough columns for the size: across the whole width instead of overflowing */
@container (max-width: 611px) { .jm-types > .jm-size-l { grid-column: 1 / -1; } }
@container (max-width: 299px) { .jm-types > section { grid-column: 1 / -1; } }
.jm-eb-sizes { display: inline-flex; gap: 2px; margin: 0 4px; } .jm-eb-sizes .jm-eb { min-width: 30px; padding: 0 6px; font-weight: 600; }
.jm-types > .jm-off { display: none; }
.jm-editing > .jm-off { display: flex; opacity: .45; }
.jm-editing > section { position: relative; outline: 2px dashed color-mix(in srgb, var(--c, #64748b) 55%, transparent); outline-offset: 2px; cursor: grab; }
.jm-editing > section > :not(.jm-edit-bar) { pointer-events: none; user-select: none; }
.jm-editing > section.jm-dragging { opacity: .3; }
.jm-edit-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.jm-eb { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; min-width: 32px; height: 30px; padding: 0 8px; font-size: 13px; cursor: pointer; }
.jm-eb.on { border-color: var(--c, #64748b); color: var(--c, #64748b); }
.jm-eb-grip { font-size: 18px; color: var(--muted); padding: 0 4px; }
.jm-eb-off { font-size: 12px; color: var(--muted); margin-left: auto; }
@media (max-width: 700px) { .jm-types > section, .jm-types > .jm-size-s, .jm-types > .jm-size-l, .jm-types > .jm-size-xl { grid-column: auto; } .jm-layout-tools { margin-left: 0; } }
/* Claudie přemýšlí */
.jmk-thinking { display: flex; align-items: center; gap: 10px; color: var(--muted, #6b7280); font-size: 14px; }
.jmk-dots { display: inline-flex; gap: 4px; }
.jmk-dots i { width: 7px; height: 7px; border-radius: 50%; background: #db2777; animation: jmk-bounce 1.2s infinite ease-in-out; }
.jmk-dots i:nth-child(2) { animation-delay: .15s; } .jmk-dots i:nth-child(3) { animation-delay: .3s; }
.jmk-step.in { animation: jmk-fade .4s ease; }
.jmk-msg.thinking .jmk-who { animation: jmk-glow 1.6s infinite ease-in-out; }
.jmk-msg.thinking { background: linear-gradient(110deg, var(--surface) 40%, color-mix(in srgb, #db2777 8%, var(--surface)) 50%, var(--surface) 60%) 0 0 / 300% 100%; animation: jmk-shimmer 2.4s infinite linear; }
@keyframes jmk-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes jmk-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes jmk-glow { 50% { opacity: .45; } }
@keyframes jmk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .jmk-dots i, .jmk-msg.thinking, .jmk-msg.thinking .jmk-who, .jmk-step.in { animation: none; } .jmk-dots i { opacity: .7; } }
.jm-profit { display: grid; gap: 4px; font-size: 13px; }
.jm-profit strong { font-size: 15px; } .jm-profit strong.neg, .jm-profit-sum strong.neg { color: var(--danger); }
.jm-diff { margin-left: 6px; font-size: 12px; font-weight: 600; } .jm-diff.up { color: var(--ok); } .jm-diff.down { color: var(--danger); }
.jm-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.jm-spark span { width: 10px; border-radius: 2px; background: color-mix(in srgb, var(--ok) 60%, transparent); } .jm-spark span.neg { background: color-mix(in srgb, var(--danger) 60%, transparent); }
.jm-profit-sum { font-size: 13px; margin-right: 10px; }
.it .it-open { flex: none; align-self: center; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--accent, #2563eb); text-decoration: none; font-weight: 700; }
.it .it-open:hover { background: var(--surface-2); }
.jm-pline { display: flex; align-items: baseline; gap: 8px; } .jm-pline .hint { min-width: 120px; }
.jm-profit strong.pos, .jm-profit-sum strong.pos { color: var(--ok); }
.jm-costs summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.jm-cost-list { display: grid; gap: 2px; margin-top: 4px; max-height: 220px; overflow: auto; }
.jm-cost { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; } .jm-cost span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* JM – Výkony (střediska, obchodní zástupci) */
.jmp-bar { flex-wrap: wrap; gap: 8px; } .jmp-month { width: auto; }
.jmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.jmp-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.jmp-card strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.jmp-d { font-size: 12px; font-weight: 700; } .jmp-d.up, .jmp-table td.up { color: #16a34a; } .jmp-d.down, .jmp-table td.down { color: #dc2626; }
.jmp-views { flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.jmp-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.jmp-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.jmp-table th { text-align: right; font-size: 12px; font-weight: 600; color: var(--muted, #64748b); padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
.jmp-table th:first-child, .jmp-table td:first-child { text-align: left; } .jmp-table th.on { color: var(--text); text-decoration: underline; }
.jmp-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.jmp-table tr:last-child td { border-bottom: 0; } .jmp-table.small { font-size: 13px; }
.jmp-pbar { display: inline-flex; align-items: center; gap: 6px; } .jmp-pbar i { display: inline-block; height: 6px; border-radius: 3px; flex: none; }
.jmp-chart { display: flex; flex-direction: column; gap: 8px; } .jmp-svg { width: 100%; height: auto; }
.jmp-svg .jmp-grid { stroke: var(--border); stroke-width: 1; } .jmp-svg .jmp-ax { fill: var(--muted, #64748b); font-size: 11px; }
.jmp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .jmp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.jmp-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.jmp-planc { border-left: 4px solid var(--c); display: flex; flex-direction: column; gap: 8px; }
.jmp-pl { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; } .jmp-pl .hint { grid-column: 1 / -1; }
.jmp-plbar { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; } .jmp-plbar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.jmp-insight { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .jmp-insight-text { white-space: pre-wrap; line-height: 1.55; }
.jmp-import { display: flex; flex-direction: column; gap: 10px; } .jmp-imp-list { display: flex; flex-direction: column; gap: 10px; } .jmp-imp .row { flex-wrap: wrap; gap: 8px; } .jmp-imp .input { width: auto; }
/* a module with its own picture as the icon (Fitko) */
.app-icon.has-img { background: none; padding: 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.app-icon.has-img img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }

/* ================= Fitko – Liquid Glass like the iPhone app (dark mesh, glass cards, squircle icons, floating tab bar) ================= */
.module-frame:has(.fitko) { --fx-p0: #9EF029; --fx-p1: #0A84FF; --fx-p2: #FF9F0A; --fx-p3: #FA114F; --fx-p4: #BF5AF2; --fx-p5: #40C8E0; --fx-p6: #FF453A; --fx-p7: #FFD60A; --fx-p8: #5E5CE6; --fx-p9: #00F0FF;
  color-scheme: dark; background: radial-gradient(900px 700px at 0% 0%, rgba(158, 240, 41, .35), transparent 60%),
  radial-gradient(800px 700px at 105% 30%, rgba(0, 240, 255, .25), transparent 60%), radial-gradient(900px 700px at 40% 110%, rgba(250, 17, 79, .25), transparent 60%),
  radial-gradient(800px 700px at 90% 100%, rgba(94, 92, 230, .25), transparent 60%), #05070D; background-attachment: fixed; }
.module-frame:has(.fitko) .module-title { display: none; }
.module-frame:has(.fitko) > .module-page { max-width: 1100px; padding-top: 18px; }
.fitko { --fx-card: rgba(255, 255, 255, .06); --fx-line: rgba(255, 255, 255, .12); --fx-text: #fff; --fx-dim: rgba(255, 255, 255, .6);
  background: none; border-radius: 0; padding: 0 0 96px; min-height: 0; color: var(--fx-text);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; gap: 16px; }
.fitko .fx-dim { color: var(--fx-dim); font-size: 14px; }
.fitko .fx-head { margin: 0; align-items: flex-end; } .fitko .fx-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.fitko .fx-h2 { margin: 8px 2px -4px; font-size: 22px; font-weight: 800; }
.fitko .fx-card { background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 40%), var(--fx-card); border: 1px solid var(--fx-line); border-radius: 24px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); margin: 0; }
.fitko .fx-card h3 { font-size: 17px; font-weight: 600; margin: 0; } .fitko .fx-h { margin: 0 0 12px !important; }
.fitko .fx-sub { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--fx-dim); text-transform: uppercase; letter-spacing: .04em; }
.fitko .fx-foot { margin: 12px 0 0; font-size: 12px; }
.fitko .fx-big, .fitko strong { font-variant-numeric: tabular-nums; } .fitko .fx-big { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; display: block; }
.fitko .fx-big small { font-size: 15px; font-weight: 600; color: var(--fx-dim); }
.fitko .fx-accent { color: var(--fx-p0); font-size: 18px; display: block; margin: 2px 0; }
/* IconBadge: a squircle with a gradient, lighter at the top, white symbol */
.fx-badge { --c: var(--fx-p0); width: 28px; height: 28px; flex: none; border-radius: 28%; display: inline-grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 10px color-mix(in srgb, var(--c) 35%, transparent); }
.fx-badge .ico { font-size: 16px; display: grid; } .fx-badge.big { width: 40px; height: 40px; } .fx-badge.big .ico { font-size: 22px; }
.fitko .fx-goal .fx-badge .ico { font-size: 19px; }
.fx-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .fx-ch h3 { flex: 1; } .fx-ch-r { color: var(--fx-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
/* capsule bars: the colour at 18 % under the fill */
.fx-cap { --c: var(--fx-p0); height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); overflow: hidden; }
.fx-cap i { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: var(--c); transition: width .3s ease; }
.fitko .fx-goalstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: -2px 0 14px; } .fitko .fx-goalstrip i { height: 5px; border-radius: 999px; }
.fitko .fx-goals { display: flex; flex-direction: column; gap: 14px; }
.fitko .fx-goal { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 0; border: 0; }
.fitko .fx-goal .fx-badge { width: 34px; height: 34px; } .fitko .fx-goal-m { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fitko .fx-goal-t { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 600; } .fitko .fx-goal-t .fx-dim { font-size: 15px; font-variant-numeric: tabular-nums; }
.fitko .fx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.fitko .fx-ready { display: flex; align-items: center; gap: 18px; } .fitko .fx-ready h3 { font-size: 20px; } .fitko .fx-ready p { margin: 2px 0 0; }
.fx-ring { position: relative; width: 112px; height: 112px; flex: none; } .fx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-ring circle { fill: none; stroke-width: 12; } .fx-ring .bg { stroke: rgba(158, 240, 41, .18); } .fx-ring .fg { stroke: var(--fx-p0); stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.fx-ring-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .fx-ring-t strong { font-size: 28px; font-weight: 700; } .fx-ring-t span { font-size: 12px; color: var(--fx-dim); }
.fitko .fx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.fitko .fx-tile .fx-ch { margin-bottom: 8px; } .fitko .fx-tile-l { color: var(--fx-dim); font-weight: 600; font-size: 15px; }
.fitko .fx-stats { gap: 16px; margin: 0; } .fitko .fx-stat { gap: 4px; padding: 14px 16px; } .fitko .fx-stat span { color: var(--fx-dim); }
.fitko .fx-stat strong { color: var(--c); font-size: 28px; font-weight: 700; }
.fitko .fx-grid { gap: 16px; }
/* charts: rounded tops, light grid, grey labels; steps: the days at the goal full, the rest at 40 %, a dashed goal line */
.fitko .fx-bars { position: relative; height: 150px; gap: 8px; background: repeating-linear-gradient(to top, rgba(255, 255, 255, .08) 0 1px, transparent 1px 33px); background-position: 0 -18px; }
.fitko .fx-bar i { border-radius: 4px 4px 0 0; background: var(--fx-p1); max-width: 30px; transition: height .3s ease; } .fitko .fx-bar span { color: var(--fx-dim); }
.fitko .fx-bar.today i { background: var(--fx-p9); }
.fitko .fx-steps .fx-bar i { background: color-mix(in srgb, var(--fx-p0) 40%, transparent); } .fitko .fx-steps .fx-bar.hit i { background: var(--fx-p0); }
.fitko .fx-goal-line { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(158, 240, 41, .7); pointer-events: none; }
/* controls: glass capsules, the main action in the accent colour */
.fitko .fx-seg, .fitko .fx-tabs { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); margin: 0; align-self: flex-start; }
.fitko .fx-seg button { color: rgba(255, 255, 255, .75); padding: 8px 20px; transition: background .2s, color .2s; } .fitko .fx-seg button.on { background: rgba(255, 255, 255, .22); color: #fff; }
.fitko .fx-nav, .fitko .fx-chip, .fitko .fx-btn { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .10); color: #fff; border-radius: 999px; font: inherit; font-weight: 600;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.fitko .fx-btn { padding: 9px 16px; } .fitko .fx-nav:active, .fitko .fx-chip:active, .fitko .fx-btn:active, .fitko .fx-action:active, .fx-tabbar button:active { transform: scale(.96); }
.fitko .fx-nav:hover, .fitko .fx-chip:hover, .fitko .fx-btn:hover { background: rgba(255, 255, 255, .18); }
.fitko .fx-nav.wide, .fitko .fx-btn.primary { background: var(--fx-p0); color: #0b1205; border-color: transparent; } .fitko .fx-nav.wide:hover, .fitko .fx-btn.primary:hover { background: #b2f55a; }
.fitko .input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; border-radius: 12px; } .fitko .input::placeholder { color: rgba(255, 255, 255, .45); }
/* action tiles (Zapsat jídlo) */
.fitko .fx-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.fitko .fx-action { --c: var(--fx-p0); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px; border-radius: 18px; cursor: pointer; font: inherit; color: #fff;
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); transition: transform .2s ease, background .2s ease; }
.fitko .fx-action:hover { background: color-mix(in srgb, var(--c) 22%, transparent); } .fitko .fx-action strong { font-size: 15px; }
.fitko .fx-kcal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .fitko .fx-kcal .fx-dim { font-size: 15px; }
.fitko .fx-left { color: var(--fx-p2); font-weight: 600; font-size: 17px; margin: 12px 0; }
.fitko .fx-macros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.fitko .fx-macro { --c: var(--fx-p4); padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); gap: 4px; }
.fitko .fx-macro strong { font-size: 22px; color: #fff; } .fitko .fx-macro small { font-size: 14px; color: var(--fx-dim); } .fitko .fx-macro .fx-cap { height: 6px; margin-top: 4px; }
.fitko .fx-food { border-top-color: rgba(255, 255, 255, .08); font-size: 15px; padding: 8px 0; }
.fitko .fx-pending { border-color: rgba(255, 159, 10, .45); font-size: 14px; }
.fitko .fx-up, .fitko .fx-ex-r, .fitko .fx-goal { border-top-color: rgba(255, 255, 255, .08); }
.fitko .fx-rec { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; }
.fitko .fx-day { background: rgba(255, 255, 255, .05); border-radius: 16px; transition: background .2s; } .fitko .fx-day.today .fx-dn { background: var(--fx-p0); color: #0b1205; }
.fitko .fx-tpl-ico { border-radius: 28%; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
/* the floating glass tab bar (iOS 26) */
.fx-tabbar { position: sticky; bottom: 14px; z-index: 5; align-self: center; display: flex; gap: 2px; padding: 6px; margin-top: 8px; border-radius: 999px;
  background: rgba(40, 42, 54, .55); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); max-width: calc(100% - 8px); overflow-x: auto; scrollbar-width: none; }
.fx-tabbar::-webkit-scrollbar { display: none; }
.fx-tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent;
  color: rgba(255, 255, 255, .85); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .25s ease, color .25s ease, transform .2s ease; }
.fx-tabbar button .ico { font-size: 22px; display: grid; } .fx-tabbar button:hover { background: rgba(255, 255, 255, .08); }
.fx-tabbar button.on { color: var(--fx-p0); background: rgba(255, 255, 255, .12); }
@media (max-width: 640px) {
  .fitko .fx-title { font-size: 30px; } .fitko .fx-kcal, .fitko .fx-macros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fitko .fx-big { font-size: 24px; }
  .fx-tabbar button { min-width: 58px; padding: 7px 8px; font-size: 11px; } .fitko .fx-addfood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Fitko – the app's structure: 5 tabs, sub-pages under Jídlo, 1–3 columns by width */
.fitko .fx-cols { columns: 3 340px; column-gap: 16px; } .fitko .fx-cols > * { break-inside: avoid; margin: 0 0 16px; display: block; }
.fitko .fx-cols > .fx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fitko .fx-cols > .fx-tiles .fx-card { margin: 0; }
.fitko .fx-head { align-items: center; gap: 12px; }
.fitko .fx-back { border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .10); color: var(--fx-p0); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; transition: transform .2s; }
.fitko .fx-back:active, .fitko .fx-gear:active { transform: scale(.96); }
.fitko .fx-gear { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(158, 240, 41, .35); background: rgba(158, 240, 41, .14); color: var(--fx-p0); cursor: pointer; font-size: 22px; transition: transform .2s; }
.fitko .fx-gear .ico { display: grid; }
.fitko .fx-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fitko .fx-meal { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .2s, background .2s; }
.fitko .fx-meal:hover { background: rgba(255, 255, 255, .12); } .fitko .fx-meal:active { transform: scale(.96); }
.fitko .fx-meal-e { font-size: 24px; } .fitko .fx-meal-t { display: flex; flex-direction: column; min-width: 0; } .fitko .fx-meal-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fitko .fx-actions-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; } .fitko .fx-actions-sm .fx-action { padding: 12px 6px; } .fitko .fx-actions-sm .fx-action strong { font-size: 14px; }
.fitko .fx-more { margin-top: 14px; }
.fitko .fx-kcal2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fitko .fx-review .fx-coach { margin: 0 0 8px; } .fitko .fx-rev { display: grid; gap: 8px; } .fitko .fx-rev ul { margin: 4px 0 0; padding-left: 18px; }
.fx-tabbar button { flex: 1 1 0; }
@media (max-width: 640px) { .fitko .fx-synced { display: none; } .fx-tabbar { width: calc(100% - 8px); } .fx-tabbar button { min-width: 0; padding: 7px 4px; } .fitko .fx-meals { grid-template-columns: 1fr 1fr; } }
.fitko .fx-cols > .fx-ready { display: flex; }
.fitko .fx-rcp-act .fx-nav, .fitko .fx-plan .fx-chip { width: auto; height: auto; padding: 9px 16px; }
.fitko .fx-cols .fx-macros { gap: 8px; } .fitko .fx-cols .fx-macro { padding: 10px; } .fitko .fx-cols .fx-macro strong { font-size: 18px; } .fitko .fx-cols .fx-macro small { font-size: 12px; }
.fitko .fx-meal { min-width: 0; } .fitko .fx-meal-t { flex: 1; } .fitko .fx-meal-t .fx-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
@media (max-width: 640px) {
  .fitko .fx-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fitko .fx-action { padding: 12px 4px; gap: 8px; } .fitko .fx-action strong { font-size: 13px; text-align: center; }
  .fitko .fx-head .spacer { display: block; }
}

/* Fitko – the light look (like the app by day): the system is light and the hub follows it, or the hub is set to light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .module-frame:has(.fitko) { --fx-p0: #4CA80E; --fx-p1: #007AFF; --fx-p2: #F08A00; --fx-p3: #E3104A; --fx-p4: #A846D8; --fx-p5: #1C9DB8; --fx-p6: #E5352B; --fx-p7: #D9A400; --fx-p8: #5856D6; --fx-p9: #00A9C2;   color-scheme: light; background: radial-gradient(900px 700px at 0% 0%, rgba(158, 240, 41, .30), transparent 60%), radial-gradient(800px 700px at 105% 30%, rgba(0, 240, 255, .20), transparent 60%),   radial-gradient(900px 700px at 40% 110%, rgba(250, 17, 79, .14), transparent 60%), radial-gradient(800px 700px at 90% 100%, rgba(94, 92, 230, .16), transparent 60%), #F6F7F9; background-attachment: fixed; }
  :root:not([data-theme="dark"]) .fitko { --fx-card: rgba(255, 255, 255, .55); --fx-line: rgba(0, 0, 0, .06); --fx-text: #1c1c1e; --fx-dim: rgba(0, 0, 0, .55); color: #1c1c1e; }
  :root:not([data-theme="dark"]) .fitko .fx-card { background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 40%), rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .06); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
  :root:not([data-theme="dark"]) .fitko .fx-seg, :root:not([data-theme="dark"]) .fitko .fx-tabs { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .06); }
  :root:not([data-theme="dark"]) .fitko .fx-seg button { color: rgba(0, 0, 0, .6); }
  :root:not([data-theme="dark"]) .fitko .fx-seg button.on { background: #fff; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
  :root:not([data-theme="dark"]) .fitko .fx-nav, :root:not([data-theme="dark"]) .fitko .fx-chip, :root:not([data-theme="dark"]) .fitko .fx-btn, :root:not([data-theme="dark"]) .fitko .fx-back { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .08); color: #1c1c1e; }
  :root:not([data-theme="dark"]) .fitko .fx-nav:hover, :root:not([data-theme="dark"]) .fitko .fx-chip:hover, :root:not([data-theme="dark"]) .fitko .fx-btn:hover { background: rgba(255, 255, 255, .95); }
  :root:not([data-theme="dark"]) .fitko .fx-nav.wide, :root:not([data-theme="dark"]) .fitko .fx-btn.primary { background: var(--fx-p0); color: #fff; }
  :root:not([data-theme="dark"]) .fitko .fx-nav.wide:hover, :root:not([data-theme="dark"]) .fitko .fx-btn.primary:hover { background: color-mix(in srgb, var(--fx-p0) 85%, #000); }
  :root:not([data-theme="dark"]) .fitko .fx-back { color: var(--fx-p0); }
  :root:not([data-theme="dark"]) .fitko .fx-chip small { color: rgba(0, 0, 0, .5); }
  :root:not([data-theme="dark"]) .fitko .input { background: rgba(255, 255, 255, .75); border-color: rgba(0, 0, 0, .1); color: #1c1c1e; }
  :root:not([data-theme="dark"]) .fitko .input::placeholder { color: rgba(0, 0, 0, .4); }
  :root:not([data-theme="dark"]) .fitko .fx-action, :root:not([data-theme="dark"]) .fitko .fx-meal, :root:not([data-theme="dark"]) .fitko .fx-macro strong { color: #1c1c1e; }
  :root:not([data-theme="dark"]) .fitko .fx-meal { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .06); }
  :root:not([data-theme="dark"]) .fitko .fx-meal:hover { background: rgba(255, 255, 255, .9); }
  :root:not([data-theme="dark"]) .fitko .fx-macro { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
  :root:not([data-theme="dark"]) .fitko .fx-food, :root:not([data-theme="dark"]) .fitko .fx-up, :root:not([data-theme="dark"]) .fitko .fx-ex-r, :root:not([data-theme="dark"]) .fitko .fx-goal { border-top-color: rgba(0, 0, 0, .06); }
  :root:not([data-theme="dark"]) .fitko .fx-bars { background: repeating-linear-gradient(to top, rgba(0, 0, 0, .06) 0 1px, transparent 1px 33px); background-position: 0 -18px; }
  :root:not([data-theme="dark"]) .fitko .fx-goal-line { border-top-color: var(--fx-p0); }
  :root:not([data-theme="dark"]) .fitko .fx-day { background: rgba(255, 255, 255, .5); }
  :root:not([data-theme="dark"]) .fitko .fx-day:not(.empty):hover { background: rgba(255, 255, 255, .85); }
  :root:not([data-theme="dark"]) .fitko .fx-day.today .fx-dn { color: #fff; }
  :root:not([data-theme="dark"]) .fitko .fx-day.sel { border-color: rgba(0, 0, 0, .25); }
  :root:not([data-theme="dark"]) .fitko .fx-rec { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .06); }
  :root:not([data-theme="dark"]) .fitko .fx-sn { background: rgba(0, 0, 0, .06); }
  :root:not([data-theme="dark"]) .fitko .fx-x:hover { color: #000; background: rgba(0, 0, 0, .06); }
  :root:not([data-theme="dark"]) .fitko .fx-gear { border-color: color-mix(in srgb, var(--fx-p0) 35%, transparent); background: color-mix(in srgb, var(--fx-p0) 14%, transparent); color: var(--fx-p0); }
  :root:not([data-theme="dark"]) .fitko .fx-ring .bg { stroke: color-mix(in srgb, var(--fx-p0) 20%, transparent); }
  :root:not([data-theme="dark"]) .fitko .fx-pending { border-color: rgba(240, 138, 0, .45); }
  :root:not([data-theme="dark"]) .fitko .fx-dot { box-shadow: none; }
  :root:not([data-theme="dark"]) .fx-tabbar { background: rgba(255, 255, 255, .65); border-color: rgba(0, 0, 0, .06); box-shadow: 0 12px 40px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .8); }
  :root:not([data-theme="dark"]) .fx-tabbar button { color: rgba(0, 0, 0, .7); }
  :root:not([data-theme="dark"]) .fx-tabbar button:hover { background: rgba(0, 0, 0, .05); }
  :root:not([data-theme="dark"]) .fx-tabbar button.on { background: rgba(0, 0, 0, .06); color: var(--fx-p0); }
}
:root[data-theme="light"] .module-frame:has(.fitko) { --fx-p0: #4CA80E; --fx-p1: #007AFF; --fx-p2: #F08A00; --fx-p3: #E3104A; --fx-p4: #A846D8; --fx-p5: #1C9DB8; --fx-p6: #E5352B; --fx-p7: #D9A400; --fx-p8: #5856D6; --fx-p9: #00A9C2;   color-scheme: light; background: radial-gradient(900px 700px at 0% 0%, rgba(158, 240, 41, .30), transparent 60%), radial-gradient(800px 700px at 105% 30%, rgba(0, 240, 255, .20), transparent 60%),   radial-gradient(900px 700px at 40% 110%, rgba(250, 17, 79, .14), transparent 60%), radial-gradient(800px 700px at 90% 100%, rgba(94, 92, 230, .16), transparent 60%), #F6F7F9; background-attachment: fixed; }
:root[data-theme="light"] .fitko { --fx-card: rgba(255, 255, 255, .55); --fx-line: rgba(0, 0, 0, .06); --fx-text: #1c1c1e; --fx-dim: rgba(0, 0, 0, .55); color: #1c1c1e; }
:root[data-theme="light"] .fitko .fx-card { background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 40%), rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .06); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
:root[data-theme="light"] .fitko .fx-seg, :root[data-theme="light"] .fitko .fx-tabs { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .fitko .fx-seg button { color: rgba(0, 0, 0, .6); }
:root[data-theme="light"] .fitko .fx-seg button.on { background: #fff; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
:root[data-theme="light"] .fitko .fx-nav, :root[data-theme="light"] .fitko .fx-chip, :root[data-theme="light"] .fitko .fx-btn, :root[data-theme="light"] .fitko .fx-back { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .08); color: #1c1c1e; }
:root[data-theme="light"] .fitko .fx-nav:hover, :root[data-theme="light"] .fitko .fx-chip:hover, :root[data-theme="light"] .fitko .fx-btn:hover { background: rgba(255, 255, 255, .95); }
:root[data-theme="light"] .fitko .fx-nav.wide, :root[data-theme="light"] .fitko .fx-btn.primary { background: var(--fx-p0); color: #fff; }
:root[data-theme="light"] .fitko .fx-nav.wide:hover, :root[data-theme="light"] .fitko .fx-btn.primary:hover { background: color-mix(in srgb, var(--fx-p0) 85%, #000); }
:root[data-theme="light"] .fitko .fx-back { color: var(--fx-p0); }
:root[data-theme="light"] .fitko .fx-chip small { color: rgba(0, 0, 0, .5); }
:root[data-theme="light"] .fitko .input { background: rgba(255, 255, 255, .75); border-color: rgba(0, 0, 0, .1); color: #1c1c1e; }
:root[data-theme="light"] .fitko .input::placeholder { color: rgba(0, 0, 0, .4); }
:root[data-theme="light"] .fitko .fx-action, :root[data-theme="light"] .fitko .fx-meal, :root[data-theme="light"] .fitko .fx-macro strong { color: #1c1c1e; }
:root[data-theme="light"] .fitko .fx-meal { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .fitko .fx-meal:hover { background: rgba(255, 255, 255, .9); }
:root[data-theme="light"] .fitko .fx-macro { background: color-mix(in srgb, var(--c) 14%, transparent); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
:root[data-theme="light"] .fitko .fx-food, :root[data-theme="light"] .fitko .fx-up, :root[data-theme="light"] .fitko .fx-ex-r, :root[data-theme="light"] .fitko .fx-goal { border-top-color: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .fitko .fx-bars { background: repeating-linear-gradient(to top, rgba(0, 0, 0, .06) 0 1px, transparent 1px 33px); background-position: 0 -18px; }
:root[data-theme="light"] .fitko .fx-goal-line { border-top-color: var(--fx-p0); }
:root[data-theme="light"] .fitko .fx-day { background: rgba(255, 255, 255, .5); }
:root[data-theme="light"] .fitko .fx-day:not(.empty):hover { background: rgba(255, 255, 255, .85); }
:root[data-theme="light"] .fitko .fx-day.today .fx-dn { color: #fff; }
:root[data-theme="light"] .fitko .fx-day.sel { border-color: rgba(0, 0, 0, .25); }
:root[data-theme="light"] .fitko .fx-rec { background: rgba(255, 255, 255, .6); border-color: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .fitko .fx-sn { background: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .fitko .fx-x:hover { color: #000; background: rgba(0, 0, 0, .06); }
:root[data-theme="light"] .fitko .fx-gear { border-color: color-mix(in srgb, var(--fx-p0) 35%, transparent); background: color-mix(in srgb, var(--fx-p0) 14%, transparent); color: var(--fx-p0); }
:root[data-theme="light"] .fitko .fx-ring .bg { stroke: color-mix(in srgb, var(--fx-p0) 20%, transparent); }
:root[data-theme="light"] .fitko .fx-pending { border-color: rgba(240, 138, 0, .45); }
:root[data-theme="light"] .fitko .fx-dot { box-shadow: none; }
:root[data-theme="light"] .fx-tabbar { background: rgba(255, 255, 255, .65); border-color: rgba(0, 0, 0, .06); box-shadow: 0 12px 40px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .8); }
:root[data-theme="light"] .fx-tabbar button { color: rgba(0, 0, 0, .7); }
:root[data-theme="light"] .fx-tabbar button:hover { background: rgba(0, 0, 0, .05); }
:root[data-theme="light"] .fx-tabbar button.on { background: rgba(0, 0, 0, .06); color: var(--fx-p0); }
/* Fitko: masonry columns (fxMasonry), content centred at most 1400 px, room under the floating tab bar */
.fitko .fx-cols { columns: auto; display: flex; gap: 16px; align-items: flex-start; }
.fitko .fx-cols > * { margin: 0; } .fitko .fx-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fitko .fx-col > * { margin: 0; break-inside: auto; }
.fitko .fx-col > .fx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fitko .fx-col > .fx-ready { display: flex; }
.module-frame:has(.fitko) > .module-page { max-width: 1400px; }
.fitko { padding-bottom: 140px; }
/* JM – Docházka */
.jmd { display: flex; flex-direction: column; gap: 10px; }
.jmd-set { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted, #64748b); white-space: nowrap; } .jmd-set .input { padding: 6px 8px; min-width: 0; flex: none; }
.jmd-area { min-height: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; overflow-x: auto; }
.jmd-out { display: flex; flex-direction: column; gap: 10px; }
.jmd-sumhead { align-items: center; } .jmd-sumhead h3 { margin: 0; }
.jmd-sum tfoot td { border-top: 1px solid var(--border); border-bottom: 0; }
.jmd-person { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 14px; }
.jmd-person > summary { cursor: pointer; font-size: 15px; padding: 2px 0; }
.jmd-person[open] > summary { margin-bottom: 4px; }
.jmd-notes { display: flex; flex-direction: column; gap: 4px; font-size: 14px; margin: 4px 0 10px; } .jmd-warn { color: #dc2626; font-weight: 600; }
.jmd-note { text-align: left !important; white-space: normal !important; color: var(--muted, #64748b); font-size: 12px; }
.jmd-person .jmp-table th:nth-child(2), .jmd-person .jmp-table td:nth-child(2), .jmd-person .jmp-table th:last-child { text-align: left; }
.jmd-person tr.jmd-extra td { background: color-mix(in srgb, #16a34a 7%, transparent); }
.jmd-person tr.jmd-check td { background: color-mix(in srgb, #dc2626 8%, transparent); }
.jmd-notecell { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.jmd-edit { flex: none; opacity: .45; font-size: 14px; } tr:hover .jmd-edit, .jmd-edit:focus { opacity: 1; }
.jmd-person tr.jmd-off td { color: var(--muted, #64748b); font-style: italic; }
.jmd-person tr.jmd-manual td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
.jmd-person tr.jmd-editing td { background: color-mix(in srgb, #2563eb 7%, transparent); }
.jmd-editbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: normal; }
.jmd-time { width: 110px; min-width: 0; flex: none; padding: 5px 8px; }
.jmd-pill { margin-left: 6px; font-size: 12px; }
.jmd-entries { display: flex; flex-direction: column; gap: 10px; }
.jmd-entry { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.jmd-entry-head { display: flex; align-items: center; gap: 8px; }
.jmd-entry-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accent-text); background: #ea580c; }
.jmd-name { flex: 1; min-width: 0; max-width: 360px; font-weight: 600; }
.jmd-entry .jmd-area { min-height: 90px; }
/* Fitko – Chutě */
.fitko .fx-taste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .fitko .fx-taste-l { display: flex; align-items: center; gap: 8px; font-weight: 600; }
/* JM – tools as buttons (jm-tools.js) */
.jmt-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.jmt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.jmt-btn:hover { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.jmt-btn.due { box-shadow: 0 0 0 2px var(--c); }
.jmt-btn .ico-tile { width: 28px; height: 28px; font-size: 16px; margin: 0; flex: none; }
.jmt-btn .pill { font-weight: 500; }
.jmt-in-modal, .jmt-in-modal.due, .jmt-in-modal.jmr-tile { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; } /* the card inside a dialog: no frame, the dialog is the frame */
.jmt-in-modal > .jm-tcard-head .jm-tcard-name, .jmt-in-modal > .jm-tcard-head .ico-tile { display: none; }
.jmt-in-modal > .jm-tcard-head:not(:has(.pill, .hint)) { display: none; }
@media (max-width: 700px) { .jmt-btn { flex: none; } }
.jmt-ask { order: -1; display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; padding: 8px 8px 8px 8px; margin-bottom: 4px;
  border: 2px solid #db2777; border-radius: 16px; background: linear-gradient(100deg, color-mix(in srgb, #db2777 12%, var(--surface)), color-mix(in srgb, #7c3aed 8%, var(--surface)));
  box-shadow: 0 4px 18px color-mix(in srgb, #db2777 22%, transparent); }
.jmt-ask:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, #db2777 25%, transparent), 0 4px 18px color-mix(in srgb, #db2777 25%, transparent); }
.jmt-ask .ico-tile { width: 38px; height: 38px; font-size: 21px; margin: 0; flex: none; }
.jmt-ask .input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 6px 2px; box-shadow: none; font-size: 16px; font-weight: 500; }
.jmt-ask .input::placeholder { color: color-mix(in srgb, #db2777 55%, var(--muted)); }
.jmt-ask .btn.primary { background: #db2777; border-color: #db2777; padding: 8px 16px; font-size: 14px; }
.jmt-ask .linklike { white-space: nowrap; font-size: 13px; color: #db2777; }
.jmk-qa { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.jmk-qa > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.jmk-qa > summary::-webkit-details-marker { display: none; }
.jmk-qa > summary::before { content: '▸'; color: #db2777; flex: none; transition: transform .15s; } .jmk-qa[open] > summary::before { transform: rotate(90deg); }
.jmk-qa-q { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jmk-qa[open] .jmk-qa-q { white-space: normal; }
.jmk-qa-at { flex: none; font-size: 12px; }
.jmk-qa > .jmk-msg { margin: 0 12px 12px; max-width: none; }
.jmk-fold { gap: 14px; font-size: 13px; }
.jmk-del { flex: none; opacity: .35; font-size: 14px; } .jmk-qa > summary:hover .jmk-del, .jmk-del:focus { opacity: 1; }
@media (hover: none) { .jmk-del { opacity: .7; } }
/* JM – Nákladovost overview (jm-cost.js) */
.jmn tr.jmn-items td { background: color-mix(in srgb, #f59e0b 5%, transparent); text-align: left; white-space: normal; }
.jmn-itemlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 24px; padding: 4px 6px; font-size: 13px; }
.jmn-itemlist > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px; gap: 8px; } .jmn-itemlist > div > span:first-child { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.jmn .jmp-card strong.neg, .jmn .down { color: #dc2626; } .jmn .jmp-card strong.pos, .jmn .up { color: #16a34a; }
/* JM tools: one row on a computer – the badge ("Report tento týden", "5 déle než 30 dní") is a small second line
   under the name, so a button is only as wide as its longer line */
@media (min-width: 700px) {
  .jmt-bar { flex-wrap: nowrap; gap: 6px; }
  .jmt-btn { flex: none; gap: 7px; min-height: 40px; padding: 4px 11px 4px 5px; font-size: 13px; border-radius: 11px; white-space: nowrap; }
  .jmt-btn .ico-tile { width: 26px; height: 26px; font-size: 15px; border-radius: 8px; }
  .jmt-btn:has(.pill) { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 0; align-items: center; justify-items: start; text-align: left; }
  .jmt-btn:has(.pill) .ico-tile { grid-row: 1 / span 2; }
  .jmt-btn .pill { grid-column: 2; background: none; border: 0; padding: 0; margin: 0; font-size: 11px; font-weight: 600; line-height: 1.15; color: var(--muted, #94a3b8); }
  .jmt-btn .pill.err, .jmt-btn.due .pill { color: color-mix(in srgb, var(--c) 65%, var(--text)); } /* orange / red badge readable in both modes */
}
/* JM: Claudie's field across the whole width, the tools in one row under it (two rows together) */
@media (min-width: 700px) {
  .jmt-bar { flex-wrap: wrap; }
  .jmt-bar > .jmt-ask { flex: 1 0 100%; max-width: none; }
}
/* JM – branch of reklamace / požadavky / úkoly (from people) */
.jm-branch { font-size: 11px; } .jm-branch.none { opacity: .65; font-style: italic; }
.jm-people { display: flex; flex-direction: column; gap: 10px; }
.jm-people-share { display: flex; flex-wrap: wrap; gap: 6px; }
.jm-people-list { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.jm-people-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; align-items: center; padding: 6px 2px; border-top: 1px solid var(--border); }
.jm-people-row.none strong { color: var(--danger, #dc2626); } .jm-people-row select { padding: 5px 8px; }
@media (max-width: 600px) { .jm-people-row { grid-template-columns: 1fr; } }
/* Soubory: back / forward */
.fs-hist { display: inline-flex; gap: 4px; } .fs-hist .btn { min-width: 34px; font-size: 18px; line-height: 1; padding: 4px 10px; } .fs-hist .btn:disabled { opacity: .35; cursor: default; }
/* JM tools: the row fills the whole width (buttons share the free space) */
@media (min-width: 700px) {
  .jmt-bar > .jmt-btn { flex: 1 1 auto; justify-content: flex-start; }
}
/* the one collapse arrow sits at the TOP of the menu, next to the logo (like in the apps) – not on the edge */
@media (min-width: 900px) {
  .shell.side .bar { position: relative; }
  .shell.side .side-toggle { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 8px; left: auto; bottom: auto; transform: none;
    width: 30px; height: 30px; border-radius: 50%; background: var(--sb-hover); border: 0; box-shadow: none; z-index: 2; }
  .shell.side .side-toggle:hover { background: var(--sb-active); }
  .shell.side .bar-btn.home { padding-right: 40px; }
  /* collapsed: under the logo, centred */
  .shell.side.mini .bar-btn.home { padding-right: 0; margin-bottom: 40px; }
  .shell.side.mini .side-toggle { top: calc(56px + env(safe-area-inset-top, 0px)); right: 50%; transform: translateX(50%); }
}
/* phone rail: the arrow right under the logo too */
@media (max-width: 899px) {
  .shell.side .bar-btn.home { order: -2; } .shell.side .side-toggle { order: -1; margin: 2px auto 6px; }
}
/* an app keeps its own « at the top of its menu (and drives the hub's menu with it): the hub's arrow steps aside */
/* the collapse arrow lights up under the pointer (accent fill + soft glow) */
.shell.side .side-toggle { transition: background .15s, color .15s, box-shadow .15s; }
.shell.side .side-toggle:hover, .shell.side .side-toggle:focus-visible { background: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.shell.side .side-toggle:hover .chev, .shell.side .side-toggle:focus-visible .chev { color: inherit; }
/* no light hairline over the app in the hub: the iframe's own background follows the theme (a white iframe background
   showed through the rounded / sub-pixel top edge as a thin line above the app's menu) */
.shell.side .frame, .shell.side .frame iframe { background: var(--bg); }
/* Nastavení → Zdraví integrací */
.hl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hl-group { margin: 14px 0 0; } .hl-group h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hl-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; background: var(--surface); }
.hl-dot { flex: none; width: 20px; text-align: center; font-weight: 800; line-height: 1.35; }
.hl-ok .hl-dot { color: #16a34a; } .hl-warn .hl-dot { color: #d97706; } .hl-error .hl-dot { color: #dc2626; } .hl-off .hl-dot { color: var(--muted); }
.hl-error { border-color: color-mix(in srgb, #dc2626 45%, var(--border)); background: color-mix(in srgb, #dc2626 7%, var(--surface)); }
.hl-warn { border-color: color-mix(in srgb, #d97706 40%, var(--border)); }
.hl-off { opacity: .75; }
.hl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hl-main strong { font-weight: 600; }
.hl-detail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .hl-fix { font-size: 13px; color: var(--text); }
.hl-at { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.bar-btn.gear { position: relative; }
.bar-btn.gear.hl-bad::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 2px var(--sb-bg, var(--bg)); }
/* JM – Claudie: 👍 / 👎, what she learnt, where she did not know */
.jmk-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; }
.jmk-thumb { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 99px; padding: 2px 9px; font-size: 14px; cursor: pointer; line-height: 1.4; }
.jmk-thumb:hover { border-color: color-mix(in srgb, #db2777 50%, var(--border)); }
.jmk-thumb.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, var(--surface)); }
.jmk-thumb.on.bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, var(--surface)); }
.jmk-list { display: flex; flex-direction: column; gap: 8px; }
.jmk-li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.jmk-li > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jmk-li-a { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.jmk-li.done strong { color: var(--muted); }
.jmk-li .row { flex: none; }
.jmk-teach textarea { width: 100%; resize: vertical; }
@media (max-width: 600px) { .jmk-li { flex-direction: column; } }
.jmp-table span.up { color: #16a34a; } .jmp-table span.down { color: #dc2626; } /* ▲ ▼ in Po měsících */
/* JM – cases standing still (SLA) */
.jm-stale { display: inline-flex; align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; white-space: nowrap;
  color: color-mix(in srgb, #d97706 70%, var(--text)); background: color-mix(in srgb, #f59e0b 16%, transparent); }
.jm-stale.bad { color: color-mix(in srgb, var(--danger) 75%, var(--text)); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.jm-mini .jm-stale { flex: none; font-size: 11px; padding: 0 5px; }
.jm-chip-stale { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }
.jm-sla-row .row { gap: 8px; align-items: center; } .jm-sla-row .input { width: 90px; }
.jm-resol { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; }
/* Fitko calendar: the ✓ on a filled mark is readable on the deep light-theme colours too */
.fx-mark.done { color: #fff; }
/* Fitko web: Úspěchy (streaks, trophies, cabinet), Týdenní plán + Nákupní seznam, Analýza tréninku, RIR – theme-neutral (uses --fx-* and currentColor) */
.fitko .fx-streaks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.fitko .fx-streak { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--fx-line); background: color-mix(in srgb, var(--c) 12%, transparent); }
.fitko .fx-streak strong { font-size: 26px; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; } .fitko .fx-streak strong small { font-size: 13px; color: var(--fx-dim); }
.fitko .fx-streak > span { font-size: 13px; }
.fitko .fx-trophies { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.fitko .fx-trophies .fx-trophy { flex: none; width: 92px; flex-direction: column; text-align: center; }
.fitko .fx-trophy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fitko .fx-trophy-i { flex: none; width: 46px; height: 46px; border-radius: 28%; display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 22%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.fitko .fx-trophy-t { display: flex; flex-direction: column; min-width: 0; } .fitko .fx-trophy-t strong { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.fitko .fx-trophy.big .fx-trophy-t strong { font-size: 14.5px; } .fitko .fx-trophy-d { font-size: 12px; }
.fitko .fx-trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.fitko .fx-wdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.fitko .fx-wdayb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; border: 1px solid var(--fx-line); background: var(--fx-card); color: inherit; font: inherit; cursor: pointer; }
.fitko .fx-wdayb strong { font-size: 17px; } .fitko .fx-wdayb > span:first-child { font-size: 12px; color: var(--fx-dim); text-transform: capitalize; }
.fitko .fx-wdayb.on { border-color: var(--fx-p1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fx-p1) 40%, transparent); } .fitko .fx-wdayb.today strong { color: var(--fx-p3); }
.fitko .fx-wmeals { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fitko .fx-wmeal { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--fx-line); flex-wrap: wrap; }
.fitko .fx-wmeal .fx-main { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fitko .fx-shop { display: flex; flex-direction: column; }
.fitko .fx-shop-i { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--fx-line); cursor: pointer; }
.fitko .fx-shop-i:first-child { border-top: 0; } .fitko .fx-shop-i input { width: 20px; height: 20px; accent-color: var(--fx-p0); flex: none; }
.fitko .fx-shop-i > span:nth-of-type(1) { flex: 1; } .fitko .fx-shop-i.done > span { text-decoration: line-through; opacity: .55; }
.fitko .fx-hbars { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.fitko .fx-hbar { display: grid; grid-template-columns: minmax(70px, 120px) 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
.fitko .fx-hbar strong { text-align: right; font-variant-numeric: tabular-nums; }
.fitko .fx-hbar-t { position: relative; height: 12px; border-radius: 99px; background: color-mix(in srgb, currentColor 10%, transparent); overflow: hidden; }
.fitko .fx-band { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); background: color-mix(in srgb, #30d158 28%, transparent); }
.fitko .fx-hbar-t b { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 99px; background: var(--fx-p1); }
.fitko .fx-hbar.in .fx-hbar-t b { background: #30d158; } .fitko .fx-hbar.over .fx-hbar-t b { background: var(--fx-p2); }
.fitko .fx-deload { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--fx-p5) 22%, transparent); color: var(--fx-p5); }
.fitko .fx-rir { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid var(--fx-line); color: var(--fx-text, inherit); }
@media (max-width: 520px) { .fitko .fx-wdays { gap: 3px; } .fitko .fx-wdayb { padding: 6px 0; } .fitko .fx-trophy-grid { grid-template-columns: 1fr; } }
/* Nastavení → Fakturace: the Náklady block */
.card-lite { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
/* Fitko → Svěřenci (trenérský portál) – theme-neutral (--fx-* and currentColor) */
.fitko .fx-coach { display: flex; flex-direction: column; gap: 12px; }
.fitko .fx-coach > .fx-card + .fx-card, .fitko .fx-coach .fx-card { margin: 0; }
.fitko .fx-coach-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .fitko .fx-coach-row .input { flex: 1 1 220px; min-width: 0; }
.fitko .fx-coach-list { display: flex; flex-direction: column; margin-top: 8px; }
.fitko .fx-coach-a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--fx-line); }
.fitko .fx-coach-a:first-child { border-top: 0; }
.fitko .fx-coach-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.fitko .fx-coach-open:disabled { cursor: default; } .fitko .fx-coach-a.on .fx-coach-open strong::after { content: ' ›'; color: var(--fx-dim); }
.fitko .fx-pill { flex: none; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--fx-line); }
.fitko .fx-pill.ok { color: #30d158; border-color: color-mix(in srgb, #30d158 45%, transparent); } .fitko .fx-pill.warn { color: var(--fx-p2); border-color: color-mix(in srgb, var(--fx-p2) 45%, transparent); }
.fitko .fx-coach-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fitko .fx-coach-head .fx-h2 { margin: 0; }
.fitko .fx-coach-tw { overflow-x: auto; margin-top: 8px; }
.fitko .fx-coach-t { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.fitko .fx-coach-t th, .fitko .fx-coach-t td { padding: 6px 8px; text-align: right; border-top: 1px solid var(--fx-line); white-space: nowrap; }
.fitko .fx-coach-t th:first-child { text-align: left; font-weight: 600; text-transform: capitalize; } .fitko .fx-coach-t tr:first-child th { border-top: 0; color: var(--fx-dim); font-weight: 500; }
.fitko .fx-coach-tw { max-height: 70vh; overflow: auto; } .fitko .fx-coach-t tr:first-child th { position: sticky; top: 0; background: var(--fx-card); backdrop-filter: blur(12px); }
.fitko .fx-coach-t td.hit { color: #30d158; } .fitko .fx-coach-t td.miss { color: var(--fx-p2); }
.fitko .fx-coach-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fitko .fx-coach-note { margin: 4px 0 0; font-size: 13px; color: var(--fx-dim); }
.fitko .fx-coach-plan { display: flex; flex-direction: column; margin-top: 8px; }
.fitko .fx-coach-pd { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--fx-line); }
.fitko .fx-coach-pd:first-child { border-top: 0; } .fitko .fx-coach-pd > strong { font-size: 13px; text-transform: capitalize; }
.fitko .fx-coach-pi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .fitko .fx-coach-pi .fx-chip { display: inline-flex; align-items: center; gap: 4px; }
.fitko .fx-coach-pa { display: flex; gap: 8px; align-items: center; } .fitko .fx-coach-pa .input { max-width: 170px; }
.fitko .fx-coach-n { position: relative; padding: 10px 28px 10px 0; border-top: 1px solid var(--fx-line); } .fitko .fx-coach-n p { margin: 4px 0 0; white-space: pre-wrap; }
.fitko .fx-coach-n .fx-x { position: absolute; top: 8px; right: 0; }
.fx-coach-mp { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); } .fx-coach-mp strong { text-transform: capitalize; }
@media (max-width: 600px) { .fitko .fx-coach-pd { grid-template-columns: 1fr; gap: 6px; } .fitko .fx-coach-pa .input { max-width: none; flex: 1; } }
/* Nastavení → Komunita Navigace */
.comm-row { align-items: center; gap: 8px; flex-wrap: wrap; } .comm-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.comm-flag { border-left: 3px solid var(--danger); padding-left: 8px; }
.fitko .fx-coach-ai { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; flex: none; } .fitko .fx-coach-ai input { accent-color: var(--fx-p0); }
.fitko .fx-coach-lim { width: 72px; flex: none; }
/* AI is the hub admin's only for now: every AI control carries .ai-only */
body:not(.ai-ok) .ai-only { display: none !important; }
/* Nastavení → Komunita Navigace: the key's state */
.comm-key { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface); }
.comm-key.bad { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.ok-text { color: var(--ok, #16a34a); font-weight: 600; }
/* Fitko trenér: the green readable in the light look too */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .fitko .fx-pill.ok, :root:not([data-theme="dark"]) .fitko .fx-coach-t td.hit { color: #15803d; } }
:root[data-theme="light"] .fitko .fx-pill.ok, :root[data-theme="light"] .fitko .fx-coach-t td.hit { color: #15803d; }
/* Registrace – users of all apps */
.regs { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-width: 1200px; margin: 0 auto; }
.regs-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .regs-head h1 { margin: 0; font-size: 24px; }
.regs-seg { flex-wrap: wrap; } .regs-n { opacity: .65; font-variant-numeric: tabular-nums; }
.regs-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.regs-appc { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.regs-appc.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .regs-appc .btn { align-self: flex-start; margin-top: 4px; }
.regs-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.regs-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px 80px 80px 250px; /* fixed columns: every row lines up, with or without 🔑 */ align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); }
.regs-row:first-child { border-top: 0; } .regs-row.off { opacity: .6; }
.regs-app { justify-self: start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; color: var(--text); background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); white-space: nowrap; }
.regs-main { display: flex; flex-direction: column; min-width: 0; } .regs-main strong, .regs-main .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regs-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .regs-d { font-size: 12px; font-variant-numeric: tabular-nums; } .regs-act { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 760px) { .regs-row { grid-template-columns: 1fr auto; } .regs-app { grid-column: 1 / -1; } .regs-d { display: none; } .regs-act { grid-column: 1 / -1; } }
/* ucet.luksafoto.cz – the owner's master overview only */
.overview-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.overview-bar img { width: 24px; height: 24px; } .overview-only { min-height: calc(100vh - 52px); background: var(--bg); }
/* Registrace: the same look for every action (links styled as buttons don't turn blue) and fixed slots so rows line up */
.regs-act { display: grid !important; grid-template-columns: 90px 104px 150px; gap: 6px; justify-content: end; align-items: center; }
.regs-act > * { justify-self: stretch; text-align: center; }
.regs-act a.btn, .regs-appc a.btn { color: var(--text); text-decoration: none; }
.regs-act .btn.primary { color: var(--accent-text); }
.regs-row { grid-template-columns: 110px minmax(0, 1fr) 150px 80px 80px auto !important; }
@media (max-width: 760px) { .regs-act { grid-template-columns: auto auto auto; justify-content: start; } .regs-row { grid-template-columns: 1fr auto !important; } }
.regs-headrow { padding-top: 7px; padding-bottom: 7px; background: color-mix(in srgb, var(--text) 4%, var(--surface)); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.regs-headrow .regs-hr { text-align: right; }
@media (max-width: 760px) { .regs-headrow { display: none !important; } }
/* Nastavení: grouped sections on the left (tiles on a phone), the chosen section on the right */
.modal:has(.set-wrap) { width: min(1120px, 96vw); max-width: 96vw; }
.set-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; min-height: min(70vh, 640px); }
.set-nav { display: flex; flex-direction: column; gap: 14px; padding-right: 14px; border-right: 1px solid var(--border); position: sticky; top: 0; align-self: start; }
.set-group { display: flex; flex-direction: column; gap: 2px; }
.set-gh { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 10px 4px; }
.set-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; position: relative; }
.set-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.set-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.set-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; opacity: .85; } .set-ic svg { width: 18px; height: 18px; }
.set-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; margin-left: auto; }
.set-content { display: grid; gap: 12px; align-content: start; min-width: 0; }
.set-title { margin: 0 0 4px; font-size: 20px; }
@media (max-width: 760px) {
  .set-wrap { grid-template-columns: 1fr; }
  .set-nav { position: static; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 12px; }
  .set-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .set-gh { grid-column: 1 / -1; padding-left: 2px; }
  .set-item { border: 1px solid var(--border); background: var(--surface); padding: 10px; }
}
/* Nastavení on a phone: rows that hold a label + controls stack instead of squeezing the label into a thin column */
@media (max-width: 760px) {
  .set-content .feat-row { flex-wrap: wrap; row-gap: 6px; }
  .set-content .feat-row > label.row { flex: 1 1 100% !important; }
  .set-content .mod-style { flex: 1 1 100%; flex-wrap: nowrap; padding-left: 26px; }
  .set-content .mod-style .input:first-child { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .set-content .row { flex-wrap: wrap; }
  .set-content .input, .set-content select { max-width: 100%; }
  .set-content table { display: block; overflow-x: auto; }
}
/* Nastavení: a solid sheet (no glass – nothing of the page behind shows through) and tidy rows on a phone */
.modal:has(.set-wrap) { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.modal:has(.set-wrap) .card { background: color-mix(in srgb, var(--text) 3%, var(--surface)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (max-width: 760px) {
  .set-content label.row, .set-content .feat-row > label.row { flex-wrap: nowrap !important; align-items: flex-start; }
  .set-content label.row input[type=checkbox] { margin-top: 3px; flex: none; }
  .set-content .feat-row > .mod-style.row { flex-wrap: nowrap !important; gap: 6px; }
  .set-content .mod-style input[type=color] { flex: none; }
}
@media (max-width: 760px) { .set-content .feat-row > .mod-style.row { padding-left: 24px; width: 100%; box-sizing: border-box; min-width: 0; } .set-content .card { min-width: 0; overflow: hidden; } }
.set-back { display: none; } .set-chev { display: none; }
@media (max-width: 760px) {
  .set-wrap { min-height: 0; }
  .set-wrap.list .set-content { display: none; }
  .set-wrap:not(.list) .set-nav { display: none; }
  .set-wrap .set-group { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
  .set-wrap .set-gh { padding: 10px 14px 6px; border: 0; }
  .set-wrap .set-item { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; padding: 12px 14px; font-size: 15px; }
  .set-wrap .set-gh + .set-item { border-top: 0; }
  .set-wrap .set-item.on { background: transparent; color: var(--text); font-weight: 400; }
  .set-chev { display: inline; margin-left: auto; color: var(--muted); font-size: 18px; }
  .set-dot + .set-chev { margin-left: 8px; }
  .set-back { display: inline-flex; align-self: start; justify-self: start; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 15px; padding: 2px 0 6px; cursor: pointer; }
  .set-nav { border-bottom: 0; padding-bottom: 0; }
}

/* Předplatné → Projekty (infrastruktura) */
.sub-tabs { margin-right: 6px; }
.inf-group { margin-top: 16px; } .inf-group h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.inf-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 170px 36px; gap: 12px; align-items: center; padding: 10px 14px;
  border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); }
.inf-row:hover { background: var(--glass-strong); } .inf-row.off .inf-main > strong, .inf-row.off .sub-amt { opacity: .6; }
.inf-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.inf-main:hover > strong { text-decoration: underline; }
.inf-main .hint { overflow: hidden; text-overflow: ellipsis; }
.inf-note { font-style: italic; }
.inf-when { display: flex; flex-direction: column; } .inf-row .sub-amt { text-align: right; }
.inf-go { width: 32px; text-align: center; text-decoration: none; }
.inf-miss { color: #d97706; }
.inf-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
.inf-pill.active { background: rgba(16, 185, 129, .15); color: #059669; }
.inf-pill.stopped { background: rgba(100, 116, 139, .18); color: var(--muted); }
.inf-pill.cancel { background: rgba(239, 68, 68, .15); color: #dc2626; }
@media (max-width: 800px) { .inf-row { grid-template-columns: minmax(0, 1fr) auto 32px; } .inf-when { display: none; } }

/* Kniha jízd: druh jízdy a tankování z NaviDesku */
.tr-kind { display: inline-block; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; }
.tr-kind.biz { background: rgba(37, 99, 235, .12); color: #2563eb; }
.tr-kind.priv { background: rgba(100, 116, 139, .16); color: var(--muted); }
.tr-row.tr-fuel { grid-template-columns: 110px minmax(0, 1fr) 80px 150px; border-left: 3px solid #f59e0b; }
.tr-row.tr-fuel > strong:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tr-purpose[readonly] { background: transparent; border-style: dashed; }

/* Zrcadlení → Historie */
.mir-hist h4 { margin: 14px 0 4px; font-size: 12px; text-transform: capitalize; color: var(--muted); }
.mir-h-row { display: grid; grid-template-columns: 44px 110px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--glass-line); }
.mir-h-act { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mir-h-row.copy .mir-h-act { color: #16a34a; } .mir-h-row.update .mir-h-act { color: #2563eb; } .mir-h-row.delete .mir-h-act, .mir-h-row.refused .mir-h-act { color: #dc2626; }
.mir-h-what { display: flex; flex-direction: column; min-width: 0; } .mir-h-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .mir-h-row { grid-template-columns: 40px minmax(0, 1fr); } .mir-h-act { grid-column: 2; } .mir-h-what { grid-column: 1 / -1; } }
.mir-h-row { cursor: pointer; }
.mir-h-meta { font-size: 12.5px; }
.mir-h-body { margin-top: 4px; font-size: 13px; white-space: pre-wrap; color: var(--text); opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mir-h-row.open .mir-h-body { display: block; -webkit-line-clamp: unset; }
.mir-h-row.open .mir-h-what strong { white-space: normal; }
.mir-h-changes { margin-top: 3px; font-size: 12.5px; display: grid; gap: 2px; }
.mir-h-changes del { color: #dc2626; text-decoration: line-through; } .mir-h-changes ins { color: #16a34a; text-decoration: none; }
@media (max-width: 900px) { .tr-row.tr-fuel { grid-template-columns: 1fr auto; } .tr-row.tr-fuel .tr-route { grid-column: 1 / -1; } }

/* Trezor */
.vault-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 120px; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; color: inherit; font: inherit; text-decoration: none;
  border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); cursor: pointer; }
.vault-row:hover { background: var(--glass-strong); }
.vault-row .ico-tile { width: 32px; height: 32px; font-size: 20px; margin: 0; }
.vault-main, .vault-due { display: flex; flex-direction: column; min-width: 0; } .vault-main .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-pill { justify-self: end; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.vault-pill.ok { color: var(--muted); } .vault-pill.soon { background: rgba(245, 158, 11, .16); color: #d97706; } .vault-pill.late { background: rgba(239, 68, 68, .15); color: #dc2626; }
.vault-group { margin-top: 16px; } .vault-group h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vault-att h3 { margin: 0 0 8px; }
.vault-att-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--glass-line); cursor: pointer; }
.vault-att-row:last-child { border-bottom: 0; } .vault-att-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vault-file { display: flex; gap: 8px; align-items: center; padding: 4px 4px 4px 10px; border: 1px solid var(--glass-line); border-radius: 10px; max-width: 100%; }
.vault-file a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.vault-num { gap: 8px; align-items: center; } .vault-num code { user-select: all; }
.vault-cam { display: none; }
@media (pointer: coarse) { .vault-cam { display: inline-flex; } }
@media (max-width: 700px) {
  .vault-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .vault-due { display: none; }
  .vault-att-row { grid-template-columns: 24px minmax(0, 1fr) auto; } .vault-att-row > .hint { display: none; }
}
/* JM – Finanční plány */
.jmf-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.jmf-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 8px; }
.jmf-group { display: flex; flex-direction: column; gap: 4px; }
.jmf-gtitle { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 13px; color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: .03em; }
.jmf-gtitle .linklike { text-transform: none; letter-spacing: 0; font-weight: 500; }
.jmf-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.jmf-item.on { border-color: #0d9488; box-shadow: inset 0 0 0 1px #0d9488; }
.jmf-item .hint { font-size: 12px; }
.jmf-iname { font-weight: 600; }
.jmf-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jmf-head { flex-wrap: wrap; gap: 8px; } .jmf-head .input { flex: 1 1 180px; min-width: 0; }
.jmf-head .jmf-name { font-size: 17px; font-weight: 600; flex: 2 1 220px; }
.jmf-card .toolbar h3 { margin: 0; }
.jmf-area { min-height: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.jmf-cols, .jmf-set { flex-wrap: wrap; gap: 10px; }
.jmf-cols select { max-width: 260px; }
.jmf-num { width: 130px; text-align: right; padding: 4px 8px; }
.jmf-pct { width: 64px; text-align: right; padding: 3px 6px; }
.jmf-pct.set { border-color: #0d9488; font-weight: 600; }
.jmf-out td, .jmf-out th { white-space: nowrap; }
.jmf-missing td { color: var(--muted, #64748b); }
@media (max-width: 760px) {
  .jmf-layout { grid-template-columns: 1fr; }
  .jmf-side { position: static; flex-direction: row; overflow-x: auto; gap: 10px; }
  .jmf-group { min-width: 200px; }
  .jmf-num { width: 104px; }
}
.sub-presets { margin: 10px 0; } .sub-presets summary { cursor: pointer; font-weight: 600; }
.sub-pg { margin-top: 8px; } .sub-pg .row { flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sub-have { opacity: .55; }
.sub-presets { margin: 10px 0; } .sub-presets summary { cursor: pointer; font-weight: 600; }
.sub-pg { margin-top: 8px; } .sub-pg .row { flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sub-have { opacity: .55; }
.jmf-est td { font-style: italic; } .jmf-estpill { margin-left: 6px; font-size: 11px; font-style: normal; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, #d97706 16%, transparent); color: color-mix(in srgb, #d97706 75%, var(--text)); }

/* Život */
.life-top .pos strong, .life-kv .pos, strong.pos { color: #16a34a; } .life-top .neg strong, strong.neg { color: #dc2626; }
a.life-card { color: inherit; text-decoration: none; }
.life-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.life-sec { margin: 0; } .life-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .life-h h3 { margin: 0; }
.life-bar { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; color: inherit; text-decoration: none; }
.life-bar-t { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.life-bar-t span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f43f5e, #e11d48); }
.life-total { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-line); flex-wrap: wrap; }
.life-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.life-trend { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 140px; }
.life-tm { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; cursor: pointer; } .life-tm .hint { font-size: 10.5px; }
.life-tm.on .hint { font-weight: 700; color: var(--text); }
.life-tb { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.life-tb span { width: 40%; border-radius: 3px 3px 0 0; min-height: 1px; }
.life-tb .in, .life-legend .in { background: #16a34a; } .life-tb .out, .life-legend .out { background: #e11d48; }
.life-legend { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .life-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.life-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; }
.life-cat > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life-dl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--glass-line); color: inherit; text-decoration: none; }
.life-dl:last-child { border-bottom: 0; } .life-dl-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .life-bar { grid-template-columns: minmax(0, 1fr) auto; } .life-bar-t { grid-column: 1 / -1; grid-row: 2; } .life-dl { grid-template-columns: 22px minmax(0, 1fr) auto; } .life-dl > .hint { display: none; } }

/* JM → Nástroje: big, clearly clickable tool cards (each its own colour) instead of small pills */
.jmo-bar { gap: 12px; margin: 14px 0 16px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--accent, #3b82f6) 6%, var(--glass)); border: 1px solid var(--glass-line); }
.jmo-bar > .hint { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 -2px 2px; }
.jmo-bar .btn.small { --t: #3b82f6; flex: 1 1 200px; min-height: 58px; justify-content: flex-start; gap: 12px; padding: 10px 16px; font-size: 15.5px; font-weight: 650;
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--t) 35%, var(--glass-line)); background: var(--glass-strong);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--t) 14%, transparent); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.jmo-bar .btn.small:hover { transform: translateY(-2px); border-color: var(--t); box-shadow: 0 6px 18px color-mix(in srgb, var(--t) 28%, transparent); }
.jmo-bar .btn.small:active { transform: translateY(0); }
.jmo-bar .btn.small .ico { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 20px; color: #fff !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--t) 75%, #fff), var(--t)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.jmo-bar .btn.small:nth-of-type(1) { --t: #16a34a; } .jmo-bar .btn.small:nth-of-type(2) { --t: #2563eb; }
.jmo-bar .btn.small:nth-of-type(3) { --t: #7c3aed; } .jmo-bar .btn.small:nth-of-type(4) { --t: #059669; }
@media (max-width: 600px) { .jmo-bar .btn.small { flex-basis: 100%; min-height: 52px; } }
.jmo-bar .btn.small:nth-of-type(5) { --t: #0d9488; }

/* home: apps and modules in named groups side by side */
.app-groups { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.app-group { flex: 1 1 190px; }
.app-group { padding: 10px 12px 12px; border-radius: 18px; border: 1px solid var(--glass-line); background: color-mix(in srgb, var(--glass) 70%, transparent); min-width: 0; }
.app-group h4 { margin: 0 0 8px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.app-group .app-chips { gap: 6px; }
.app-group .app-chip { padding: 4px 10px 4px 5px; font-size: 14px; }
.app-group-apps { flex: 2.2 1 380px; }
@media (max-width: 700px) { .app-group, .app-group-apps { flex-basis: 100%; } }
.app-group .app-chips:empty::after { content: attr(data-empty); color: var(--muted); font-size: 13px; padding: 6px 4px; }
.app-groups.dragging-on .app-group { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } /* no size change while dragging */
.app-group-other { flex: 0.6 1 160px; }
.app-chip[role=button] { cursor: grab; -webkit-user-drag: element; }
.app-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-group .app-chips { min-height: 34px; }

/* Hesla (soupis) */
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--glass-shadow); cursor: pointer; }
.key-row:hover { background: var(--glass-strong); }
.key-row.crit { border-color: color-mix(in srgb, #dc2626 35%, var(--glass-line)); } .key-crit { color: #dc2626; }
.key-row.missing .key-where { outline: 1px dashed #d97706; outline-offset: 3px; border-radius: 999px; }
.key-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .key-main .hint { overflow-wrap: anywhere; }
.key-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.key-where { display: inline-flex; gap: 6px; } .key-where.none { font-size: 12px; color: var(--muted); }
.key-pill { border: 1px solid var(--glass-line); background: transparent; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.key-pill.on { background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .4); color: #16a34a; font-weight: 600; }
.key-dup { margin-top: 4px; font-size: 12.5px; color: #dc2626; } .key-dup.soft { color: #d97706; }
@media (max-width: 700px) { .key-row { grid-template-columns: 1fr; } .key-side { align-items: flex-start; text-align: left; } }
.inf-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .inf-gh h3 { margin: 0 0 6px; }
.inf-paid { font-size: 13px; } .inf-paid summary { cursor: pointer; list-style: none; } .inf-paid summary::-webkit-details-marker { display: none; }
.inf-paid-list { display: grid; gap: 3px; margin: 6px 0; padding: 8px 10px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); }
.inf-paid-list > div { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; } .inf-paid-list span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inf-paid-set { font-size: 13px; }