body {
  background: #f1f5f9;
  color: #0f172a;
}

.calco-logo .logo-calc { color: #2563eb; font-weight: 800; }
.calco-logo .logo-o { color: #1d4ed8; font-weight: 800; }
.calco-logo { font-size: 1.35rem; letter-spacing: -0.04em; text-decoration: none; }

.calc-card { transition: box-shadow .15s, transform .15s; border: 1px solid #e2e8f0; }
.calc-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); transform: translateY(-2px); }

.stat-card { border-color: #e2e8f0 !important; }

.seo-article { line-height: 1.65; }
.seo-article h2 { margin-top: 1.5rem; }
.seo-article p { margin-bottom: 1rem; }
.seo-article .formula {
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  padding: .75rem 1rem;
  font-family: ui-monospace, monospace;
  border-radius: .25rem;
}

.svg-wrapper { background: #fefce8; border-radius: 1rem; padding: .5rem; }
.whole-tile { fill: #22c55e; }
.cut-tile { fill: #f97316; }

.normative-list a { text-decoration: none; }
.normative-list a:hover { text-decoration: underline; }

/* Visualization */
#calcoVizContent { min-height: 120px; }
#calcoVizContent svg { max-width: 100%; }
.viz-container { overflow: hidden; }

/* Universal tile calculator */
#tileModeSwitch { flex-wrap: wrap; }
#tileModeSwitch .tile-mode-btn { flex: 1 1 auto; white-space: nowrap; }
#tileModeSwitch .tile-mode-btn.active { font-weight: 600; }
#tileViz { min-height: 120px; }
#tileViz svg { max-width: 100%; }
#tileRecs .btn { white-space: normal; text-align: left; }
/* Unit input with integrated unit selector */
.calco-unit-input {
  display: flex;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.calco-unit-input:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.calco-unit-input .form-control {
  flex: 1 1 auto;
  width: 1%;
  border: none;
  border-radius: 10px 0 0 10px;
  box-shadow: none !important;
  font-size: 1rem;
  padding: .625rem .75rem;
  min-height: 2.75rem;
}
.calco-unit-input .form-control:focus {
  box-shadow: none !important;
  outline: none;
}
.calco-unit-select {
  flex: 0 0 auto;
  border: none;
  border-left: 1px solid #e2e8f0;
  border-radius: 0 10px 10px 0;
  background-color: #f8fafc;
  color: #2563eb;
  font-weight: 600;
  font-size: .875rem;
  padding: 0 1.6rem 0 .65rem;
  min-width: 4.5rem;
  max-width: 5.5rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%232563eb' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5 8 11l6.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .45rem center;
  background-size: .65rem;
}
.calco-unit-select:focus,
.calco-unit-select:focus-visible {
  outline: none;
  box-shadow: none;
  background-color: #f1f5f9;
}
.calco-unit-input:focus-within .calco-unit-select {
  background-color: #f1f5f9;
}
.calco-unit-static {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e2e8f0;
  border-radius: 0 10px 10px 0;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: .875rem;
  padding: 0 .875rem;
  min-width: 3rem;
  white-space: nowrap;
}
.calco-unit-input-compact .form-control {
  font-size: .875rem;
  padding: .375rem .5rem;
  min-height: 2rem;
}
.calco-unit-input-compact .calco-unit-select,
.calco-unit-input-compact .calco-unit-static {
  font-size: .8125rem;
  padding: 0 1.35rem 0 .45rem;
  min-width: 3.5rem;
  background-position: right .35rem center;
}
.opening-row .calco-unit-input { flex: 1 1 5rem; max-width: 9rem; }
.opening-row label { flex: 1 1 8rem; min-width: 0; }

.tile-openings-block { border-top: 1px solid #e2e8f0; padding-top: .75rem; margin-top: .5rem; }

.admin-body { background: #f8fafc; }
.admin-body .nav-pills .nav-link.active { background: #2563eb; }

.navbar-nav .nav-link.active { color: #2563eb !important; font-weight: 600; }

.liveinternet-counter { margin-top: .5rem; line-height: 0; }
.liveinternet-counter a { display: inline-block; opacity: .85; }
.liveinternet-counter a:hover { opacity: 1; }