/* ============================================================
   FotoLab · editor.css
   Prefixo .fl- para não colidir com o site nem com o jogo.

   Como no jogo, a interface do editor é SEMPRE escura: um editor
   de imagem precisa de fundo neutro para o olho julgar a foto —
   parede clara em volta engana a percepção de brilho e cor. Por
   isso redeclaramos a paleta dentro do #flApp em vez de herdar o
   tema claro do site.
   ============================================================ */

#flApp{
  --bg:#0e0f13; --bg-2:#15171d; --surface:#1a1d25; --surface-2:#21242e;
  --line:#2c303b; --line-soft:#23262f;
  --text:#eef0f4; --text-soft:#b9bfca; --text-mute:#868d9a;
  --accent:#f4b03e; --accent-2:#ffd17a; --accent-deep:#c9871f;
  --ok:#58c08b; --warn:#f0a23a; --rose:#e8736b;
  --rail:64px; --panel:322px;
  color:var(--text);
  position:relative;
  display:flex; flex-direction:column;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.7);
  font-family:var(--sans);
  user-select:none; -webkit-user-select:none;
}
.fl-outer{ max-width:1560px; margin:0 auto; padding:0 clamp(10px,2vw,26px); }

/* ---------- barra superior ---------- */
.fl-topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; background:var(--bg); border-bottom:1px solid var(--line);
}
.fl-tb-group{ display:flex; align-items:center; gap:6px; }
.fl-tb-group.center{ margin:0 auto; }
.fl-tb-group.right{ margin-left:auto; }
.fl-sep{ width:1px; height:22px; background:var(--line); margin:0 2px; }

.fl-btn{
  font:inherit; font-size:.86rem; font-weight:600; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:7px 12px; cursor:pointer; line-height:1; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.fl-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--text); }
.fl-btn:disabled{ opacity:.38; cursor:default; }
.fl-btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.fl-btn.primary:hover{ background:var(--accent-2); color:#1a1206; }
.fl-btn.ghost{ background:transparent; }
.fl-btn.icon{ padding:7px 10px; font-size:1rem; min-width:34px; }
.fl-btn.zoom{ min-width:64px; font-variant-numeric:tabular-nums; }
.fl-btn.on{ border-color:var(--accent); color:var(--accent); }
.only-mobile{ display:none; }

/* ---------- corpo ---------- */
.fl-body{
  display:grid;
  grid-template-columns:var(--rail) 1fr var(--panel);
  height:clamp(430px, 70vh, 780px);
  min-height:0;
}
#flApp:fullscreen, #flApp.fl-fs{ border-radius:0; border:0; height:100vh; }
#flApp:fullscreen .fl-body, #flApp.fl-fs .fl-body{ height:auto; flex:1; }
#flApp.fl-fs{ position:fixed; inset:0; z-index:9999; }

/* ---------- ferramentas ---------- */
.fl-tools{
  background:var(--bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px; padding:8px 6px; overflow:auto;
}
.fl-tool{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:transparent; border:1px solid transparent; border-radius:10px;
  color:var(--text-mute); cursor:pointer; padding:8px 2px; font:inherit;
}
.fl-tool:hover{ color:var(--text); background:var(--surface); }
.fl-tool.on{ color:var(--accent); background:var(--surface-2); border-color:var(--accent-deep); }
.fl-tool-ico{ font-size:1.15rem; line-height:1; }
.fl-tool-name{ font-size:.6rem; font-weight:600; letter-spacing:.02em; }

/* ---------- área de trabalho ---------- */
.fl-stage{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, #14161c 0%, #0b0c10 70%);
  touch-action:none;
}
.fl-stage.drop{ outline:2px dashed var(--accent); outline-offset:-10px; }
#flCanvas{ display:block; width:100%; height:100%; }

.fl-empty{ position:absolute; inset:0; display:grid; place-items:center; padding:18px; }
#flApp.has-doc .fl-empty{ display:none; }
.fl-empty-card{
  max-width:460px; text-align:center; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:26px 24px;
}
.fl-empty-ico{ font-size:2.4rem; }
.fl-empty-card h3{ font-family:var(--serif); margin:.3em 0 .2em; color:var(--text); }
.fl-empty-card p{ color:var(--text-soft); font-size:.92rem; margin:0 0 14px; }
.fl-empty-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.fl-empty-note{ font-size:.78rem !important; color:var(--text-mute) !important; margin:14px 0 0 !important; }

.fl-resume{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  display:none; align-items:center; gap:8px; z-index:5;
  background:var(--surface-2); border:1px solid var(--accent-deep);
  border-radius:30px; padding:7px 10px 7px 16px; font-size:.82rem; color:var(--text-soft);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
}
.fl-resume.on{ display:flex; }

/* ---------- painéis ---------- */
.fl-panels{
  background:var(--bg); border-left:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.fl-histo{ padding:10px 12px 6px; border-bottom:1px solid var(--line); }
.fl-histo-head{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--text-soft); margin-bottom:6px; }
.fl-histo-head b{ color:var(--text); font-size:.8rem; }
#flHisto{ width:100%; height:82px; display:block; border-radius:8px; border:1px solid var(--line-soft); }
.fl-histo-legend{ margin:5px 0 0; font-size:.68rem; color:var(--text-mute); text-align:center; }
.fl-warn{ color:var(--warn); font-weight:600; margin-left:8px; }
.fl-warn.dark{ color:var(--rose); }
.fl-ok{ color:var(--text-mute); }

.fl-tabs{ display:flex; border-bottom:1px solid var(--line); background:var(--bg-2); }
.fl-tab{
  flex:1; background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--text-mute); font:inherit; font-size:.82rem; font-weight:600;
  padding:10px 4px; cursor:pointer;
}
.fl-tab:hover{ color:var(--text); }
.fl-tab.on{ color:var(--accent); border-bottom-color:var(--accent); background:var(--bg); }
.fl-panes{ flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; -webkit-overflow-scrolling:touch; }
.fl-pane{ display:none; padding:10px 12px 26px; }
.fl-pane.on{ display:block; }

/* ---------- grupos de ajuste ---------- */
.fl-group{ border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--surface); overflow:hidden; }
.fl-group-head{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:transparent; border:0; color:var(--text); font:inherit; font-weight:600;
  font-size:.9rem; padding:11px 12px; cursor:pointer;
}
.fl-caret{ color:var(--text-mute); transition:transform .18s; }
.fl-group.open .fl-caret{ transform:rotate(180deg); }
.fl-group-body{ display:none; padding:0 12px 12px; }
.fl-group.open .fl-group-body{ display:block; }
.fl-group-help{ font-size:.76rem; color:var(--text-mute); margin:0 0 10px; line-height:1.5; }
.fl-group-help a{ color:var(--accent); }

