*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* PRINTERCELL editorial palette, shared with web/promo/styles.css. */
  color-scheme: light;
  --bg:       #f5f4ee;
  --surface:  #fffef8;
  --surface2: #e8eff1;
  --border:   #a6afb1;
  --accent:   #202c35;
  --accent2:  #963b50;
  --text:     #202c35;
  --muted:    #566571;
  --success:  #21654b;
  --warning:  #795309;
  --error:    #a32d40;
  --gold:     #795309;
  --blue:     #cce1ef;
  --blue-strong: #a4cce7;
  --pink:     #f1c5cb;
  --yellow:   #f1db8a;
  --line:     #263640;
  --radius:   2px;
  --font:     Arial, Helvetica, sans-serif;
  --mono:     'Cascadia Code', 'Consolas', monospace;
  --footer-log-height: 180px;
  --footer-reserved-space: calc(var(--footer-log-height) + 48px);
}

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; min-height: 100vh; }

/* Header */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 52px;
}
header h1 { flex: 0 0 auto; font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: 2px; }
.auth-info { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--muted); font-size: 12px; }
.btn-compact { padding: 5px 10px; font-size: 12px; }

@media (max-width: 1250px) {
  header { height: auto; min-height: 52px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .tabs { order: 3; width: 100%; flex-wrap: wrap; }
}

/* Tabs */
.tabs { display: flex; min-width: 0; gap: 4px; }
.tab {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 6px 16px; border-radius: var(--radius); font-size: 13px; font-family: var(--font);
  transition: background .15s, color .15s;
}
.tab:hover { background: var(--surface2); color: var(--text); }
.tab.active { background: var(--accent); color: #fff; }

/* Main layout */
main { width: 100%; max-width: 1440px; margin: 0 auto; padding: 20px 24px var(--footer-reserved-space); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Two-column layout for tables tab */
.tables-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
}
.tables-left, .tables-right { min-width: 0; }
.tables-left .card { min-width: 0; }

@media (max-width: 1200px) {
  .tables-layout { grid-template-columns: minmax(0, 1fr); }
  .tables-right { width: 100%; }
}

/* Card */
.card {
  background: var(--surface); border: 1px solid var(--border);
  width: 100%; min-width: 0; max-width: 100%;
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.card h2, .card-header h2 {
  font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 0;
  text-transform: uppercase; letter-spacing: .8px;
}

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Buttons */
.btn {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  padding: 7px 14px; font-size: 13px; font-family: var(--font); cursor: pointer;
  transition: opacity .15s;
}
.btn:hover:not(:disabled) { opacity: .85; }
.btn:disabled, .btn-disabled {
  background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
  cursor: not-allowed; border-radius: var(--radius); padding: 7px 14px;
  font-size: 13px; font-family: var(--font);
}
.btn-sm {
  background: var(--accent); color: #fff; border: none; border-radius: 5px;
  padding: 3px 9px; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.btn-sm:hover:not(:disabled) { opacity: .85; }
.btn-sm:disabled { background: var(--surface2); color: var(--muted); cursor: not-allowed; }
.btn-sm.btn-warn  { background: rgba(247,183,49,.2); color: var(--warning); border: 1px solid rgba(247,183,49,.3); }
.btn-sm.btn-gold  { background: rgba(255,209,102,.18); color: var(--gold); border: 1px solid rgba(255,209,102,.3); }
.btn-sm.btn-take  { background: rgba(78,204,163,.18); color: var(--success); border: 1px solid rgba(78,204,163,.3); }
.btn-sm.btn-warn:hover  { background: rgba(247,183,49,.35); }
.btn-sm.btn-gold:hover  { background: rgba(255,209,102,.3); }
.btn-sm.btn-take:hover  { background: rgba(78,204,163,.3); }
.btn-danger { background: var(--accent2); }
.btn-outline { background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 7px 14px; font-size: 13px; cursor: pointer; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Table */
table { width: 100%; max-width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }
.filename { width: 38%; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; word-break: break-word; }
.empty { color: var(--muted); text-align: center; padding: 24px; }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; }

/* Log area */
.log-area {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 12px; height: 180px; overflow-y: auto; padding: 10px 12px;
}
.log-line { padding: 2px 0; line-height: 1.5; }
.log-info   { color: var(--text); }
.log-success{ color: var(--success); }
.log-error  { color: var(--error); }
.log-warn   { color: var(--warning); }
.log-raw    { color: var(--muted); }

/* Server log viewer */
.logs-card { min-width: 0; }
.logs-meta { color: var(--muted); font-size: 12px; }
.logs-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 14px; }
.logs-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.logs-toolbar .form-input { min-width: 130px; padding: 7px 9px; text-transform: none; }
.logs-toolbar .logs-search { flex: 1; min-width: 220px; }
.logs-toolbar .logs-auto { display: flex; grid-auto-flow: column; align-items: center; padding: 8px 4px; white-space: nowrap; }
.logs-viewer {
  height: min(65vh, 720px); min-height: 360px; overflow-x: hidden; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4;
}
.server-log-line { color: var(--text); border-bottom: 1px solid rgba(46,50,73,.35); }
.server-log-line.is-warning { color: var(--warning); }
.server-log-line.is-error { color: var(--error); }
.server-log-line.is-debug { color: var(--muted); }
.server-log-line.is-continuation { padding-left: 18px; border-bottom: 0; opacity: .9; }

/* Badge */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-warning { background: rgba(247,183,49,.15); color: var(--warning); }
.badge-success { background: rgba(78,204,163,.15); color: var(--success); }
.badge-offline { background: rgba(123,130,168,.12); color: var(--muted); }
.badge-online  { background: rgba(78,204,163,.15); color: var(--success); }

/* Status row */
.status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

/* Bots grid */
.bots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bot-card .status-indicator { font-size: 13px; margin: 10px 0 16px; }
.bot-actions { display: flex; gap: 8px; }
.bot-users-table { overflow-x: auto; }
.bot-users-table table { min-width: 1050px; }
.broadcast-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 16px; }
.broadcast-message textarea { width: 100%; min-height: 132px; resize: vertical; }
.broadcast-attachments { display: grid; gap: 12px; align-content: start; }
.broadcast-grid > label > span, .broadcast-attachments label > span {
  display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px;
}
.broadcast-attachments small { color: var(--muted); font-size: 11px; }
.broadcast-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.broadcast-footer .meta-line { margin: 0; }
@media (max-width: 800px) {
  .broadcast-grid { grid-template-columns: 1fr; }
}

/* Modal */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 60px; z-index: 100;
}
#modal-overlay.hidden { display: none; }
#modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  width: 90%; max-width: 820px; max-height: 80vh; display: flex; flex-direction: column;
}
#modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
#modal-title { font-size: 15px; font-weight: 600; }
.modal-header-actions { display: flex; align-items: center; gap: 10px; }
#modal-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; }
#modal-close:hover { color: var(--text); }
#modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-table { width: 100%; border-collapse: collapse; }
.modal-table th { font-size: 12px; color: var(--muted); text-transform: uppercase; padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.modal-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.modal-table tr:last-child td { border-bottom: none; }
.diff-output { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--text); }
.no-changes { color: var(--success); font-size: 14px; padding: 12px 0; }
.meta-line { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.summary-document h2 { margin: 28px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.summary-document h2:first-child { margin-top: 0; }
.summary-document h3 { margin: 0 0 8px; }
.summary-document a { color: var(--accent2); overflow-wrap: anywhere; }
.summary-count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.summary-count-card, .summary-status-section { margin-bottom: 12px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.summary-count-card p, .summary-count-card ol { margin-bottom: 0; }
.summary-event { margin-bottom: 16px; }
.summary-event div { margin-top: 3px; color: var(--muted); }
.summary-empty { color: var(--muted); }

/* Spinner */
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--muted); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Disk tree ──────────────────────────────────────────────── */
.disk-status-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.disk-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); margin-right: 6px; vertical-align: middle;
  transition: background .3s;
}
.disk-status-dot.ok   { background: var(--success); }
.disk-status-dot.fail { background: var(--error); }

/* Breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
  gap: 4px; font-size: 12px; font-family: var(--mono);
  color: var(--muted); margin-bottom: 10px; min-height: 20px;
}
.breadcrumb-part {
  cursor: pointer; color: var(--accent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 4px; border-radius: 3px;
  transition: background .1s;
}
.breadcrumb-part:hover { background: var(--surface2); }
.breadcrumb-sep { color: var(--border); user-select: none; }

/* Tree */
.disk-tree {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: hidden; overflow-y: auto; max-height: 340px; padding: 4px 0;
}
.tree-loading { color: var(--muted); font-size: 12px; padding: 14px 16px; }
.tree-empty   { color: var(--muted); font-size: 12px; padding: 14px 16px; }
.tree-error   { color: var(--error);  font-size: 12px; padding: 14px 16px; }

.tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; cursor: default;
  transition: background .1s; font-size: 13px;
  border-bottom: 1px solid transparent;
}
.tree-item:hover { background: var(--surface2); }

/* Latest registry accent */
.tree-item.latest-registry {
  background: rgba(255, 209, 102, 0.07);
  border-left: 3px solid var(--gold) !important;
}
.tree-item.latest-registry .tree-name {
  color: var(--gold); font-weight: 600;
}
.tree-item.latest-registry .tree-badge {
  background: rgba(255,209,102,.2); color: var(--gold);
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
}

