body { font-family: Arial, sans-serif; padding: 10px; background: #eef2f5; background-size: cover; background-attachment: fixed; background-position: center; color: #333; margin: 0; transition: all 0.3s ease; }
.container { max-width: 100%; margin: auto; background: rgba(255,255,255,0.95); padding: 12px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); box-sizing: border-box; position:relative; backdrop-filter: blur(5px);}

#loginOverlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; }
#quickAddOverlay { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.8); z-index: 10000; display: none; justify-content: center; align-items: center; padding: 20px;}
.login-box { background: white; padding: 30px; border-radius: 10px; width: 100%; max-width: 400px; text-align: center; box-sizing: border-box;}
.login-box input, .login-box select { width:100%; padding:12px; margin-bottom:10px; border:1px solid #ccc; border-radius:5px; box-sizing:border-box;}
.login-box button { width:100%; padding:15px; font-size:16px; background:#007bff; color:white; border:none; border-radius:5px; font-weight:bold; cursor:pointer; margin-bottom:5px;}
.login-box .btn-reg { background: #28a745; }

.screen-mode-bar { display: flex; gap: 5px; margin-bottom: 15px; background: rgba(226,230,234,0.8); padding: 5px; border-radius: 8px; justify-content: space-between; }
.mode-btn { flex: 1; padding: 8px 5px; font-size: 12px; border: none; border-radius: 5px; background: transparent; cursor: pointer; font-weight: bold; color: #555; }
.mode-btn.active { background: #fff; color: #000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
body.mode-tablet .container { max-width: 768px; padding: 20px; }
body.mode-pc .container { max-width: 1200px; padding: 30px; }

.nav { display: flex; justify-content: space-between; margin-bottom: 10px; align-items:center; }
.nav a { text-decoration: none; color: white; background: #343a40; padding: 8px 15px; border-radius: 5px; font-weight: bold; font-size: 14px; margin-left:5px;}

.plugin-zone { width: 100%; margin-bottom: 15px; }
#customHeader, #customFooter { width: 100%; }

.tabs-wrapper { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; margin-bottom: 15px; border-bottom: 2px solid #eee;}
.tab-btn { padding: 10px 16px; background: #f8f9fa; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; white-space: nowrap; font-weight: bold; color: #555; font-size: 14px; }
.tab-btn.active { background: #007bff; color: white; border-color: #007bff; }

details.category-group { background: white; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
details.category-group summary { background: #343a40; color: white; padding: 15px; font-weight: bold; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between;}
details.category-group summary::-webkit-details-marker { display: none; }

.category-scroll-container { max-height: 60vh; overflow-y: auto; overflow-x: hidden; position: relative; }
.item-wrapper { border-bottom: 1px solid #eee; background: #fff;}
.item-wrapper:hover { background: #f8f9fa; }
.item-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; flex-wrap: wrap; gap: 8px;}
.item-row.hidden, .category-group.hidden { display: none !important; }

.item-name { flex: 1; min-width: 180px; font-size: 15px; font-weight: 500; }
.item-controls { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.item-controls input[type="number"], .item-controls input[type="text"] { width: 90px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; }
.item-controls input[type="checkbox"] { width: 26px; height: 26px; margin: 0; }
.price-tag { color: #666; font-size: 13px; text-align: right; min-width: 70px; font-weight: bold; }

.btn-extra { background: #e9ecef; border: 1px solid #ccc; border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 14px; }
.item-extra-panel { display: none; padding: 10px 15px; background: #f1f3f5; border-top: 1px dashed #ccc; }
.item-extra-panel.active { display: block; }
.item-extra-panel textarea { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-size: 13px; margin-bottom: 5px;}

.media-preview-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.media-preview-container img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid #ccc; cursor: pointer; transition: transform 0.2s;}
.media-preview-container img:hover { transform: scale(1.05); }

.client-info { background: #f0f8ff; padding: 15px; border-radius: 8px; margin-top: 20px; border: 1px solid #b8daff; }
.client-info h3 { margin-top: 0; font-size: 16px; color: #0056b3; }
.client-info input, .client-info select, .client-info textarea { width: 100%; padding: 10px; margin-bottom: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; }

.summary-section { margin-top: 15px; background: #fff3cd; padding: 15px; border-radius: 8px; border: 2px solid #ffeeba; }
.total-sum { font-size: 24px; font-weight: bold; text-align: right; color: #d9534f; }

.flex-buttons { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.btn { flex: 1; padding: 14px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; color: white; text-align: center; min-width: 130px; }
.btn-pdf { background: #17a2b8; }
.btn-save { background: #28a745; }

.search-box { width: 100%; padding: 12px; font-size: 16px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }

.saved-estimates { margin-top: 40px; }
.estimate-card { background: white; border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.est-details { flex: 1; font-size: 14px;}
.crm-badge { padding:2px 6px; border-radius:3px; font-size:12px; font-weight:bold; background:#eee; margin-top:5px; display:inline-block;}

#lightbox { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.9); z-index: 10000; display: none; justify-content: center; align-items: center; padding: 20px;}
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain;}
#lightbox span { position: absolute; top: 20px; right: 20px; color: white; font-size: 40px; cursor: pointer; font-weight: bold; line-height: 1;}

.ad-wrapper a { text-decoration: none; color: inherit; }