:root{
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8; --zinc-400:#a1a1aa;
  --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46; --zinc-800:#27272a; --zinc-900:#18181b;
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --text:#18181b; --text-muted:#71717a;
  --border:#e4e4e7; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --radius: 14px;
  --star:#f5b400;
}
[data-theme="dark"]{
  --bg:#111113; --surface:#1c1c1f; --surface-2:#232327; --text:#f4f4f5; --text-muted:#a1a1aa;
  --border:#2e2e33; --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh;
  transition:background .2s ease,color .2s ease;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--teal-200,#99f6e4);}

/* ---------- Layout ---------- */
.app-shell{min-height:100vh; display:flex; flex-direction:column;}
.container{max-width:1180px; margin:0 auto; padding:0 20px;}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.02em;}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px;
  box-shadow:var(--shadow);
}
.nav-links{display:flex; align-items:center; gap:4px;}
.nav-link{
  padding:8px 14px; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--text-muted);
  transition:.15s;
}
.nav-link:hover{background:var(--surface-2); color:var(--text);}
.nav-link.active{background:var(--teal-50); color:var(--teal-700);}
[data-theme="dark"] .nav-link.active{background:rgba(45,212,191,.12); color:var(--teal-400);}
.nav-right{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:16px;
  transition:.15s;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.btn-primary{
  background:linear-gradient(135deg,var(--teal-500),var(--teal-600)); color:#fff; border:none;
  padding:10px 18px; border-radius:10px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 8px rgba(13,148,136,.28);
  transition:.15s;
}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn-secondary{
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  padding:10px 18px; border-radius:10px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px;
  transition:.15s;
}
.btn-secondary:hover{background:var(--surface-2);}
.btn-danger{
  background:#fef2f2; color:#dc2626; border:1px solid #fecaca; padding:8px 14px; border-radius:9px; font-weight:700; font-size:13px;
}
[data-theme="dark"] .btn-danger{background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.3); color:#f87171;}
.btn-ghost{background:transparent; border:none; color:var(--text-muted); font-weight:600; padding:8px 12px; border-radius:9px;}
.btn-ghost:hover{background:var(--surface-2); color:var(--text);}
.mobile-menu-btn{display:none;}

/* hamburger for small screens */
@media (max-width:860px){
  .nav-links{display:none;}
  .mobile-menu-btn{display:flex;}
  .nav-links.open{
    display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; background:var(--surface);
    border-bottom:1px solid var(--border); padding:10px 20px 16px; gap:4px; box-shadow:var(--shadow-md);
  }
}

/* ---------- Page ---------- */
.page{padding:32px 0 80px; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.page-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.page-title{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px;}
.page-subtitle{color:var(--text-muted); font-size:14.5px; margin:0;}

.section-divider{display:flex; align-items:center; gap:14px; margin:28px 0 16px;}
.section-divider .line{flex:1; height:1px; background:linear-gradient(to right, transparent, var(--border), transparent);}
.section-divider span{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--text-muted); white-space:nowrap;}

/* ---------- Cards / Grid ---------- */
.grid-perfumes{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px;}
.perfume-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:.2s; cursor:pointer; display:flex; flex-direction:column;
}
.perfume-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal-400);}
.perfume-card-img{
  aspect-ratio:1/1; background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden;
  position:relative;
}
.perfume-card-img img{width:100%; height:100%; object-fit:cover;}
.perfume-card-img .ph{font-size:40px; opacity:.25;}
.perfume-card-rating{
  position:absolute; top:8px; right:8px; background:rgba(0,0,0,.65); color:#fff; font-size:12px; font-weight:700;
  padding:3px 8px; border-radius:20px; display:flex; align-items:center; gap:4px; backdrop-filter:blur(4px);
}
.perfume-card-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:4px; flex:1;}
.perfume-card-brand{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--teal-600);}
[data-theme="dark"] .perfume-card-brand{color:var(--teal-400);}
.perfume-card-name{font-size:15px; font-weight:700; line-height:1.3;}
.perfume-card-year{font-size:12px; color:var(--text-muted); margin-top:auto; padding-top:6px;}
.accord-mini{display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;}
.accord-chip{
  font-size:10px; font-weight:700; padding:2.5px 8px; border-radius:20px; color:#fff; white-space:nowrap;
}
.card-actions{display:flex; gap:6px; padding:0 14px 14px;}
.card-actions button{flex:1; font-size:12px; padding:7px 0; border-radius:8px; font-weight:700;}

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center; padding:70px 20px; color:var(--text-muted); border:1.5px dashed var(--border); border-radius:var(--radius);
  background:var(--surface);
}
.empty-state .ic{font-size:44px; margin-bottom:14px; opacity:.5;}
.empty-state h3{color:var(--text); margin:0 0 6px; font-size:17px;}
.empty-state p{margin:0 0 18px; font-size:14px;}

