/* =========================================================
   BON SAMPLE STORE — skin FL Studio
   ========================================================= */

:root{
  --bg-deep:      #17171a;
  --bg-desk:      #232326;
  --bg-panel:     #2e2e32;
  --line-dark:    #121215;
  --hi:           rgba(255,255,255,.07);

  --txt:          #c6c6cc;
  --txt-dim:      #85858e;
  --txt-bright:   #eeeef2;

  --accent:       #ff8a00;
  --accent-2:     #ffb04a;
  --accent-dim:   #7a4506;
  --led:          #6ee54f;
  --led-off:      #1d3417;
  --lcd:          #ffb03a;

  /* roxo = selecionado / ativo */
  --sel:          #a86bff;
  --sel-2:        #c79bff;
  --sel-dim:      #4a2680;
  --sel-escuro:   #20083d;
  --sel-soft:     rgba(168,107,255,.14);
  --red:          #e5453d;

  --h-toolbar:    46px;
  --h-hint:       22px;
  --w-browser:    206px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 50% -10%, #303036 0%, transparent 70%),
    var(--bg-deep);
  color:var(--txt);
  font:12px/1.45 "Segoe UI", Tahoma, Verdana, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;
}

.hidden{ display:none !important; }
.dim{ color:var(--txt-dim); }
.accent{ color:var(--accent); }

/* ================= TOOLBAR ================= */
#toolbar{
  height:var(--h-toolbar);
  display:flex; align-items:center;
  padding:0 8px;
  background:linear-gradient(#4a4a51 0%, #3a3a40 48%, #303036 52%, #2a2a2f 100%);
  border-bottom:1px solid var(--line-dark);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
  position:relative; z-index:50;
}
.tb-group{ display:flex; align-items:center; gap:6px; padding:0 10px; }
.tb-spacer{ flex:1; }
.tb-sep{
  width:1px; height:28px;
  background:linear-gradient(transparent, var(--line-dark) 20%, var(--line-dark) 80%, transparent);
  box-shadow:1px 0 0 rgba(255,255,255,.06);
}