.tree-icon { flex-shrink: 0; font-size: 14px; user-select: none; }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-folder .tree-name { color: var(--text); cursor: pointer; }
.tree-folder .tree-name:hover { color: var(--accent); text-decoration: underline; }
.tree-meta  { color: var(--muted); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.tree-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 1; transition: opacity .15s; }
.tree-item:hover .tree-actions { opacity: 1; }
.tree-badge { display: none; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.form-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: 7px 10px;
  font-size: 13px; font-family: var(--font);
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-modal-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}
.tpl-type-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.tpl-type-docx { background: rgba(91,106,240,.18); color: var(--accent); }
.tpl-type-table { background: rgba(78,204,163,.15); color: var(--success); }

/* ── Form Modal overlay ──────────────────────────────────────────────── */
#fmodal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 60px; z-index: 100;
}
#fmodal-overlay.hidden { display: none; }
#fmodal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); width: 90%; max-width: 600px;
  max-height: 85vh; display: flex; flex-direction: column;
}
#fmodal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
#fmodal-title { font-size: 15px; font-weight: 600; }
#fmodal-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; }
#fmodal-close:hover { color: var(--text); }
#fmodal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

/* ── Bot cards ───────────────────────────────────────────────────────── */
.bot-card .card-header { margin-bottom: 10px; }
.bot-pid { color: var(--muted); font-size: 12px; margin-bottom: 14px; min-height: 18px; }
.users-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.user-chip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 10px; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}

