:root{--bg:#fff7fb;--panel:#ffffff;--ink:#253044;--muted:#7a8497;--line:#eadde8;--primary:#ff7eb6;--primary2:#77c8ff;--shadow:0 18px 50px rgba(119,82,118,.16);--radius:22px;--top:72px;--side:460px}*{box-sizing:border-box}body{margin:0;font-family:"Yu Gothic","Hiragino Sans","Meiryo",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 0%,#fff 0,#fff2fa 34%,#eef8ff 100%);min-height:100vh}.topbar{position:sticky;top:0;z-index:20;min-height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;background:rgba(255,255,255,.84);backdrop-filter:blur(16px);border-bottom:1px solid rgba(234,221,232,.8)}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:24px;line-height:1.15;letter-spacing:.02em}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border-radius:999px;background:linear-gradient(135deg,var(--primary),#ffc1de);color:#fff;font-weight:900;box-shadow:0 8px 22px rgba(255,126,182,.28)}.top-links{display:flex;gap:8px;flex-wrap:wrap}.top-links a,button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;padding:10px 12px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 4px 13px rgba(58,40,63,.06)}button:hover,.top-links a:hover{transform:translateY(-1px);border-color:#ffd0e4}button.primary{background:linear-gradient(135deg,var(--primary),#ff9fcb);color:#fff;border-color:transparent}button.danger{background:#fff2f2;color:#b42332;border-color:#ffd0d0}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:14px;padding:14px;align-items:start}.workspace-card,.auth-panel,.block{background:rgba(255,255,255,.92);border:1px solid rgba(234,221,232,.9);border-radius:var(--radius);box-shadow:var(--shadow)}.workspace-card{position:sticky;top:calc(var(--top) + 14px);padding:12px}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.workspace-head strong{font-size:18px}.workspace-head small{display:block;margin-top:3px;color:var(--muted)}.canvas-actions{display:flex;gap:8px;flex-wrap:wrap}.stage-viewport{height:calc(100vh - var(--top) - 96px);min-height:620px;border-radius:20px;background:#101827;background-image:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.05) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.05) 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.3)}canvas{display:block;background:#fff;border-radius:12px;box-shadow:0 20px 80px rgba(0,0,0,.32);touch-action:none}.hint,.status{font-size:12px;color:var(--muted);line-height:1.65}.side-panel{position:sticky;top:calc(var(--top) + 14px);display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - var(--top) - 20px);overflow:auto;padding-right:0}.auth-panel{padding:14px}.auth-panel p{margin:6px 0 10px;color:var(--muted);font-size:12px}.auth-row{display:grid;grid-template-columns:1fr auto;gap:8px}.auth-row input,.field input,.field select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px 12px;color:var(--ink);font:inherit}textarea{resize:vertical;line-height:1.55}.block{overflow:hidden}.block summary{list-style:none;padding:15px 16px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.block summary::-webkit-details-marker{display:none}.block summary::after{content:"＋";font-size:18px;color:var(--muted)}.block[open] summary::after{content:"－"}.block-body{padding:0 14px 15px}.file-box{display:flex;align-items:center;justify-content:center;min-height:72px;border:2px dashed #ffd0e4;border-radius:18px;background:#fff8fc;color:#b6487b;font-weight:900;margin-bottom:10px;cursor:pointer}.file-box input{display:none}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);font-weight:800;margin:10px 0}.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:800;margin:8px 0 12px}.category-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}.category-tabs button{font-size:12px;padding:8px 10px}.category-tabs button.active{background:#fff0f7;border-color:#ff9fcb;color:#b6487b}.asset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:90px}.asset-grid.empty{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:12px;padding:16px;border:1px dashed var(--line);border-radius:16px;background:#fffafc}.asset-card{padding:0;overflow:hidden;border-radius:16px;background:#fff;border:1px solid var(--line);text-align:left;position:relative}.asset-card.pro::before{content:"Pro";position:absolute;top:6px;right:6px;z-index:2;font-size:10px;font-weight:900;color:#fff;background:#ff7eb6;border-radius:999px;padding:3px 6px}.asset-thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#111827;background-image:linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.07) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.07) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.07) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.asset-thumb img{max-width:92%;max-height:92%;object-fit:contain;display:block}.asset-name{display:block;font-size:11px;line-height:1.35;min-height:34px;padding:7px;color:#445064}.block-btn{width:100%;margin-top:8px}.legal p{font-size:12px;color:var(--muted);line-height:1.75;margin:0 0 10px}@media(max-width:1080px){:root{--side:420px}.app-shell{grid-template-columns:1fr}.workspace-card{position:relative;top:auto}.side-panel{position:relative;top:auto;max-height:none}.stage-viewport{height:58vh;min-height:420px}}@media(max-width:640px){:root{--top:76px}.topbar{align-items:flex-start;padding:10px 12px}.brand h1{font-size:19px}.brand p{display:none}.app-shell{padding:10px;gap:12px}.workspace-card{padding:10px}.workspace-head{align-items:flex-start;flex-direction:column}.stage-viewport{height:52vh;min-height:320px}.two-col{grid-template-columns:1fr}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top-links a{padding:8px 9px;font-size:12px}}


/* =========================================================
   UI Fix 2026-05-18
   - Prevent collapsed sections from appearing as thin blank bars
   - Independent scroll panes for preview and controls
   - Ensure each section header and section body has enough height
   ========================================================= */
.side-panel{
  max-height:none !important;
  overflow:visible !important;
  padding-right:0 !important;
}
.block{
  min-height:56px;
  flex-shrink:0;
  overflow:visible;
}
.block summary{
  min-height:56px;
  gap:12px;
  white-space:normal;
  word-break:keep-all;
  line-height:1.35;
}
.block-body{
  display:block;
  overflow:visible;
}
.block:not([open]) .block-body{
  display:none;
}
.asset-grid{
  min-height:112px;
}
textarea#postText{
  min-height:160px;
}
.field input[type="range"]{
  min-height:28px;
}

