/* ====== Ocean 2026 theme for JPG6 (client-side only) ====== */
:root{
  --bg: #071222;
  --bg-2:#0a1830;
  --surface:#0e1a2e;
  --card:#0c172bfa;
  --glass:#0c172bd8;
  --ink:#e9f1ff;
  --muted:#9ab0c9;
  --brand:#69d7ff;   /* cyan */
  --accent:#4aa8ff;  /* blue */
  --border:#1e2c45;
  --ok:#22d38c; --warn:#ffc83d; --danger:#ff5d6c;
  --shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --radius: 16px; --radius-lg: 22px;
  --bezier:cubic-bezier(.2,.8,.2,1);
  --focus: 0 0 0 3px #69d7ff66, 0 0 0 6px #69d7ff33;
}

:root.light{
  --bg:#eaf3ff; --bg-2:#dce9fb; --surface:#ffffff; --card:#ffffffee; --glass:#ffffffd8;
  --ink:#0b1220; --muted:#5c667d; --brand:#0a67ff; --accent:#4292ff; --border:#d6deea;
  --shadow: 0 12px 30px rgba(13,23,41,.12), inset 0 1px 0 rgba(255,255,255,.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 700px at 70% -10%, #163a70 0%, var(--bg) 35%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  font:16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Segoe UI Symbol","Noto Color Emoji";
  overflow-x:hidden;
}

/* Utility: visually hide but keep clickable/programmable */
.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  border:0 !important; white-space:nowrap !important;
}

/* Background visuals */
#bg{position:fixed; inset:0; z-index:-1; overflow:hidden}
.wave{position:absolute; left:-10%; right:-10%; height:32vh; border-radius:50%; filter:blur(42px) saturate(1.05); mix-blend-mode:screen; opacity:.18;
  background: radial-gradient(ellipse at 40% 40%, #7cd6ff55 0, transparent 60%),
              radial-gradient(ellipse at 70% 60%, #2d6fe044 0, transparent 65%),
              radial-gradient(ellipse at 20% 70%, #ff7b7b22 0, transparent 55%);
  animation: drift 22s var(--bezier) infinite alternate;}
.w1{top:-8vh; transform:rotate(-6deg)} .w2{top:28vh; transform:rotate(5deg); animation-duration:28s; opacity:.14}
.w3{top:62vh; transform:rotate(-2deg); animation-duration:34s; opacity:.12}
@keyframes drift{to{transform:translateY(-6vh) rotate(8deg)}}
.bubbles{position:absolute; inset:0; opacity:.15}
:root.light .bubbles{opacity:.08}

/* Header */
.app-header{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns: 1fr auto auto; gap:16px; align-items:center;
  padding:14px clamp(12px, 3vw, 28px);
  background:linear-gradient(to bottom, var(--glass), color-mix(in srgb, var(--glass) 70%, transparent));
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:linear-gradient(145deg, #0e1a2e, #1b2f53); color:#fff;
  font-size:18px; font-weight:800; letter-spacing:.5px; box-shadow:var(--shadow)
}
.brandtext .title{font-weight:800; letter-spacing:.3px}
.tagline{opacity:.85; font-size:14px}

.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{appearance:none; border:1px solid var(--border); color:var(--ink);
  padding:10px 14px; background:color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius:999px; transition:all .2s var(--bezier); cursor:pointer}
.tab:hover{background:color-mix(in srgb, var(--surface) 85%, transparent)}
.tab.is-active{background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)) , var(--surface));
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent)}

/* Header actions */
.header-actions{display:flex; gap:10px; align-items:center}
.ghost{background:color-mix(in srgb, var(--surface) 75%, transparent); color:var(--ink); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px; cursor:pointer; transition:transform .18s, background .2s, border-color .2s}
.ghost:hover{background:color-mix(in srgb, var(--surface) 92%, transparent); transform:translateY(-1px)}
.ghost.danger{color:var(--danger)}
.file-ghost{display:inline-grid; place-items:center; background:color-mix(in srgb, var(--surface) 75%, transparent); color:var(--ink); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px; cursor:pointer}

/* Main */
.app-main{padding:18px clamp(12px, 3vw, 28px) 42px; max-width:1400px; margin:0 auto}
.panel{display:none; animation:fadeUp .25s var(--bezier)}
.panel.is-active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

/* Page title */
.page-title{
  margin: 4px 0 14px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: .2px;
}

