/* Smartifai Admin Interface Grid System Baseline Layouts */
.smartifai-admin-workspace { padding: 24px; background: #f8fbff; border: 1px solid #e2e8f0; box-shadow: 0 18px 55px rgba(15,23,42,.08); border-radius: 24px; }
.smartifai-admin-panel { display: grid; gap: 24px; }
.smartifai-admin-field { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 22px; }
.smartifai-admin-field label { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.smartifai-admin-input, .smartifai-admin-textarea, .smartifai-admin-color-picker { width: 100%; border: 1px solid #d1d5db; border-radius: 14px; padding: 12px 14px; background: #f8fafc; color: #111827; box-shadow: inset 0 1px 2px rgba(15,23,42,0.04); transition: border-color .2s ease, box-shadow .2s ease; }
.smartifai-admin-textarea { min-height: 160px; resize: vertical; }
.smartifai-admin-color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.smartifai-admin-color-hex { width: 140px; max-width: 100%; }
.smartifai-admin-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.smartifai-admin-upload-row .smartifai-admin-input { flex: 1 1 auto; min-width: 200px; }
.smartifai-admin-upload-row .button { white-space: nowrap; }
.smartifai-admin-note { margin: 12px 0 0; font-size: 12px; color: #64748b; line-height: 1.5; }
.smartifai-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.smartifai-toggle input { width: auto; margin: 0; }
.smartifai-preview-desc p:first-child { margin-top: 0; }
.smartifai-preview-desc p { margin-bottom: 1em; }

.smartifai-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.smartifai-view-switch,
.smartifai-upload-action-deck .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    min-height: 40px;
}

.smartifai-upload-action-deck {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.smartifai-preview-toolbar span.separator {
    margin: 0 4px;
    color: #9ca3af;
}

/**
 * Smartifai Admin Workspace Layout Core Styles
 */
.smartifai-view-switch.active {
    background: #0073aa !important;
    color: #ffffff !important;
    border-color: #006799 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.15) !important;
}

.smartifai-stage-viewport-wrapper {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

#smartifai_preview_hardware_frame {
    box-sizing: border-box;
    border: 4px solid #333;
}

.smartifai-frame-mobile {
    border-radius: 36px !important;
    border-width: 16px 4px !important;
}