.tzp-tool-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #059669; --p-text: #0f172a; width: 100%; max-width: 1200px; margin: 0 auto; background: var(--p-bg); border-radius: 24px; padding: 32px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); transition: 0.3s; }
.tzp-header-main { font-size: 1.5rem; font-weight: 600; color: var(--p-text); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.tzp-badge { background: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 500; }
.tzp-subtitle { color: #64748b; font-size: 0.95rem; padding-bottom: 16px; border-bottom: 1px solid var(--p-border); margin-bottom: 24px; text-align: center; }

@media(max-width: 768px) { .tzp-tool-wrapper { padding: 20px; border-radius: 16px; } }

.tzp-controls { display: flex; gap: 12px; flex-wrap: wrap; background: #f8fafc; padding: 16px; border-radius: 16px; border: 1px solid var(--p-border); margin-bottom: 24px; align-items: center; }
.tzp-select { flex: 1; min-width: 250px; padding: 10px 16px; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 0.95rem; background: #ffffff; color: var(--p-text); outline: none; transition: 0.2s; font-family: inherit; }
.tzp-select:focus { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1); }
.tzp-select optgroup { font-weight: 700; color: #475569; }
.tzp-select option { font-weight: normal; color: #0f172a; }

.tzp-btn { padding: 10px 24px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.tzp-btn.primary { background: var(--p-primary); color: white; box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3); }
.tzp-btn.primary:hover { background: #047857; transform: translateY(-1px); }

.tzp-btn-pudiu { background: linear-gradient(135deg, #1e293b, #0f172a); color: #f8fafc; border: 1px solid #334155; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.tzp-btn-pudiu:hover { background: linear-gradient(135deg, #0f172a, #000000); color: #38bdf8; transform: translateY(-1px); }

.tzp-legend { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; font-size: 0.85rem; color: #475569; }
.tzp-legend-item { display: flex; align-items: center; gap: 6px; }
.tzp-box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); }
.tzp-c-good { background: #a7f3d0; } 
.tzp-c-ok { background: #fef08a; }   
.tzp-c-bad { background: #fecaca; }  

.tzp-grid-container { overflow-x: auto; background: #ffffff; border: 1px solid var(--p-border); border-radius: 16px; padding-bottom: 8px; }
.tzp-table { border-collapse: collapse; width: 100%; min-width: 900px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85rem; }
.tzp-table th, .tzp-table td { border: 1px solid #e2e8f0; padding: 10px 4px; text-align: center; }
.tzp-table th { background: #f8fafc; color: #475569; font-weight: 600; padding: 12px 4px; position: sticky; top: 0; z-index: 10; }
.tzp-table .tz-name-col { position: sticky; left: 0; background: #ffffff; z-index: 11; text-align: left; padding-left: 16px; font-weight: 600; font-family: ui-sans-serif, system-ui, sans-serif; min-width: 140px; box-shadow: 2px 0 5px rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center; }
.tzp-table th.tz-name-col { background: #f8fafc; z-index: 12; }

.tzp-table td.good { background: #a7f3d0; color: #065f46; font-weight: 600; }
.tzp-table td.ok { background: #fef08a; color: #854d0e; }
.tzp-table td.bad { background: #fecaca; color: #991b1b; opacity: 0.7; }

.tzp-remove-btn { background: #fee2e2; color: #ef4444; border: none; border-radius: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.tzp-remove-btn:hover { background: #ef4444; color: white; }

[data-theme="dark"] .tzp-tool-wrapper { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tzp-controls { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .tzp-select { background: #1e293b; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .tzp-select optgroup { color: #94a3b8; }
[data-theme="dark"] .tzp-select option { background: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .tzp-btn.primary { background: var(--p-primary); color: white; }
[data-theme="dark"] .tzp-btn-pudiu { background: linear-gradient(135deg, #334155, #1e293b); border-color: #475569; }
[data-theme="dark"] .tzp-btn-pudiu:hover { color: #38bdf8; border-color: #38bdf8; }
[data-theme="dark"] .tzp-grid-container { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .tzp-table th, [data-theme="dark"] .tzp-table td { border-color: #334155; }
[data-theme="dark"] .tzp-table th { background: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .tzp-table .tz-name-col { background: #0f172a; color: #f8fafc; box-shadow: 2px 0 5px rgba(0,0,0,0.2); }
[data-theme="dark"] .tzp-table th.tz-name-col { background: #1e293b; }
[data-theme="dark"] .tzp-legend { color: #cbd5e1; }
[data-theme="dark"] .tzp-remove-btn { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tzp-remove-btn:hover { background: #991b1b; color: white; }
[data-theme="dark"] .tzp-table td.good, [data-theme="dark"] .tzp-c-good { background: rgba(5, 150, 105, 0.3) !important; color: #6ee7b7 !important; border-color: #064e3b; }
[data-theme="dark"] .tzp-table td.ok, [data-theme="dark"] .tzp-c-ok { background: rgba(202, 138, 4, 0.3) !important; color: #fde047 !important; border-color: #713f12; }
[data-theme="dark"] .tzp-table td.bad, [data-theme="dark"] .tzp-c-bad { background: rgba(220, 38, 38, 0.2) !important; color: #fca5a5 !important; border-color: #7f1d1d; opacity: 1; }