/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; overflow-x: hidden; }
body { font-family: var(--ciq-font-body); font-size: var(--ciq-text-base); line-height: var(--ciq-leading-normal); color: var(--ciq-text-primary); background: var(--ciq-bg-page); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ciq-font-heading); letter-spacing: var(--ciq-tracking-tight); line-height: var(--ciq-leading-tight); }
a { color: var(--ciq-text-link); text-decoration: none; transition: color var(--ciq-duration-fast) var(--ciq-ease-default); }
a:hover { color: var(--ciq-text-link-hover); }

/* === BUTTONS === */
.ciq-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ciq-space-2); font-family: var(--ciq-font-heading); font-size: var(--ciq-text-sm); font-weight: var(--ciq-weight-semibold); letter-spacing: var(--ciq-tracking-wide); line-height: var(--ciq-leading-tight); border: 2px solid transparent; border-radius: var(--ciq-radius-md); cursor: pointer; transition: all var(--ciq-duration-normal) var(--ciq-ease-default); white-space: nowrap; }
.ciq-btn--primary { background: var(--ciq-primary); color: var(--ciq-primary-foreground); }
.ciq-btn--primary:hover { background: var(--ciq-primary-hover); }
.ciq-btn--primary:active { background: var(--ciq-primary-active); }
.ciq-btn--secondary { background: transparent; color: var(--ciq-primary); border-color: var(--ciq-primary); }
.ciq-btn--secondary:hover { background: var(--ciq-primary-subtle); }
.ciq-btn--ghost { background: transparent; color: var(--ciq-text-secondary); }
.ciq-btn--ghost:hover { background: var(--ciq-bg-inset); color: var(--ciq-text-primary); }
.ciq-btn--danger { background: var(--ciq-error); color: var(--ciq-error-foreground); }
.ciq-btn--danger:hover { background: var(--ciq-error-hover); }
.ciq-btn--success { background: var(--ciq-success); color: var(--ciq-success-foreground); }
.ciq-btn--success:hover { background: var(--ciq-success-hover); }
.ciq-btn--sm { padding: var(--ciq-space-1) var(--ciq-space-3); font-size: var(--ciq-text-xs); }
.ciq-btn--md { padding: var(--ciq-space-2) var(--ciq-space-5); }
.ciq-btn--lg { padding: var(--ciq-space-3) var(--ciq-space-6); font-size: var(--ciq-text-base); }
.ciq-btn--xl { padding: var(--ciq-space-4) var(--ciq-space-8); font-size: var(--ciq-text-md); }
.ciq-btn:disabled, .ciq-btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ciq-btn:focus-visible { outline: 2px solid var(--ciq-border-focus); outline-offset: 2px; }
.ciq-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.ciq-btn--loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ciq-spin 0.6s linear infinite; }
@keyframes ciq-spin { to { transform: rotate(360deg); } }

/* === CARDS === */
.ciq-card { background: var(--ciq-bg-surface); border: 1px solid var(--ciq-border); border-radius: var(--ciq-radius-lg); padding: var(--ciq-card-padding); box-shadow: var(--ciq-shadow-1); }
.ciq-card--stat { text-align: center; }
.ciq-card--stat .ciq-card__value { font-family: var(--ciq-font-heading); font-size: var(--ciq-text-3xl); font-weight: var(--ciq-weight-extrabold); color: var(--ciq-text-primary); letter-spacing: var(--ciq-tracking-tighter); line-height: var(--ciq-leading-tight); }
.ciq-card--stat .ciq-card__label { font-size: var(--ciq-text-sm); font-weight: var(--ciq-weight-medium); color: var(--ciq-text-secondary); letter-spacing: var(--ciq-tracking-wide); margin-top: var(--ciq-space-1); }
.ciq-card--video { display: flex; gap: var(--ciq-space-4); }
.ciq-card--video .ciq-card__thumbnail { width: 160px; height: 90px; border-radius: var(--ciq-radius-sm); object-fit: cover; flex-shrink: 0; }
.ciq-card--video .ciq-card__body { flex: 1; min-width: 0; }
.ciq-card--video .ciq-card__title { font-family: var(--ciq-font-heading); font-size: var(--ciq-text-base); font-weight: var(--ciq-weight-semibold); }

