/* Afinador Vocal — 10+ Design System */
:root{
  /* cor */
  --brand:#FFC00F; --brand-700:#D99F00; --on-brand:#15161A;
  --ink:#15161A; --n-900:#1F2024; --n-700:#3A3B40; --n-500:#6B6C72;
  --n-300:#C9CACE; --n-200:#E5E6E9; --n-100:#F2F3F5; --paper:#FFFFFF;
  --success:#1FA971; --danger:#E5484D; --info:#3B82F6;

  /* tipografia */
  --font-display:'Sora',system-ui,sans-serif;
  --font-ui:'Inter',system-ui,sans-serif;

  /* raio */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* sombra */
  --shadow-sm:0 1px 2px rgba(21,22,26,.06);
  --shadow-md:0 8px 24px rgba(21,22,26,.08);
  --shadow-lg:0 24px 60px rgba(21,22,26,.12);

  --maxw:1080px;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--n-100);
  -webkit-font-smoothing:antialiased;line-height:1.55;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em;margin:0;}

/* topo */
.topbar{background:var(--ink);color:var(--paper);padding:28px 20px;}
.topbar-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:20px;align-items:center;}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1;
  background:var(--brand);color:var(--on-brand);border-radius:var(--r-md);
  padding:10px 12px;flex-shrink:0;}
.logo-plus{font-weight:800;}
.app-title{font-size:1.75rem;color:var(--paper);}
.app-sub{margin:6px 0 0;color:#B9BAC0;font-size:.9375rem;max-width:56ch;}
.mark{background:linear-gradient(transparent 62%, rgba(255,192,15,.85) 0);
  padding:0 .1em;color:var(--paper);}
.nav{display:flex;gap:8px;margin-left:auto;flex-shrink:0;}
.nav a{font-family:var(--font-ui);font-weight:600;font-size:.9375rem;text-decoration:none;
  padding:10px 18px;border-radius:var(--r-md);color:#B9BAC0;border:1px solid #3A3B40;
  transition:.18s ease-out;}
.nav a:hover{color:var(--paper);border-color:var(--n-500);}
.nav a.active{background:var(--brand);color:var(--on-brand);border-color:var(--brand);}

/* layout */
.container{max-width:var(--maxw);margin:0 auto;padding:32px 20px 48px;display:flex;
  flex-direction:column;gap:24px;}

.card{background:var(--paper);border:1px solid var(--n-200);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:28px;}
.card-title{font-size:1.375rem;margin-bottom:20px;display:flex;align-items:center;gap:12px;}
.step{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:var(--r-pill);background:var(--brand);color:var(--on-brand);
  font-family:var(--font-ui);font-weight:600;font-size:.9375rem;flex-shrink:0;}

/* dropzone */
.dropzone{border:2px dashed var(--n-300);border-radius:var(--r-md);padding:32px 24px;
  text-align:center;color:var(--n-700);cursor:pointer;transition:.18s ease-out;}
.dropzone:hover,.dropzone:focus-visible,.dropzone.drag{border-color:var(--brand);
  background:rgba(255,192,15,.06);outline:none;}
.dz-main{margin:10px 0 4px;font-weight:500;color:var(--ink);}
.dz-hint{margin:0;font-size:.875rem;color:var(--n-500);}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:14px;flex-wrap:wrap;}
.file-info{margin:0;font-size:.9375rem;color:var(--n-700);}
.file-info b{color:var(--ink);}

/* controles */
.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 24px;}
.field label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.875rem;font-weight:500;color:var(--n-700);margin-bottom:8px;}
.field label b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.field-hint{margin:6px 0 0;font-size:.8125rem;color:var(--n-500);}
.input{border:1px solid var(--n-300);border-radius:var(--r-md);padding:11px 14px;
  font-family:var(--font-ui);font-size:1rem;width:100%;background:var(--paper);color:var(--ink);}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(255,192,15,.35);}

input[type=range]{width:100%;accent-color:var(--brand);height:28px;}

