body.custom-fish-open { overflow:hidden; }
.cf-overlay {
  position: fixed; inset: 0; z-index: 1000; overflow:auto; overscroll-behavior:contain;
  background: rgba(4,15,21,.98); color:#f7ffff; padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cf-overlay.hidden { display:none!important; }
.cf-shell { width:min(980px,100%); margin:0 auto; }
.cf-head { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(9,29,38,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.cf-head button { height:40px; min-height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:#fff; padding:0 13px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cf-head .cf-close { width:40px; padding:0; font-size:20px; }
.cf-title strong { display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.cf-title span { display:block; margin-top:2px; color:#a9c0cb; font-size:9px; line-height:1.35; }
.cf-content { padding:18px 2px 4px; }
.cf-panel.hidden { display:none!important; }
.cf-step { margin-bottom:14px; }
.cf-step h2 { margin:0 0 6px; font-size:clamp(24px,5vw,38px); letter-spacing:-.03em; }
.cf-step p { margin:0; color:#a9c0cb; font-size:12px; line-height:1.55; }
.cf-part-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.cf-part-tab { position:relative; min-height:40px; padding:0 32px 0 13px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:#102f3c; color:#b4c6ce; font-size:10px; font-weight:800; letter-spacing:.05em; }
.cf-part-tab::after { content:'✓'; position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:0; color:#7cf0c8; font-weight:900; pointer-events:none; }
.cf-part-tab.active { color:#031218; background:linear-gradient(135deg,#2ad5ff,#7cf0c8); border-color:transparent; }
.cf-part-tab.done::after { opacity:1; }
.cf-part-tab.active::after { color:#031218; opacity:1; }
.cf-part-tab:disabled { opacity:.25; }
.cf-canvas-card { position:relative; padding:7px; border-radius:20px; background:#e9f3f6; box-shadow:0 20px 55px rgba(0,0,0,.28); overflow:hidden; }
.cf-canvas-card canvas { display:block; width:100%; height:auto; aspect-ratio:900/650; background:#fff; border-radius:14px; touch-action:none; }
.cf-tip { position:absolute; left:16px; bottom:16px; max-width:calc(100% - 32px); padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:#52636b; font-size:10px; pointer-events:none; box-shadow:0 5px 18px rgba(0,0,0,.08); }
.cf-direction-badge { position:absolute; right:16px; top:16px; padding:7px 10px; border-radius:999px; background:#7cf0c8; color:#041218; font-size:10px; font-weight:900; }
.cf-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:#0d222d; }
.cf-toolbar button { min-height:42px; padding:0 13px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:#173744; color:#fff; font-size:10px; font-weight:800; }
.cf-toolbar button.cf-primary { color:#031218; border:0; background:linear-gradient(135deg,#2ad5ff,#7cf0c8); }
.cf-toolbar button:disabled { opacity:.35; }
.cf-spacer { flex:1 1 auto; }
.cf-slider { display:flex; align-items:center; gap:7px; color:#a9c0cb; font-size:10px; font-weight:800; }
.cf-slider input { width:92px; accent-color:#2ad5ff; }
.cf-palette { display:flex; flex-wrap:wrap; gap:6px; }
.cf-swatch { width:32px; height:32px; min-height:32px!important; padding:0!important; border-radius:50%!important; border:3px solid transparent!important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.cf-swatch.active { border-color:white!important; transform:scale(1.07); }
.cf-preview3d { height:min(56vh,520px); min-height:330px; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:radial-gradient(circle at 50% 35%,#17445a 0%,#0b2633 42%,#06131a 78%); }
.cf-preview3d canvas { display:block; width:100%; height:100%; touch-action:none; }
.cf-toast { position:fixed; z-index:1020; left:50%; bottom:max(18px,calc(10px + env(safe-area-inset-bottom))); transform:translate(-50%,30px); opacity:0; pointer-events:none; max-width:min(92vw,520px); padding:10px 13px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(0,0,0,.84); color:#fff; font-size:12px; text-align:center; transition:.22s ease; }
.cf-toast.show { opacity:1; transform:translate(-50%,0); }
.create-custom-fish { width:100%; margin:12px 0 0; padding:14px; min-height:48px; border:1px dashed rgba(126,185,186,.52); border-radius:16px; background:rgba(126,185,186,.08); color:var(--text); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.create-custom-fish::before { content:'✎ '; color:var(--accent-2); }
.create-custom-fish:disabled { opacity:.38; cursor:not-allowed; }
.colors.custom-disabled, #arColors.custom-disabled { opacity:.20; pointer-events:none; filter:grayscale(.7); }
@media(max-width:680px){
  .cf-overlay { padding-left:8px; padding-right:8px; }
  .cf-head { grid-template-columns:40px 1fr auto; border-radius:15px; }
  .cf-head .cf-restart { padding:0 9px; font-size:9px; }
  .cf-content { padding-top:14px; }
  .cf-toolbar { padding:8px; }
  .cf-toolbar button { flex:1 1 auto; }
  .cf-spacer { display:none; }
  .cf-preview3d { min-height:300px; height:46vh; }
  .cf-tip { left:12px; bottom:12px; max-width:calc(100% - 24px); white-space:normal; }
}

/* v84 interactive pop-up preview */
.cf-preview3d { position:relative; user-select:none; -webkit-user-select:none; }
.cf-preview3d .cf-preview-hint {
  position:absolute; z-index:2; left:50%; bottom:14px; transform:translateX(-50%);
  pointer-events:none; padding:7px 11px; border-radius:999px;
  background:rgba(5,18,25,.68); color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.12); font-size:11px; letter-spacing:.04em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .25s ease;
}
.cf-preview3d.is-interacting .cf-preview-hint { opacity:.18; }
#cfPreviewSpin.is-active { background:#2f7f83; color:white; border-color:rgba(255,255,255,.18); }