body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; background:#fff; }
.wrap { padding: 14px; }
.muted { color:#666; margin: 8px 0 12px; }

.tabs { display:flex; gap:8px; margin: 10px 0 12px; }
.tab { border:1px solid #ddd; background:#f6f6f6; padding:8px 10px; border-radius:10px; cursor:pointer; }
.tab.active { background:#e9f2ff; border-color:#b8d4ff; }

.search{
  display:flex;
  gap:8px;
  margin: 8px 0 12px;
}
.search input{
  flex:1;
  border:1px solid #ddd;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}

.table-wrap { overflow:auto; border:1px solid #eee; border-radius: 12px; }
table { width:100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
th { text-align:left; position: sticky; top:0; background:#fafafa; }

a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

code{ background:#f2f2f2; padding:2px 6px; border-radius:8px; }

.sentinel { height: 1px; }

.list-meta{
  margin: 8px 0 10px;
  color:#444;
  font-size:14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.more-wrap{
  display:flex;
  justify-content:center;
  margin: 12px 0 6px;
}

.btn {
  border: 1px solid #ddd;
  background: #f6f6f6;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Details view */
.detail-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 12px;
}
.detail-title {
  font-weight: 700;
  font-size: 16px;
}
.card{
  border:1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Skeleton */
.skel{
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: skel 1.2s ease-in-out infinite;
  margin: 6px 0;
}
@keyframes skel{
  0%{ background-position: 100% 0; }
  100%{ background-position: 0 0; }
}


/* ===== Mobile cards вместо таблицы ===== */
.cards-wrap { display: none; }

@media (max-width: 720px) {
  .table-wrap { display: none; }
  .cards-wrap { display: block; }
}

.card-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  background: var(--tg-theme-bg-color, #fff);
}

.card-item .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.card-item .title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  margin: 6px 0 8px;
}

/* "Название" без подписи (выводится перед артикулом) */
.card-item .card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin: 2px 0 8px;
}

.card-item .muted { opacity: .7; font-size: 12px; }
.card-item .badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.06); }
.card-item .kv { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 13px; line-height: 1.25; }

/* Force cards on touch devices (mobile Telegram WebView can report large layout widths without proper viewport) */
@media (hover: none) and (pointer: coarse) {
  .table-wrap { display: none !important; }
  .cards-wrap { display: block !important; }
}


/* ===== Layout spacing tweaks ===== */
#app {
  padding: 12px;
}

@media (min-width: 900px) {
  #app {
    max-width: 1100px;
    margin: 0 auto;
  }
}

.list-meta {
  padding: 8px 2px;
}

/* ===== Card title spacing ===== */
.card-item .title {
  margin: 6px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* ===== FIX: search layout ===== */
@media (max-width:720px){
  .search-row{display:flex;flex-wrap:wrap;gap:8px;}
  .search-row #q{flex:1 1 100%;width:100%;}
  .search-row #btnSearch,
  .search-row #btnClear{flex:1 1 100%;width:100%;}
}


/* ===== FINAL: Force LIGHT theme everywhere (no dark theme) ===== */
/* Telegram may be in dark mode, but this miniapp must stay light. */
html, body {
  background: #ffffff !important;
  color: #111111 !important;
  color-scheme: light !important;
}

/* If Telegram theme variables exist, ignore them by forcing our palette */
:root{
  --tg-theme-bg-color: #ffffff;
  --tg-theme-text-color: #111111;
  --tg-theme-hint-color: #6b7280;
  --tg-theme-secondary-bg-color: #f3f4f6;
}

.table-wrap, .topbar {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Cards: slightly darker than page, but not dark */
.card-item{
  background: #f3f4f6 !important;       /* slightly darker than white */
  color: #111111 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: none !important;          /* no heavy shadow */
}

.card-item .muted{
  color: #6b7280 !important;
  opacity: 1 !important;
}

.card-item a{
  color: #2563eb !important;
}


/* ===== v11: card typography ===== */
.card-item{
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.card-item .title{
  margin-bottom: 8px !important;
}
.card-item .card-name{
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 6px 0 10px !important;
}

/* ===== v11: search row layout (input full width, buttons on next row) ===== */
.search-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:stretch !important;
}
.search-row #q{
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
.search-row #btnSearch,
.search-row #btnClear{
  flex: 1 1 calc(50% - 4px) !important;
  width: calc(50% - 4px) !important;
}
@media (max-width: 420px){
  .search-row #btnSearch,
  .search-row #btnClear{
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}


/* ===== v12: search layout applies to existing .search container ===== */
.search{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:stretch !important;
}
.search #q{
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
.search #btnSearch,
.search #btnClear{
  flex: 1 1 calc(50% - 4px) !important;
  width: calc(50% - 4px) !important;
}
@media (max-width: 420px){
  .search #btnSearch,
  .search #btnClear{
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}


/* === POSITIONS FINAL FIX === */
.kv.positions { align-items: flex-start; }
.kv.positions .v { text-align: left; }

pre.positions {
  margin: 4px 0 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: transparent;
  border: none;
  white-space: pre-line;
  text-align: left;
}