/* botões */
.btn{font-family:var(--font-ui);font-weight:600;border-radius:var(--r-md);font-size:.9375rem;
  padding:12px 20px;border:0;cursor:pointer;transition:.18s ease-out;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}
.btn-primary{background:var(--brand);color:var(--on-brand);}
.btn-primary:hover:not(:disabled){background:var(--brand-700);transform:translateY(-2px);}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-secondary:hover:not(:disabled){background:var(--n-100);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--n-700);border:1px solid var(--n-300);}
.btn-ghost:hover:not(:disabled){border-color:var(--n-700);color:var(--ink);}

/* progresso */
.progress-wrap{margin-bottom:18px;}
.progress-track{height:8px;background:var(--n-200);border-radius:var(--r-pill);overflow:hidden;}
.progress-bar{height:100%;width:0%;background:var(--brand);border-radius:var(--r-pill);
  transition:width .15s ease-out;}
.status-text{margin:8px 0 0;font-size:.875rem;color:var(--n-700);}

/* ===== editor de notas ===== */
.editor{position:relative;}
.editor.maximized{position:fixed;inset:0;z-index:60;background:var(--paper);
  border-radius:0;padding:16px 20px;margin:0;display:flex;flex-direction:column;
  border:none;box-shadow:none;overflow:hidden;}
.editor.maximized .roll-wrap{flex:1;min-height:0;}
.editor.maximized .roll{height:100%;}
.editor.maximized .card-title{margin-bottom:12px;}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.tbtn{font-family:var(--font-ui);font-weight:600;font-size:.875rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--n-300);border-radius:var(--r-sm);
  padding:8px 12px;cursor:pointer;transition:.15s ease-out;line-height:1;}
.tbtn:hover:not(:disabled){border-color:var(--n-700);}
.tbtn:disabled{opacity:.4;cursor:not-allowed;}
.tbtn.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.toolbar-spacer{flex:1;}
.shortcuts{font-size:.75rem;color:var(--n-500);}
.shortcuts kbd{font-family:var(--font-ui);background:var(--n-100);border:1px solid var(--n-200);
  border-radius:4px;padding:1px 5px;font-size:.7rem;}

.roll-wrap{position:relative;border:1px solid var(--n-200);border-radius:var(--r-md);
  overflow:hidden;background:var(--paper);}
.roll{display:block;width:100%;height:440px;touch-action:none;}
.roll-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--n-500);font-size:.9375rem;background:
    repeating-linear-gradient(0deg,var(--paper) 0 27px,var(--n-100) 27px 28px);}

.miniplay{position:absolute;top:30px;left:64px;z-index:5;width:44px;height:44px;
  border-radius:var(--r-pill);border:0;background:var(--brand);color:var(--on-brand);
  font-size:1rem;cursor:pointer;box-shadow:var(--shadow-md);transition:.15s ease-out;
  display:flex;align-items:center;justify-content:center;}
.miniplay:hover:not(:disabled){background:var(--brand-700);}
.miniplay:disabled{opacity:.4;cursor:not-allowed;}

.legend{display:flex;gap:20px;flex-wrap:wrap;margin:14px 2px 0;font-size:.8125rem;color:var(--n-700);}
.lg{display:inline-flex;align-items:center;gap:7px;}
.sw{display:inline-block;width:18px;height:8px;border-radius:3px;}
.sw-orig{background:var(--n-500);height:3px;}
.sw-note{background:rgba(255,192,15,.55);border:1px solid var(--brand-700);}
.sw-sel{background:rgba(255,192,15,.9);border:2px solid var(--ink);}
.sw-corr{background:var(--ink);height:3px;}

/* transporte */
.transport{display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap;}
.transport-spacer{flex:1;}

.foot{text-align:center;color:var(--n-500);font-size:.8125rem;max-width:64ch;margin:0 auto;}

@media (max-width:820px){
  .controls-grid{grid-template-columns:1fr;}
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:14px;}
  .nav{margin-left:0;}
  .transport-spacer{display:none;}
  .transport .btn{flex:1 1 45%;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}