.fl-row{ margin-bottom:9px; }
.fl-row-head{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-soft); margin-bottom:2px; }
.fl-row-label{ flex:1; cursor:ns-resize; }
.fl-row.changed .fl-row-label{ color:var(--accent-2); font-weight:600; }
.fl-row-val{ font-variant-numeric:tabular-nums; color:var(--text-mute); font-size:.76rem; min-width:30px; text-align:right; }
.fl-q{
  width:16px; height:16px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-mute); font-size:.62rem; line-height:1;
  cursor:pointer; padding:0; font-weight:700;
}
.fl-q:hover{ color:var(--accent); border-color:var(--accent); }
.fl-row-help{ display:none; font-size:.73rem; color:var(--text-mute); margin:4px 0 0; line-height:1.45;
  border-left:2px solid var(--accent-deep); padding-left:8px; }
.fl-row.open .fl-row-help, .fl-row-help.open{ display:block; }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line); }
input[type=range]::-moz-range-track{ height:4px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2px solid #12141a; margin-top:-6px;
}
input[type=range]::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #12141a; }

.fl-bw{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.fl-check{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text); cursor:pointer; }
.fl-check input{ accent-color:var(--accent); width:16px; height:16px; }
.fl-bw-opts{ display:flex; gap:8px; margin-top:8px; }
.fl-field{ display:flex; flex-direction:column; gap:3px; font-size:.74rem; color:var(--text-mute); flex:1; min-width:0; }
.fl-field.grow{ flex:2; }
.fl-field select, .fl-field input[type=text]{
  font:inherit; font-size:.8rem; color:var(--text); background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; width:100%;
}
.fl-field input[type=color]{ width:100%; height:30px; padding:2px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; }