@media(max-width:1080px){
  .workspace-card,
  .side-panel{
    position:relative !important;
    top:auto !important;
  }
  .app-shell{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .side-panel{
    width:100%;
  }
}

@media(max-width:640px){
  body{
    overflow-x:hidden;
  }
  .topbar{
    position:relative;
  }
  .workspace-card{
    order:1;
  }
  .side-panel{
    order:2;
  }
  .block summary{
    padding:14px 15px;
    font-size:14px;
  }
  .block-body{
    padding:0 12px 14px;
  }
  .auth-panel,
  .block{
    border-radius:18px;
  }
  .stage-viewport{
    height:48vh;
    min-height:300px;
  }
}


/* v2.1 Template list: show templates as finished previews, not transparent asset thumbnails */
.template-grid {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}

.template-grid .asset-card {
  padding: 8px;
}

.template-grid .asset-thumb {
  aspect-ratio: 3 / 4;
  height: auto;
  min-height: 148px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7fb 0%, #f3f7ff 100%);
  border: 1px solid rgba(231, 141, 184, 0.20);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.70);
}

.template-grid .asset-thumb::before,
.template-grid .asset-thumb::after {
  display: none !important;
  content: none !important;
}

.template-grid .asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff7fb;
}

.template-grid .asset-name {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

@media (max-width: 640px) {
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .template-grid .asset-thumb {
    min-height: 176px;
  }
}

/* v2.1 Template list centering fix START */
.template-grid {
  justify-items: center;
}

.template-grid .asset-card {
  width: 100%;
  max-width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.template-grid .asset-thumb {
  width: 100%;
  max-width: 112px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-grid .asset-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
  display: block;
  margin: 0 auto;
}

.template-grid .asset-name {
  width: 100%;
  text-align: center;
}

@media (max-width: 640px) {
  .template-grid {
    justify-items: center;
  }

  .template-grid .asset-card {
    max-width: 136px;
  }

  .template-grid .asset-thumb {
    max-width: 118px;
  }
}
/* v2.1 Template list centering fix END */

/* Ohav Maker Pro v2.2 UX tuning */
.ohav-maker-pro-root .workspace,
.workspace {
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.2fr) !important;
}

.ohav-maker-pro-root .canvas-panel,
.canvas-panel {
  min-width: 0;
}

.ohav-maker-pro-root .control-panel,
.control-panel {
  min-width: 340px;
}

.template-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 10px !important;
}

.template-grid .asset-card {
  max-width: 118px !important;
}

.template-grid .asset-thumb {
  max-width: 98px !important;
  min-height: 132px !important;
}