/* Кнопка копирования пути */
.btn-copy-path {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: var(--text);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-copy-path:hover {
  background: var(--blue-strong);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-copy-path:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-copy-path.copied {
  background: #dcebe1;
  color: var(--success);
}

.btn-copy-path .copy-text {
  font-weight: 500;
}

/* Иконка папки */
.btn-copy-path::before {
  font-size: 1.1em;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 768px) {
  .btn-copy-path .copy-text {
    display: none;
  }
  .btn-copy-path {
    padding: 6px 8px;
  }
}

/* Footer with collapsible log */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /*background: var(--surface);*/
  border-top: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  z-index: 50;
    /* Размытие фона под элементом */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Для Safari */
}

.log-toggle {
  flex-shrink: 0;
}
/*TODO: не работает хидден!*/
.log-container-class {
  flex: 1;
  height: var(--footer-log-height);
  max-height: var(--footer-log-height);
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.log-container-class.hidden {
  height: 0;
  max-height: 0;
  opacity: 0;
}

#log.log-area {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  font-size: 11px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  :root {
    --footer-log-height: 120px;
    --footer-reserved-space: calc(var(--footer-log-height) + 40px);
  }

  header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 12px;
    overflow: hidden;
  }

  header h1 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-info {
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    white-space: normal;
  }

  #auth-user {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabs {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .tab {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  main { padding: 12px 12px var(--footer-reserved-space); }

  .card { padding: 14px 12px; margin-bottom: 12px; }
  .card-header { flex-wrap: wrap; gap: 10px; }
  .status-row { flex-wrap: wrap; }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .toolbar > .btn,
  .toolbar > .btn-outline,
  .toolbar > .btn-disabled { width: 100%; }

  #db-status-indicator { margin-left: 0 !important; padding: 4px 2px; }

  .btn,
  .btn-outline,
  .btn-disabled {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .btn-sm,
  .btn-compact,
  #modal-close,
  #fmodal-close {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .btn-copy-path { min-height: 44px; padding: 10px 12px; }
  .form-input { min-height: 44px; font-size: 16px; }

  .bot-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .bot-actions > button { width: 100%; }

  .user-add-row {
    flex-direction: column;
    align-items: stretch !important;
  }
  .user-add-row > * { width: 100%; }

  .form-row,
  .form-row-3 { grid-template-columns: minmax(0, 1fr); }

  .logs-toolbar { align-items: stretch; }
  .logs-toolbar label,
  .logs-toolbar .logs-search,
  .logs-toolbar .form-input,
  .logs-toolbar > .btn { width: 100%; min-width: 0; }
  .logs-toolbar .logs-auto { min-height: 44px; }

  .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll table { min-width: 680px; }

  #summary-content,
  #summary-content-json,
  #modal-body { overflow-x: auto; }

  .logs-viewer {
    min-height: 320px;
    overflow: auto;
    white-space: pre;
    overflow-wrap: normal;
  }

  #modal-overlay,
  #fmodal-overlay { padding: 12px; align-items: center; }
  #modal,
  #fmodal { width: 100%; max-height: calc(100vh - 24px); }

  .tree-item { padding: 9px 8px; }
  .tree-actions { gap: 6px; }

  footer {
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    gap: 8px;
  }
  
  .log-container-class {
    min-width: 0;
    height: var(--footer-log-height);
    max-height: var(--footer-log-height);
  }

  #log.log-area {
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  .auth-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #auth-user { grid-column: 1 / -1; }
  .auth-info .btn { width: 100%; }
  .tabs { grid-template-columns: minmax(0, 1fr); }
}

