/**
 * Manic Pixels Web OS — Control Panel CSS
 * Estilos para todas as seções do Painel de Controle.
 * Sprint 7
 */

/* ══════════════════════════════════════════════════════════════════════════
   RAIZ — layout 2 colunas
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp {
  display:        flex;
  height:         100%;
  overflow:       hidden;
  font-family:    var(--mp-font-ui, 'Segoe UI', system-ui, sans-serif);
  font-size:      var(--mp-font-size-base, 13px);
  background:     var(--mp-window-bg-solid, #14141e);
  color:          var(--mp-menu-fg, #e8e8f0);
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL (nav)
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-nav {
  width:          196px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  background:     rgba(0, 0, 0, 0.25);
  border-right:   1px solid var(--mp-window-border, rgba(255,255,255,0.08));
  overflow-y:     auto;
  overflow-x:     hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.mp-cp-nav-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mp-cp-nav-logo {
  width:           34px;
  height:          34px;
  background:      linear-gradient(135deg, var(--mp-accent, #4a9eff) 0%, rgba(var(--mp-accent-rgb,74,158,255),0.5) 100%);
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           #fff;
  box-shadow:      0 2px 8px rgba(var(--mp-accent-rgb,74,158,255),0.35);
}

.mp-cp-nav-title {
  font-size:   11px;
  font-weight: 600;
  color:       rgba(255,255,255,0.65);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ── Nav list ────────────────────────────────────────────────────────────── */

.mp-cp-nav-list {
  list-style: none;
  padding:    8px 6px;
  display:    flex;
  flex-direction: column;
  gap:        2px;
}

.mp-cp-nav-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       9px 12px;
  border-radius: var(--mp-menu-radius, 8px);
  cursor:        pointer;
  color:         rgba(255,255,255,0.55);
  font-size:     var(--mp-font-size-sm, 12px);
  font-weight:   500;
  transition:    background 0.12s ease, color 0.12s ease;
  user-select:   none;
  outline:       none;
}

.mp-cp-nav-item:hover {
  background: rgba(255,255,255,0.07);
  color:      rgba(255,255,255,0.85);
}

.mp-cp-nav-item.active {
  background: rgba(var(--mp-accent-rgb,74,158,255), 0.18);
  color:      var(--mp-accent, #4a9eff);
}

.mp-cp-nav-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--mp-accent-rgb,74,158,255),0.5);
}

.mp-cp-nav-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  flex-shrink:     0;
  color:           inherit;
  opacity:         0.9;
}

.mp-cp-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTEÚDO PRINCIPAL
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-main {
  flex:     1;
  overflow: hidden;
  display:  flex;
  flex-direction: column;
}