@media (min-width: 960px) {
  .template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .ohav-maker-pro-root .workspace,
  .workspace {
    grid-template-columns: 1fr !important;
  }
}


/* Ohav Maker Pro v2.3 layout: shrink checkerboard canvas area, widen controls */
.ohav-maker-pro-root .workspace,
.workspace {
  grid-template-columns: minmax(240px, 420px) minmax(440px, 1fr) !important;
  gap: 14px !important;
}

.ohav-maker-pro-root .canvas-panel,
.canvas-panel {
  max-width: 440px !important;
  min-width: 0 !important;
}

.ohav-maker-pro-root .control-panel,
.control-panel {
  min-width: 420px !important;
}

.ohav-maker-pro-root .canvas-viewport,
.canvas-viewport,
.ohav-maker-pro-root .viewport,
.viewport {
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.template-grid .asset-card {
  max-width: 110px !important;
}

.template-grid .asset-thumb {
  max-width: 92px !important;
  min-height: 124px !important;
}

#deleteLayerBtn,
#undoLayerBtn {
  border: 1px solid rgba(225, 112, 160, .42);
  background: #fff7fb;
  color: #9d365f;
  font-weight: 800;
}

@media (max-width: 760px) {
  .ohav-maker-pro-root .workspace,
  .workspace {
    grid-template-columns: 1fr !important;
  }
  .ohav-maker-pro-root .canvas-panel,
  .canvas-panel,
  .ohav-maker-pro-root .canvas-viewport,
  .canvas-viewport,
  .ohav-maker-pro-root .viewport,
  .viewport {
    max-width: none !important;
  }
}



/* =========================================================
   UI Patch v2.4
   - Larger visible canvas
   - Narrower checkerboard side margins
   - Wider side panel
   ========================================================= */
:root{
  --side:460px;
}
.workspace-card{
  padding:12px !important;
}
.stage-viewport{
  min-height:620px !important;
}
@media(min-width:1280px){
  .app-shell{
    grid-template-columns:minmax(0, 1fr) 460px !important;
    gap:14px !important;
    padding:14px !important;
  }
}
@media(min-width:1600px){
  .app-shell{
    grid-template-columns:minmax(0, 1.05fr) 500px !important;
  }
}


/* Ohav Maker Pro v2.6 stable UI rebuild */
@media (min-width:1081px){
  .app-shell{
    height:calc(100vh - var(--top));
    overflow:hidden;
  }
  .workspace-card,
  .side-panel{
    max-height:calc(100vh - var(--top) - 28px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
}

.block:first-of-type .field{
  margin:6px 0;
  gap:4px;
}
.block:first-of-type input[type="range"]{
  min-height:20px;
  margin-top:0;
}

.hashtag-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(120,94,130,.16);
  border-radius:14px;
  background:rgba(255,255,255,.72);
}
.hashtag-panel .mini-label{
  font-size:12px;
  font-weight:800;
  color:#6b5872;
  margin-bottom:8px;
}
.hashtag-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hashtag-chips button{
  border:1px solid rgba(174,122,190,.28);
  background:#fff;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(30,20,40,.06);
}
.hashtag-chips button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(30,20,40,.10);
}



/* Ohav Maker Pro v2.7 UI refinement */
/* 2. おはVテンプレート: show thumbnail-only cards */
.template-grid .asset-name{
  display:none !important;
}
.template-grid .asset-card{
  padding:0 !important;
}
.template-grid .asset-thumb{
  aspect-ratio:3/4 !important;
  border-radius:14px !important;
}
.template-grid .asset-thumb img{
  max-width:100% !important;
  max-height:100% !important;
}

/* 1. キャラ画像: compact scale slider spacing */
.side-panel details.block:first-of-type .field,
.side-panel label.field:has(#scaleRange){
  margin:4px 0 2px !important;
  gap:2px !important;
  padding:0 !important;
}
#scaleRange{
  margin:0 !important;
  padding:0 !important;
  min-height:18px !important;
  height:18px !important;
  display:block !important;
}
#scaleRange::-webkit-slider-runnable-track{
  height:4px;
}
#scaleRange::-webkit-slider-thumb{
  margin-top:-5px;
}
.side-panel details.block:first-of-type .block-body{
  padding-bottom:10px !important;
}
.side-panel details.block:first-of-type .file-box{
  margin-bottom:6px !important;
}