/* ---------- Profile ---------- */
.profile-hero{
  display:flex; align-items:center; gap:22px; background:linear-gradient(135deg, var(--teal-600), var(--teal-700));
  border-radius:18px; padding:28px 30px; color:#fff; margin-bottom:28px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.profile-hero::after{
  content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.14), transparent 55%);
}
.profile-avatar{
  width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; border:3px solid rgba(255,255,255,.35); flex-shrink:0;
}
.profile-info{position:relative; z-index:1;}
.profile-name-row{display:flex; align-items:center; gap:10px;}
.profile-name{font-size:22px; font-weight:800; margin:0;}
.profile-name-input{
  font-size:22px; font-weight:800; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff;
  border-radius:8px; padding:2px 10px; font-family:inherit;
}
.profile-tag{font-size:13.5px; opacity:.9; margin-top:3px;}
.stats-row{display:flex; gap:28px; margin-left:auto; position:relative; z-index:1; flex-wrap:wrap;}
.stat-box{text-align:center;}
.stat-num{font-size:24px; font-weight:800;}
.stat-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.85;}

.family-bars{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:28px;}
.family-bar-row{display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:13px;}
.family-bar-row:last-child{margin-bottom:0;}
.family-bar-label{width:110px; flex-shrink:0; font-weight:600; color:var(--text-muted);}
.family-bar-track{flex:1; height:9px; background:var(--surface-2); border-radius:6px; overflow:hidden;}
.family-bar-fill{height:100%; border-radius:6px; transition:width .5s ease;}
.family-bar-pct{width:40px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums;}

/* ---------- Toolbar / Search / Filters ---------- */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; align-items:center;}
.search-input{
  flex:1; min-width:220px; padding:11px 16px; border-radius:11px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-size:14px;
}
.search-input:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(20,184,166,.15);}
.select-input{padding:11px 14px; border-radius:11px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14px;}
.chip-filter{
  padding:7px 13px; border-radius:20px; border:1px solid var(--border); background:var(--surface); font-size:12.5px; font-weight:600;
  color:var(--text-muted);
}
.chip-filter.active{background:var(--teal-600); border-color:var(--teal-600); color:#fff;}

/* ---------- Form ---------- */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.form-group label{font-size:13px; font-weight:700; color:var(--text-muted);}
.form-group input[type=text], .form-group input[type=number], .form-group input[type=url], .form-group textarea{
  padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14.5px;
  font-family:inherit;
}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(20,184,166,.15);}
.hint{font-size:12px; color:var(--text-muted);}

.image-picker{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;}
.image-preview{
  width:120px; height:120px; border-radius:14px; background:var(--surface-2); border:1.5px dashed var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; font-size:30px; color:var(--text-muted);
}
.image-preview img{width:100%; height:100%; object-fit:cover;}
.image-picker-controls{flex:1; min-width:220px; display:flex; flex-direction:column; gap:8px;}

.star-picker{display:flex; gap:6px; align-items:center;}
.star-picker .star{font-size:26px; color:var(--zinc-300); transition:.1s;}
[data-theme="dark"] .star-picker .star{color:var(--zinc-700);}
.star-picker .star.filled{color:var(--star);}
.star-picker .star:hover{transform:scale(1.15);}
.rating-value{font-weight:700; margin-left:8px; color:var(--text-muted);}