.fl-logo{ display:flex; align-items:center; gap:8px; }
.fl-logo-mark{
  width:26px; height:26px; border-radius:5px;
  display:grid; place-items:center;
  font-weight:800; font-size:15px; color:#1a1a1c;
  background:linear-gradient(160deg, var(--accent-2), var(--accent) 60%, #c96b00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.6);
}
.fl-logo-text{ font-size:12px; letter-spacing:.10em; color:#b9b9c0; white-space:nowrap; }
.fl-logo-text b{ color:var(--txt-bright); font-weight:700; }

/* transporte */
.tp-btn{
  width:30px; height:26px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line-dark); border-radius:4px;
  background:linear-gradient(#55555c, #3d3d43);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.5);
}
.tp-btn svg{ width:14px; height:14px; fill:#d6d6dc; }
.tp-btn:hover{ background:linear-gradient(#60606a, #45454c); }
.tp-btn:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.6); }
.tp-btn.on svg{ fill:var(--led); filter:drop-shadow(0 0 4px rgba(110,229,79,.8)); }
.tp-loop svg{ fill:#84848e; }
.tp-loop.on svg{ fill:var(--accent-2); filter:drop-shadow(0 0 5px rgba(255,138,0,.75)); }

/* LCDs */
.lcd-panel{ display:flex; align-items:center; gap:7px; }
.lcd{
  display:flex; align-items:baseline; gap:5px;
  padding:3px 9px; min-width:62px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#141416, #1c1c20);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}
.lcd-val{
  font-family:"Share Tech Mono", ui-monospace, Consolas, monospace;
  font-size:17px; line-height:1; color:var(--lcd);
  text-shadow:0 0 8px rgba(255,176,58,.55);
}
.lcd-unit{ font-size:8px; letter-spacing:.12em; color:#6c5a3c; white-space:nowrap; }
.lcd-pos{ min-width:96px; }
.lcd-pos .lcd-val{ font-size:15px; color:#8fd6ff; text-shadow:0 0 8px rgba(143,214,255,.4); }
.lcd-pos .lcd-unit{ color:#3f5a6b; font-family:"Share Tech Mono",monospace; font-size:11px; }

.tb-vol{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-left:3px; }
.knob{
  width:26px; height:26px; border-radius:50%; cursor:ns-resize; position:relative; display:block;
  background:radial-gradient(circle at 50% 32%, #6b6b74, #3b3b42 62%, #26262b 100%);
  border:1px solid var(--line-dark);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.6);
}
.knob i{
  position:absolute; left:50%; top:3px;
  width:2px; height:9px; margin-left:-1px; border-radius:1px;
  background:var(--accent); box-shadow:0 0 5px rgba(255,138,0,.9);
  transform-origin:50% 10px;
}
.tb-vol-label{ font-size:7px; letter-spacing:.14em; color:var(--txt-dim); }

.win-btn{
  font:600 9.5px/1 "Segoe UI",sans-serif; letter-spacing:.11em;
  padding:7px 11px; cursor:pointer; color:#a9a9b2;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#4c4c53, #383840);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.win-btn:hover{ color:var(--txt-bright); }
.win-btn.active{
  color:var(--sel-escuro);
  background:linear-gradient(var(--sel-2), var(--sel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 0 10px rgba(168,107,255,.38);
}

.tb-cpu{ flex-direction:column; align-items:flex-end !important; gap:1px !important; }
.cpu-label{ font-size:7.5px; letter-spacing:.16em; color:var(--txt-dim); }
.cpu-val{
  font-family:"Share Tech Mono", monospace; font-size:15px; color:var(--led);
  text-shadow:0 0 7px rgba(110,229,79,.5); line-height:1;
}

/* ================= HINT BAR ================= */
#hintbar{
  height:var(--h-hint);
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:linear-gradient(#212124, #1a1a1d);
  border-bottom:1px solid var(--line-dark);
  font-size:10.5px; color:#9a9aa3; position:relative; z-index:40;
}
.hint-led{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--led); box-shadow:0 0 6px rgba(110,229,79,.85);
}
#hintText{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ================= LAYOUT ================= */
#desktop{ display:flex; height:calc(100vh - var(--h-toolbar) - var(--h-hint)); }

#browser{
  width:var(--w-browser); flex:none;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2b2b30, #232327);
  border-right:1px solid var(--line-dark);
  box-shadow:2px 0 8px rgba(0,0,0,.4);
}
.br-title{
  padding:7px 10px; font-size:9px; letter-spacing:.18em; color:#8e8e98;
  background:linear-gradient(#3d3d44, #2f2f35);
  border-bottom:1px solid var(--line-dark);
}
.br-search{ padding:8px; border-bottom:1px solid var(--line-dark); }
.br-search input{
  width:100%; padding:6px 8px; color:var(--txt);
  font:11px/1 "Segoe UI",sans-serif;
  border:1px solid var(--line-dark); border-radius:3px;
  background:#1a1a1e; box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
  outline:none;
}
.br-search input:focus{
  border-color:var(--accent-dim);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 1px rgba(255,138,0,.25);
}

.br-tree{ flex:1; overflow-y:auto; padding:6px 0; }
.br-node{
  display:flex; align-items:center; gap:7px;
  padding:5px 10px 5px 12px; cursor:pointer; font-size:11.5px; color:#b3b3bb;
}
.br-node:hover{ background:rgba(255,255,255,.05); color:var(--txt-bright); }
.br-node.active{
  background:linear-gradient(90deg, rgba(168,107,255,.24), rgba(168,107,255,.04));
  color:var(--sel-2);
  box-shadow:inset 3px 0 0 var(--sel);
}
.br-ico{
  width:13px; height:11px; flex:none; border-radius:2px 2px 2px 0;
  background:linear-gradient(#d8a441,#b3801f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;
}
.br-ico::before{
  content:""; position:absolute; top:-3px; left:0; width:6px; height:3px;
  border-radius:2px 2px 0 0; background:#c3903a;
}
.br-count{ margin-left:auto; font-size:9.5px; color:var(--txt-dim); }

.br-foot{
  padding:8px 10px; border-top:1px solid var(--line-dark);
  background:#1e1e22; font-size:10px;
}
.br-foot-line b{ color:var(--accent); }

#workspace{
  flex:1; position:relative; overflow:auto;
  background:
    radial-gradient(900px 520px at 40% 8%, rgba(255,255,255,.045), transparent 65%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px),
    var(--bg-desk);
}

/* ================= JANELAS ================= */
.fl-window{
  position:absolute;
  background:var(--bg-panel);
  border:1px solid var(--line-dark);
  border-radius:4px;
  box-shadow:0 10px 34px rgba(0,0,0,.62), inset 0 1px 0 var(--hi);
  overflow:hidden;
}
.fl-titlebar{
  display:flex; align-items:center; gap:7px;
  height:26px; padding:0 8px; cursor:move;
  background:linear-gradient(#5c5c65 0%, #4a4a52 46%, #3f3f47 54%, #37373e 100%);
  border-bottom:1px solid var(--line-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.fl-title{ font-size:11px; color:var(--txt-bright); font-weight:600; white-space:nowrap; }
.fl-title-dim{
  font-size:10.5px; color:#9a9aa4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fl-win-btns{ margin-left:auto; display:flex; gap:3px; }
.fl-x{
  width:18px; height:16px; padding:0; cursor:pointer; font-size:10px; line-height:1;
  color:#c9c9d0; border:1px solid var(--line-dark); border-radius:2px;
  background:linear-gradient(#54545c,#3f3f47);
}
.fl-x:hover{ background:linear-gradient(#d0554e,#a83a34); color:#fff; }

.tb-icon{
  width:13px; height:13px; flex:none; border-radius:3px;
  background:linear-gradient(150deg,#8d8d99,#5b5b66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.tb-icon.rack{ background:linear-gradient(150deg,var(--accent-2),#b35f00); }
.tb-icon.piano{ background:linear-gradient(150deg,#7ec8ff,#2b6f9e); }
.tb-icon.info{ background:linear-gradient(150deg,#b6b6c2,#63636e); }
.tb-icon.dl{ background:linear-gradient(150deg,#8ee87a,#2f8b1e); }

.fl-window-body{ padding:9px; background:linear-gradient(180deg,#333338, #2b2b30); }

/* ================= CHANNEL RACK ================= */
.rack-header{
  display:flex; align-items:flex-end; gap:8px;
  padding:0 4px 5px; margin-bottom:6px;
  border-bottom:1px solid var(--line-dark);
  font-size:8.5px; letter-spacing:.16em; color:var(--txt-dim);
}
.rack-h-name{ width:264px; flex:none; }
.rack-h-wave{ flex:1; }
.rack-h-meta{ width:120px; flex:none; text-align:right; }

.rack-list{ max-height:min(52vh, 460px); overflow-y:auto; padding-right:2px; }

.channel{
  display:flex; align-items:center; gap:8px;
  padding:5px 6px; margin-bottom:4px; border-radius:3px;
  background:linear-gradient(#3b3b41,#333339);
  border:1px solid #26262b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.channel:hover{ background:linear-gradient(#43434a,#39393f); }
.channel.selected{
  border-color:var(--sel-dim);
  box-shadow:inset 0 0 0 1px rgba(168,107,255,.34), 0 0 12px rgba(168,107,255,.16);
}
.channel.playing .ch-led{ background:var(--led); box-shadow:0 0 8px rgba(110,229,79,.95); }

.ch-led{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--led-off); border:1px solid #0d1a0a;
  transition:background .08s, box-shadow .08s;
}

.ch-play{
  width:26px; height:26px; flex:none; padding:0; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#54545d,#3e3e46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.ch-play svg{ width:12px; height:12px; fill:#d2d2d9; }
.ch-play .i-stop{ display:none; }
.ch-play:hover{ background:linear-gradient(#61616c,#4a4a53); }
.ch-play:hover svg{ fill:var(--accent-2); }
.channel.playing .ch-play{
  background:linear-gradient(var(--accent-2), var(--accent) 65%, #c96b00);
  border-color:#8a4c00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 10px rgba(255,138,0,.4);
}
.channel.playing .ch-play svg{ fill:#22160a; }
.channel.playing .ch-play .i-play{ display:none; }
.channel.playing .ch-play .i-stop{ display:block; }

.ch-name{
  width:230px; flex:none; cursor:pointer;
  padding:6px 9px; border-radius:3px;
  background:linear-gradient(#4b4b53,#3c3c43);
  border:1px solid #26262b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  display:flex; align-items:center; gap:7px; min-width:0;
}
.ch-name:hover{ background:linear-gradient(#56565f,#45454d); }
.ch-swatch{ width:4px; height:15px; border-radius:2px; flex:none; }
.ch-title{
  font-size:11.5px; color:#d6d6dd;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ch-name:hover .ch-title{ color:#fff; }
.channel.selected .ch-title{ color:var(--sel-2); }
.ch-tags{
  font-size:9px; color:var(--txt-dim); margin-left:auto; padding-left:6px;
  white-space:nowrap; flex:none;
}

/* forma de onda */
.ch-wave{
  flex:1; min-width:80px; height:38px; position:relative; cursor:pointer;
  border:1px solid #1b1b1f; border-radius:3px; overflow:hidden;
  background:linear-gradient(#26262b, #1e1e22);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
}
.ch-wave:hover{ border-color:#57575f; }
.ch-wave canvas{ display:block; width:100%; height:100%; }
.wave-head{
  position:absolute; top:0; bottom:0; width:1px; display:none;
  background:var(--led); box-shadow:0 0 7px rgba(110,229,79,.9);
  pointer-events:none;
}
.ch-dur{
  position:absolute; right:5px; bottom:3px;
  font-family:"Share Tech Mono",monospace; font-size:9.5px; color:#7d7d88;
  background:rgba(20,20,24,.75); padding:0 3px; border-radius:2px;
  pointer-events:none;
}

.ch-meta{ display:flex; gap:5px; flex:none; }
.m-bpm, .m-key{
  width:52px; padding:3px 5px; text-align:center; border-radius:3px;
  background:#1c1c20; border:1px solid var(--line-dark);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
  font-family:"Share Tech Mono",monospace; font-size:13px; color:var(--lcd);
  line-height:1.15;
}
.m-key{ color:#8fd6ff; }
.m-bpm i, .m-key i{
  display:block; font-style:normal; font-family:"Segoe UI",sans-serif;
  font-size:7px; letter-spacing:.12em; color:#5f5f68;
}

.ch-dl{
  width:26px; height:26px; flex:none; cursor:pointer; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#4d4d55,#3a3a41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  color:#b9b9c1; font-size:13px; line-height:1;
}
.ch-dl:hover{
  background:linear-gradient(#7ad35f,#3d8f28); color:#0f2409;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 10px rgba(110,229,79,.4);
}

.rack-footer{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line-dark);
  font-size:10px; color:var(--txt-dim);
}
.rack-tip b{ color:var(--accent); }

.rack-vazio{ padding:22px; text-align:center; color:var(--txt-dim); font-size:11.5px; }
.rack-erro{ padding:22px 14px; font-size:12px; line-height:1.6; color:#ff9d97; }
.rack-erro span{ color:#a3a3ac; }
.rack-erro code{
  display:inline-block; margin-top:8px; padding:6px 10px;
  background:#1a1a1e; border-radius:3px; color:#8fd0ff;
}
.rack-erro .detalhe{ color:#67676f; font-size:10.5px; }

/* ================= DETALHES (janela piano roll) ================= */
.piano-body{ padding:10px; }
.si-empty{ color:var(--txt-dim); font-size:11.5px; padding:26px 4px; text-align:center; }

.pr-onda{
  height:96px; position:relative; cursor:pointer; margin-bottom:11px;
  border:1px solid var(--line-dark); border-radius:3px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 40px),
    linear-gradient(#26262b, #1c1c20);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.7);
}
.pr-onda:hover{ border-color:#57575f; }
.pr-onda canvas{ display:block; width:100%; height:100%; }

.pr-cols{ display:flex; gap:11px; align-items:flex-start; }
.pr-esq{ flex:1; min-width:0; }
.pr-dir{
  width:268px; flex:none; padding:11px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#2a2a2f,#232328);
}

/* teclado da escala */
.kb-bloco{
  padding:9px 10px 10px; margin-bottom:10px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#2a2a2f,#232328);
}
.kb-titulo{ font-size:8.5px; letter-spacing:.15em; color:var(--txt-dim); margin-bottom:8px; }
.kb-titulo b{ color:var(--accent-2); letter-spacing:.04em; font-size:10px; }
.kb{
  position:relative; height:66px; border-radius:2px; overflow:hidden;
  background:#131316; border:1px solid var(--line-dark);
}
.kb-key{ position:absolute; top:0; }
.kb-key.white{
  height:100%; background:linear-gradient(#e8e8ee, #c4c4cc);
  border-right:1px solid #1a1a1e;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;
}
.kb-key.white span{ font-size:8px; color:#8a8a93; }
.kb-key.black{
  height:62%; z-index:2;
  background:linear-gradient(#3a3a42, #1a1a1e);
  border:1px solid #0e0e11; border-radius:0 0 2px 2px;
  box-shadow:0 2px 3px rgba(0,0,0,.6);
}
.kb-key.white.on{ background:linear-gradient(#ffd79a, var(--accent-2) 70%, #f09400); }
.kb-key.white.on span{ color:#5a3200; font-weight:600; }
.kb-key.black.on{ background:linear-gradient(#c47516, #8a4c00); border-color:#3a2100; }
.kb-key.white.root{
  background:linear-gradient(var(--sel-2), var(--sel) 65%, #7c3fd6);
  box-shadow:inset 0 0 0 1px var(--sel-dim);
}
.kb-key.white.root span{ color:var(--sel-escuro); font-weight:700; }
.kb-key.black.root{ background:linear-gradient(var(--sel), #6a2fbd); }
.kb-rodape{ margin-top:7px; font-size:9.5px; color:#67676f; }

.si-name{ font-size:14px; color:var(--txt-bright); font-weight:600; margin-bottom:2px; }
.si-author{ font-size:10.5px; color:var(--txt-dim); margin-bottom:11px; }
.si-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:11px; }
.si-cell{
  padding:5px 7px; border-radius:3px;
  background:#1c1c20; border:1px solid var(--line-dark);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.si-cell .k{ display:block; font-size:7.5px; letter-spacing:.14em; color:#67676f; }
.si-cell .v{
  font-family:"Share Tech Mono",monospace; font-size:14px; color:var(--lcd);
  text-shadow:0 0 6px rgba(255,176,58,.35);
}
.si-cell.wide{ grid-column:1 / -1; }
.si-cell.wide .v{ font-size:11px; color:#a9d8ff; text-shadow:none; font-family:inherit; }
.si-cell .ok{ color:var(--led); }
.si-cell .warn{ color:var(--accent-2); }

.si-desc{ font-size:11.5px; color:#a3a3ac; line-height:1.6; margin-bottom:9px; }
.si-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.si-tag{
  font-size:9.5px; padding:2.5px 8px; border-radius:9px;
  background:#33333a; border:1px solid #45454d; color:#a8a8b2;
}

/* ================= BOTÕES ================= */
.fl-btn{
  padding:9px 15px; cursor:pointer;
  font:600 10.5px/1 "Segoe UI",sans-serif; letter-spacing:.07em;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#50505a,#3c3c45); color:#d0d0d8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.fl-btn:hover{ background:linear-gradient(#5b5b66,#46464f); color:#fff; }
.fl-btn.primary{
  color:#22160a;
  background:linear-gradient(var(--accent-2), var(--accent) 60%, #d47100);
  border-color:#8a4c00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px rgba(255,138,0,.28);
}
.fl-btn.primary:hover{ background:linear-gradient(#ffc169, var(--accent-2) 60%, var(--accent)); }
.fl-btn.primary:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.fl-btn.wide{ width:100%; }
.fl-btn.ghost{ background:linear-gradient(#3f3f47,#33333a); }

/* ================= SOBRE ================= */
.about-body{ padding:16px 18px; font-size:12px; line-height:1.62; }
.about-body h3{ margin:0 0 8px; font-size:15px; color:var(--txt-bright); }
.about-body h4{ margin:14px 0 6px; font-size:12.5px; color:var(--txt-bright); }
.about-body p{ margin:0 0 9px; color:#adadb6; }
.about-list{ margin:0 0 10px; padding-left:17px; color:#adadb6; }
.about-list li{ margin-bottom:4px; }
.about-list b{ color:var(--led); }

/* ================= MODAL ================= */
#modalOverlay{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(2px);
}
.fl-modal{ position:relative; width:min(430px, calc(100vw - 32px)); }
.fl-modal .fl-titlebar{ cursor:default; }
.modal-body{ padding:14px 16px 16px; }

.dl-sample{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; margin-bottom:14px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#3a3a41,#2e2e34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.dl-led{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--led); box-shadow:0 0 8px rgba(110,229,79,.9);
}
.dl-sample-name{ font-size:12.5px; color:var(--txt-bright); font-weight:600; }
.dl-sample-sub{ font-size:10.5px; color:var(--txt-dim); margin-top:1px; }

.fld{ display:block; margin-bottom:12px; }
.fld-label{ display:block; font-size:8.5px; letter-spacing:.16em; color:var(--txt-dim); margin-bottom:5px; }
.fld input{
  width:100%; padding:9px 10px; color:var(--txt);
  font:12px/1 "Segoe UI",sans-serif;
  border:1px solid var(--line-dark); border-radius:3px;
  background:#1a1a1e; box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
  outline:none;
}
.fld input:focus{
  border-color:var(--accent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 2px rgba(255,138,0,.18);
}
.fld input.err{
  border-color:var(--red);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7), 0 0 0 2px rgba(229,69,61,.2);
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.disclaimer{
  padding:10px 11px; margin-bottom:14px;
  border:1px solid var(--accent-dim); border-radius:3px;
  background:linear-gradient(rgba(255,138,0,.10), rgba(255,138,0,.03));
}
.chk{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk-box{
  width:16px; height:16px; flex:none; margin-top:1px; border-radius:3px;
  border:1px solid var(--line-dark);
  background:linear-gradient(#3d3d45,#2c2c32);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
  position:relative;
}
.chk input:checked + .chk-box{
  background:linear-gradient(var(--accent-2), var(--accent));
  border-color:#8a4c00;
}
.chk input:checked + .chk-box::after{
  content:""; position:absolute; left:5px; top:1.5px;
  width:4px; height:8px; border:solid #22160a; border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
.chk input:focus-visible + .chk-box{ box-shadow:0 0 0 2px rgba(255,138,0,.4); }
.chk-text{ font-size:11px; line-height:1.5; color:#bdbdc5; }
.chk-text b{ color:var(--accent-2); }
.chk-text a{ color:#8fd0ff; }

.dl-actions{ display:flex; gap:8px; justify-content:flex-end; }

.dl-status{ margin-top:11px; font-size:11px; line-height:1.5; }
.dl-status code{ color:#8fd0ff; background:#1a1a1e; padding:1px 4px; border-radius:2px; }
.dl-status.ok{
  color:#9ff08a; padding:9px 11px; border-radius:3px;
  background:rgba(110,229,79,.10); border:1px solid rgba(110,229,79,.32);
}
.dl-status.err{
  color:#ff9d97; padding:9px 11px; border-radius:3px;
  background:rgba(229,69,61,.10); border:1px solid rgba(229,69,61,.32);
}
.dl-status.info{ color:var(--txt-dim); }

/* ================= SCROLLBARS ================= */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#1d1d21; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(#54545e,#3d3d46);
  border:1px solid var(--line-dark); border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#63636f,#4a4a55); }

/* ================= RESPONSIVO ================= */
@media (max-width: 1180px){
  .ch-name{ width:180px; }
  .rack-h-name{ width:214px; }
  .ch-tags{ display:none; }
}


/* selo dos itens de vitrine */
.ch-demo{
  font-size:7.5px; letter-spacing:.12em; flex:none;
  padding:2px 5px; border-radius:2px;
  background:#45454e; border:1px solid #55555f; color:#9a9aa4;
}

/* ---- teclado: tecla escolhida e leitura do tom ---- */
.kb-key{ cursor:pointer; }
.kb-key.white span b{ color:#c96b00; font-size:11px; line-height:0; margin-left:1px; }
.kb-key.white:hover{ background:linear-gradient(#fff, #d8d8e0); }
.kb-key.black:hover{ background:linear-gradient(#55555f, #2a2a32); }

.kb-key.white.sel span{ color:#12300a; font-weight:700; }





.kb-mudou b{ font-size:13px; }
.kb-mudou i{ color:var(--txt-dim); font-style:normal; font-size:10px; }
.kb-reset{
  padding:4px 9px; cursor:pointer; font:10px/1 "Segoe UI",sans-serif;
  color:#c9c9d0; border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#4a4a53,#38383f);
}
.kb-reset:hover{ background:linear-gradient(#57575f,#43434a); color:#fff; }

/* mostradores do topo avisam quando o tom foi mudado */
.lcd-val.mudado{ color:var(--sel-2); text-shadow:0 0 9px rgba(168,107,255,.6); }

/* botao para o site principal */
.site-link{
  display:inline-block; text-decoration:none; margin-right:10px;
  letter-spacing:.14em;
}
.site-link:hover{ color:var(--accent-2); border-color:var(--accent-dim); }

/* =========================================================
   CONTROLE DE PITCH (estilo Ableton)
   ========================================================= */
.pitch-bloco{
  padding:11px 12px 12px; margin-bottom:10px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:linear-gradient(#2a2a2f,#232328);
}
.pitch-topo{ display:flex; gap:16px; align-items:flex-start; margin-bottom:12px; }
.pitch-cx{ flex:none; width:184px; }

.pitch-label{
  font-size:8.5px; letter-spacing:.17em; color:var(--txt-dim);
  margin-bottom:6px;
}

/* a caixa de valor: plana, sem brilho, como no Ableton */
.pitch-box{
  display:grid; grid-template-columns:30px 1fr 30px;
  align-items:stretch;
  height:42px; cursor:ns-resize;
  border:1px solid #101014; border-radius:3px;
  background:#141418;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.75);
  overflow:hidden;
}
.pitch-box.arrastando{ border-color:var(--sel); box-shadow:inset 0 1px 3px rgba(0,0,0,.75), 0 0 10px rgba(168,107,255,.3); }

.pt-seta{
  padding:0; cursor:pointer; font-size:15px; line-height:1;
  color:#8d8d98; background:#1e1e23; border:none;
  border-right:1px solid #101014;
  font-family:"Segoe UI",sans-serif;
}
.pitch-box .pt-seta:last-child{ border-right:none; border-left:1px solid #101014; }
.pt-seta:hover{ background:#2b2b32; color:var(--accent-2); }
.pt-seta:active{ background:#141418; }

.pitch-val{
  display:flex; align-items:baseline; justify-content:center; gap:3px;
  font-family:"Share Tech Mono", ui-monospace, monospace;
}
.pitch-val b{
  font-size:23px; font-weight:400; color:var(--accent-2);
  text-shadow:0 0 10px rgba(255,176,58,.4);
  font-variant-numeric:tabular-nums;
}
.pitch-val i{ font-style:normal; font-size:10px; color:#6c5a3c; }

/* trilho com os sete degraus */
.pitch-track{ display:flex; gap:2px; margin-top:6px; }
.pt-tick{
  flex:1; height:22px; padding:0; cursor:pointer;
  border:1px solid #23232a; border-radius:2px;
  background:#1c1c21;
  display:grid; place-items:center;
}
.pt-tick i{
  font-style:normal; font-size:8.5px; color:#6a6a74;
  font-family:"Share Tech Mono",monospace;
}
.pt-tick.zero{ border-color:#3a3a44; }
.pt-tick:hover{ background:#2b2b33; }
.pt-tick:hover i{ color:#b6b6c0; }
.pt-tick.on{
  background:linear-gradient(var(--sel-2), var(--sel));
  border-color:var(--sel-dim);
  box-shadow:0 0 10px rgba(168,107,255,.35);
}
.pt-tick.on i{ color:var(--sel-escuro); font-weight:700; }

/* leitura antes -> depois */
.pitch-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.pi-row{
  display:grid; grid-template-columns:56px 1fr 14px 1fr;
  align-items:center; gap:6px;
  font-size:11.5px;
}
.pi-k{ font-size:8px; letter-spacing:.13em; color:#67676f; }
.pi-de{
  font-family:"Share Tech Mono",monospace; font-size:12.5px;
  color:var(--txt-dim); text-align:right;
}
.pi-seta{ color:#4d4d56; text-align:center; font-size:11px; }
.pi-para{
  font-family:"Share Tech Mono",monospace; font-size:13.5px;
  color:var(--txt-dim);
}
.pi-para.mudado{ color:var(--sel-2); text-shadow:0 0 8px rgba(168,107,255,.5); }

.pitch-info .kb-reset{ align-self:flex-start; margin-top:3px; }

/* a escala vira apenas consulta */
.kb-escala{ margin-bottom:2px; }
/* Teclado de uma oitava: sem teto de largura as teclas ficam mais largas
   que altas e param de parecer um piano. */
.kb-escala .kb{ height:86px; max-width:392px; }
.kb.readonly .kb-key{ cursor:default; pointer-events:none; }



/* volta para o site principal, no rodapé da janela Sobre */
.sobre-volta{ margin:14px 0 0 !important; padding-top:12px; border-top:1px solid var(--line-dark); }
.sobre-volta a{ color:var(--sel-2); text-decoration:none; font-size:12px; }
.sobre-volta a:hover{ text-decoration:underline; }

/* =========================================================
   JANELAS REDIMENSIONÁVEIS
   ========================================================= */
.fl-window.redimensionavel{ display:flex; flex-direction:column; }
.fl-window.redimensionavel .fl-titlebar{ flex:none; }
.fl-window.redimensionavel .fl-window-body{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.fl-window.redimensionavel .rack-list{ flex:1; min-height:0; max-height:none; }
.fl-window.redimensionavel .piano-body{ overflow-y:auto; }

/* alcinha do canto, no estilo do FL */
.fl-resize{
  position:absolute; right:0; bottom:0;
  width:17px; height:17px; z-index:6;
  cursor:nwse-resize;
  background:repeating-linear-gradient(
    -45deg,
    transparent 0 2px,
    rgba(255,255,255,.24) 2px 3px,
    transparent 3px 5px
  );
  border-bottom-right-radius:4px;
}
.fl-resize:hover{
  background:repeating-linear-gradient(
    -45deg,
    transparent 0 2px,
    var(--sel-2) 2px 3px,
    transparent 3px 5px
  );
}

/* =========================================================
   BOTÃO DE PASTAS (só no celular)
   ========================================================= */
.tb-menu{
  display:none;
  width:34px; height:30px; padding:0 8px; cursor:pointer;
  flex-direction:column; justify-content:center; gap:4px;
  border:1px solid var(--line-dark); border-radius:4px;
  background:linear-gradient(#55555c,#3d3d43);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  margin-right:8px;
}
.tb-menu span{
  display:block; height:2px; border-radius:1px;
  background:#d6d6dc; transition:transform .18s, opacity .18s;
}
.tb-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.tb-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.tb-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

#brFundo{
  position:fixed; inset:0; z-index:199;
  background:rgba(8,8,10,.6);
}

/* =========================================================
   TELA MÉDIA — a barra não cabe inteira entre 900 e 1150px
   ========================================================= */
@media (max-width: 1150px){
  .tb-cpu{ display:none; }          /* o contador já aparece no rodapé do browser */
  .tb-sep{ display:none; }
  .tb-group{ padding:0 6px; }
  .lcd{ min-width:56px; padding:3px 7px; }
  .lcd-pos{ min-width:88px; }
  .win-btn{ padding:7px 9px; letter-spacing:.08em; }
  .site-link{ padding:7px 9px; margin-right:4px; }
}

@media (max-width: 1000px){
  .fl-logo-text{ display:none; }    /* fica só a marca laranja */
  .lcd-val{ font-size:15px; }
}

/* =========================================================
   CELULAR
   ========================================================= */
@media (max-width: 900px){
  body{ overflow:auto; }

  #toolbar{ flex-wrap:wrap; height:auto; padding:7px 8px; gap:0; }
  .tb-menu{ display:flex; }
  .tb-sep, .tb-cpu, .tb-vol, .tb-windows{ display:none; }
  .tb-group{ padding:0 6px; }
  .tb-logo{ flex:1; }
  .lcd-panel{ order:3; width:100%; padding:7px 2px 2px; gap:6px; }
  .lcd{ flex:1; min-width:0; }
  .site-link{ margin-right:0; font-size:8.5px; padding:6px 8px; }

  #desktop{ display:block; height:auto; }

  /* ---- pastas viram gaveta ---- */
  #browser{
    position:fixed; left:0; top:0; bottom:0; z-index:200;
    width:min(268px, 82vw);
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:6px 0 26px rgba(0,0,0,.6);
    border-right:1px solid var(--line-dark);
  }
  #browser.aberto{ transform:none; }
  .br-tree{ max-height:none; }
  .br-node{ padding:11px 12px; font-size:13px; }

  /* ---- área de trabalho vira uma coluna só ---- */
  #workspace{ overflow:visible; padding:10px; background:none; }

  .fl-window{
    position:static !important;
    width:auto !important; height:auto !important;
    margin-bottom:12px;
  }
  .fl-titlebar{ cursor:default; }
  .fl-resize{ display:none; }
  .rack-header{ display:none; }
  .fl-window.redimensionavel .rack-list{ max-height:none; }

  /* ---- detalhes abrem por cima, não embaixo ---- */
  #winPiano:not(.hidden){
    position:fixed !important;
    /* o !important é preciso: as janelas ganham z-index inline ao virem
       para a frente, e no celular isso deixaria o overlay por baixo */
    inset:0; z-index:150 !important;
    margin:0; border:none; border-radius:0;
    display:flex; flex-direction:column;
  }
  #winPiano .fl-titlebar{ height:44px; flex:none; padding:0 6px 0 12px; }
  #winPiano .fl-title{ font-size:13px; }
  #winPiano .fl-x{ width:34px; height:30px; font-size:14px; }
  #winPiano .piano-body{ flex:1; min-height:0; overflow-y:auto; padding:12px; }
  #winPiano .pr-cols{ flex-direction:column; }
  #winPiano .pr-dir{ width:auto; }
  #winPiano .pr-onda{ height:110px; }

  /* ---- linhas de sample maiores para o dedo ---- */
  .channel{ flex-wrap:wrap; gap:9px; padding:9px 10px; }
  .ch-name{ width:auto; flex:1; min-width:120px; padding:9px; }
  .ch-play, .ch-dl{ width:34px; height:34px; }
  .ch-wave{ order:5; flex:1 0 100%; height:44px; }
  .ch-meta{ order:4; }
  .m-bpm, .m-key{ width:48px; }
  .ch-tags{ display:none; }

  .pitch-topo{ flex-direction:column; gap:12px; }
  .pitch-cx{ width:100%; }
  .pt-tick{ height:30px; }
  .pitch-box{ height:48px; }
  .kb-escala .kb{ max-width:none; height:78px; }
}

@media (max-width: 420px){
  .fl-logo-text{ display:none; }
  .m-bpm, .m-key{ width:44px; font-size:12px; }
}

/* trava o rolar do fundo quando algo cobre a tela no celular */
body.detalhes-abertos, body.gaveta-aberta{ overflow:hidden; }