.aig-app {
    max-width: 95%;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.aig-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
}

.aig-form {
    display: grid;
    gap: 12px;
}

.aig-form label {
    font-weight: 600;
}

.aig-form textarea,
.aig-form input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.aig-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.aig-actions button,
.aig-gallery-item-actions button {
    padding: 9px 13px;
    border: 0;
    border-radius: 6px;
    background: #2271b1;
    color: #fff;
    cursor: pointer;
}

.aig-actions button:hover,
.aig-gallery-item-actions button:hover {
    background: #135e96;
}

.aig-actions button.secondary,
.aig-gallery-item-actions button.secondary {
    background: #646970;
}

.aig-actions button.secondary:hover,
.aig-gallery-item-actions button.secondary:hover {
    background: #3c434a;
}

.aig-actions button.danger,
.aig-gallery-item-actions button.danger {
    background: #d63638;
}

.aig-actions button.danger:hover,
.aig-gallery-item-actions button.danger:hover {
    background: #b32d2e;
}

.aig-status {
    margin-top: 14px;
    padding: 10px;
    border-left: 4px solid #2271b1;
    background: #f6f7f7;
}

.aig-preview-wrap {
    margin-top: 12px;
}

#aig-preview {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #f0f0f1;
}

#aig-canvas {
    max-width: 100%;
    border: 1px solid #ddd;
    background: #111;
    border-radius: 8px;
}

.aig-editor-controls {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.aig-editor-controls label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

.aig-editor-controls input[type="range"],
.aig-editor-controls input[type="text"] {
    width: 100%;
}

.aig-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.aig-gallery-header h3 {
    margin: 0;
}

.aig-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.aig-gallery-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.aig-gallery-item img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.aig-gallery-item-body {
    padding: 10px;
}

.aig-gallery-item-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.aig-gallery-item-actions {
    display: grid;
    gap: 6px;
}

.hidden {
    display: none !important;
}