/* Layer / notes picker */
.layer-block{border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:16px; background:var(--bg);}
.layer-title{display:flex; align-items:center; gap:9px; font-weight:800; font-size:14.5px; margin-bottom:12px;}
.layer-dot{width:10px; height:10px; border-radius:50%;}
.layer-dot.topo{background:#fbbf24;}
.layer-dot.coracao{background:#f472b6;}
.layer-dot.base{background:#78350f;}
.selected-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; min-height:0;}
.selected-chips:empty{display:none;}
.note-chip{
  display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:4px 6px 4px 4px; font-size:12.5px; font-weight:600;
}
.note-chip img{width:22px; height:22px; border-radius:50%; object-fit:cover;}
.note-chip button{background:none; border:none; color:var(--text-muted); font-size:14px; padding:0 3px; line-height:1;}
.note-chip button:hover{color:#dc2626;}
.note-search{width:100%; padding:9px 13px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13.5px; margin-bottom:10px;}
.cat-filter-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.note-results{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; max-height:260px; overflow-y:auto;
  padding:2px;
}
.note-option{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; padding:8px 5px; border-radius:10px;
  border:1.5px solid transparent; background:var(--surface); cursor:pointer; transition:.12s;
}
.note-option:hover{border-color:var(--teal-400);}
.note-option.selected{border-color:var(--teal-500); background:var(--teal-50);}
[data-theme="dark"] .note-option.selected{background:rgba(20,184,166,.12);}
.note-option img{width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--surface-2);}
.note-option span{font-size:11px; font-weight:600; line-height:1.2;}
.note-results-empty{grid-column:1/-1; text-align:center; padding:22px; color:var(--text-muted); font-size:13px;}

.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px; flex-wrap:wrap;}

/* ---------- Modal (detail view) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .18s ease;
}
.modal-box{
  background:var(--surface); border-radius:18px; max-width:640px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35); position:relative;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
  border:none; font-size:16px; display:flex; align-items:center; justify-content:center; z-index:2;
}
.modal-hero{display:flex; gap:20px; padding:26px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.modal-hero-img{width:130px; height:130px; border-radius:14px; overflow:hidden; background:var(--surface-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--text-muted);}
.modal-hero-img img{width:100%; height:100%; object-fit:cover;}
.modal-hero-info{flex:1; min-width:180px;}
.modal-brand{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--teal-600);}
[data-theme="dark"] .modal-brand{color:var(--teal-400);}
.modal-title{font-size:22px; font-weight:800; margin:2px 0 6px;}
.modal-year{font-size:13px; color:var(--text-muted);}
.modal-stars{margin-top:10px;}
.modal-body{padding:22px 26px 28px;}
.pyramid-layer{margin-bottom:20px;}
.pyramid-layer:last-child{margin-bottom:0;}
.pyramid-layer h4{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--text-muted); margin:0 0 10px;
  display:flex; align-items:center; gap:8px;
}
.pyramid-notes{display:flex; flex-wrap:wrap; gap:10px;}
.pyramid-note{display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; text-align:center;}
.pyramid-note img{width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); background:var(--surface-2);}
.pyramid-note span{font-size:10.5px; font-weight:600; line-height:1.25;}

/* stars readonly */
.stars-readonly{display:inline-flex; gap:2px; color:var(--star); font-size:16px;}
.stars-readonly .empty{color:var(--zinc-300);}
[data-theme="dark"] .stars-readonly .empty{color:var(--zinc-700);}

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--zinc-900); color:#fff;
  padding:12px 22px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:200;
  opacity:0; pointer-events:none; transition:.25s;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

footer{margin-top:auto; border-top:1px solid var(--border); padding:22px 0; text-align:center; color:var(--text-muted); font-size:12.5px;}

::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--zinc-300); border-radius:6px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--zinc-700);}

/* ================================================================
   Laboratório: abas do modal, acordes e tabelas de fórmula
   ================================================================ */
.modal-tabs{
  display:flex; gap:4px; padding:12px 26px 0; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); z-index:3;
}
.modal-tab{
  border:none; background:transparent; color:var(--text-muted); font-weight:700; font-size:14px;
  padding:10px 14px; border-radius:10px 10px 0 0; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.modal-tab:hover{color:var(--text); background:var(--surface-2);}
.modal-tab.active{color:var(--teal-700); border-bottom-color:var(--teal-500);}
[data-theme="dark"] .modal-tab.active{color:var(--teal-400);}

.lab-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.lab-count{font-size:12.5px; color:var(--text-muted); margin-left:auto;}
.lab-field{margin-bottom:20px;}
.lab-field label{display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); margin-bottom:6px;}
.lab-textarea{
  width:100%; padding:11px 14px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; line-height:1.5; resize:vertical;
}
.lab-textarea:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(20,184,166,.15);}
.lab-textarea.slim{margin-top:10px; font-size:13px; background:var(--surface-2);}

