/* Album Digital - Estilos Públicos */
:root {
  --mdm-pink:    #C8779A;
  --mdm-dark:    #3D2B3D;
  --mdm-bg:      #FFF8F0;
  --mdm-white:   #FFFFFF;
  --mdm-radius:  12px;
  --mdm-shadow:  0 4px 24px rgba(0,0,0,.1);
}

.mdm-album-app {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--mdm-bg);
  border-radius: var(--mdm-radius);
  box-shadow: var(--mdm-shadow);
}

/* Steps */
.mdm-steps { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.mdm-step  { flex:1; text-align:center; padding:8px 4px; border-radius:8px;
             background:#eee; font-size:13px; color:#666; transition:.2s; }
.mdm-step.active { background:var(--mdm-pink); color:#fff; font-weight:600; }

/* Panels */
.mdm-panel h2 { color:var(--mdm-dark); margin-bottom:16px; }

/* Inputs */
.mdm-input { display:block; width:100%; margin:4px 0 16px;
             padding:10px 14px; border:1px solid #ddd; border-radius:8px;
             font-size:15px; box-sizing:border-box; }
.mdm-input:focus { border-color:var(--mdm-pink); outline:none; box-shadow:0 0 0 3px rgba(200,119,154,.2); }
label { font-size:14px; font-weight:600; color:var(--mdm-dark); display:block; }

/* Upload area */
.mdm-upload-area { border:2px dashed var(--mdm-pink); border-radius:var(--mdm-radius);
                   padding:32px; text-align:center; cursor:pointer;
                   transition:.2s; margin:12px 0; }
.mdm-upload-area:hover { background:rgba(200,119,154,.06); }
.mdm-upload-icon { font-size:36px; display:block; margin-bottom:8px; }

/* Previews */
.mdm-previews { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.mdm-previews img { width:80px; height:80px; object-fit:cover;
                    border-radius:8px; border:2px solid var(--mdm-pink); }

/* Buttons */
.mdm-btn { display:inline-block; padding:12px 24px; border-radius:8px;
           font-size:15px; font-weight:600; cursor:pointer; border:none;
           text-decoration:none; transition:.2s; margin:4px 2px; }
.mdm-btn-primary  { background:var(--mdm-pink); color:#fff; }
.mdm-btn-primary:hover  { background:#b5628a; }
.mdm-btn-secondary { background:#fff; color:var(--mdm-pink); border:2px solid var(--mdm-pink); }
.mdm-btn-secondary:hover { background:var(--mdm-pink); color:#fff; }
.mdm-btn-outline  { background:transparent; color:var(--mdm-dark); border:2px solid var(--mdm-dark); }
.mdm-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Progress */
.mdm-progress { background:#eee; border-radius:8px; height:8px; margin:16px 0; overflow:hidden; }
#mdm-progress-bar { height:100%; width:0; background:var(--mdm-pink); transition:.3s; }

/* Error */
.mdm-error { color:#e53935; background:#fff3f3; padding:10px 14px;
             border-radius:8px; margin:8px 0; font-size:14px; }

/* Warning */
.mdm-warning { background:#fff8e1; padding:10px 14px; border-radius:8px;
               font-size:14px; color:#7c5200; margin:8px 0; }

/* Download btns */
.mdm-download-btns { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }

/* Support */
.mdm-support { font-size:13px; color:#666; margin-top:16px; }

/* Loading overlay */
.mdm-loading { position:fixed; inset:0; background:rgba(255,248,240,.85);
               display:flex; flex-direction:column; align-items:center;
               justify-content:center; z-index:9999; }
.mdm-spinner { width:48px; height:48px; border:4px solid #eee;
               border-top-color:var(--mdm-pink); border-radius:50%;
               animation:mdm-spin .8s linear infinite; }
@keyframes mdm-spin { to { transform:rotate(360deg); } }

/* Pages */
.mdm-page { display:flex; justify-content:center; align-items:center; min-height:60vh; padding:24px; }
.mdm-card { background:#fff; border-radius:var(--mdm-radius); box-shadow:var(--mdm-shadow);
            padding:40px 32px; text-align:center; max-width:480px; width:100%; }
.mdm-card .mdm-icon { font-size:48px; margin-bottom:16px; }
.mdm-card h1 { color:var(--mdm-dark); margin-bottom:12px; font-size:22px; }
.mdm-card p  { color:#666; line-height:1.6; margin-bottom:10px; }

@media(max-width:480px) {
  .mdm-album-app { padding:16px 10px; }
  .mdm-btn { width:100%; text-align:center; }
  .mdm-download-btns { flex-direction:column; }
}