/* ═══════════ UTM BUILDER ═══════════ */

.utm-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.utm-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); }

/* Header */
.utm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.utm-breadcrumb { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.utm-breadcrumb span { margin: 0 6px; }
.utm-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.utm-ai-badge { font-size: 0.65rem; font-weight: var(--fw-semibold); color: #a78bfa; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.3); padding: 3px 10px; border-radius: var(--radius-full); }
.utm-subtitle { color: var(--text-secondary); font-size: var(--fs-base); margin-top: 6px; max-width: 900px; }
.utm-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* 3-col layout */
.utm-main-grid { display: grid; grid-template-columns: 420px 1fr 300px; gap: var(--space-5); align-items: start; }
.utm-left, .utm-middle, .utm-right { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

/* Section headings */
.utm-sec-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 4px; }
.utm-sec-desc { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--space-4); }

/* Form */
.utm-form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.utm-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.utm-label .req { color: var(--error); }
.utm-label .info-icon { color: var(--text-muted); font-size: 0.7rem; cursor: help; }
.utm-helper { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 3px; }
.utm-input-wrap { position: relative; }
.utm-input-wrap .utm-copy-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 4px; }
.utm-input-wrap .utm-copy-icon:hover { color: var(--text-primary); }

/* Quick fill box */
.utm-quickfill { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px; margin-bottom: 16px; }
.utm-quickfill-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: 4px; }
.utm-quickfill-desc { font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 8px; }

/* Tag pills */
.utm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.utm-tag { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-2xs); cursor: pointer; transition: all 0.15s; }
.utm-tag:hover { border-color: var(--primary); color: var(--primary); }
.utm-tag.active { background: var(--primary-muted); border-color: rgba(14,165,233,0.3); color: var(--primary); }

/* Options checkboxes */
.utm-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--fs-xs); color: var(--text-secondary); }
.utm-option-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.utm-option-badge { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--success); background: rgba(34,197,94,0.12); padding: 2px 8px; border-radius: var(--radius-full); margin-left: 4px; }
.utm-option-helper { font-size: var(--fs-2xs); color: var(--text-muted); margin-left: 24px; margin-bottom: 10px; }

/* Generate button */
.utm-gen-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #3b82f6, #0ea5e9); border: none; color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-3); }
.utm-gen-btn:hover { filter: brightness(1.1); }

/* UTM Link Preview */
.utm-preview-url { background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.2); border-radius: var(--radius-md); padding: 12px 14px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary); word-break: break-all; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.utm-preview-url .utm-url-copy { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; flex-shrink: 0; padding: 4px; }
.utm-preview-url .utm-url-copy:hover { color: var(--text-primary); }

.utm-preview-actions { display: flex; gap: 10px; margin-bottom: var(--space-5); }
.utm-preview-btn { flex: 1; padding: 10px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.utm-preview-btn.primary { background: var(--primary); border: none; color: #fff; }
.utm-preview-btn.primary:hover { filter: brightness(1.1); }
.utm-preview-btn.outline { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); }
.utm-preview-btn.outline:hover { border-color: var(--border-color-hover); color: var(--text-primary); }

/* Parameter preview table */
.utm-param-table { width: 100%; border-collapse: collapse; }
.utm-param-table th { text-align: left; font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 6px; border-bottom: 1px solid var(--border-color); }
.utm-param-table td { padding: 10px 6px; border-bottom: 1px solid var(--border-color); font-size: var(--fs-xs); vertical-align: middle; }
.utm-param-name { color: var(--text-secondary); font-weight: var(--fw-medium); }
.utm-param-val { color: var(--primary); }
.utm-param-copy { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 4px; }
.utm-param-copy:hover { color: var(--text-primary); }

/* Recent UTM links table */
.utm-recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.utm-recent-head h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; }
.utm-view-all { font-size: var(--fs-xs); color: var(--primary); background: none; border: none; cursor: pointer; font-weight: var(--fw-medium); }
.utm-view-all:hover { text-decoration: underline; }

.utm-recent-table { width: 100%; border-collapse: collapse; }
.utm-recent-table th { text-align: left; font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 6px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.utm-recent-table td { padding: 10px 6px; border-bottom: 1px solid var(--border-color); font-size: var(--fs-xs); vertical-align: middle; }
.utm-recent-table tbody tr:hover { background: var(--bg-surface-hover); }
.utm-recent-name { color: var(--text-primary); font-weight: var(--fw-medium); }
.utm-recent-sm { color: var(--text-secondary); }
.utm-recent-date { color: var(--text-muted); white-space: nowrap; }
.utm-recent-clicks { color: var(--text-primary); font-weight: var(--fw-semibold); }
.utm-recent-actions { display: flex; gap: 4px; }
.utm-recent-act { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 3px; }
.utm-recent-act:hover { color: var(--text-primary); }

/* Campaign Analytics (right column) */
.utm-analytics-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.utm-analytics-head h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; }

.utm-donut-wrap { position: relative; width: 160px; height: 160px; margin: 0 auto var(--space-3); }
.utm-donut-wrap svg { width: 100%; height: 100%; }
.utm-donut-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.utm-donut-val { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1; }
.utm-donut-sub { font-size: var(--fs-2xs); color: var(--text-muted); }

.utm-legend { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.utm-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-secondary); }
.utm-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.utm-legend-val { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }

/* Stats grid */
.utm-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--space-4); }
.utm-stat-box { text-align: center; }
.utm-stat-label { font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 2px; }
.utm-stat-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); }
.utm-stat-delta { font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.utm-stat-delta.pos { color: var(--success); }
.utm-stat-delta.neg { color: var(--error); }

/* Top performing */
.utm-top-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.utm-top-head h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; }

.utm-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.utm-top-row:last-child { border-bottom: none; }
.utm-top-logo { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.utm-top-info { flex: 1; min-width: 0; }
.utm-top-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.utm-top-desc { font-size: var(--fs-2xs); color: var(--text-muted); }
.utm-top-clicks { text-align: right; }
.utm-top-clicks-val { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.utm-top-clicks-delta { font-size: var(--fs-2xs); font-weight: var(--fw-medium); }

/* Pro tip */
.utm-pro-tip { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--radius-md); padding: 14px; }
.utm-pro-tip-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--warning); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.utm-pro-tip-text { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }

/* Learn more */
.utm-learn-link { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 1px dashed var(--border-color); border-radius: var(--radius-md); color: var(--primary); font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; background: none; width: 100%; }
.utm-learn-link:hover { border-color: var(--primary); background: rgba(14,165,233,0.04); }

/* Responsive */
@media (max-width: 1300px) {
  .utm-main-grid { grid-template-columns: 1fr 1fr; }
  .utm-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 900px) {
  .utm-main-grid { grid-template-columns: 1fr; }
  .utm-right { grid-template-columns: 1fr; }
  .utm-preview-actions { flex-direction: column; }
  .utm-stats-grid { grid-template-columns: 1fr; }
}