.lab-empty{
  text-align:center; padding:38px 20px; color:var(--text-muted);
  border:1.5px dashed var(--border); border-radius:var(--radius); background:var(--surface);
}
.lab-empty .ic{font-size:34px; margin-bottom:8px;}
.lab-empty h4{margin:0 0 6px; color:var(--text); font-size:15.5px;}
.lab-empty p{margin:0 auto; max-width:42ch; font-size:13.5px; line-height:1.5;}

/* --- cartão de acorde --- */
.accord-card{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:16px; margin-bottom:16px; box-shadow:var(--shadow);
}
.accord-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.accord-icon{
  width:42px; height:42px; border-radius:11px; overflow:hidden; flex-shrink:0;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:20px;
}
.accord-icon img{width:100%; height:100%; object-fit:cover;}
.accord-head-main{flex:1; min-width:0;}
.accord-index{display:block; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--text-muted); text-transform:uppercase;}
.accord-name{
  width:100%; border:none; background:transparent; color:var(--text);
  font-family:inherit; font-size:17px; font-weight:800; letter-spacing:-.01em; padding:2px 0;
  border-bottom:1px dashed transparent;
}
.accord-name::placeholder{font-weight:600; color:var(--text-muted);}
.accord-name:hover{border-bottom-color:var(--border);}
.accord-name:focus{outline:none; border-bottom-color:var(--teal-500);}
.accord-head-actions{display:flex; gap:6px; flex-shrink:0;}
.icon-btn.sm{width:32px; height:32px; font-size:14px; border-radius:9px;}
.icon-btn.sm.danger:hover{color:#dc2626; border-color:#fecaca; background:#fef2f2;}
[data-theme="dark"] .icon-btn.sm.danger:hover{background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.3); color:#f87171;}

.accord-table-wrap{overflow-x:auto; border-top:1px solid var(--border);}
.accord-table{width:100%; border-collapse:collapse; font-size:14px; min-width:320px;}
.accord-table th{
  text-align:left; font-size:12.5px; font-weight:700; color:var(--text-muted);
  padding:9px 8px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.accord-table th.num, .accord-table td.num{text-align:right;}
.accord-table th.act, .accord-table td.act{width:34px;}
.accord-table td{padding:2px 4px; border-bottom:1px solid var(--border);}
.accord-table tfoot td{
  padding:10px 8px; font-weight:800; border-bottom:none; border-top:1.5px solid var(--border);
}
.accord-table tfoot td.num.off{color:#d97706;}
.accord-table .cell{
  width:100%; border:none; background:transparent; color:var(--text);
  font-family:inherit; font-size:14px; padding:9px 4px; border-radius:6px;
}
.accord-table .cell:focus{outline:none; background:var(--surface-2); box-shadow:inset 0 0 0 1.5px var(--teal-500);}
.accord-table .cell.num{text-align:right;}
.row-del{
  width:26px; height:26px; border-radius:7px; border:none; background:transparent;
  color:var(--text-muted); font-size:17px; line-height:1; opacity:0; transition:.12s;
}
.accord-table tr:hover .row-del, .row-del:focus{opacity:1;}
.row-del:hover{background:#fef2f2; color:#dc2626;}
[data-theme="dark"] .row-del:hover{background:rgba(220,38,38,.14); color:#f87171;}

.accord-foot{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.btn-secondary.sm, .btn-ghost.sm{padding:7px 13px; font-size:13px; border-radius:9px;}

.perfume-card-formula{font-size:12px; color:var(--text-muted); margin-top:6px;}

/* --- seletor de acordes --- */
.picker-overlay{z-index:120;}
.picker-box{max-width:620px; display:flex; flex-direction:column; max-height:86vh;}
.picker-head{padding:22px 26px 14px; border-bottom:1px solid var(--border);}
.picker-head h3{margin:0 0 4px; font-size:18px; font-weight:800;}
.picker-head p{margin:0 0 14px; font-size:13.5px; color:var(--text-muted); line-height:1.5; max-width:52ch;}
.picker-head .search-input{width:100%;}
.picker-results{padding:14px 26px; max-height:46vh;}
.picker-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 26px 20px; border-top:1px solid var(--border);
}
.picker-count{font-size:13px; color:var(--text-muted);}

@media (max-width:560px){
  .modal-tabs{padding:10px 16px 0;}
  .picker-head, .picker-results, .picker-foot{padding-left:16px; padding-right:16px;}
  .lab-count{margin-left:0; width:100%;}
}

/* ================================================================
   v2: acordes agrupados, camadas arrastáveis, coleções
   ================================================================ */
/* pilha de ícones do acorde */
.acc-stack{display:flex; align-items:center; position:relative; flex-shrink:0;}
.acc-ic{
  width:34px; height:34px; border-radius:10px; overflow:hidden; background:var(--surface-2);
  border:2px solid var(--surface); display:flex; align-items:center; justify-content:center;
  font-size:15px; margin-left:-10px; flex-shrink:0;
}
.acc-ic:first-child{margin-left:0;}
.acc-ic img{width:100%; height:100%; object-fit:cover;}
.acc-ic.more{background:var(--surface-2); color:var(--text-muted); font-weight:800; letter-spacing:1px;}
.acc-add{
  width:20px; height:20px; border-radius:50%; border:none; margin-left:6px; align-self:flex-end;
  background:var(--teal-500); color:#fff; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(13,148,136,.45);
}
.acc-add:hover{filter:brightness(1.08);}
/* tooltip com todos os acordes da fórmula */
.acc-stack[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute; left:0; top:calc(100% + 8px); z-index:20;
  background:var(--zinc-900); color:#fff; font-size:12px; line-height:1.45; font-weight:600;
  padding:8px 11px; border-radius:9px; max-width:260px; width:max-content; white-space:normal;
  box-shadow:var(--shadow-md); pointer-events:none;
}
[data-theme="dark"] .acc-stack[data-tip]:hover::after{background:#000; border:1px solid var(--border);}

/* --- aba pirâmide --- */
.pyr-layer{
  border:1.5px dashed transparent; border-radius:var(--radius); padding:10px 12px 12px; margin-bottom:14px;
  background:var(--surface-2); transition:.15s;
}
.pyr-layer h4{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:14px;}
.pyr-count{margin-left:auto; font-size:12px; font-weight:700; color:var(--text-muted);}
.pyr-accords{display:flex; flex-direction:column; gap:8px;}
.pyr-acc{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px;
  background:var(--surface); border:1px solid var(--border); cursor:pointer; transition:.14s;
}
.pyr-acc:hover{border-color:var(--teal-400); transform:translateX(2px);}
.pyr-acc-txt{display:flex; flex-direction:column; min-width:0;}
.pyr-acc-name{font-weight:700; font-size:14px;}
.pyr-acc-meta{font-size:12px; color:var(--text-muted);}
.pyr-drop-hint{font-size:13px; color:var(--text-muted); padding:12px; text-align:center; border:1.5px dashed var(--border); border-radius:11px;}
[data-drop-layer].drop-hover{border-color:var(--teal-500); background:var(--teal-50);}
[data-theme="dark"] [data-drop-layer].drop-hover{background:rgba(20,184,166,.10);}
.dragging{opacity:.45;}

/* --- aba fórmulas: camadas --- */
.lab-layer{
  border:1.5px dashed transparent; border-radius:var(--radius); padding:12px; margin-bottom:18px; background:var(--surface-2);
  transition:.15s;
}
.lab-layer-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.lab-layer-head h4{display:flex; align-items:center; gap:8px; margin:0; font-size:14px;}
.lab-layer-actions{display:flex; gap:6px; margin-left:auto;}
.lab-empty-layer{
  font-size:13px; color:var(--text-muted); text-align:center; padding:16px;
  border:1.5px dashed var(--border); border-radius:11px; background:var(--surface);
}
.acc-grip{
  cursor:grab; color:var(--text-muted); font-size:16px; padding:2px 4px; border-radius:6px; user-select:none; flex-shrink:0;
}
.acc-grip:active{cursor:grabbing;}
.acc-grip:hover{background:var(--surface-2); color:var(--text);}
.layer-select{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:9px; padding:6px 8px; font-family:inherit; font-size:12.5px; font-weight:600;
}
.accord-card{background:var(--surface);}
.accord-card.flash{box-shadow:0 0 0 2.5px var(--teal-500); }

/* --- coleções (playlists) --- */
.collection-row{margin-bottom:12px;}
.chip-filter.add{border-style:dashed; font-weight:700;}
.chip-x{
  margin-left:7px; opacity:.5; font-weight:800; padding:0 2px; border-radius:4px;
}
.chip-x:hover{opacity:1; color:#dc2626;}
.perfume-card-col{font-size:12px; color:var(--teal-600); font-weight:600; margin-top:4px;}
[data-theme="dark"] .perfume-card-col{color:var(--teal-400);}
.perfume-card.drop-target{border-color:var(--teal-500); box-shadow:0 0 0 2px rgba(20,184,166,.35);}
.picker-layers{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;}

/* ================================================================
   v3: pirâmide com tamanho por partes, medidor de 100 partes,
   perfil de acordes estilo Fragrantica
   ================================================================ */
.pyramid-layer{padding:4px 2px 10px; border:1.5px dashed transparent; border-radius:var(--radius); transition:.15s;}
.pyramid-layer .section-divider{margin:4px 0 14px;}
.pyramid-notes{justify-content:center; align-items:flex-end; gap:14px;}
.pyramid-note{width:auto; cursor:pointer; gap:7px; transition:transform .12s;}
.pyramid-note:hover{transform:translateY(-2px);}
.pyramid-note img{
  border-radius:12px; border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow); object-fit:cover;
}
.pyramid-note:hover img{border-color:var(--teal-400);}
.pyramid-note span{font-size:12px; font-weight:600; color:var(--text);}
.pyramid-note .pn-ph{
  display:flex; align-items:center; justify-content:center; border-radius:12px;
  border:1px dashed var(--border); background:var(--surface-2);
}
.pyramid-note.tile-target img, .pyramid-note.tile-target .pn-ph{outline:2.5px solid var(--teal-500); outline-offset:2px;}
.pyramid-note[draggable="true"]{cursor:grab;}
.pyramid-note[draggable="true"]:active{cursor:grabbing;}

/* perfil de acordes (barras) */
.pyr-profile{margin-bottom:22px;}
.frag-accords{display:flex; flex-direction:column; gap:5px;}
.frag-accord{display:flex; align-items:center; gap:8px;}
.frag-bar{
  height:22px; border-radius:6px; display:flex; align-items:center; padding:0 10px; min-width:64px;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.08);
}
.frag-bar span{
  font-size:11.5px; font-weight:800; color:#fff; letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.frag-val{font-size:11.5px; font-weight:700; color:var(--text-muted);}

/* medidor de 100 partes */
.meter{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:20px; box-shadow:var(--shadow);
}
.meter-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.meter-head h4{margin:0; font-size:15px; font-weight:800;}
.meter-total{font-size:12.5px; color:var(--text-muted);}
.meter-total.off strong{color:#d97706;}
.meter-row{display:flex; align-items:center; gap:10px; padding:5px 0;}
.meter-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.meter-name{
  width:150px; flex-shrink:0; font-size:13px; font-weight:600; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.meter-name:hover{color:var(--teal-600);}
.meter-name em{font-style:normal; font-size:11px; color:var(--text-muted); margin-left:6px;}
.meter-track{flex:1; height:10px; background:var(--surface-2); border-radius:6px; overflow:hidden; min-width:60px;}
.meter-fill{height:100%; border-radius:6px; transition:width .15s;}
.meter-input{
  width:58px; text-align:right; padding:6px 8px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:13px;
}
.meter-input:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(20,184,166,.15);}
.meter-pct{width:52px; text-align:right; font-size:12px; color:var(--text-muted); flex-shrink:0;}
.meter-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border);}

/* tipo de acorde no card */
.accord-meta{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;}
.kind-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.kind-select{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:9px; padding:5px 8px; font-family:inherit; font-size:12.5px; max-width:200px;
}
.accord-share-tag{font-size:12px; color:var(--text-muted); font-weight:600;}

@media (max-width:560px){
  .meter-name{width:110px;}
  .meter-pct{width:42px;}
}