:root{
  --brand:#117e77; --ink:#0f172a; --muted:#64748b; --bg:#f6f8fb; --card:#fff;
  --glass:rgba(255,255,255,.78); --border:1px solid rgba(15,23,42,.12); --radius:18px;
  --shadow:0 8px 24px rgba(15,23,42,.08); --max:1200px;
}

/* Темная тема */
html[data-theme="dark"] {
  --ink: #ffffff;
  --muted: #94a3b8;
  --bg: #0f172a;
  --card: #1e293b;
  --glass: rgba(30, 41, 59, 0.8);
  --border: 1px solid rgba(51, 65, 85, 0.3);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Базовые стили с мобильным подходом */
html,body{
  height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  width:100%;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color 0.3s ease, color 0.3s ease;
}

@media(min-width:768px){
  body{font-size:16px}
}

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

/* Контейнер с мобильным подходом */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:12px;
  width:100%;
  box-sizing:border-box;
}
@media(min-width:480px){
  .container{padding:16px}
}
@media(min-width:768px){
  .container{padding:24px}
}
@media(min-width:1024px){
  .container{padding:36px}
}
@media(min-width:1400px){
  .container{padding:48px}
}

/* Заголовки с адаптивностью */
h1{
  margin:0 0 8px;
  font-size:clamp(20px,5vw,34px);
  font-weight:800;
  color:#0f766e;
  line-height:1.2;
}
html[data-theme="dark"] h1{color:#22d3ee}

h2{
  margin:0 0 10px;
  font-size:clamp(18px,4vw,22px);
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
}
h3{
  margin:0 0 8px;
  font-size:clamp(16px,3.5vw,20px);
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
}
p{
  margin:0 0 8px;
  color:var(--muted);
  line-height:1.5;
}

/* Стеклянный эффект */
.glass{
  background:var(--glass);
  backdrop-filter:blur(10px);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:100%;
}

.pad{
  padding:12px;
}
@media(min-width:480px){
  .pad{padding:16px}
}
@media(min-width:768px){
  .pad{padding:22px}
}

/* Адаптивная сетка */
.row{
  display:grid;
  gap:12px;
  width:100%;
  box-sizing:border-box;
}
@media(min-width:480px){
  .row{gap:16px}
}
@media(min-width:768px){
  .row{gap:20px}
}
@media(min-width:900px){
  .row{grid-template-columns:2.5fr 1fr}
}

/* Принудительная адаптивность для всех дочерних элементов */
.row > * {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}

/* Дополнительная защита от переполнения на средних экранах */
@media(min-width:600px) and (max-width:899px){
  .row {
    display:block !important;
  }
  
  .row > .glass {
    margin-bottom:16px;
  }
  
  .row > .glass:last-child {
    margin-bottom:0;
  }
}

/* Кнопки с тач-френдли размерами */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  font-size:14px;
  min-height:44px;
  text-decoration:none;
  transition:all 0.2s ease;
  touch-action:manipulation;
}
@media(min-width:480px){
  .btn{
    padding:10px 14px;
    font-size:16px;
    gap:8px;
  }
}
.btn.sec{background:#0f172a0d;color:#0f172a}
html[data-theme="dark"] .btn.sec{background:rgba(255,255,255,0.1);color:#ffffff}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:0.6;cursor:not-allowed}

/* Формы с увеличенными областями касания */
.input, select, textarea{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:12px;
  font:inherit;
  box-sizing:border-box;
  font-size:16px;
  min-height:44px;
  background:#fff;
  color:#0f172a;
  -webkit-appearance:none;
  appearance:none;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#334155;
  color:#ffffff;
  border-color:#475569;
}

@media(min-width:480px){
  .input, select, textarea{
    padding:10px 12px;
  }
}

select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position:right 8px center;
  background-repeat:no-repeat;
  background-size:16px;
  padding-right:40px;
}

html[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

textarea{
  resize:vertical;
  min-height:88px;
}

.muted{color:var(--muted)}

/* Двухколоночная сетка */
.grid-2{
  display:grid;
  gap:8px;
  grid-template-columns:1fr;
  width:100%;
}
@media(min-width:480px){
  .grid-2{
    gap:12px;
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

.right{
  justify-self:end;
  text-align:right;
}
@media(max-width:479px){
  .right{
    justify-self:start;
    text-align:left;
  }
}

.nowrap{white-space:nowrap}

/* Табы с горизонтальным скроллом */
nav.tabs{
  display:flex;
  gap:6px;
  margin:12px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  font-size:14px;
  min-height:40px;
  text-align:center;
}

html[data-theme="dark"] nav.tabs a{
  border-color:#475569;
  background:#334155;
  color:#ffffff;
}

@media(min-width:480px){
  nav.tabs{gap:8px}
  nav.tabs a{
    padding:8px 12px;
    font-size:16px;
  }
}
nav.tabs a.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* Адаптивные таблицы */
.table-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
  max-width:100%;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:100%;
  background:var(--card);
}

th,td{
  padding:8px 6px;
  border-bottom:1px solid #eef2f7;
  text-align:left;
  vertical-align:top;
  font-size:13px;
  color:var(--ink);
}

html[data-theme="dark"] th,
html[data-theme="dark"] td{
  border-bottom-color:#475569;
}

@media(min-width:480px){
  th,td{
    padding:10px 8px;
    font-size:14px;
  }
}
@media(min-width:768px){
  th,td{
    padding:12px 8px;
    font-size:16px;
  }
}

th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#6b7280;
  font-weight:600;
  background:#f8fafc;
  position:sticky;
  top:0;
  z-index:1;
}

html[data-theme="dark"] th{
  background:#1e293b;
  color:#94a3b8;
}

@media(min-width:480px){
  th{font-size:12px}
}

/* Количество товара */
.qty{
  display:inline-flex;
  align-items:center;
  border:1px solid #d1d5db;
  border-radius:10px;
  overflow:hidden;
  white-space:nowrap;
  background:#fff;
}

html[data-theme="dark"] .qty{
  border-color:#475569;
  background:#334155;
}

.qty button{
  border:0;
  background:#f3f4f6;
  padding:8px 10px;
  cursor:pointer;
  min-width:36px;
  min-height:36px;
  font-size:16px;
  font-weight:600;
  touch-action:manipulation;
  color:#0f172a;
}

html[data-theme="dark"] .qty button{
  background:#475569;
  color:#ffffff;
}

.qty input{
  width:48px;
  text-align:center;
  border:0;
  background:white;
  font-size:14px;
  min-height:36px;
  color:#0f172a;
}

html[data-theme="dark"] .qty input{
  background:#334155;
  color:#ffffff;
}

@media(min-width:480px){
  .qty button{
    padding:6px 8px;
    min-width:32px;
    min-height:32px;
  }
  .qty input{
    width:44px;
    min-height:32px;
  }
}

/* Утилитарные классы */
.total{font-weight:800;color:#0f766e}
html[data-theme="dark"] .total{color:#22d3ee}
.hidden{display:none}
.ok{color:#166534;font-weight:700}
html[data-theme="dark"] .ok{color:#22c55e}
.err{color:#991b1b;font-weight:700}
html[data-theme="dark"] .err{color:#ef4444}

/* Состояния загрузки */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

html[data-theme="dark"] .loading-spinner{
  border-color:#475569;
  border-top-color:var(--brand);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Пустая корзина */
.empty-cart {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
@media(max-width:479px){
  .empty-cart{
    padding:30px 16px;
  }
}

.empty-cart h3 {
  margin: 0 0 8px;
  color: var(--ink);
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cart-item {
  animation: fadeIn 0.3s ease;
}

/* Информация о товаре */
.cart-item td:first-child div.muted {
  font-size:0.85em;
  margin-top:4px;
}

/* Боковая панель */
.summary-section {
  position:sticky;
  top:20px;
}
@media(max-width:900px) {
  .summary-section {
    position:static;
  }
}

/* Summary grid улучшения */
.summary-grid {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 16px;
  align-items:center;
}

.summary-grid > div:nth-child(odd) {
  text-align:left;
  font-weight:500;
  color:var(--ink);
}

.summary-grid > div:nth-child(even) {
  text-align:right;
  font-weight:600;
  color:var(--ink);
}

@media(max-width:479px){
  .summary-grid {
    gap:6px 12px;
  }
  
  .summary-grid > div {
    font-size:14px;
  }
}

/* Принудительное переопределение всех цветов в темной теме */
html[data-theme="dark"] * {
  color: #ffffff !important;
}

html[data-theme="dark"] .btn {
  color: #ffffff !important;
}