*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f6fa; color: #1a1a2e; line-height: 1.5; transition: background 0.3s, color 0.3s; }
body.dark { background: #1a1a2e; color: #e0e0e0; }
.app { max-width: 1100px; margin: 0 auto; padding: 20px; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #e0e0e0; }
body.dark header { border-bottom-color: #333; }
header h1 { font-size: 1.5rem; font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 12px; }
nav { display: flex; gap: 8px; }
nav button { padding: 8px 20px; border: 2px solid #333; background: #fff; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.15s; }
body.dark nav button { border-color: #555; background: #2a2a4a; color: #ccc; }
nav button.active { background: #1a1a2e; color: #fff; }
body.dark nav button.active { background: #4a4a7a; color: #fff; }
nav button:hover:not(.active) { background: #e8e8e8; }
body.dark nav button:hover:not(.active) { background: #3a3a5a; }

.theme-toggle { width: 36px; height: 36px; border: none; border-radius: 50%; background: #e8e8e8; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.theme-toggle:hover { background: #d0d0d0; }
body.dark .theme-toggle { background: #3a3a5a; color: #ffd700; }
body.dark .theme-toggle:hover { background: #4a4a6a; }

.page { display: none; }
.page.active { display: block; }

.card { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: background 0.3s; }
body.dark .card { background: #252540; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eee; }
body.dark th, body.dark td { border-bottom-color: #333; }
th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: #666; background: #fafafa; }
body.dark th { color: #aaa; background: #1e1e38; }
tr:hover { background: #f9f9fb; }
body.dark tr:hover { background: #2a2a48; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 600; background: #e8f4fd; color: #1a6fb5; }
.badge.montazh { background: #e8fde8; color: #2a7a2a; }
.badge.rashodniki { background: #fdf5e8; color: #8a6a1a; }

.btn { padding: 6px 16px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.15s; }
.btn-primary { background: #1a1a2e; color: #fff; }
.btn-primary:hover { background: #2d2d4a; }
.btn-danger { background: #e74c3c; color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-outline { background: #fff; border: 1px solid #ccc; color: #333; }
.btn-outline:hover { background: #f0f0f0; }
body.dark .btn-outline { background: #2a2a4a; border-color: #555; color: #ccc; }
body.dark .btn-outline:hover { background: #3a3a5a; }
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }

.tooltip-wrap { position: relative; cursor: pointer; }
.tooltip-wrap .tooltip-box { display: none; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); background: #1a1a2e; color: #fff; padding: 12px 16px; border-radius: 8px; width: 340px; max-height: 400px; overflow-y: auto; z-index: 50; box-shadow: 0 4px 20px rgba(0,0,0,0.25); font-size: 0.8rem; line-height: 1.6; pointer-events: none; }
.tooltip-wrap:hover .tooltip-box { display: block; }
.tooltip-box h4 { margin: 0 0 6px; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 4px; }
.tooltip-box .spec-row { display: flex; justify-content: space-between; gap: 8px; }
.tooltip-box .spec-row .spec-k { color: #aaa; white-space: nowrap; }
.tooltip-box .spec-row .spec-v { text-align: right; }
.tooltip-box .desc-text { margin-top: 8px; color: #ccc; font-size: 0.78rem; }
.tooltip-box::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1a1a2e; }

.spec-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.25s ease; }
.spec-overlay.open { display: flex; opacity: 1; }
.spec-modal { background: #fff; border-radius: 12px; width: 600px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.3); transform: scale(0.95) translateY(10px); transition: transform 0.25s ease; }
body.dark .spec-modal { background: #252540; }
.spec-overlay.open .spec-modal { transform: scale(1) translateY(0); }
.spec-modal-header { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 0; }
.spec-modal-header img { width: 160px; height: 160px; object-fit: contain; border-radius: 8px; background: #f5f5f5; flex-shrink: 0; }
body.dark .spec-modal-header img { background: #1e1e38; }
.spec-modal-header .spec-modal-info { flex: 1; }
.spec-modal-header .spec-modal-info h2 { margin: 0 0 8px; font-size: 1.1rem; }
.spec-modal-header .spec-modal-info .spec-price { font-size: 1.2rem; font-weight: 700; color: #1a1a2e; }
body.dark .spec-modal-header .spec-modal-info .spec-price { color: #8ac4ff; }
.spec-modal-header .spec-modal-info .spec-cat { margin-top: 6px; }
.spec-modal-body { padding: 16px 24px; }
.spec-modal-body h3 { margin: 0 0 8px; font-size: 0.95rem; color: #555; }
body.dark .spec-modal-body h3 { color: #aaa; }
.spec-modal-body .spec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.spec-modal-body .spec-table tr:nth-child(even) { background: #fafafa; }
body.dark .spec-modal-body .spec-table tr:nth-child(even) { background: #1e1e38; }
.spec-modal-body .spec-table td { padding: 6px 10px; border-bottom: 1px solid #eee; }
body.dark .spec-modal-body .spec-table td { border-bottom-color: #333; }
.spec-modal-body .spec-table td:first-child { color: #888; width: 45%; white-space: nowrap; }
body.dark .spec-modal-body .spec-table td:first-child { color: #888; }
.spec-modal-body .spec-desc { margin-top: 16px; padding: 12px; background: #f8f9fa; border-radius: 6px; font-size: 0.85rem; line-height: 1.6; color: #444; }
body.dark .spec-modal-body .spec-desc { background: #1e1e38; color: #ccc; }

.form-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: #555; }
body.dark .form-group label { color: #aaa; }
.form-group input, .form-group select, .form-group textarea { padding: 8px 12px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 0.9rem; background: #fff; color: #1a1a2e; transition: background 0.3s, color 0.3s; }
body.dark .form-group input, body.dark .form-group select, body.dark .form-group textarea { background: #1e1e38; border-color: #444; color: #e0e0e0; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: #1a1a2e; }
body.dark .form-group input:focus, body.dark .form-group select:focus { border-color: #6a6aaa; }

.url-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.url-bar input { flex: 1; }

.total-row { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 2px solid #333; font-size: 1.1rem; font-weight: 700; }

.empty { text-align: center; padding: 40px; color: #999; }

.price-input { width: 120px; }
.qty-input { width: 80px; }

.modal h2 { margin-bottom: 16px; font-size: 1.15rem; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.toast { position: fixed; bottom: 24px; right: 24px; background: #1a1a2e; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; z-index: 200; opacity: 0; transition: opacity 0.3s; }
body.dark .toast { background: #4a4a7a; }
.toast.show { opacity: 1; }

@media (max-width: 768px) {
    .app { padding: 12px; }
    header { flex-direction: column; gap: 12px; align-items: stretch; }
    header h1 { font-size: 1.2rem; text-align: center; }
    nav { justify-content: center; }
    nav button { padding: 8px 14px; font-size: 0.82rem; }
    .card { padding: 14px; }
    .cam-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .cam-card { padding: 10px; }
    .cam-card img { height: 90px; }
    .cam-card .cam-name { font-size: 0.78rem; }
    .cam-card .cam-bottom { flex-direction: column; gap: 6px; align-items: stretch; }
    .cam-card .cam-actions { justify-content: flex-end; }
    .spec-modal-header { flex-direction: column; align-items: center; text-align: center; }
    .spec-modal-header img { width: 120px; height: 120px; }
    .spec-modal-body .spec-table td:first-child { white-space: normal; width: auto; }
    .est-group { overflow-x: auto; }
    .est-group table { min-width: 520px; }
    .total-row { font-size: 0.95rem; gap: 8px; }
    .form-row { flex-direction: column; }
    .form-row .form-group { width: 100%; }
    .search-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .cam-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cam-card img { height: 80px; }
    nav { gap: 4px; }
    nav button { padding: 6px 10px; font-size: 0.78rem; }
}

@media print {
    header, nav, .url-bar, .btn, .empty, .toast, .modal-overlay, .no-print, .spec-overlay { display: none !important; }
    body { background: #fff; }
    .app { max-width: 100%; padding: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    table th { background: #eee; }
    footer { display: none !important; }
}

footer { margin-top: 32px; padding: 16px 0; border-top: 1px solid #e0e0e0; text-align: center; font-size: 0.78rem; color: #888; }
body.dark footer { border-top-color: #333; }
footer .version { font-weight: 700; color: #555; }
body.dark footer .version { color: #aaa; }
footer .changelog-toggle { cursor: pointer; color: #1a6fb5; text-decoration: underline; margin-left: 8px; }
footer .changelog-toggle:hover { color: #0d4f8a; }
.changelog-list { text-align: left; max-width: 700px; margin: 12px auto 0; }
.changelog-list table { font-size: 0.82rem; }
.changelog-list th { font-size: 0.75rem; background: #f5f5f5; }
body.dark .changelog-list th { background: #1e1e38; }
.changelog-list td { padding: 6px 10px; }

.est-group { margin-bottom: 20px; }
.est-group-header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f0f2f5; border-radius: 6px; margin-bottom: 2px; font-weight: 700; font-size: 0.9rem; }
body.dark .est-group-header { background: #1e1e38; color: #ccc; }
.est-group-header .badge { font-size: 0.8rem; }
.est-group-header .group-sum { margin-left: auto; font-size: 0.85rem; color: #555; }
body.dark .est-group-header .group-sum { color: #aaa; }
.est-group table { width: 100%; border-collapse: collapse; }
.est-group th { font-size: 0.78rem; text-transform: uppercase; color: #888; background: #fafafa; padding: 6px 10px; text-align: left; border-bottom: 1px solid #eee; }
body.dark .est-group th { color: #aaa; background: #1e1e38; border-bottom-color: #333; }
.est-group td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; }
body.dark .est-group td { border-bottom-color: #333; }

.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.search-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.15s; }
body.dark .search-card { background: #252540; border-color: #333; }
.search-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
body.dark .search-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.search-card img { width: 100%; height: 140px; object-fit: contain; border-radius: 4px; background: #f9f9f9; }
body.dark .search-card img { background: #1e1e38; }
.search-card .sc-name { font-size: 0.85rem; font-weight: 500; line-height: 1.4; flex: 1; }
.search-card .sc-name:hover { text-decoration: underline; }
.search-card .sc-price { font-size: 1rem; font-weight: 700; color: #1a1a2e; }
body.dark .search-card .sc-price { color: #8ac4ff; }
.search-card .sc-source { font-size: 0.75rem; }
.search-card .sc-actions { display: flex; gap: 6px; }

.catalog-section { background: #fff; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; transition: background 0.3s; }
body.dark .catalog-section { background: #252540; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.catalog-section-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; user-select: none; transition: background 0.15s; }
.catalog-section-header:hover { background: #f5f6fa; }
body.dark .catalog-section-header:hover { background: #2a2a48; }
.catalog-section-header .arrow { font-size: 0.8rem; color: #999; transition: transform 0.2s; }
.catalog-section-header.open .arrow { transform: rotate(90deg); }
.catalog-section-header .section-title { font-weight: 700; font-size: 1rem; }
.catalog-section-header .section-count { font-size: 0.8rem; color: #888; background: #f0f0f0; padding: 2px 8px; border-radius: 10px; }
body.dark .catalog-section-header .section-count { background: #333; color: #aaa; }

.subgroup-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; background: #fafbfc; border-radius: 6px; margin-bottom: 4px; transition: background 0.15s; }
body.dark .subgroup-header { background: #1e1e38; }
.subgroup-header:hover { background: #f0f2f5; }
body.dark .subgroup-header:hover { background: #2a2a48; }
.subgroup-header .sub-arrow { font-size: 0.7rem; color: #999; transition: transform 0.2s; }
.subgroup-header.open .sub-arrow { transform: rotate(90deg); }
.subgroup-header .sub-title { font-size: 0.88rem; font-weight: 600; color: #444; }
body.dark .subgroup-header .sub-title { color: #ccc; }
.subgroup-header .sub-count { font-size: 0.75rem; color: #999; }
.subgroup-body { display: none; padding: 8px 0; }
.subgroup-body.open { display: block; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cam-card { border: 1px solid #e8e8e8; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
body.dark .cam-card { background: #252540; border-color: #333; }
.cam-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
body.dark .cam-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.cam-card img { width: 100%; height: 130px; object-fit: contain; border-radius: 8px; background: #f5f6fa; padding: 8px; transition: transform 0.2s; }
body.dark .cam-card img { background: #1e1e38; }
.cam-card:hover img { transform: scale(1.03); }
.cam-card .cam-name { font-size: 0.84rem; font-weight: 500; line-height: 1.4; flex: 1; color: #1a1a2e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.dark .cam-card .cam-name { color: #e0e0e0; }
.cam-card .cam-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid #f0f0f0; }
body.dark .cam-card .cam-bottom { border-top-color: #333; }
.cam-card .cam-price { font-weight: 700; font-size: 0.9rem; color: #1a1a2e; }
body.dark .cam-card .cam-price { color: #8ac4ff; }
.cam-card .cam-actions { display: flex; gap: 4px; }
.cam-card .cam-add-btn { width: 100%; text-align: center; margin-top: 4px; }

.cam-card.has-specs { position: relative; }
.specs-tip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a2e;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    max-height: 300px;
    overflow-y: auto;
}
body.dark .specs-tip { background: #3a3a5a; }
.cam-card.has-specs:hover .specs-tip { display: block; }
.specs-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.specs-tip-row span:first-child { color: #aaa; }
.specs-tip-row span:last-child { text-align: right; }
.specs-tip-more { text-align: center; margin-top: 6px; color: #888; font-style: italic; }

.catalog-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #e0e0e0; padding-bottom: 0; }
body.dark .catalog-tabs { border-bottom-color: #333; }
.catalog-tabs button { padding: 10px 20px; border: none; background: transparent; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: #666; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
body.dark .catalog-tabs button { color: #aaa; }
.catalog-tabs button:hover { color: #1a1a2e; background: #f5f6fa; }
body.dark .catalog-tabs button:hover { color: #e0e0e0; background: #2a2a48; }
.catalog-tabs button.active { color: #1a1a2e; border-bottom-color: #1a1a2e; font-weight: 600; }
body.dark .catalog-tabs button.active { color: #e0e0e0; border-bottom-color: #8ac4ff; }

.catalog-section-body { overflow: hidden; max-height: 0; transition: max-height 0.4s ease, padding 0.35s ease, opacity 0.3s ease; opacity: 0; padding: 0 18px; }
.catalog-section-body.open { max-height: 20000px; padding: 0 18px 14px; opacity: 1; }

.spec-modal-close { position: absolute; top: 12px; right: 16px; background: #f0f0f0; border: none; font-size: 1.3rem; cursor: pointer; color: #999; padding: 4px 10px; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.spec-modal-close:hover { background: #e0e0e0; color: #333; }

.spec-modal-body .spec-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; }
.spec-modal-body .spec-table tr:hover { background: #f8f9fb; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.2s ease; }
.modal-overlay.open { display: flex; opacity: 1; }
.modal { background: #fff; border-radius: 10px; padding: 24px; width: 500px; max-width: 90vw; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.2); transform: scale(0.95); transition: transform 0.2s ease; }
body.dark .modal { background: #252540; }
.modal-overlay.open .modal { transform: scale(1); }

body.dark .form-group input, body.dark .form-group select, body.dark .form-group textarea { background: #1e1e38; border-color: #444; color: #e0e0e0; }
body.dark .form-group input:focus, body.dark .form-group select:focus { border-color: #6a6aaa; }
body.dark .url-bar input { background: #1e1e38; border-color: #444; color: #e0e0e0; }
body.dark .url-bar input:focus { border-color: #6a6aaa; }
body.dark #ai-analysis { background: #1a2a40; color: #ccc; }
body.dark #ai-analysis span { color: #e0e0e0; }
body.dark #ai-rec-list > div { border-color: #444; }
body.dark #ai-missing-list { color: #aaa; }
body.dark #ai-enrich-result { background: #1a2a20; color: #aaa; }