/* Forms */
.input, .select, textarea.input{
  width:280px; max-width:100%;
  outline:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  box-shadow: 0 1px 0 #00000022 inset; transition: box-shadow .2s, border-color .2s, background .2s
}
.input::placeholder, textarea.input::placeholder{color:color-mix(in srgb, var(--muted) 85%, transparent)}
.input:focus, .select:focus, textarea.input:focus{box-shadow:var(--focus); border-color: color-mix(in srgb, var(--brand) 55%, var(--border))}
.toolbar{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}

/* Output mode segmented control */
.outpanel{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.segmented{display:flex; background:color-mix(in srgb, var(--surface) 85%, transparent); border:1px solid var(--border); border-radius:12px; padding:4px}
.seg{border:0; background:transparent; color:var(--ink); padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .18s}
.seg:hover{background:color-mix(in srgb, var(--surface) 92%, transparent)}
.seg.is-active{background:linear-gradient(180deg, #88e3ff, #69d7ff); color:#00233e; font-weight:700}

/* Stats */
.stats{opacity:.9; display:flex; gap:8px; align-items:center}

/* Gallery grid */
.gallery{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px}
:root[data-grid="sm"] .gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
:root[data-grid="lg"] .gallery{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* Card */
.card{
  position:relative; z-index:1;
  display:flex; flex-direction:column; border-radius:18px; background:var(--card);
  border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden;
}
.card .fav{
  position:absolute; top:10px; left:10px; z-index:3;
  border:1px solid var(--border); border-radius:12px;
  background:color-mix(in srgb, var(--surface) 80%, transparent); color:#ffd166; padding:6px 10px; cursor:pointer
}
.card .fav.active{background:#2a1f00; color:#ffc83d; border-color:#806300}

/* Stable preview area */
.card-top{
  margin:0;
  aspect-ratio: 4 / 3;
  position: relative;
  display:grid; place-items:center;
  background:#0b1222; overflow:hidden;
}
:root.light .card-top{background:#f1f5fb}
.card-top img{
  width:100%; height:100%;
  object-fit: contain;
  display:block; transform-origin:center; transition:transform .22s var(--bezier)
}
.card:hover .card-top img{transform:scale(1.02)}

.card-body{
  display:grid; gap:12px; padding:12px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--border);
  overflow:visible;
}
.btn{
  border:1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface)); color:var(--ink);
  padding:11px 12px; box-shadow: 0 6px 14px rgba(0,0,0,.15); transition:transform .15s var(--bezier), border-color .2s
}
.btn:hover{transform:translateY(-1px); border-color: color-mix(in srgb, var(--brand) 55%, var(--border))}
.btn.primary{background:linear-gradient(180deg, #5ccfff, #2aa9ff); color:#00233e; border-color:#5ccfff; font-weight:700}
.btn.light{background:var(--surface)}
.btn.danger{background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 18%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--danger) 45%, var(--border))}
.btn.alt{background:linear-gradient(180deg, #88e3ff, #69d7ff); color:#00233e; border-color:#88e3ff}
.btn.ghost{background:transparent}
.btn.mini{padding:9px 10px}
.btn.tiny{padding:8px 10px; font-size:12px}
.actions{display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap}

/* Copy buttons block */
.copy-group{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Per-card wrap toggle visibility */
.wrap-row{display:none}
body:has(#showWrapToggle:checked) .wrap-row{display:flex}

/* Publish block */
.publish{display:grid; gap:10px; padding:10px; border:1px dashed var(--border); border-radius:12px; background:color-mix(in srgb, var(--surface) 85%, transparent)}
.publish-head{font-weight:800; font-size:13px; letter-spacing:.2px; opacity:.95}
.publish-variants{display:flex; gap:8px; flex-wrap:wrap}
.publish-variants .btn.tiny{white-space:nowrap}

/* Hosted URL row */
.url-field{display:grid; gap:6px}
.url-row{
  display:flex; gap:8px; align-items:center;
  min-width:0;
}
.url-row .input{flex:1; min-width:0}
.url-row .btn{flex:0 0 auto}

/* Switch */
.switch{display:flex; gap:8px; align-items:center}
.switch.small span{font-size:12px; opacity:.9}
.switch input{appearance:none; width:44px; height:26px; border-radius:22px; background:color-mix(in srgb, var(--surface) 75%, transparent);
  border:1px solid var(--border); position:relative; outline:none; cursor:pointer; transition:background .2s, border-color .2s}
.switch input:checked{background:color-mix(in srgb, var(--ok) 40%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 60%, var(--border))}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:left .2s}
.switch input:checked::after{left:21px}

/* Bottom info */
.card-info{display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--border); background:var(--card)}
.card-info .name{font-size:13px; line-height:1.25; max-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Badges */
.badge{font-size:12px; padding:6px 8px; border-radius:999px; background:color-mix(in srgb, var(--surface) 90%, transparent); border:1px solid var(--border)}
.badge.dim::before{content:"RES "; opacity:.85; font-weight:600}
.badge.size::before{content:"SIZE "; opacity:.85; font-weight:600}
.badge.fmt::before{content:"FMT "; opacity:.85; font-weight:600}

/* Upload */
.uibox{display:grid; grid-template-columns:1.3fr .7fr; gap:16px}
@media (max-width:1100px){.uibox{grid-template-columns:1fr}}
.dropzone{
  position:relative; /* for overlay label */
  display:grid; place-items:center; min-height:220px;
  border:2px dashed color-mix(in srgb, var(--brand) 55%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 85%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
  border-radius:var(--radius-lg); box-shadow:var(--shadow); cursor:pointer; transition:transform .18s, border-color .18s, background .18s;
  user-select:none;
}
.dropzone:focus{outline:none; box-shadow:var(--focus)}
.dropzone.drag{transform:scale(1.01); border-color: color-mix(in srgb, var(--ok) 55%, var(--border))}
.dz-inner .big{font-size:20px; margin-bottom:6px}
.dz-inner .small{opacity:.9}

/* Full clickable overlay to open chooser (doesn't block DnD because events bubble) */
.dz-label{
  position:absolute; inset:0;
  border-radius:inherit;
  cursor:pointer;
  /* transparent & non-intrusive */
  background:transparent;
}

.queue{display:grid; gap:10px}
.qitem{display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px}
.qitem .bar{height:8px; background:#ffffff26; border-radius:10px; overflow:hidden; flex:1}
.qitem .bar > i{display:block; height:100%; width:0%; background:linear-gradient(90deg, #69d7ff, #22d38c)}
.qitem .stat{min-width:64px; text-align:right; opacity:.95}

/* Settings/About */
.settings, .about{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){.grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr}}
.bullets{line-height:1.65}
.muted{color:var(--muted)}
.small{font-size:12px}
.divider{height:1px; background:var(--border); margin:14px 0}
.diag{margin-top:10px; display:grid; gap:6px}

/* Toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--surface); color:var(--ink);
  border:1px solid var(--border); padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:transform .2s, opacity .2s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Modal (fixed-size grid to prevent growth on crop) */
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#0007;
  opacity:0; pointer-events:none; transition:opacity .2s;
  z-index: 9999;
}
.modal.open{opacity:1; pointer-events:auto}
.modal-body{
  width:min(1000px, 96vw);
  max-height:min(92vh, 860px);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
}

/* Modal head */
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:color-mix(in srgb, var(--surface) 90%, transparent); border-bottom:1px solid var(--border)}
.modal-head .title{font-weight:700}
.modal-head .close{color:var(--ink); cursor:pointer}

/* Editor area — strictly bounded */
.editor-wrap{
  position:relative;
  padding:12px;
  display:grid; place-items:center;
  overflow:hidden;               /* key: crop overlay cannot expand layout */
  max-height: clamp(300px, 70vh, 700px);
  contain: layout paint;         /* isolates paint so big shadows don’t reflow */
  isolation:isolate;             /* ensure correct z-index stacking */
}
#editCanvas{
  max-width:100%;
  max-height:100%;
  display:block;
  border-radius:12px;
  background:#0b1222;
}
:root.light #editCanvas{background:#f1f5fb}

/* Editor toolbar (split) */
.editor-toolbar{
  display:flex; gap:12px; padding:12px; border-top:1px solid var(--border);
  justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
}
.editor-tools-left{display:flex; gap:8px; flex-wrap:wrap}
.editor-tools-right{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.field.mini span{font-size:12px; opacity:.9}
.input.mini, .select.mini{width:160px; padding:8px 10px; border-radius:10px}
.num-with-suffix{display:flex; align-items:center; gap:6px}
.num-with-suffix .suffix{font-size:12px; opacity:.8}
.range-inline{display:flex; align-items:center; gap:8px}
.range-inline .range-val{min-width:40px; text-align:right; opacity:.9}

/* Crop overlay — absolutely positioned, non-intrusive */
.crop-box{
  position:absolute;
  left:0; top:0; width:0; height:0;
  border:2px dashed var(--accent);
  border-radius:8px;
  pointer-events:none;
  z-index:5;
  /* dim outside without affecting layout */
  box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--accent) 15%, transparent);
  will-change: left, top, width, height;
}

/* Focus ring */
button:focus, .btn:focus, .ghost:focus, .tab:focus, .switch input:focus, .dropzone:focus{box-shadow:var(--focus)}