.c3dm-wrap { max-width: 1100px; margin: 20px auto; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; color: #3c434a; }
.c3dm-header { background: #fff; padding: 25px; border-radius: 8px 8px 0 0; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.c3dm-header h2 { margin: 0; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.c3dm-main { display: flex; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); min-height: 500px; }

.c3dm-sidebar { width: 260px; border-right: 1px solid #e2e8f0; background: #f8fafc; padding: 20px 0; flex-shrink: 0; }
.c3dm-tab-link { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-weight: 500; transition: all 0.2s; color: #64748b; border-left: 3px solid transparent; }
.c3dm-tab-link:hover { background: #f1f5f9; color: #007cba; }
.c3dm-tab-link.active { background: #fff; color: #007cba; border-left-color: #007cba; font-weight: 600; }
.c3dm-tab-link .toggle-indicator { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.c3dm-tab-link.enabled .toggle-indicator { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }

.c3dm-content { flex: 1; padding: 35px; min-width: 0; }
.c3dm-tab-content { display: none; }
.c3dm-tab-content.active { display: block; animation: c3dm-fadeIn 0.3s ease; }
@keyframes c3dm-fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.c3dm-field-group { margin-bottom: 25px; }
.c3dm-label { display: block; font-weight: 600; margin-bottom: 8px; color: #334155; font-size: 14px; }
.c3dm-input { width: 100%; max-width: 450px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.c3dm-select { width: 100%; max-width: 450px; padding: 8px 12px; border-radius: 6px; border-color: #cbd5e1; height: 40px; }

.c3dm-map-grid { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 15px; align-items: center; background: #f1f5f9; padding: 15px; border-radius: 8px; margin-top: 10px; border: 1px solid #e2e8f0; }
.c3dm-var-tag { background: #fff; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-family: monospace; font-size: 12px; color: #007cba; font-weight: bold; text-align: center; white-space: nowrap; }


.c3dm-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.c3dm-badge-active { background: #dcfce7; color: #166534; }
.c3dm-badge-inactive { background: #f1f5f9; color: #475569; }


.c3dm-save-bar { margin-top: 25px; padding-top: 25px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; }
.c3dm-btn-primary { background: #007cba; color: #fff; border: none; padding: 12px 30px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.c3dm-btn-primary:hover { background: #006799; }


@media screen and (max-width: 782px) {
    .c3dm-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .c3dm-main { flex-direction: column; }
    .c3dm-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; display: flex; overflow-x: auto; white-space: nowrap; padding: 10px 10px 0 10px; }
    .c3dm-tab-link { padding: 10px 15px; border-left: none; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; }
    .c3dm-tab-link.active { border-left-color: transparent; border-bottom-color: #007cba; }
    .c3dm-content { padding: 20px; }
    .c3dm-map-grid { grid-template-columns: 1fr; gap: 8px; justify-items: start; }
    .c3dm-input, .c3dm-select { max-width: 100%; }
}