/* === INPUTS === */
.ciq-input { display: block; width: 100%; font-family: var(--ciq-font-body); font-size: var(--ciq-text-base); padding: var(--ciq-space-2) var(--ciq-space-3); background: var(--ciq-bg-surface); border: 1px solid var(--ciq-border); border-radius: var(--ciq-radius-md); color: var(--ciq-text-primary); transition: border-color var(--ciq-duration-fast) var(--ciq-ease-default), box-shadow var(--ciq-duration-fast) var(--ciq-ease-default); }
.ciq-input:focus { outline: none; border-color: var(--ciq-border-focus); box-shadow: 0 0 0 3px var(--ciq-primary-subtle); }
.ciq-input--error { border-color: var(--ciq-border-error); }
.ciq-input--error:focus { box-shadow: 0 0 0 3px var(--ciq-error-subtle); }
.ciq-input:disabled { background: var(--ciq-bg-inset); opacity: 0.6; cursor: not-allowed; }
.ciq-input-group { margin-bottom: var(--ciq-space-4); }
.ciq-input-group__label { display: block; font-size: var(--ciq-text-sm); font-weight: var(--ciq-weight-medium); color: var(--ciq-text-primary); margin-bottom: var(--ciq-space-1); }
.ciq-input-group__error { font-size: var(--ciq-text-xs); color: var(--ciq-error); margin-top: var(--ciq-space-1); }

/* === BADGES === */
.ciq-badge { display: inline-flex; align-items: center; gap: var(--ciq-space-1); padding: 2px var(--ciq-space-2); font-size: var(--ciq-text-xs); font-weight: var(--ciq-weight-medium); letter-spacing: var(--ciq-tracking-wide); border-radius: var(--ciq-radius-full); }
.ciq-badge--pending { background: var(--ciq-warning-subtle); color: var(--ciq-warning-text); }
.ciq-badge--processing { background: var(--ciq-info-subtle); color: var(--ciq-info-text); }
.ciq-badge--approved { background: var(--ciq-success-subtle); color: var(--ciq-success-text); }
.ciq-badge--published { background: var(--ciq-primary-subtle); color: var(--ciq-primary-active); }
.ciq-badge--failed { background: var(--ciq-error-subtle); color: var(--ciq-error-text); }
.ciq-badge--free { background: var(--ciq-bg-inset); color: var(--ciq-text-secondary); }

/* === TABLE === */
.ciq-table { width: 100%; border-collapse: collapse; }
.ciq-table th { font-family: var(--ciq-font-heading); font-size: var(--ciq-text-xs); font-weight: var(--ciq-weight-semibold); letter-spacing: var(--ciq-tracking-wider); text-transform: uppercase; color: var(--ciq-text-tertiary); text-align: left; padding: var(--ciq-space-3) var(--ciq-space-4); border-bottom: 2px solid var(--ciq-border); }
.ciq-table td { font-size: var(--ciq-text-sm); padding: var(--ciq-space-3) var(--ciq-space-4); border-bottom: 1px solid var(--ciq-border); color: var(--ciq-text-primary); }
.ciq-table tr:hover td { background: var(--ciq-bg-inset); }

