.tp01-grid-stack {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: minmax(50px, auto);
    gap: 10px;
    background: #f8fafc;
    padding: 10px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    min-height: auto;
    position: relative;
    overflow-x: auto;
}
.tp01-widget {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    user-select: none;
    z-index: 5;
    overflow: hidden;
}
.tp01-widget-header {
    font-size: 0.75em;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow: hidden;
}
.tp01-widget-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    container-type: size; /* เปลี่ยนให้บล็อกทำหน้าที่เป็น Vector Container */
}
.tp01-widget.edit-mode {
    border: 2px dashed var(--primary-main);
    cursor: move;
}
.tp01-widget-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-main);
    cursor: nwse-resize;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 6px;
    display: none;
    z-index: 10;
}
.tp01-widget.edit-mode .tp01-widget-resize-handle {
    display: block;
}
.tp01-widget-controls {
    position: absolute;
    top: -2px;
    right: -2px;
    display: none;
    z-index: 10;
}
.tp01-widget.edit-mode .tp01-widget-controls {
    display: flex;
    gap: 5px;
}
.btn-tp01-edit {
    background: var(--primary-main);
    color: white;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Widget Styles */
.w-btn { width: 90cqmin; height: 90cqmin; min-height: 0; padding: 0; border-radius: 8cqmin; border: none; font-weight: bold; cursor: pointer; font-size: 25cqmin; transition: 0.2s; touch-action: manipulation; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center;}
.w-btn-on { background: var(--w-color-on, var(--primary-main)); color: white; box-shadow: inset 0 0 10cqmin rgba(0,0,0,0.1); border: 1px solid transparent; }
.w-btn-off { background: var(--w-color-off, transparent); color: inherit; border: 1px solid rgba(0,0,0,0.2); }
.w-led { width: 50cqmin; height: 50cqmin; border-radius: 50%; background: var(--w-color-off, #e2e8f0); transition: 0.2s; }
.w-led-on { background: var(--w-color-on, var(--danger)); box-shadow: 0 0 12cqmin var(--w-color-on, var(--danger)); }
.w-slider { width: 90%; height: 20cqmin; cursor: pointer;}
.w-slider-val { font-size: 20cqmin; font-weight: bold; color: var(--primary-main); margin-top: 5cqmin; text-align: center; }
.w-label { font-size: 30cqmin; font-weight: bold; color: var(--primary-dark); text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.w-text { font-size: calc(var(--txt-fs, 1.5) * 15cqmin); font-weight: bold; color: inherit; text-align: center; width: 100%; word-break: break-word;}
.w-input { width: 100%; height: 100%; border: 1px solid var(--border-color); border-radius: 6cqmin; padding: 2cqmin 4cqmin; font-size: 20cqmin; box-sizing: border-box; outline: none; transition: 0.2s; }
.w-input:focus { border-color: var(--primary-main); }

/* Switch Styles */
.w-switch input { opacity: 0; width: 0; height: 0; }
.w-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--w-color-off, #ccc); transition: .4s; border-radius: 48cqmin; }
.w-switch-slider:before { position: absolute; content: ""; height: 36cqmin; width: 36cqmin; left: 6cqmin; bottom: 6cqmin; background-color: white; transition: .4s; border-radius: 50%; }
.w-switch input:checked + .w-switch-slider { background-color: var(--w-color-on, var(--primary-main)); }
.w-switch input:checked + .w-switch-slider:before { transform: translateX(36cqmin); }

@keyframes scaleIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.tp01-widget.animate-in {
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* Mobile responsive for grid */
@media (max-width: 768px) {
    .tp01-grid-stack { grid-template-columns: repeat(5, 1fr); }
}