/* ---------- curvas ---------- */
.fl-curve-tabs{ display:flex; gap:6px; margin-bottom:8px; }
.fl-chip{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  color:var(--text-mute); font:inherit; font-size:.74rem; font-weight:600;
  padding:4px 11px; cursor:pointer;
}
.fl-chip:hover{ color:var(--text); }
.fl-chip.on{ border-color:var(--c,var(--accent)); color:var(--c,var(--accent)); }
.fl-curve-canvas{ width:100%; aspect-ratio:1; display:block; border:1px solid var(--line); border-radius:10px; touch-action:none; }
.fl-curve-foot{ display:flex; align-items:center; gap:8px; margin-top:7px; }
.fl-hint{ flex:1; font-size:.68rem; color:var(--text-mute); line-height:1.35; }
.fl-mini{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  color:var(--text-soft); font:inherit; font-size:.75rem; font-weight:600;
  padding:5px 9px; cursor:pointer; white-space:nowrap;
}
.fl-mini:hover{ border-color:var(--accent); color:var(--text); }
.fl-mini.primary{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.fl-mini.danger:hover{ border-color:var(--rose); color:var(--rose); }
.fl-note{ font-size:.74rem; color:var(--text-mute); line-height:1.5; margin:12px 0 0; }
.fl-note b{ color:var(--text-soft); }

/* ---------- camadas ---------- */
.fl-layer-actions{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.fl-layers{ display:flex; flex-direction:column; gap:3px; }
.fl-layer{
  display:flex; align-items:center; gap:7px; padding:7px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  cursor:pointer; font-size:.82rem; color:var(--text-soft);
}
.fl-layer:hover{ border-color:var(--text-mute); }
.fl-layer.on{ border-color:var(--accent); background:var(--surface-2); color:var(--text); }
.fl-eye{ background:transparent; border:0; cursor:pointer; font-size:.85rem; padding:0; line-height:1; opacity:.85; }
.fl-layer-ico{ width:18px; text-align:center; opacity:.8; }
.fl-layer-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-layer-tag{ font-size:.66rem; background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:1px 7px; color:var(--text-mute); }
.fl-layer-tag.mask{ border-color:var(--accent-deep); color:var(--accent-2); }
.fl-opt .fl-check{ font-size:.78rem; white-space:nowrap; }
.fl-layer-props{ display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.fl-layer-props output{ font-size:.7rem; color:var(--text-mute); }

/* ---------- filtros ---------- */
.fl-presets{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fl-preset{
  text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:9px 10px; cursor:pointer; font:inherit; color:var(--text-soft);
}
.fl-preset:hover{ border-color:var(--accent); }
.fl-preset b{ display:block; color:var(--text); font-size:.82rem; margin-bottom:2px; }
.fl-preset span{ display:block; font-size:.68rem; color:var(--text-mute); line-height:1.35; }

/* ---------- barra de opções ---------- */
.fl-optionsbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  min-height:44px; padding:7px 12px;
  background:var(--bg); border-top:1px solid var(--line);
}
.fl-opt{ display:none; align-items:center; gap:14px; flex-wrap:wrap; width:100%; }
.fl-opt.on{ display:flex; }
.fl-opt .fl-field{ flex-direction:row; align-items:center; gap:7px; flex:0 1 auto; }
.fl-opt .fl-field > span{ white-space:nowrap; }
.fl-opt .fl-field input[type=range]{ width:110px; }
.fl-opt .fl-field output{ font-size:.72rem; color:var(--text-soft); min-width:26px; font-variant-numeric:tabular-nums; }
.fl-opt-label{ font-size:.74rem; color:var(--text-mute); }
.fl-opt-hint{ font-size:.78rem; color:var(--text-mute); }
.fl-opt-actions{ display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; }
.fl-chips{ display:flex; gap:4px; flex-wrap:wrap; }

.fl-statusbar{
  display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:5px 12px; background:var(--bg-2); border-top:1px solid var(--line);
  font-size:.7rem; color:var(--text-mute);
}
.fl-status-tip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- diálogos ---------- */
.fl-scrim{ position:absolute; inset:0; background:rgba(6,7,10,.72); display:none; z-index:40; }
.fl-scrim.on{ display:block; }
.fl-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:none; z-index:50; width:min(660px, calc(100% - 28px)); max-height:86%;
  overflow:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px; box-shadow:0 30px 70px -30px #000;
}
.fl-dialog.on{ display:block; }
.fl-dialog-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.fl-dialog-head b{ font-family:var(--serif); font-size:1.05rem; color:var(--text); }
.fl-x{ background:transparent; border:0; color:var(--text-mute); font-size:1rem; cursor:pointer; }
.fl-x:hover{ color:var(--text); }

.fl-sample-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.fl-sample{
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:0 0 8px; cursor:pointer; overflow:hidden; text-align:left; font:inherit; color:var(--text-soft);
}
.fl-sample:hover{ border-color:var(--accent); }
.fl-sample img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin-bottom:6px; }
.fl-sample b{ display:block; padding:0 9px; color:var(--text); font-size:.8rem; }
.fl-sample span{ display:block; padding:2px 9px 0; font-size:.68rem; color:var(--text-mute); line-height:1.35; }
.fl-badge{ font-style:normal; font-size:.6rem; font-weight:800; letter-spacing:.06em;
  color:#1a1206; background:var(--accent); border-radius:20px; padding:2px 7px; margin-left:5px;
  white-space:nowrap; vertical-align:middle; }

.fl-export{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.fl-export .fl-field{ min-width:130px; }
.fl-export .fl-btn{ margin-left:auto; }

.fl-toast{
  position:absolute; left:50%; bottom:64px; transform:translate(-50%,14px);
  z-index:60; max-width:min(520px,88%); pointer-events:none;
  background:var(--surface-2); border:1px solid var(--accent-deep); color:var(--text);
  border-radius:12px; padding:10px 16px; font-size:.84rem; line-height:1.45;
  opacity:0; transition:opacity .2s, transform .2s;
  box-shadow:0 18px 40px -18px #000;
}
.fl-toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- celular / tablet ---------- */
@media (max-width: 1000px){
  #flApp{ --panel:290px; --rail:56px; }
  .fl-status-tip{ display:none; }
}
@media (max-width: 820px){
  .fl-outer{ padding:0; }
  #flApp{ border-radius:0; border-left:0; border-right:0; }
  .fl-body{ grid-template-columns:var(--rail) 1fr; height:clamp(400px, 62vh, 640px); }
  /* No celular os painéis viram GAVETA DE BAIXO, não lateral: numa tela de
     375px uma gaveta lateral esconderia a foto inteira, e ajustar sem ver a
     foto não faz sentido num editor. Assim o aluno vê a imagem em cima
     enquanto arrasta os controles embaixo. */
  .fl-panels{
    position:absolute; left:0; right:0; bottom:0; top:auto; height:58%;
    z-index:30; transform:translateY(102%); transition:transform .22s ease;
    border-left:0; border-top:1px solid var(--line);
    box-shadow:0 -18px 40px -20px #000;
  }
  #flApp.panels-open .fl-panels{ transform:none; }
  #flApp.panels-open .fl-stage{ height:42%; }
  .fl-panels .fl-histo{ padding:8px 12px 4px; }
  #flHisto{ height:56px; }
  .only-mobile{ display:inline-block; }
  .fl-tb-group.center{ order:3; width:100%; margin:0; justify-content:center; }
  .fl-topbar{ padding:7px 8px; }
  .fl-btn{ padding:7px 10px; font-size:.8rem; }
  .fl-tool-name{ display:none; }
  .fl-tool-ico{ font-size:1.25rem; }
  .fl-statusbar{ display:none; }
  .fl-optionsbar{ overflow-x:auto; flex-wrap:nowrap; }
  .fl-opt{ flex-wrap:nowrap; width:max-content; }
}

/* ---------- Google Drive ---------- */
/* o atributo `hidden` precisa vencer os display:flex daqui de baixo */
.fl-drive-dlg [hidden]{ display:none !important; }
.fl-drive-dlg{ width:min(760px, calc(100% - 28px)); }
.fl-drive-bar{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.fl-drive-bar .fl-field{ flex:1 1 320px; }
.fl-drive-bar input{ width:100%; }
.fl-drive-crumbs{ margin:10px 0 0; font-size:.74rem; color:var(--text-mute); }
.fl-crumb{ background:transparent; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--text-soft); text-decoration:underline; text-underline-offset:2px; }
.fl-crumb:hover{ color:var(--accent); }
.fl-crumb.on{ color:var(--text); text-decoration:none; cursor:default; }
.fl-drive-status{ font-size:.74rem; color:var(--text-mute); line-height:1.5; margin:10px 0; }
.fl-drive-status.warn{ color:var(--accent); }
.fl-drive-status code{ font-size:.9em; }
.fl-drive-grid{ max-height:46vh; overflow:auto; align-content:start; }
.fl-drive-grid:empty{ display:none; }
.fl-drive-folder{ padding-top:10px; }
.fl-drive-fico{ display:block; font-size:1.6rem; padding:14px 9px 4px; }
.fl-sample.busy{ position:relative; opacity:.75; cursor:progress; }
.fl-sample.busy::after{
  content:""; position:absolute; left:0; bottom:0; height:3px;
  width:var(--fl-prog, 30%); background:var(--accent); transition:width .15s linear;
}
.fl-drive-lock-msg{ font-size:.8rem; color:var(--text-soft); line-height:1.5; margin:0 0 10px; }
.fl-drive-lock-msg.warn{ color:var(--accent); }
.fl-linkish{ background:transparent; border:0; padding:0; margin-left:6px; cursor:pointer;
  font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.fl-linkish:hover{ color:var(--text); }