/* === TOAST === */
.ciq-toast-container { position: fixed; top: var(--ciq-space-4); right: var(--ciq-space-4); z-index: 1000; display: flex; flex-direction: column; gap: var(--ciq-space-2); }
.ciq-toast { padding: var(--ciq-space-3) var(--ciq-space-4); border-radius: var(--ciq-radius-md); box-shadow: var(--ciq-shadow-3); font-size: var(--ciq-text-sm); animation: ciq-slide-in var(--ciq-duration-slow) var(--ciq-ease-out); max-width: 400px; }
.ciq-toast--success { background: var(--ciq-success); color: var(--ciq-success-foreground); }
.ciq-toast--error { background: var(--ciq-error); color: var(--ciq-error-foreground); }
.ciq-toast--info { background: var(--ciq-info); color: var(--ciq-info-foreground); }
@keyframes ciq-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* === MODAL === */
.ciq-modal-overlay { position: fixed; inset: 0; background: var(--ciq-bg-overlay); z-index: 900; display: none; align-items: center; justify-content: center; }
.ciq-modal-overlay--active { display: flex; }
.ciq-modal { background: var(--ciq-bg-surface); border-radius: var(--ciq-radius-xl); box-shadow: var(--ciq-shadow-4); max-width: 560px; width: 90%; max-height: 80vh; overflow-y: auto; padding: var(--ciq-space-6); }
.ciq-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ciq-space-4); }
.ciq-modal__title { font-family: var(--ciq-font-heading); font-size: var(--ciq-text-lg); font-weight: var(--ciq-weight-bold); }
.ciq-modal__close { background: none; border: none; cursor: pointer; color: var(--ciq-text-tertiary); font-size: var(--ciq-text-lg); padding: var(--ciq-space-1); }
.ciq-modal__close:hover { color: var(--ciq-text-primary); }
.ciq-modal__actions { display: flex; gap: var(--ciq-space-3); justify-content: flex-end; margin-top: var(--ciq-space-6); }

/* === PROGRESS BAR === */
.ciq-progress { width: 100%; height: 8px; background: var(--ciq-bg-inset); border-radius: var(--ciq-radius-full); overflow: hidden; }
.ciq-progress__bar { height: 100%; background: var(--ciq-primary); border-radius: var(--ciq-radius-full); transition: width var(--ciq-duration-slow) var(--ciq-ease-default); }
.ciq-progress__bar--animated { background: linear-gradient(90deg, var(--ciq-primary) 0%, var(--ciq-primary-hover) 50%, var(--ciq-primary) 100%); background-size: 200% 100%; animation: ciq-shimmer 1.5s ease-in-out infinite; }
@keyframes ciq-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === CONFIDENCE BAR === */
.ciq-confidence { display: flex; align-items: center; gap: var(--ciq-space-2); }
.ciq-confidence__bar { flex: 1; height: 6px; background: var(--ciq-bg-inset); border-radius: var(--ciq-radius-full); overflow: hidden; }
.ciq-confidence__fill { height: 100%; border-radius: var(--ciq-radius-full); }
.ciq-confidence__fill--high { background: var(--ciq-success); }
.ciq-confidence__fill--medium { background: var(--ciq-warning); }
.ciq-confidence__fill--low { background: var(--ciq-error); }
.ciq-confidence__value { font-family: var(--ciq-font-mono); font-size: var(--ciq-text-xs); font-weight: var(--ciq-weight-medium); min-width: 32px; text-align: right; }

/* === EMPTY STATE === */
.ciq-empty { text-align: center; padding: var(--ciq-space-12) var(--ciq-space-6); }
.ciq-empty__icon { font-size: 48px; margin-bottom: var(--ciq-space-4); opacity: 0.3; }
.ciq-empty__title { font-family: var(--ciq-font-heading); font-size: var(--ciq-text-lg); font-weight: var(--ciq-weight-semibold); color: var(--ciq-text-primary); margin-bottom: var(--ciq-space-2); }
.ciq-empty__description { font-size: var(--ciq-text-sm); color: var(--ciq-text-secondary); margin-bottom: var(--ciq-space-6); max-width: 400px; margin-left: auto; margin-right: auto; }

/* === RESPONSIVE: MOBILE === */
@media (max-width: 768px) {
  .ciq-card--video { flex-direction: column; }
  .ciq-card--video .ciq-card__thumbnail { width: 100%; height: auto; aspect-ratio: 16/9; }
  .ciq-table { font-size: var(--ciq-text-xs); }
  .ciq-table th, .ciq-table td { padding: var(--ciq-space-2); }
  .ciq-modal { width: 95%; max-height: 90vh; padding: var(--ciq-space-4); }
}

@media (max-width: 344px) {
  html { overflow-x: hidden; }
  .ciq-card { padding: var(--ciq-space-3); }
  .ciq-table th, .ciq-table td { padding: var(--ciq-space-1) var(--ciq-space-2); font-size: 11px; }
  .ciq-btn--lg { padding: var(--ciq-space-2) var(--ciq-space-4); font-size: var(--ciq-text-sm); }
  .ciq-modal { padding: var(--ciq-space-3); }
}