/* Ohav Maker Pro v2.9 mobile preview UX */
.mobile-preview-toggle{
  display:none;
}

@media(max-width:640px){
  .app-shell{
    padding:8px !important;
    gap:10px !important;
  }

  .workspace-card{
    position:sticky !important;
    top:calc(var(--top) + 4px) !important;
    z-index:15 !important;
    padding:8px !important;
    border-radius:18px !important;
  }

  .workspace-head{
    margin-bottom:6px !important;
    gap:6px !important;
  }

  .workspace-head strong{
    font-size:14px !important;
  }

  .workspace-head small,
  .workspace-card > .hint{
    display:none !important;
  }

  .canvas-actions{
    gap:6px !important;
  }

  .canvas-actions button{
    padding:7px 8px !important;
    font-size:11px !important;
  }

  .mobile-preview-toggle{
    display:inline-flex !important;
  }

  .stage-viewport{
    height:30vh !important;
    min-height:210px !important;
    max-height:330px !important;
    border-radius:14px !important;
    background-size:18px 18px !important;
    background-position:0 0,0 9px,9px -9px,-9px 0 !important;
    touch-action:pan-y !important;
  }

  body.mobile-preview-full .stage-viewport{
    height:56vh !important;
    min-height:360px !important;
    max-height:620px !important;
  }

  body.mobile-preview-half .stage-viewport::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42%;
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(16,24,39,0), rgba(16,24,39,.46));
  }

  .stage-viewport{
    position:relative;
  }

  canvas{
    touch-action:pan-y !important;
    border-radius:10px !important;
  }

  .side-panel{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .block summary{
    padding:13px 14px !important;
  }

  .block-body{
    padding:0 10px 12px !important;
  }
}

/* v2.9 initial template grid: make thumbnails compact on mobile */
@media(max-width:640px){
  .template-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }
}


/* Ohav Maker Pro v3.2 UI refinement */
/* 2. おはVテンプレート: compact text scale slider */
.text-scale-field{
  margin:10px 0 0 !important;
  padding:8px 8px 2px !important;
  border-top:1px solid rgba(234,221,232,.75);
}
#textArtScaleRange{
  margin:2px 0 0 !important;
  padding:0 !important;
  min-height:18px !important;
  height:18px !important;
  display:block !important;
}
#textArtScaleRange::-webkit-slider-runnable-track{
  height:4px;
}
#textArtScaleRange::-webkit-slider-thumb{
  margin-top:-5px;
}


/* Ohav Maker Pro v3.4 post textarea scroll fix */
#postText{
  max-height:240px !important;
  min-height:150px !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  touch-action:auto !important;
  resize:vertical !important;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:640px){
  #postText{
    max-height:220px !important;
    min-height:150px !important;
  }
}


/* Ohav Free UI Limited v2 - safe full replacement */
.free-badge{
  background:linear-gradient(135deg,#6ee7b7,#93c5fd) !important;
  color:#123 !important;
}

.free-pro-teaser{
  margin-top:12px;
  padding:12px;
  border:1px dashed rgba(120,120,140,.42);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  color:#5b5568;
  font-size:13px;
  line-height:1.6;
}

.free-pro-teaser strong{
  display:block;
  color:#3f3a4d;
  margin-bottom:4px;
}

.locked-template-preview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

.locked-template-card{
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(120,120,140,.25);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(240,238,248,.78));
  color:#837b94;
  font-weight:700;
  text-align:center;
}

.locked-template-card::before{
  content:"🔒";
  display:block;
  font-size:14px;
  margin-bottom:2px;
}

.locked-template-card small{
  font-size:11px;
  opacity:.85;
}

.free-field-note{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:#7b7289;
}

.pro-locked-hashtag{
  opacity:.58;
  cursor:not-allowed !important;
  filter:grayscale(.35);
  border-style:dashed !important;
}

.pro-locked-hashtag span{
  display:inline-block;
  margin-left:4px;
  padding:1px 5px;
  border-radius:999px;
  font-size:10px;
  background:rgba(120,110,150,.16);
  color:#6b6278;
}

@media(max-width:640px){
  .free-pro-teaser{
    font-size:12px;
  }
}


/* Ohav Free UI Limited v2b */
#freeTemplateTeaser .locked-template-preview,
#freeTemplateTeaser .locked-template-card{
  display:none !important;
}