/* Editorial workspace: preserve all existing layout and interaction hooks. */
body { line-height: 1.45; }
button, input, select, textarea { font-family: var(--font); }
button { touch-action: manipulation; }
::selection { background: var(--blue); color: var(--text); }
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #236396;
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
body > header {
  height: auto;
  min-height: 108px;
  padding: 18px max(24px, calc((100vw - 1392px) / 2)) 0;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 16px;
  background: var(--bg);
  border-bottom-color: var(--line);
}
.app-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 23px; font-weight: 800; letter-spacing: -.8px; color: var(--text); }
.brand-mark {
  flex: 0 0 auto; width: 19px; height: 23px; border: 2px solid var(--text);
  box-shadow: 4px 4px 0 var(--blue-strong);
  background: linear-gradient(transparent 45%, var(--text) 45% 54%, transparent 54%);
}
header h1 { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.tabs { order: 3; flex-basis: 100%; width: 100%; flex-wrap: wrap; gap: 5px; padding-bottom: 10px; }
.tab { border: 1px solid transparent; padding: 9px 14px; min-height: 38px; }
.tab:hover { background: var(--surface); border-color: var(--border); }
.tab.active { background: var(--blue); color: var(--text); border-color: var(--line); font-weight: 700; }
main { padding-top: 26px; }
.card { border-color: var(--line); box-shadow: 3px 3px 0 var(--blue); padding: 22px; margin-bottom: 22px; }
.card h2, .card-header h2 { font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: -.2px; color: var(--text); }
.card > h2 { margin-bottom: 18px; }
.card-header { gap: 12px; }
.toolbar { gap: 10px; margin-bottom: 20px; align-items: center; }
.btn, .btn-sm, .btn-outline, .btn-copy-path {
  border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600;
  transition: background .15s, box-shadow .15s;
}
.btn { padding: 9px 14px; min-height: 38px; }
.btn-sm { padding: 5px 9px; min-height: 30px; font-family: var(--font); }
.btn-compact { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.btn:hover:not(:disabled), .btn-sm:hover:not(:disabled) { opacity: 1; box-shadow: 2px 2px 0 var(--blue-strong); }
.btn-outline { background: var(--surface); color: var(--text); }
.btn-outline:hover:not(:disabled) { background: var(--blue); color: var(--text); border-color: var(--line); }
.btn-danger { background: var(--pink); color: #642338; }
.btn-danger:hover:not(:disabled) { background: #e9b3bf; }
.btn-sm.btn-warn, .btn-sm.btn-gold { background: #f8ecc5; color: var(--warning); border-color: #9d792d; }
.btn-sm.btn-take { background: #dcebe1; color: var(--success); border-color: #608c73; }
.btn-sm.btn-warn:hover:not(:disabled), .btn-sm.btn-gold:hover:not(:disabled) { background: var(--yellow); }
.btn-sm.btn-take:hover:not(:disabled) { background: #c8e1d2; }
.btn:disabled, .btn-sm:disabled, .btn-disabled { background: #e7e7e1; color: var(--muted); border-color: var(--border); box-shadow: none; }
.btn-copy-path:hover { transform: none; box-shadow: 2px 2px 0 var(--blue-strong); }
th, .modal-table th { background: var(--blue); color: var(--text); font-weight: 700; text-transform: none; letter-spacing: 0; }
th { padding-block: 11px; }
td { border-bottom-color: #d6d9d3; }
tr:hover td { background: #edf3f5; }
.empty { padding: 30px 18px; }
.badge, .tpl-type-badge { border-radius: 3px; }
.badge-warning { background: #f8ecc5; }
.badge-success, .badge-online { background: #dcebe1; }
.badge-offline { background: #e7e7e1; }
.tpl-type-docx { background: var(--blue); }
.form-input { background: var(--surface); border-color: #859397; min-height: 36px; }
.form-input::placeholder { color: var(--muted); opacity: 1; }
.form-input:focus-visible { outline: 3px solid #236396; outline-offset: 2px; }
.tree-item.latest-registry { background: #fbf2d8; }
.log-area, .logs-viewer, .disk-tree { background: var(--bg); }
.server-log-line { border-bottom-color: #dde0d9; }
#modal-overlay, #fmodal-overlay { background: rgba(32,44,53,.38); }
#modal, #fmodal { border-color: var(--line); box-shadow: 6px 6px 0 var(--blue-strong); }
#modal-header, #fmodal-header { background: var(--blue); }
#modal-title, #fmodal-title { font-size: 18px; }
#modal-close, #fmodal-close { min-width: 36px; min-height: 36px; color: var(--text); }
footer { background: var(--bg); border-top-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
#log.log-area { border-radius: var(--radius); }

/* Login uses the same tokens, typography and controls as the workspace. */
.login-page { display: grid; place-items: center; padding: 28px 16px; }
.login-panel { width: min(440px, 100%); margin: 0; padding: 36px; background: var(--surface); border: 1px solid var(--line); box-shadow: 6px 6px 0 var(--blue); }
.login-panel h1 { margin: 34px 0 6px; font-size: 28px; letter-spacing: -.5px; }
.login-project { color: var(--muted); font-size: 13px; margin-top: 16px; overflow-wrap: anywhere; }
.login-intro { color: var(--muted); margin-bottom: 26px; }
.login-panel label { display: block; margin: 16px 0 7px; }
.login-panel input { min-height: 46px; font-size: 16px; }
.login-panel .btn { width: 100%; min-height: 46px; margin-top: 24px; }
.login-panel #error { min-height: 20px; margin-top: 14px; color: var(--error); }
@media (max-width: 768px) {
  body > header { padding: 18px 16px 0; gap: 14px; }
  .brand { font-size: 21px; }
  main { padding-top: 18px; }
  .card { padding: 18px 14px; }
  .tab { min-height: 46px; }
  .btn, .btn-sm, .btn-outline, .btn-copy-path { min-height: 44px; }
  .form-input { min-height: 44px; }
  .toolbar { align-items: stretch; }
  .broadcast-footer { flex-wrap: wrap; }
  .login-panel { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* Schedule: bounded scrolling, 15-minute rows, PRINTERCELL track cards. */
.schedule-toolbar { flex-wrap: wrap; }
.schedule-toolbar label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.schedule-toolbar select { max-width: 230px; padding: 8px; }
.schedule-help { margin: 12px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
#schedule-status { min-height: 24px; font-size: 13px; }
#schedule-warning, #schedule-editor-error, .schedule-error { color: var(--error); line-height: 1.5; }
.schedule-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0; }
.schedule-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.schedule-legend span::before { content: ''; width: 12px; height: 12px; background: var(--track-color); border: 1px solid var(--border); flex: 0 0 auto; }
.schedule-scroll { overflow: auto; max-height: 68vh; width: 100%; border: 1px solid var(--line); background: var(--surface); position: relative; overscroll-behavior: contain; }
.schedule-grid { display: grid; position: relative; width: max-content; align-items: start; isolation: isolate; }
.schedule-expanded-open { overflow: hidden; }
#tab-schedule.schedule-expanded { position: fixed; inset: 0; z-index: 100; height: 100vh; height: 100dvh; padding: 16px; background: var(--bg); display: flex; flex-direction: column; overflow: auto; }
.schedule-expanded .schedule-toolbar { flex: 0 0 auto; margin-bottom: 8px; }
.schedule-expanded #schedule-status, .schedule-expanded #schedule-warning { flex: 0 0 auto; }
.schedule-expanded .schedule-help, .schedule-expanded .schedule-legend, .schedule-expanded .schedule-changes, .schedule-expanded #schedule-unplaced { display: none; }
.schedule-expanded .schedule-scroll { flex: 1 1 0; min-height: 120px; max-height: none; margin-top: 8px; }
@media (max-width: 600px) {
  #tab-schedule.schedule-expanded { padding: 8px; }
  .schedule-expanded .schedule-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .schedule-expanded .schedule-toolbar label { flex-wrap: wrap; min-width: 0; }
  .schedule-expanded .schedule-toolbar select { min-width: 0; max-width: 100%; }
  .schedule-expanded .schedule-toolbar .btn { padding: 6px; font-size: 11px; white-space: normal; }
}
.schedule-hall { position: sticky; top: 0; z-index: 5; min-height: 48px; height: 100%; padding: 12px 10px; background: var(--blue); border-bottom: 1px solid var(--line); border-right: 1px solid var(--border); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.schedule-corner { left: 0; z-index: 7; }
.schedule-axis { position: sticky; left: 0; z-index: 4; background: var(--surface); }
.schedule-time { height: 32px; padding: 3px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.schedule-lane { position: relative; border-right: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #dce0df 31px, #dce0df 32px); }
.schedule-event { position: absolute; z-index: 1; border: 1px solid #697780; padding: 11px 8px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; color: #202c35; font-size: 12px; line-height: 1.3; cursor: grab; user-select: none; touch-action: none; border-radius: 2px; box-sizing: border-box; }
.schedule-event strong { font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.schedule-event-name { overflow: hidden; overflow-wrap: anywhere; }
.schedule-short { padding: 2px 7px; gap: 0; line-height: 1.1; }
.schedule-short strong { font-size: 10px; }
.schedule-short .schedule-event-name { font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.schedule-short .schedule-handle { height: 5px; }
.schedule-event:focus-visible { outline: 3px solid var(--accent2); outline-offset: 1px; z-index: 3; }
.schedule-edited { border-left: 4px solid var(--accent2); }
.schedule-overlap { border-top: 2px dashed var(--error); }
.schedule-handle { position: absolute; height: 9px; left: 0; right: 0; cursor: ns-resize; z-index: 2; }
.schedule-handle::after { content: ''; position: absolute; width: 24px; height: 2px; background: #202c3570; left: calc(50% - 12px); top: 3px; }
.schedule-handle[data-edge="start"] { top: 0; }
.schedule-handle[data-edge="end"] { bottom: 0; }
.schedule-dragging { opacity: .35; pointer-events: none; }
.schedule-drop { position: absolute; z-index: 3; left: 2px; right: 2px; padding: 8px; border: 2px dashed var(--accent2); background: #ffffff90; pointer-events: none; font-size: 12px; box-sizing: border-box; }
.schedule-busy .schedule-event { cursor: wait; }
.schedule-changes { margin: 24px 0; padding: 18px; background: var(--surface); border: 1px solid var(--border); }
.schedule-changes summary { cursor: pointer; font-weight: bold; }
.schedule-changes p { font-size: 13px; color: var(--muted); margin: 12px 0; }
.schedule-changes-scroll { overflow-x: auto; }
.schedule-changes td { white-space: normal; min-width: 160px; max-width: 480px; }
.schedule-unplaced { margin: 6px; white-space: normal; text-align: left; }
#schedule-editor { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - 32px)); max-height: 85vh; overflow: auto; padding: 24px; color: var(--text); background: var(--surface); border: 1px solid var(--line); }
#schedule-editor::backdrop { background: #202c3570; }
#schedule-editor label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
#schedule-editor input, #schedule-editor select { padding: 8px; max-width: 75%; }
#schedule-editor p { font-size: 13px; margin: 12px 0; }
#schedule-editor .toolbar { flex-wrap: wrap; }
/* Forum workspace: isolated projects and independent event/person cards. */
.forum-selector { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.forum-selector select { max-width: min(320px, 65vw); padding: 7px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.forum-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.forum-nav [aria-pressed="true"] { background: var(--blue); border-color: var(--line); }
#forum-message { margin: 12px 0; line-height: 1.5; }
.forum-error { color: var(--error); }
.forum-layout { display: grid; grid-template-columns: minmax(210px, 28%) minmax(0, 1fr); gap: 20px; align-items: start; }
.forum-list { display: flex; flex-direction: column; gap: 10px; }
.forum-list > div { max-height: 65vh; overflow: auto; }
.forum-list-item { display: block; width: 100%; padding: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; color: var(--text); cursor: pointer; overflow-wrap: anywhere; margin: 0 0 6px; }
.forum-list-item:hover { background: var(--blue); }
.forum-card { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 3px 3px 0 var(--blue); }
.forum-card h2, .forum-card h3 { margin: 0 0 14px; }
.forum-card p { margin: 10px 0; }
.forum-field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; font-size: 13px; }
.forum-field input, .forum-field select, .forum-field textarea, .forum-list input { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
.forum-field textarea { min-height: 95px; resize: vertical; }
.forum-preview { padding: 12px; border-left: 3px solid var(--accent2); background: var(--blue); }
.forum-note { color: var(--muted); font-size: 12px; }
.forum-artifact { display: block; margin: 10px 0; }
.forum-photo { max-width: 180px; max-height: 240px; object-fit: contain; display: block; margin: 12px 0; }
.forum-photo[hidden] { display: none; }
.forum-member-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; margin: 6px 0; border: 1px solid var(--border); background: var(--bg); }
.forum-member-row > span { flex: 1 1 160px; }
.forum-member-row input { width: 130px; padding: 8px; }
.forum-member-row .btn { padding: 6px 9px; font-size: 12px; }
.forum-card details { margin: 16px 0; overflow: auto; }
.forum-card pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.forum-card .toolbar { flex-wrap: wrap; margin-top: 16px; }
.forum-directory-row { border-bottom: 1px solid var(--border); padding: 12px 0; }
.forum-diff { table-layout: fixed; width: 100%; margin: 14px 0; }
.forum-diff td, .forum-diff th { white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: top; }
.forum-diff select { max-width: 100%; }
.forum-conflict { background: var(--pink); }
.forum-import-preview { overflow-x: auto; margin-top: 20px; }
.forum-import-preview table { min-width: 620px; }
@media (max-width: 760px) { .forum-layout { grid-template-columns: minmax(0, 1fr); } .forum-list > div { max-height: 240px; } .forum-card { padding: 12px; } .forum-selector { width: 100%; } }