* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, sans-serif; color: #1f2937; }

.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: #111827; color: #fff;
}
.brand { font-weight: 700; letter-spacing: .5px; }
.brand .version { font-weight: 400; font-size: 12px; opacity: .7; margin-left: 2px; }
.tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tools button {
  background: #1f2937; color: #e5e7eb; border: 1px solid #374151;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.tools button:hover { background: #374151; }
.tools button.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.tools .sep, .layers .sep { width: 1px; height: 22px; background: #374151; margin: 0 4px; }

.layers {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  font-size: 13px;
}
.layers .layer-label { color: #9ca3af; }
.layer-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid #374151; border-radius: 6px;
  cursor: pointer; background: #1f2937; color: #e5e7eb;
}
.layer-tab input { display: none; }
.layer-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.layer-tab[data-layer="piles"].active { background: #475569; border-color: #475569; }
.layer-tab[data-layer="strapping"].active { background: #b45309; border-color: #b45309; }
.layer-tab[data-layer="floor"].active { background: #16a34a; border-color: #16a34a; }
.layer-tab[data-layer="ceiling"].active { background: #7c3aed; border-color: #7c3aed; }
.vis-toggle { display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; cursor: pointer; }
.vis-toggle input { accent-color: #2563eb; }
.layers button#btn-fill {
  background: #16a34a; color: #fff; border: 1px solid #16a34a;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.layers button#btn-fill:hover { background: #15803d; }
.layers button#btn-fill[hidden] { display: none; }
/* Undo of the last deletion; shown only while something can be restored */
.layers button#btn-undo-delete {
  background: #b45309; color: #fff; border: 1px solid #b45309;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.layers button#btn-undo-delete:hover { background: #92400e; }
.layers button#btn-undo-delete[hidden] { display: none; }

.layout {
  display: grid; grid-template-columns: 240px 1fr;
  height: calc(100% - 92px);
}
aside.props {
  padding: 12px; overflow: auto; background: #f9fafb; border-right: 1px solid #e5e7eb;
}
aside h3 { margin: 12px 0 8px; font-size: 13px; text-transform: uppercase; color: #6b7280; }
aside h3:first-child { margin-top: 0; }
#global-panel h3 { margin-top: 12px; }
/* Глобальный блок «Панель» временно скрыт визуально (непонятно, на что влияет).
   Скрываем одним правилом, чтобы вернуть — достаточно удалить строку ниже;
   логика main.js и значения селектов при этом сохраняются. */
#global-panel { display: none !important; }
/* Поля «Длина / Толщина / Высота» в свойствах тоже временно скрыты визуально.
   Скрываем одним правилом (вернуть — удалить его); значения и логика main.js
   сохраняются. */
#props-form > label:has(#p-length),
#props-form > label:has(#p-thickness),
#props-form > label:has(#p-height) { display: none !important; }

aside label { display: block; margin: 6px 0; }
aside input, aside select {
  width: 100%; padding: 6px 8px; border: 1px solid #d1d5db;
  border-radius: 6px; font-size: 13px;
}
aside .subhead {
  margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid #e5e7eb;
  font-size: 12px; font-weight: 600; color: #374151;
}

.canvas-wrap { position: relative; background: #e5e7eb; overflow: hidden; }
/* Native scrollbars: content defines the scrollable area, stage stays pinned
   to the viewport (sticky) and is offset via stage.position on scroll. */
.canvas-scroll { position: relative; width: 100%; height: 100%; overflow: auto; }
.canvas-content { position: relative; }
#stage { position: sticky; top: 0; left: 0; overflow: hidden; }
.zoom-level {
  display: inline-block; min-width: 44px; text-align: center;
  color: #9ca3af; font-variant-numeric: tabular-nums; font-size: 13px;
}
.hint {
  position: absolute; left: 12px; bottom: 62px;
  background: rgba(255,255,255,.9); padding: 4px 8px; border-radius: 6px;
  font-size: 12px; color: #374151; pointer-events: none;
}

/* Edge rulers + scale bar overlay (drawn by js/rulers.js over the viewport) */
.ruler-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 25; }
.ruler-overlay[hidden] { display: none; }
.ruler-svg { position: absolute; inset: 0; display: block; }
.ruler-bg { fill: #f3f4f6; }
.ruler-corner { fill: #e5e7eb; }
.ruler-tick { stroke: #9ca3af; stroke-width: 1; }
.ruler-tick.major { stroke: #4b5563; }
.ruler-label { fill: #374151; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ruler-scalebar {
  position: absolute; left: 12px; bottom: 28px;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.14);
  font-size: 12px; color: #374151;
}
.ruler-scalebar-label { font-variant-numeric: tabular-nums; }
.ruler-scalebar-bar {
  height: 8px; position: relative; background: #374151;
}
.ruler-scalebar-bar::before, .ruler-scalebar-bar::after {
  content: ''; position: absolute; top: 0; width: 2px; height: 8px; background: #374151;
}
.ruler-scalebar-bar::before { left: 0; }
.ruler-scalebar-bar::after { right: 0; }

/* Floating view-mode bar, always on top of the drawing area */
.viewbar {
  position: absolute; top: 12px; left: 12px; z-index: 30;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px; border-radius: 8px;
  background: rgba(17,24,39,.85); box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.viewbar button {
  background: #1f2937; color: #e5e7eb; border: 1px solid #374151;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.viewbar button:hover:not(:disabled) { background: #374151; }
.viewbar button.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.viewbar button:disabled { opacity: .45; cursor: not-allowed; }
/* side-direction buttons: highlighted only while the side view is active */
.viewbar button.side-dir.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.viewbar button.side-dir.dim:not(.active) { opacity: .5; }
.viewbar-sep { width: 1px; height: 22px; background: #374151; margin: 0 2px; }
.viewbar select {
  background: #1f2937; color: #e5e7eb; border: 1px solid #374151;
  padding: 6px 8px; border-radius: 6px; font-size: 13px;
}
.viewbar select[hidden] { display: none; }
.viewbar[hidden] { display: none; }

/* 3D view: replaces the 2D drawing area while active */
.view3d[hidden] { display: none; }
.view3d { position: absolute; inset: 0; background: #fff; }
.view3d canvas { display: block; }

/* Floating print button, top-right of the drawing area (2D top/side and 3D) */
.print-btn {
  position: absolute; top: 12px; right: 12px; z-index: 30;
  background: #1f2937; color: #e5e7eb; border: 1px solid #374151;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.print-btn:hover { background: #374151; }

.output .row {
  padding: 8px; border-bottom: 1px solid #e5e7eb; font-size: 12px;
}
.output .row b { color: #2563eb; }
.output .summary { font-weight: 700; padding: 8px; background: #dbeafe; border-radius: 6px; margin: 8px 0; }
.output .cut { display: inline-block; margin: 2px; padding: 2px 6px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; font-size: 11px; }

/* Modal */
.modal-overlay[hidden] { display: none; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: #fff; border-radius: 10px; width: 90%; max-width: 820px;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #e5e7eb;
}
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions button {
  padding: 6px 14px; border: 1px solid #d1d5db; background: #f9fafb;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
.modal-actions button:hover { background: #e5e7eb; }
.modal-actions #btn-print { background: #2563eb; color: #fff; border-color: #2563eb; }
.modal-actions #btn-print:hover { background: #1d4ed8; }
.modal-body { padding: 16px 20px; overflow: auto; }
.modal-body .row { padding: 8px; border-bottom: 1px solid #e5e7eb; font-size: 12px; }
.modal-body .row b { color: #2563eb; }
.modal-body .summary {
  font-weight: 700; padding: 10px; background: #dbeafe;
  border-radius: 6px; margin: 8px 0 12px;
}
.modal-body .cut {
  display: inline-block; margin: 2px; padding: 2px 6px;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; font-size: 11px;
}
#cutting-canvas { max-width: 100%; margin-top: 12px; }

/* Cutting report: sheet maps and waste list */
.cut-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 10px; background: #f3f4f6;
  border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px;
}
.cut-toolbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cut-toolbar[hidden] { display: none; }
.cut-toolbar select {
  padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 13px; background: #fff;
}
.kerf-note {
  padding: 8px 10px; margin-bottom: 10px; background: #fef3c7;
  border: 1px solid #fcd34d; border-radius: 8px; font-size: 12px; color: #78350f;
}
.kerf-inline { color: #92400e; }
.report-h { margin: 18px 0 8px; font-size: 14px; text-transform: none; color: #111827; }
.sheet-grid, .waste-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.sheet-card, .waste-card {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; background: #fff;
}
.sheet-cap { font-size: 11px; color: #374151; margin-bottom: 4px; }
.sheet-size { color: #6b7280; }
.sheet-svg { display: block; }
.waste-card .waste-cap { font-size: 11px; color: #374151; margin-bottom: 4px; }
.waste-card .waste-svg { display: block; }
.waste-card .ok { color: #15803d; font-weight: 600; }
.waste-card .bad { color: #b91c1c; }

/* Report tabs */
.report-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb;
}
.report-tab {
  padding: 6px 12px; border: 1px solid #d1d5db; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: #374151;
}
.report-tab:hover { background: #f3f4f6; }
.report-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.report-print {
  margin-left: auto; padding: 6px 14px; border: 1px solid #2563eb;
  background: #2563eb; color: #fff; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.report-print:hover { background: #1d4ed8; }

/* Plan views (floor / ceiling / walls) */
.plan-title { font-size: 14px; font-weight: 600; margin: 6px 0 10px; }
.plan-svg { display: block; max-width: 100%; height: auto; }
.plan-note { font-size: 12px; color: #6b7280; margin: 10px 0; }
.legend {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 12px; color: #374151; margin: 8px 0;
}
.legend .legend-i { display: inline-flex; align-items: center; gap: 5px; }
.legend .swatch {
  width: 14px; height: 14px; border: 1px solid #2563eb; border-radius: 3px; display: inline-block;
}
.legend .swatch.side { border-style: dashed; border-color: #6d28d9; }
.legend .swatch.strap-ext { border-color: #b45309; background: rgba(180,83,9,0.20); }
.legend .swatch.strap-int { border-color: #6d28d9; background: rgba(109,40,217,0.20); }
/* Обвязка tab: beam cross-section beside the board list */
.strap-compose { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin: 12px 0; }
.strap-compose .strap-col { min-width: 180px; }
.strap-compose .strap-cap { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* Combined total of the estimate */
.est-total-table { margin-top: 14px; }
.est-total-table tfoot td { background: #dbeafe; border-top: 2px solid #2563eb; }
.wall-view { margin: 18px 0; }
.wall-view .wall-cap { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* Estimate table (panel formats, counts, prices) */
.est-table {
  border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; min-width: 520px;
}
.est-table th, .est-table td {
  border: 1px solid #d1d5db; padding: 7px 10px; text-align: left; white-space: nowrap;
}
.est-table th { background: #f3f4f6; color: #111827; font-weight: 600; }
.est-table td:nth-child(3), .est-table td:nth-child(4), .est-table td:nth-child(5),
.est-table th:nth-child(3), .est-table th:nth-child(4), .est-table th:nth-child(5) {
  text-align: right;
}
.est-table tfoot td {
  font-weight: 700; background: #dbeafe; border-top: 2px solid #2563eb;
}
.est-table tfoot .est-total { color: #1d4ed8; }
/* Price cell: the value plus a pencil that opens an inline editor */
.est-table td.est-price { white-space: nowrap; }
.est-table td.est-price .est-price-text { margin-right: 6px; }
.est-table td.est-board-price,
.est-table td.est-screw-price,
.est-table td.est-stud-price,
.est-table td.est-nail-price { white-space: nowrap; }
.est-table td.est-board-price .est-price-text,
.est-table td.est-screw-price .est-price-text,
.est-table td.est-stud-price .est-price-text,
.est-table td.est-nail-price .est-price-text { margin-right: 6px; }
.est-edit {
  border: 0; background: transparent; padding: 0 2px; cursor: pointer;
  color: #6b7280; line-height: 0; vertical-align: -2px;
}
.est-edit:hover { color: #1d4ed8; }
.est-price-input {
  width: 84px; padding: 1px 4px; font: inherit; text-align: right;
  border: 1px solid #2563eb; border-radius: 3px;
}
.est-note { font-size: 12px; color: #6b7280; margin: 6px 0; max-width: 720px; }

/* Context menu (right-click on a wall, window or door) */
.ctx-menu[hidden] { display: none; }
.ctx-menu {
  position: fixed; z-index: 120; min-width: 160px;
  padding: 4px; border-radius: 8px; background: #fff;
  border: 1px solid #d1d5db; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.ctx-menu button {
  display: block; width: 100%; text-align: left;
  padding: 7px 12px; border: 0; border-radius: 6px;
  background: none; color: #1f2937; font-size: 13px; cursor: pointer;
}
.ctx-menu button:hover { background: #f3f4f6; }
.ctx-menu button.danger { color: #b91c1c; }
.ctx-menu button.danger:hover { background: #fee2e2; }
.ctx-menu button:disabled, .ctx-menu button.disabled {
  color: #9ca3af; cursor: default; background: none;
}

/* EULA body */
.modal-body.eula p { margin: 8px 0; }
.modal-body.eula b { color: #111827; }
.modal-body.eula ul { margin: 4px 0 8px 20px; padding: 0; }
.modal-body.eula li { margin: 3px 0; font-size: 12px; }
#about-modal .modal { max-width: 640px; }

/* Landscape by default for the printouts of the constructor (report drawings and
   sheet plans are wide). The user can still switch to portrait in the dialog. */
@media print {
  @page { size: landscape; }
}

/* Print: only the active report tab of the open modal. `body.print-report` is set
   by the report print button (main.js) so the modal is laid out from the top of
   the first page and the editor behind it is removed from the flow entirely —
   otherwise its laid-out height (visibility:hidden keeps the boxes) stretches
   the overlay and leaves blank pages. */
@media print {
  body.print-report * { visibility: hidden; }
  body.print-report .modal-overlay, body.print-report .modal-overlay * { visibility: visible; }
  body.print-report > *:not(.modal-overlay) { display: none !important; }
  /* a [hidden] modal (e.g. the EULA) must never print over the report: the
     display:block below would otherwise beat [hidden]{display:none} */
  body.print-report .modal-overlay[hidden] { display: none !important; }
  body.print-report .modal-overlay { position: static; display: block; background: none; }
  body.print-report .modal { max-height: none; border: none; width: 100%; max-width: none; }
  body.print-report .modal-head, body.print-report .modal-actions,
  body.print-report .report-tabs, body.print-report .cut-toolbar { display: none !important; }
  body.print-report .modal-body { overflow: visible; }
  body.print-report .report-panel[hidden] { display: none !important; }
  /* estimate: print the price value, never the pencil or an open editor */
  body.print-report .est-edit, body.print-report .est-price-input { display: none !important; }
  body.print-report .est-table td.est-price .est-price-text { display: inline !important; }
}

/* Keep every drawing whole: no page break may fall on a drawing, and a caption /
   heading / legend stays with its drawing. Firefox fragments flex containers
   poorly (it cuts the drawings and ignores break-inside), so the report is laid
   out as plain block flow for print. A drawing that does not fit the rest of the
   page moves down intact — minimal empty space, never a cut drawing. */
@media print {
  body.print-report .modal,
  body.print-report .modal-body,
  body.print-report .sheet-grid,
  body.print-report .waste-grid,
  body.print-report .strap-compose { display: block; }
  body.print-report .sheet-card,
  body.print-report .waste-card {
    display: inline-block; vertical-align: top; margin: 0 10px 10px 0;
  }
  body.print-report .sheet-card,
  body.print-report .waste-card,
  body.print-report .wall-view,
  body.print-report .plan-svg,
  body.print-report .legend,
  body.print-report .est-table tr {
    break-inside: avoid; page-break-inside: avoid;
  }
  body.print-report .report-h,
  body.print-report .plan-title {
    break-after: avoid; page-break-after: avoid;
  }
}

/* Print of the main drawing area (2D): main.js snapshots the whole fitted drawing
   onto a canvas and prints that image. It is centred and scaled to fit the page,
   so the drawing is always fully visible. */
@media print {
  body.print-snapshot-mode { margin: 0; }
  body.print-snapshot-mode > *:not(.print-snapshot) { display: none !important; }
  /* one page only: the block is clipped to the page box, so nothing overflows
     onto extra (blank) pages. Flex is avoided on purpose — as a flex item the
     canvas keeps its intrinsic width (min-width:auto) and would not shrink. */
  body.print-snapshot-mode .print-snapshot {
    position: absolute; inset: 0; background: #fff; overflow: hidden;
  }
  body.print-snapshot-mode .print-snapshot canvas {
    position: absolute; inset: 0; margin: auto;
    max-width: 100%; max-height: 100%; width: auto; height: auto;
  }
}

/* Print of the 3D model (the 2D plan/side print uses body.print-snapshot-mode):
   only the 3D frame is shown, centred on the page and scaled to fit. */
@media print {
  body.print-view { margin: 0; }
  body.print-view * { visibility: hidden; }
  body.print-view .canvas-wrap, body.print-view .canvas-wrap * { visibility: visible; }
  /* remove the editor from the flow (not just hidden): its laid-out height
     would otherwise spill onto extra blank pages */
  body.print-view > *:not(.layout) { display: none !important; }
  body.print-view .layout { display: block; height: auto; }
  body.print-view .layout > aside { display: none !important; }
  body.print-view .canvas-wrap {
    position: absolute; inset: 0; overflow: hidden; background: #fff;
  }
  body.print-view .view3d { position: absolute; inset: 0; }
  body.print-view .view3d canvas {
    position: absolute; inset: 0; margin: auto;
    width: auto !important; height: auto !important;
    max-width: 100% !important; max-height: 100% !important;
  }
  body.print-view .viewbar, body.print-view .print-btn, body.print-view .hint,
  body.print-view .ruler-overlay, body.print-view .ruler-scalebar {
    display: none !important;
  }
}
/* Layers table (left column, above Свойства) */
.layers-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.layers-table tr { cursor: pointer; }
.layers-table td { padding: 5px 6px; font-size: 13px; color: #1f2937; border-bottom: 1px solid #e5e7eb; }
.layers-table tr:hover td { background: #eef2f7; }
.layers-table tr.active td { background: #dbeafe; color: #111827; font-weight: 600; }
.layers-table .lt-vis { text-align: right; width: 34px; }
.layers-vis { background: transparent; border: none; cursor: pointer; color: #2563eb; padding: 2px; line-height: 0; }
.layers-vis .slash { display: none; }
.layers-vis.off { color: #9ca3af; }
.layers-vis.off .slash { display: inline; }
.layers-vis:disabled { color: #cbd5e1; cursor: not-allowed; }
.layers-vis:disabled .slash { display: inline; }
.layers-table .lt-set { text-align: right; width: 30px; }
.layers-set { background: transparent; border: none; cursor: pointer; color: #6b7280; padding: 2px; line-height: 0; }
.layers-set:hover { color: #2563eb; }
.layers-sep { border: none; border-top: 1px solid #d1d5db; margin: 4px 0 12px; }

/* Slab formation modal (floor/ceiling settings) */
.modal.modal-narrow { max-width: 440px; }
.modal-narrow .form-row { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.modal-narrow .form-row[hidden] { display: none; }
.modal-narrow .form-row label { font-size: 13px; color: #374151; }
.modal-narrow .form-row select { padding: 6px 8px; font-size: 14px; border: 1px solid #cbd5e1; border-radius: 6px; }
.modal-narrow .form-note { font-size: 12px; color: #6b7280; margin: 0 0 14px; line-height: 1.45; }
.modal-narrow .form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal-narrow .form-actions button { padding: 7px 14px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; }
.modal-narrow .form-actions button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.modal-narrow .form-actions button.primary:hover { background: #1d4ed8; }
.brand .brand-home { color: #e5e7eb; text-decoration: none; margin-right: 6px; }
.brand .brand-home:hover { color: #fff; }

/* Desktop-only guard (js/mobile-guard.js): blocks the editor on mobile devices */
body.mobile-guard-on { overflow: hidden; }
.mobile-guard {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #111827; color: #e5e7eb; text-align: center;
}
.mobile-guard-box { max-width: 420px; }
.mobile-guard-icon { font-size: 48px; line-height: 1; margin-bottom: 16px; }
.mobile-guard-box h1 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.mobile-guard-box p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #9ca3af; }
.mobile-guard-home {
  display: inline-block; padding: 10px 20px; border-radius: 8px;
  background: #2563eb; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600;
}
.mobile-guard-home:hover { background: #1d4ed8; }