.mp-cp-content {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.mp-cp-content::-webkit-scrollbar       { width: 4px; }
.mp-cp-content::-webkit-scrollbar-track { background: transparent; }
.mp-cp-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.mp-cp-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ══════════════════════════════════════════════════════════════════════════
   PANE (seção individual)
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-pane {
  padding:       20px 24px 32px;
  display:       flex;
  flex-direction:column;
  gap:           0;
}

.mp-cp-pane-title {
  font-size:     18px;
  font-weight:   600;
  color:         var(--mp-menu-fg, #e8e8f0);
  margin-bottom: 20px;
  padding-bottom:12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRUPOS
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-group {
  margin-bottom: 24px;
}

.mp-cp-group-title {
  font-size:     11px;
  font-weight:   600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:         rgba(255,255,255,0.38);
  margin-bottom: 10px;
  padding-bottom:6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   ROWS (linha label + controle)
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-row {
  display:       flex;
  align-items:   center;
  gap:           16px;
  padding:       8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mp-cp-row:last-child { border-bottom: none; }

.mp-cp-row-label {
  flex:          1;
  min-width:     0;
  display:       flex;
  flex-direction:column;
  gap:           2px;
}

.mp-cp-row-label span {
  font-size:  var(--mp-font-size-base, 13px);
  color:      rgba(255,255,255,0.85);
  font-weight:450;
}

.mp-cp-row-label small {
  font-size:  var(--mp-font-size-xs, 11px);
  color:      rgba(255,255,255,0.38);
  line-height:1.3;
}

.mp-cp-row-control {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-toggle-wrap {
  display:     inline-flex;
  align-items: center;
  cursor:      pointer;
  flex-shrink: 0;
}

/* Especificidade elevada para sobrescrever input[type="checkbox"] em controls.css */
input[type="checkbox"].mp-cp-toggle,
.mp-cp-toggle {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
}
input[type="checkbox"].mp-cp-toggle::after,
input[type="checkbox"].mp-cp-toggle::before {
  display: none !important;
}

.mp-cp-toggle-track {
  display:    block;
  width:      38px;
  height:     20px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  position:   relative;
  transition: background 0.18s ease;
  flex-shrink:0;
}

.mp-cp-toggle-track::after {
  content:       '';
  position:      absolute;
  left:          2px;
  top:           2px;
  width:         16px;
  height:        16px;
  background:    rgba(255,255,255,0.60);
  border-radius: 50%;
  transition:    left 0.18s ease, background 0.18s ease;
  box-shadow:    0 1px 3px rgba(0,0,0,0.4);
}

.mp-cp-toggle:checked + .mp-cp-toggle-track {
  background: var(--mp-accent, #4a9eff);
}

.mp-cp-toggle:checked + .mp-cp-toggle-track::after {
  left:       20px;
  background: #fff;
}

.mp-cp-toggle:focus-visible + .mp-cp-toggle-track {
  box-shadow: 0 0 0 2px rgba(var(--mp-accent-rgb,74,158,255),0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   SLIDERS
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-slider-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
  min-width:   180px;
}

.mp-cp-slider {
  flex:        1;
  height:      4px;
  appearance:  none;
  -webkit-appearance: none;
  background:  rgba(255,255,255,0.15);
  border-radius:4px;
  outline:     none;
  cursor:      pointer;
}

.mp-cp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         16px;
  height:        16px;
  background:    var(--mp-accent, #4a9eff);
  border-radius: 50%;
  cursor:        pointer;
  box-shadow:    0 1px 4px rgba(0,0,0,0.4);
  transition:    transform 0.12s;
}

.mp-cp-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.mp-cp-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--mp-accent, #4a9eff);
  border-radius: 50%; border: none; cursor: pointer;
}

.mp-cp-slider-val {
  font-size:   12px;
  color:       rgba(255,255,255,0.50);
  min-width:   36px;
  text-align:  right;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLOR PICKER
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-colorpicker {
  width:         36px;
  height:        32px;
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor:        pointer;
  background:    none;
  padding:       2px;
  flex-shrink:   0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SELECT / INPUT / INPUT-TEXT
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-select,
.mp-cp-input,
.mp-cp-input-text {
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color:         var(--mp-menu-fg, #e8e8f0);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     var(--mp-font-size-sm, 12px);
  outline:       none;
  transition:    border-color 0.12s;
}

.mp-cp-select,
.mp-cp-input {
  padding: 5px 10px;
  height:  32px;
}

.mp-cp-input-text {
  flex:    1;
  padding: 6px 10px;
  height:  32px;
}

.mp-cp-select:focus,
.mp-cp-input:focus,
.mp-cp-input-text:focus {
  border-color: var(--mp-accent, #4a9eff);
  background:   rgba(255,255,255,0.09);
}

.mp-cp-select option { background: #1a1a2e; }

/* ══════════════════════════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  border-radius: 6px;
  font-size:     var(--mp-font-size-sm, 12px);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-weight:   500;
  cursor:        pointer;
  border:        1px solid transparent;
  transition:    background 0.12s, opacity 0.12s;
  white-space:   nowrap;
}

.mp-cp-btn-primary {
  background: var(--mp-accent, #4a9eff);
  color:      #fff;
  border-color: rgba(255,255,255,0.1);
}
.mp-cp-btn-primary:hover { opacity: 0.85; }

.mp-cp-btn-secondary {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,0.10);
}
.mp-cp-btn-secondary:hover { background: rgba(255,255,255,0.13); }

.mp-cp-btn-danger {
  background: rgba(255,95,87,0.15);
  color:      #ff5f57;
  border-color: rgba(255,95,87,0.20);
}
.mp-cp-btn-danger:hover { background: rgba(255,95,87,0.25); }

/* Botão pequeno — usado no painel de tema (exportar, importar, restaurar) */
.mp-cp-btn-sm {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 12px;
  border-radius: 5px;
  font-size:     11px;
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-weight:   500;
  cursor:        pointer;
  border:        1px solid rgba(255,255,255,0.12);
  background:    rgba(255,255,255,0.08);
  color:         rgba(255,255,255,0.80);
  white-space:   nowrap;
  transition:    background 0.12s, border-color 0.12s;
  text-decoration: none;
}
.mp-cp-btn-sm:hover {
  background:   rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.20);
}
.mp-cp-btn-sm:active {
  background: rgba(255,255,255,0.20);
}

.mp-cp-actions-row {
  display: flex;
  gap:     10px;
  flex-wrap:wrap;
  margin-top:4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA — cards de seleção
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-theme-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap:                   10px;
}

.mp-cp-theme-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  padding:        10px 8px;
  border:         1px solid rgba(255,255,255,0.08);
  border-radius:  10px;
  cursor:         pointer;
  background:     rgba(255,255,255,0.03);
  transition:     border-color 0.15s, background 0.15s, transform 0.12s;
}

.mp-cp-theme-card:hover {
  border-color: var(--mp-accent, #4a9eff);
  background:   rgba(var(--mp-accent-rgb,74,158,255),0.08);
  transform:    translateY(-1px);
}

.mp-cp-theme-preview {
  display:       flex;
  width:         60px;
  height:        30px;
  border-radius: 5px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,0.12);
}

.mp-cp-theme-preview span {
  flex: 1;
}

.mp-cp-theme-name {
  font-size:  10px;
  color:      rgba(255,255,255,0.60);
  text-align: center;
  font-weight:500;
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   APARÊNCIA — Acento + Wallpaper
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-accent-row {
  flex-direction: column;
  align-items:    flex-end;
  gap:            8px;
}

.mp-cp-accent-swatches {
  display: flex;
  gap:     6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.mp-cp-accent-swatch {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  border:        2px solid rgba(255,255,255,0.0);
  cursor:        pointer;
  transition:    border-color 0.12s, transform 0.12s;
  flex-shrink:   0;
}

.mp-cp-accent-swatch:hover {
  border-color: rgba(255,255,255,0.5);
  transform:    scale(1.1);
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.mp-cp-tabs {
  display:     flex;
  gap:         2px;
  margin-bottom:12px;
  background:  rgba(0,0,0,0.2);
  border-radius:8px;
  padding:     3px;
}

.mp-cp-tab {
  flex:          1;
  padding:       6px 10px;
  border-radius: 6px;
  font-size:     var(--mp-font-size-sm, 12px);
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  cursor:        pointer;
  border:        none;
  background:    transparent;
  color:         rgba(255,255,255,0.50);
  transition:    background 0.12s, color 0.12s;
  white-space:   nowrap;
}

.mp-cp-tab:hover   { color: rgba(255,255,255,0.80); }
.mp-cp-tab.active  { background: rgba(255,255,255,0.10); color: var(--mp-menu-fg,#e8e8f0); }

/* ── Wallpaper panels ────────────────────────────────────────────────────── */

.mp-cp-wp-panel { display: none; }
.mp-cp-wp-panel.active { display: block; }

.mp-cp-color-swatches {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  margin-top:  4px;
}

.mp-cp-color-swatch {
  width:         34px;
  height:        34px;
  border-radius: 7px;
  border:        2px solid rgba(255,255,255,0.08);
  cursor:        pointer;
  transition:    border-color 0.12s, transform 0.12s;
}

.mp-cp-color-swatch:hover {
  border-color: rgba(255,255,255,0.40);
  transform:    scale(1.08);
}

.mp-cp-color-custom {
  display:     flex;
  align-items: center;
  justify-content:center;
  background:  rgba(255,255,255,0.06) !important;
  cursor:      pointer;
  color:       rgba(255,255,255,0.50);
}

.mp-cp-color-custom input { display: none; }

.mp-cp-gradient-presets {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   8px;
  margin-bottom:         4px;
}

.mp-cp-gradient-btn {
  height:        48px;
  border-radius: 8px;
  border:        1px solid rgba(255,255,255,0.08);
  cursor:        pointer;
  transition:    border-color 0.12s, transform 0.12s;
}

.mp-cp-gradient-btn:hover {
  border-color: var(--mp-accent,#4a9eff);
  transform:    scale(1.03);
}

/* ══════════════════════════════════════════════════════════════════════════
   EFEITOS — reduce motion banner
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-reduce-banner {
  display:     flex;
  align-items: center;
  gap:         16px;
  padding:     14px 16px;
  background:  rgba(255,255,255,0.04);
  border:      1px solid rgba(255,255,255,0.08);
  border-radius: var(--mp-menu-radius,8px);
  margin-bottom:20px;
  transition:  background 0.2s, border-color 0.2s;
}

.mp-cp-reduce-banner[data-active="true"] {
  background:   rgba(var(--mp-accent-rgb,74,158,255),0.08);
  border-color: rgba(var(--mp-accent-rgb,74,158,255),0.25);
}

.mp-cp-reduce-text {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.mp-cp-reduce-text strong {
  font-size:  13px;
  color:      rgba(255,255,255,0.90);
}

.mp-cp-reduce-text small {
  font-size:  11px;
  color:      rgba(255,255,255,0.45);
}

/* ── Preset grid ─────────────────────────────────────────────────────────── */

.mp-cp-preset-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
}

.mp-cp-preset-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  padding:        14px 10px;
  border:         1px solid rgba(255,255,255,0.08);
  border-radius:  10px;
  cursor:         pointer;
  background:     rgba(255,255,255,0.03);
  transition:     border-color 0.15s, background 0.15s;
  color:          rgba(255,255,255,0.70);
  font-family:    var(--mp-font-ui,system-ui,sans-serif);
  text-align:     center;
}

.mp-cp-preset-btn:hover {
  border-color: var(--mp-accent,#4a9eff);
  background:   rgba(var(--mp-accent-rgb,74,158,255),0.06);
  color:        var(--mp-menu-fg,#e8e8f0);
}

.mp-cp-preset-btn.active {
  border-color: var(--mp-accent,#4a9eff);
  background:   rgba(var(--mp-accent-rgb,74,158,255),0.12);
  color:        var(--mp-accent,#4a9eff);
}

.mp-cp-preset-icon { font-size: 20px; margin-bottom:2px; }
.mp-cp-preset-name { font-size: 12px; font-weight:600; }
.mp-cp-preset-btn small { font-size: 10px; opacity:.65; }

/* ══════════════════════════════════════════════════════════════════════════
   SONS — volume + banner info
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-info-banner {
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  padding:      12px 14px;
  background:   rgba(74,158,255,0.08);
  border:       1px solid rgba(74,158,255,0.18);
  border-radius:8px;
  margin-bottom:20px;
  color:        rgba(255,255,255,0.70);
  font-size:    var(--mp-font-size-sm,12px);
  line-height:  1.5;
}

.mp-cp-info-banner svg { flex-shrink:0; color: var(--mp-accent,#4a9eff); margin-top:1px; }

.mp-cp-volume-wrap {
  gap: 10px;
  min-width: 220px;
}

.mp-cp-volume-icon {
  display:     flex;
  align-items: center;
  color:       rgba(255,255,255,0.50);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA — info grid
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-info-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.mp-cp-info-item {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  padding:        10px 12px;
  background:     rgba(255,255,255,0.03);
  border:         1px solid rgba(255,255,255,0.06);
  border-radius:  7px;
}

.mp-cp-info-label {
  font-size:  10px;
  color:      rgba(255,255,255,0.35);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
}

.mp-cp-info-value {
  font-size:  12px;
  color:      rgba(255,255,255,0.80);
  font-weight:500;
}

/* ══════════════════════════════════════════════════════════════════════════
   RADIO BUTTONS (wallpaper fit)
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-radio {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   var(--mp-font-size-sm,12px);
  color:       rgba(255,255,255,0.65);
  cursor:      pointer;
}

.mp-cp-radio input {
  accent-color: var(--mp-accent,#4a9eff);
  cursor:       pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   AERO GLASS — cartão de controle dedicado (topo de Efeitos Visuais)
   ══════════════════════════════════════════════════════════════════════════ */

.mp-cp-aero-card {
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(
    160deg,
    rgba(var(--mp-accent-rgb, 74,158,255), 0.10) 0%,
    rgba(var(--mp-accent-rgb, 74,158,255), 0.04) 100%
  );
  overflow: hidden;
}

.mp-cp-aero-card[data-glass-on="true"] {
  border-color: rgba(var(--mp-accent-rgb, 74,158,255), 0.35);
  background: linear-gradient(
    160deg,
    rgba(var(--mp-accent-rgb, 74,158,255), 0.16) 0%,
    rgba(var(--mp-accent-rgb, 74,158,255), 0.06) 100%
  );
  box-shadow: 0 0 0 1px rgba(var(--mp-accent-rgb, 74,158,255), 0.15),
              inset 0 1px 0 rgba(255,255,255,0.10);
}

.mp-cp-aero-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     14px 16px 10px;
  gap:         12px;
}

.mp-cp-aero-title-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex:        1;
  min-width:   0;
}

.mp-cp-aero-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.mp-cp-aero-title {
  display:    block;
  font-size:  14px;
  font-weight: 700;
  color:      rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}

.mp-cp-aero-desc {
  display:   block;
  font-size: 11px;
  color:     rgba(255,255,255,0.45);
  line-height: 1.4;
  margin-top: 2px;
}

.mp-cp-aero-master-toggle {
  flex-shrink: 0;
}

/* ── Preview visual ─────────────────────────────────────────────────────── */

.mp-cp-aero-preview {
  margin:     0 16px 14px;
  height:     72px;
  border-radius: 7px;
  overflow:   hidden;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Crect x='0' y='0' width='20' height='20'/%3E%3Crect x='20' y='20' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E")
    #1a1d2e;
  display:     flex;
  align-items: center;
  justify-content: center;
  border:      1px solid rgba(255,255,255,0.08);
}

.mp-cp-aero-preview-win {
  width:        200px;
  height:       56px;
  border-radius: 6px;
  overflow:     hidden;
  background:   rgba(27, 30, 46, 0.88);
  border:       1px solid rgba(255,255,255,0.10);
  box-shadow:   0 4px 16px rgba(0,0,0,0.50);
  display:      flex;
  flex-direction: column;
  transition:   background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Glass ativo no preview */
.mp-cp-aero-preview-win.glass-on {
  background: rgba(27, 30, 46, 0.28);
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:   0 4px 16px rgba(0,0,0,0.50),
                inset 0 1px 0 rgba(255,255,255,0.32),
                inset 0 -1px 0 rgba(255,255,255,0.06);
}

.mp-cp-aero-preview-tb {
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  height:       22px;
  padding:      0 6px;
  font-size:    10px;
  color:        rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:   rgba(255,255,255,0.04);
  flex-shrink:  0;
  transition:   background 0.3s ease;
}

.mp-cp-aero-preview-win.glass-on .mp-cp-aero-preview-tb {
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 100%);
  border-bottom-color: rgba(255,255,255,0.14);
}

.mp-cp-aero-preview-btns {
  display: flex;
  gap:     4px;
}

.mp-cp-aero-preview-btns i {
  display:       block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.20);
}

.mp-cp-aero-preview-body {
  flex:    1;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.30);
}

/* ── Controles internos ──────────────────────────────────────────────────── */

.mp-cp-aero-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     8px 16px;
  border-top:  1px solid rgba(255,255,255,0.06);
}

.mp-cp-aero-row-label {
  flex:        1;
  min-width:   0;
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.mp-cp-aero-row-label span {
  font-size:   12px;
  font-weight: 500;
  color:       rgba(255,255,255,0.80);
}

.mp-cp-aero-row-label small {
  font-size:  10px;
  color:      rgba(255,255,255,0.38);
  line-height: 1.3;
}

/* ── Superfícies ──────────────────────────────────────────────────────────── */

.mp-cp-aero-surfaces {
  display:     flex;
  border-top:  1px solid rgba(255,255,255,0.06);
}

.mp-cp-aero-surface-item {
  flex:        1;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         6px;
  padding:     10px 8px;
  cursor:      pointer;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition:  background 0.15s;
}

.mp-cp-aero-surface-item:last-child {
  border-right: none;
}

.mp-cp-aero-surface-item:hover {
  background: rgba(255,255,255,0.04);
}

.mp-cp-aero-surface-item > span {
  font-size:  10px;
  color:      rgba(255,255,255,0.50);
  white-space: nowrap;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   SEÇÃO CONTA (cp-account.js) — Sprint 14
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.mp-cp-acct-avatar-section {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
  padding:         16px 0 20px;
}

.mp-cp-acct-avatar-wrap {
  position:        relative;
  width:           84px;
  height:          84px;
  border-radius:   50%;
  cursor:          pointer;
  flex-shrink:     0;
  overflow:        hidden;
}

.mp-cp-acct-avatar-preview {
  width:           100%;
  height:          100%;
  border-radius:   50%;
  background:      rgba(var(--mp-accent-rgb, 100,100,255), 0.20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           rgba(255,255,255,0.50);
  border:          2px solid rgba(255,255,255,0.10);
  overflow:        hidden;
}

.mp-cp-acct-avatar-overlay {
  position:         absolute;
  inset:            0;
  border-radius:    50%;
  background:       rgba(0,0,0,0.55);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              4px;
  color:            #fff;
  font-size:        10px;
  font-weight:      500;
  opacity:          0;
  transition:       opacity 0.18s;
  pointer-events:   none;
}

.mp-cp-acct-avatar-wrap:hover .mp-cp-acct-avatar-overlay {
  opacity: 1;
}

.mp-cp-acct-link-btn {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.40);
  font-size:   11px;
  cursor:      pointer;
  padding:     2px 4px;
  transition:  color 0.15s;
  font-family: var(--mp-font-ui, inherit);
}

.mp-cp-acct-link-btn:hover {
  color: rgba(220,60,60,0.85);
  text-decoration: underline;
}

/* ── Mensagens de feedback ───────────────────────────────────────────────── */
.mp-cp-acct-msg {
  padding:       8px 12px;
  border-radius: 5px;
  font-size:     12px;
  margin-top:    4px;
  line-height:   1.4;
}

.mp-cp-acct-msg-error {
  background: rgba(220,53,53,0.12);
  border:     1px solid rgba(220,53,53,0.28);
  color:      #e06060;
}

.mp-cp-acct-msg-success {
  background: rgba(39,174,96,0.10);
  border:     1px solid rgba(39,174,96,0.22);
  color:      #55cc80;
}

/* ── Rodapé de ação ─────────────────────────────────────────────────────── */
.mp-cp-acct-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
  padding-top:     16px;
  margin-top:      8px;
  border-top:      1px solid rgba(255,255,255,0.06);
}


/* ════════════════════════════════════════════════════════════════════════════
   SEÇÃO NUVEM (cp-cloud.js) — Sprint 14
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Subtítulo descritivo ─────────────────────────────────────────────────── */
.mp-cp-cloud-subtitle {
  font-size:   13px;
  color:       rgba(255,255,255,0.45);
  line-height: 1.5;
  margin:      0 0 4px;
}

/* ── Grid de serviços ─────────────────────────────────────────────────────── */
.mp-cp-cloud-services-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.mp-cp-cloud-service-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           72px;
  height:          76px;
  border:          1px solid rgba(255,255,255,0.10);
  border-radius:   8px;
  background:      rgba(255,255,255,0.03);
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, transform 0.12s;
  padding:         6px 4px;
  color:           inherit;
  font-family:     var(--mp-font-ui, inherit);
}

.mp-cp-cloud-service-btn:hover {
  background:   rgba(var(--mp-accent-rgb, 100,100,255), 0.12);
  border-color: rgba(var(--mp-accent-rgb, 100,100,255), 0.30);
  transform:    translateY(-1px);
}

.mp-cp-cloud-service-btn:active {
  transform: translateY(0);
}

.mp-cp-cloud-service-icon {
  width:  40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-cp-cloud-service-icon svg,
.mp-cp-cloud-service-icon img {
  width:  40px;
  height: 40px;
}

.mp-cp-cloud-service-label {
  font-size:   9.5px;
  color:       rgba(255,255,255,0.60);
  text-align:  center;
  line-height: 1.2;
  max-width:   68px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Banner "não implementado" (OAuth) ───────────────────────────────────── */
.mp-cp-cloud-notimpl-banner {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       10px 12px;
  border-radius: 6px;
  background:    rgba(100,149,237,0.10);
  border:        1px solid rgba(100,149,237,0.22);
  color:         rgba(255,255,255,0.75);
  font-size:     12px;
  line-height:   1.5;
  margin:        8px 0;
}

.mp-cp-cloud-notimpl-banner svg {
  flex-shrink: 0;
  margin-top:  2px;
  color:       rgba(100,149,237,0.85);
}

.mp-cp-cloud-notimpl-banner > span {
  flex: 1;
}

.mp-cp-cloud-banner-close {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.35);
  cursor:      pointer;
  font-size:   14px;
  padding:     0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition:  color 0.15s;
}

.mp-cp-cloud-banner-close:hover {
  color: rgba(255,255,255,0.75);
}

/* ── Cards de contas conectadas ──────────────────────────────────────────── */
.mp-cp-cloud-card {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 14px;
  border-radius: 8px;
  background:    rgba(255,255,255,0.04);
  border:        1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
  transition:    background 0.15s;
}

.mp-cp-cloud-card:hover {
  background: rgba(255,255,255,0.07);
}

.mp-cp-cloud-card-icon {
  width:    28px;
  height:   28px;
  flex-shrink: 0;
  display:  flex;
  align-items: center;
  justify-content: center;
}

.mp-cp-cloud-card-icon svg,
.mp-cp-cloud-card-icon img {
  width:  28px;
  height: 28px;
}

.mp-cp-cloud-card-info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.mp-cp-cloud-card-name {
  font-size:   13px;
  color:       rgba(255,255,255,0.85);
  font-weight: 500;
}

.mp-cp-cloud-card-email {
  font-size:     11px;
  color:         rgba(255,255,255,0.40);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.mp-cp-cloud-card-remove {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.30);
  cursor:      pointer;
  padding:     6px;
  border-radius: 4px;
  transition:  color 0.15s, background 0.15s;
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.mp-cp-cloud-card-remove:hover {
  color:       rgba(220,60,60,0.90);
  background:  rgba(220,60,60,0.10);
}

/* ── Estado vazio ────────────────────────────────────────────────────────── */
.mp-cp-cloud-empty {
  padding:    24px;
  text-align: center;
  color:      rgba(255,255,255,0.30);
  font-size:  13px;
  font-style: italic;
}

/* ── Formulário de credenciais manuais (dentro de janela nativa) ─────────── */
.mp-cp-cloud-form-row {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.mp-cp-cloud-form-label {
  font-size: 12px;
  color:     rgba(255,255,255,0.55);
}

.mp-cp-cloud-form-input {
  width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase 3.2 / 4.2 — Badge de status por conta (ok / warn / error)
   ══════════════════════════════════════════════════════════════════════════ */

.cp-cloud-account-badge {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  width:         16px;
  font-size:     14px;
  line-height:   1;
  cursor:        default;
  user-select:   none;
  transition:    color 0.2s ease;
}

/* Estado inicial — carregando */
.cp-cloud-account-badge--loading {
  color: rgba(255,255,255,0.20);
  animation: cp-badge-pulse 1.2s ease-in-out infinite;
}

@keyframes cp-badge-pulse {
  0%, 100% { opacity: 0.20; }
  50%       { opacity: 0.55; }
}

/* ● verde — conexão ativa */
.cp-cloud-account-badge--ok {
  color: #55cc80;
}

/* ● amarelo — token expirando em breve (< 10 min) */
.cp-cloud-account-badge--warn {
  color: #ffaa55;
}

/* ● vermelho — conexão inválida / token expirado */
.cp-cloud-account-badge--error {
  color: #ff6060;
}

/* Link "Reconectar" ao lado do badge vermelho / amarelo */
.cp-cloud-reconnect-link {
  display:         inline-flex;
  align-items:     center;
  margin-left:     4px;
  font-size:       10.5px;
  color:           var(--mp-accent, #4a9eff);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color 0.15s;
}

.cp-cloud-reconnect-link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   Fase 3.2 / 4.2 — Formulário inline de conexão para providers não-OAuth
   ══════════════════════════════════════════════════════════════════════════ */

.cp-cloud-form-inline {
  padding:       14px 16px;
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background:    rgba(255,255,255,0.02);
  margin-bottom: 16px;
}

.cp-cloud-form-inline .mp-providers-input {
  /* Herda o estilo de input da tela de providers */
  font-size: 12px;
}

/* Campos ocultos por padrão (pCloud modo toggle) */
.cp-cloud-form-inline [id$="-email-row"],
.cp-cloud-form-inline [id$="-pass-row"] {
  /* visibilidade controlada via style.display em JS */
}

/* Botão de fechar o formulário inline */
.cp-cloud-btn-disconnect {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 10px;
  border-radius: 6px;
  font-size:     11.5px;
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-weight:   500;
  cursor:        pointer;
  border:        1px solid rgba(255,255,255,0.10);
  background:    rgba(255,255,255,0.06);
  color:         rgba(255,255,255,0.60);
  white-space:   nowrap;
  transition:    background 0.12s, color 0.12s;
  flex-shrink:   0;
}

.cp-cloud-btn-disconnect:hover {
  background: rgba(220,60,60,0.12);
  color:      #ff7070;
  border-color: rgba(220,60,60,0.25);
}

.cp-cloud-btn-disconnect:active {
  opacity: 0.80;
}

.cp-cloud-btn-disconnect:disabled {
  opacity: 0.40;
  cursor:  not-allowed;
}

/* ── Modal de confirmação sobreposto ao card (Fase 3.2c) ─────────────────── */

.mp-cp-cloud-card {
  /* Necessário para posicionar o overlay interno */
  position: relative;
}

.cp-cloud-confirm-overlay {
  position:         absolute;
  inset:            0;
  border-radius:    inherit;
  background:       rgba(14,14,26,0.94);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              10px;
  padding:          0 14px;
  z-index:          10;
  border:           1px solid rgba(220,60,60,0.25);
  border-radius:    8px;
  animation:        cp-confirm-appear 0.12s ease;
}

@keyframes cp-confirm-appear {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.cp-cloud-confirm-text {
  font-size:  12px;
  color:      rgba(255,255,255,0.80);
  flex:       1;
  min-width:  0;
  line-height: 1.4;
}

.cp-cloud-confirm-text strong {
  color: rgba(255,255,255,0.95);
}

.cp-cloud-confirm-btns {
  display:    flex;
  gap:        6px;
  flex-shrink:0;
}

/* Botão "Desconectar" nos cards de conta — estilo visual de ação */
.mp-cp-cloud-card .cp-cloud-btn-disconnect {
  padding: 4px 9px;
}

/* ── Service buttons — estado indisponível ───────────────────────────────── */

.mp-cp-cloud-service-btn.is-unavailable {
  opacity: 0.38;
  cursor:  not-allowed;
  filter:  grayscale(0.6);
}