:root{
  --bg:#0b0f18;--panel:#111827;--panel2:#0f1726;--line:#263449;--text:#f7fbff;--muted:#9eadc3;
  --primary:#7cc7ff;--primary2:#b782ff;--danger:#ff7b8c;--shadow:0 18px 50px rgba(0,0,0,.28);
  --side:390px;--top:76px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top left,#18294a 0,#0b0f18 38%,#070a10 100%);color:var(--text);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.topbar{position:sticky;top:0;z-index:20;min-height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,12,20,.86);backdrop-filter:blur(12px)}.brand-kicker{font-size:11px;color:var(--primary);font-weight:800;letter-spacing:.08em}.brand h1{font-size:24px;margin:0;font-family:"M PLUS Rounded 1c",system-ui,sans-serif}.brand p{margin:3px 0 0;color:var(--muted);font-size:12px}.top-links{display:flex;gap:8px;flex-wrap:wrap}.top-links a{padding:9px 12px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;text-decoration:none;font-weight:800;font-size:12px}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:16px;padding:16px;align-items:start}.workspace-card,.side-panel{min-width:0}.workspace-card{background:rgba(17,24,39,.86);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:14px;box-shadow:var(--shadow)}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.workspace-head strong{display:block;font-size:15px}.workspace-head small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.workspace-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}button{border:1px solid var(--line);background:#121d31;color:var(--text);border-radius:13px;padding:10px 12px;font-weight:800;transition:.14s ease}button:hover{border-color:#5b789d;transform:translateY(-1px)}button.primary,.source-tabs button.active,.category-tabs button.active{border-color:rgba(124,199,255,.85);background:linear-gradient(135deg,rgba(124,199,255,.22),rgba(183,130,255,.2));box-shadow:0 0 0 1px rgba(124,199,255,.16) inset}.danger{border-color:rgba(255,123,140,.8);color:#ffdce1}.stage-viewport{position:relative;height:calc(100vh - 168px);min-height:520px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:#060910;overflow:hidden;display:flex;align-items:center;justify-content:center}.stage{position:relative;background:#121b2b;background-image:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.04) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;transform-origin:center center;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.42)}.stage.mode-header{width:1125px;height:480px}.stage.mode-ring{width:513px;height:513px;border-radius:0}.layer{position:absolute;left:0;top:0;transform-origin:center center;touch-action:none;user-select:none}.layer.selected{outline:2px solid #7cc7ff;outline-offset:4px}.layer img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.text-layer{white-space:pre-wrap;line-height:1.12;font-weight:900;text-align:center}.resize-handle{position:absolute;right:-11px;bottom:-11px;width:22px;height:22px;border-radius:999px;background:#7cc7ff;border:3px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.4);display:none}.layer.selected .resize-handle{display:block}.hint,.subnote{color:var(--muted);font-size:12px;line-height:1.6}.hint{margin:12px 2px 0}.side-panel{position:sticky;top:calc(var(--top) + 14px);display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - var(--top) - 28px);overflow:auto}.block{background:rgba(17,24,39,.92);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}.block summary{list-style:none;padding:14px 16px;font-weight:900;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.block summary::-webkit-details-marker{display:none}.block summary::after{content:"＋";color:var(--muted);font-size:18px}.block[open] summary::after{content:"－"}.block-body{padding:0 14px 14px}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);font-weight:800;margin:0 0 10px}.field input,.field select,.field textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:13px;background:#0b1220;color:var(--text)}.field textarea{resize:vertical}.check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:8px 0 12px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.source-tabs,.category-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.source-tabs button,.category-tabs button{padding:8px 10px;font-size:12px}.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.filter-chip{padding:6px 9px;font-size:11px;border-radius:999px;color:var(--muted)}.filter-chip.active{color:var(--text);border-color:var(--primary)}.asset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:120px}.asset-card{padding:0;border-radius:16px;overflow:hidden;background:#08101d;border:1px solid rgba(255,255,255,.08)}.asset-thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#060b13;background-image:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 55%)}.asset-thumb img{width:90%;height:90%;object-fit:contain;display:block}.asset-name{display:block;min-height:34px;padding:7px 8px;color:#dbe7f5;font-size:11px;text-align:left;line-height:1.35}.object-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.block-btn{width:100%;margin-bottom:8px}.status-row{font-size:12px;color:var(--muted)}.status-row strong{color:#99f0c0}.qr-box{margin-top:12px;padding:14px;border:1px solid rgba(124,199,255,.35);border-radius:18px;background:#0a1220;text-align:center}.qr-box img{width:180px;height:180px;max-width:100%;background:#fff;border-radius:12px;padding:8px}.qr-box a{display:inline-block;margin-top:8px;color:#bfe6ff;font-weight:900}.subtle{opacity:.84}.legal p{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.7}@media(max-width:1050px){:root{--side:340px}.app-shell{grid-template-columns:1fr}.side-panel{position:relative;top:auto;max-height:none}.stage-viewport{height:58vh;min-height:390px}.brand p{display:none}}@media(max-width:640px){.topbar{align-items:flex-start}.brand h1{font-size:20px}.app-shell{padding:10px}.workspace-card{padding:10px;border-radius:18px}.workspace-head{align-items:flex-start;flex-direction:column}.stage-viewport{height:52vh;min-height:320px}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.top-links a{padding:8px 10px}}


/* =========================================================
   v1.1 initial operation fixes
   - accordion height/visibility
   - header icon placement guide
   ========================================================= */
.side-panel{
  max-height:none !important;
  overflow:visible !important;
  align-self:start;
}
.block{
  overflow:visible !important;
  min-height:54px;
}
.block summary{
  min-height:54px;
  padding:16px 18px;
  gap:12px;
}
.block-body{
  display:block;
  padding:2px 16px 18px;
}
.block[open] .block-body{
  min-height:0;
  overflow:visible;
}
.block[open]#materialsBlock .block-body{
  padding-bottom:20px;
}
.asset-grid{
  min-height:180px;
}
.stage.mode-header::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-128px;
  width:513px;
  height:513px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:2px dashed rgba(255,255,255,.88);
  clip-path:inset(0 0 25% 0);
  pointer-events:none;
  z-index:99990;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.18);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.8));
}
.stage.mode-header::after{
  content:"アイコン表示想定エリア";
  position:absolute;
  left:50%;
  bottom:70px;
  transform:translateX(-50%);
  z-index:99991;
  pointer-events:none;
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
  text-shadow:0 2px 8px rgba(0,0,0,.86);
}
.stage.mode-ring::before,
.stage.mode-ring::after{
  display:none;
}
@media(max-width:1050px){
  .side-panel{overflow:visible !important;max-height:none !important;}
  .block summary{min-height:56px;padding:16px 18px;}
  .block-body{padding:2px 16px 18px;}
}


/* =========================================================
   v1.2 ring canvas / text color UI fixes
   - ring canvas is a 513x513 square, not a clipped circle
   - show outer and inner circular guides on the square canvas
   - make text color selection more visible
   ========================================================= */
.stage.mode-ring{
  width:513px !important;
  height:513px !important;
  border-radius:0 !important;
  overflow:hidden !important;
}
.stage.mode-ring::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:50%;
  top:50%;
  width:513px;
  height:513px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.9);
  background:transparent;
  pointer-events:none;
  z-index:99990;
  box-shadow:0 0 0 1px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.22);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.85));
}
.stage.mode-ring::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:50%;
  top:50%;
  width:356px;
  height:356px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.58);
  background:rgba(6,9,16,.22);
  pointer-events:none;
  z-index:99991;
  box-shadow:0 0 0 1px rgba(0,0,0,.2), inset 0 0 18px rgba(0,0,0,.2);
}
.color-field{gap:8px}
.color-control{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:10px;
  align-items:center;
}
.color-control input[type="color"]{
  width:56px;
  min-width:56px;
  height:42px;
  padding:3px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.2);
  background:#0b1220;
}
.color-value{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#0b1220;
  color:#dbe7f5;
  font-size:13px;
  letter-spacing:.04em;
}
.color-presets{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:-2px 0 12px;
}
.color-presets button{
  position:relative;
  min-height:38px;
  padding:8px 8px 8px 34px;
  font-size:12px;
  text-align:left;
}
.color-presets button::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--swatch);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.color-presets button.is-active{
  border-color:rgba(124,199,255,.9);
  box-shadow:0 0 0 1px rgba(124,199,255,.24) inset;
}
@media(max-width:640px){
  .color-presets{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* =========================================================
   v1.3 ring guide / asset speed / filter compatibility fixes
   ========================================================= */
.stage.mode-ring::before{
  left:2px !important;
  top:2px !important;
  width:507px !important;
  height:507px !important;
  transform:none !important;
}
.stage.mode-ring::after{
  width:350px !important;
  height:350px !important;
}
.asset-grid{align-items:start}
.asset-more-btn{
  grid-column:1 / -1;
  min-height:44px;
  border-style:dashed;
  background:rgba(9,16,29,.85);
}
.filter-bar{margin-bottom:12px}


/* =========================================================
   v1.3.3 layout / 3-column thumbs / sticky canvas fixes
   ========================================================= */
@media (min-width:1051px){
  :root{
    --side: 500px;
  }
  .app-shell{
    grid-template-columns:minmax(560px, 0.92fr) var(--side) !important;
    gap:16px !important;
    align-items:start !important;
  }
  .workspace-card{
    position:sticky !important;
    top:calc(var(--top) + 14px) !important;
    align-self:start !important;
    max-width:100% !important;
  }
  .stage-viewport{
    height:calc(100vh - 190px) !important;
    min-height:470px !important;
  }
  .side-panel{
    width:100% !important;
  }
}

/* Right panel: show material thumbnails in 3 columns */
.asset-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

/* Remove caption/sub text under thumbnails */
.asset-name{
  display:none !important;
}
.asset-card{
  min-height:0 !important;
}
.asset-thumb{
  aspect-ratio:1/1 !important;
}
.asset-thumb img{
  width:92% !important;
  height:92% !important;
}

/* Keep load-more button full width under the 3-column grid */
.asset-more-btn{
  grid-column:1 / -1 !important;
}

/* On narrower screens keep 2 columns for touch comfort */
@media (max-width:640px){
  .asset-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .workspace-card{
    position:relative !important;
    top:auto !important;
  }
}


/* =========================================================
   v1.3.4 space utilization fixes
   - remove wasted right-side blank space
   - enlarge canvas inside workspace
   - keep canvas sticky while scrolling
   ========================================================= */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0 !important;
}
.topbar{
  padding-left:10px !important;
  padding-right:10px !important;
}
.app-shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:8px 8px 14px !important;
  box-sizing:border-box !important;
}

@media (min-width:1051px){
  :root{
    --side: 540px;
  }
  .app-shell{
    grid-template-columns:minmax(0, 1fr) var(--side) !important;
    gap:10px !important;
  }
  .workspace-card{
    position:sticky !important;
    top:calc(var(--top) + 8px) !important;
    padding:8px !important;
    border-radius:18px !important;
  }
  .workspace-head{
    margin-bottom:8px !important;
  }
  .stage-viewport{
    height:calc(100vh - 132px) !important;
    min-height:520px !important;
    border-radius:16px !important;
  }
  .side-panel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .side-panel .block{
    width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Make the canvas visual area use more of the card */
.stage-viewport{
  padding:0 !important;
}
.workspace-card .hint{
  margin-top:8px !important;
}

/* Right operation area: consume available width cleanly */
.block-body{
  width:100% !important;
  box-sizing:border-box !important;
}
.asset-grid{
  width:100% !important;
}

/* Slightly tighter side controls so the expanded right panel is fully useful */
.block summary{
  padding-left:14px !important;
  padding-right:14px !important;
}
.block-body{
  padding-left:12px !important;
  padding-right:12px !important;
}
.source-tabs,
.category-tabs,
.filter-bar{
  width:100% !important;
}

@media(max-width:1050px){
  .app-shell{
    padding:8px !important;
  }
  .workspace-card{
    position:relative !important;
    top:auto !important;
  }
}


/* =========================================================
   v1.3.5 canvas sticky / space fix
   - robust fixed canvas on desktop
   - right panel uses the remaining space
   - stage uses almost all available workspace width/height
   ========================================================= */
@media (min-width:1051px){
  :root{
    --right-panel-w: 540px;
    --layout-gap: 8px;
    --page-pad: 6px;
    --fixed-top: 6px;
    --canvas-w: calc(100vw - var(--right-panel-w) - var(--layout-gap) - (var(--page-pad) * 2));
  }

  body{
    overflow-x:hidden !important;
  }

  .topbar{
    display:none !important;
  }

  .app-shell{
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
    padding:var(--page-pad) !important;
    box-sizing:border-box !important;
  }

  .workspace-card{
    position:fixed !important;
    left:var(--page-pad) !important;
    top:var(--fixed-top) !important;
    width:var(--canvas-w) !important;
    height:calc(100vh - (var(--fixed-top) * 2)) !important;
    z-index:20 !important;
    padding:6px !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .workspace-head{
    margin-bottom:4px !important;
    min-height:42px !important;
  }

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

  .workspace-actions button{
    padding:9px 12px !important;
  }

  .stage-viewport{
    height:calc(100vh - 74px) !important;
    min-height:0 !important;
    width:100% !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  .workspace-card .hint{
    display:none !important;
  }

  .qr-box{
    position:absolute !important;
    left:12px !important;
    bottom:12px !important;
    right:12px !important;
    z-index:30 !important;
  }

  .side-panel{
    margin-left:calc(var(--canvas-w) + var(--layout-gap)) !important;
    width:var(--right-panel-w) !important;
    max-width:var(--right-panel-w) !important;
    position:relative !important;
    top:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    overflow:visible !important;
    max-height:none !important;
  }

  .block{
    border-radius:16px !important;
  }

  .block summary{
    min-height:46px !important;
    padding:12px 14px !important;
  }

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

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


/* =========================================================
   v1.3.6 canvas space / creator emphasis / top layer buttons / legal compact
   ========================================================= */
@media (min-width:1051px){
  :root{
    --right-panel-w: 520px;
    --layout-gap: 12px;
    --page-pad: 10px;
    --fixed-top: 8px;
    --canvas-w: calc(100vw - var(--right-panel-w) - var(--layout-gap) - (var(--page-pad) * 2));
  }

  .workspace-card{
    padding:4px !important;
  }

  .workspace-head{
    min-height:38px !important;
    margin-bottom:2px !important;
  }

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

  .workspace-head small{
    font-size:11px !important;
    margin-top:0 !important;
  }

  .stage-viewport{
    height:calc(100vh - 54px) !important;
    border-radius:12px !important;
  }

  .side-panel{
    width:var(--right-panel-w) !important;
    max-width:var(--right-panel-w) !important;
  }
}

.workspace-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.canvas-layer-actions,
.canvas-export-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.canvas-layer-actions{
  padding-right:8px;
  border-right:1px solid rgba(255,255,255,.12);
}
.canvas-layer-actions button,
.canvas-export-actions button{
  padding:8px 10px !important;
  font-size:12px !important;
  border-radius:11px !important;
}

.source-tabs .creator-source-btn{
  position:relative;
  border-color:rgba(255,214,102,.72) !important;
  background:linear-gradient(135deg,rgba(255,214,102,.22),rgba(255,120,178,.16)) !important;
  color:#fff5c4 !important;
  box-shadow:0 0 0 1px rgba(255,214,102,.18) inset,0 8px 20px rgba(255,180,80,.08);
}
.source-tabs .creator-source-btn.active{
  border-color:rgba(255,232,145,.95) !important;
  background:linear-gradient(135deg,rgba(255,214,102,.34),rgba(255,120,178,.25)) !important;
  box-shadow:0 0 0 1px rgba(255,232,145,.36) inset,0 0 18px rgba(255,214,102,.12);
}

.creator-list-link-wrap{
  margin:-2px 0 10px;
  text-align:right;
}
.creator-list-link-wrap a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#ffd978;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(255,217,120,.32);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,217,120,.08);
}
.creator-list-link-wrap a:hover{
  border-color:rgba(255,217,120,.72);
}

.legal-accordion{
  margin-top:4px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(17,24,39,.42);
  box-shadow:none;
  opacity:.72;
}
.legal-accordion summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  color:rgba(226,232,240,.72);
  font-size:12px;
  font-weight:800;
}
.legal-accordion summary::-webkit-details-marker{display:none}
.legal-body{
  padding:0 12px 12px;
}
.legal-body p{
  margin:0 0 8px;
  color:rgba(226,232,240,.62);
  font-size:11px;
  line-height:1.7;
}

.asset-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media(max-width:760px){
  .workspace-actions{
    justify-content:flex-start !important;
  }
  .canvas-layer-actions{
    border-right:0;
    padding-right:0;
  }
}


/* =========================================================
   v1.3.7 polish
   - small right-side page margin
   - creator button no longer looks selected by default
   - layer buttons moved inside canvas viewport
   - correct legal text styling
   ========================================================= */
@media (min-width:1051px){
  :root{
    --right-panel-w: 508px;
    --layout-gap: 12px;
    --page-pad: 18px;
    --fixed-top: 8px;
    --canvas-w: calc(100vw - var(--right-panel-w) - var(--layout-gap) - (var(--page-pad) * 2));
  }

  .workspace-card{
    padding:4px !important;
  }

  .stage-viewport{
    height:calc(100vh - 54px) !important;
  }

  .side-panel{
    width:var(--right-panel-w) !important;
    max-width:var(--right-panel-w) !important;
  }
}

/* Floating layer operations inside canvas area */
.stage-viewport{
  position:relative !important;
}
.stage-layer-floating{
  position:absolute;
  right:12px;
  top:12px;
  z-index:99999;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  pointer-events:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(4,8,16,.54);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.stage-layer-floating button{
  padding:7px 9px !important;
  font-size:12px !important;
  border-radius:10px !important;
  background:rgba(18,29,49,.82) !important;
}

/* Header should only contain export actions */
.workspace-actions{
  justify-content:flex-end !important;
}
.canvas-export-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* Creator material button: premium but not active-looking */
.source-tabs .creator-source-btn{
  position:relative;
  border-color:rgba(255,214,102,.38) !important;
  background:rgba(18,29,49,.88) !important;
  color:#ffe7a3 !important;
  box-shadow:inset 0 0 0 1px rgba(255,214,102,.08);
}
.source-tabs .creator-source-btn::after{
  content:"特別";
  margin-left:6px;
  font-size:10px;
  color:#2a1b00;
  background:linear-gradient(135deg,#ffe793,#ffbf66);
  border-radius:999px;
  padding:2px 6px;
  vertical-align:middle;
}
.source-tabs .creator-source-btn.active{
  border-color:rgba(124,199,255,.9) !important;
  background:linear-gradient(135deg,rgba(124,199,255,.22),rgba(255,214,102,.16)) !important;
  color:#fff8d6 !important;
  box-shadow:0 0 0 1px rgba(124,199,255,.20) inset;
}

/* Legal: compact, subdued, but full free-version wording */
.legal-accordion{
  opacity:.78 !important;
}
.legal-body{
  max-height:48vh;
  overflow:auto;
  padding:0 12px 12px !important;
}
.legal-body p,
.legal-body li{
  color:rgba(226,232,240,.64);
  font-size:11px;
  line-height:1.72;
}
.legal-body ul{
  margin:6px 0 12px 1.1em;
  padding:0;
}
.legal-heading{
  margin-top:12px !important;
  margin-bottom:5px !important;
  color:rgba(255,255,255,.78) !important;
  font-weight:900;
}
.legal-links a{
  color:#bfe6ff;
  text-decoration:none;
  border-bottom:1px dotted rgba(191,230,255,.5);
}
.legal-links a:hover{
  color:#fff;
}


/* =========================================================
   v1.3.8 source-specific categories / title restore polish
   ========================================================= */
@media (min-width:1051px){
  :root{
    --right-panel-w: 508px;
    --layout-gap: 12px;
    --page-pad: 18px;
    --fixed-top: 8px;
    --canvas-w: calc(100vw - var(--right-panel-w) - var(--layout-gap) - (var(--page-pad) * 2));
  }

  .workspace-head{
    display:grid !important;
    grid-template-columns:minmax(150px, auto) 1fr !important;
    align-items:start !important;
    gap:8px !important;
    min-height:46px !important;
    margin-bottom:4px !important;
  }

  .workspace-head > div:first-child{
    min-width:150px !important;
    max-width:220px !important;
    overflow:visible !important;
  }

  .workspace-head strong{
    display:block !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1.25 !important;
    color:#f3f7ff !important;
  }

  .workspace-head small{
    display:block !important;
    white-space:nowrap !important;
    color:rgba(226,232,240,.78) !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }

  .workspace-actions{
    min-width:0 !important;
    overflow:visible !important;
  }

  .stage-viewport{
    height:calc(100vh - 64px) !important;
  }
}

/* Show illustrator directory only when creator materials are selected */
.creator-list-link-wrap{
  display:none;
}
body.is-creator-source .creator-list-link-wrap{
  display:block;
}

/* Keep generated/creator category behavior clear */
.category-tabs button[hidden]{
  display:none !important;
}
body.is-creator-source .category-tabs{
  border-top:1px solid rgba(255,217,120,.10);
  padding-top:8px;
}
body.is-creator-source .creator-list-link-wrap{
  margin-top:-4px;
}


/* =========================================================
   v1.3.9 topbar restore / creator link left
   - restore title bar with Free/Top links
   - keep fixed canvas below title bar
   - move illustrator directory link to the left
   ========================================================= */
@media (min-width:1051px){
  :root{
    --topbar-h: 98px;
    --right-panel-w: 508px;
    --layout-gap: 12px;
    --page-pad: 18px;
    --fixed-top: calc(var(--topbar-h) + 8px);
    --canvas-w: calc(100vw - var(--right-panel-w) - var(--layout-gap) - (var(--page-pad) * 2));
  }

  .topbar{
    display:flex !important;
    position:relative !important;
    z-index:80 !important;
    min-height:var(--topbar-h) !important;
    padding:14px 20px !important;
    box-sizing:border-box !important;
    background:rgba(7,12,23,.96) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .brand h1{
    display:block !important;
    margin:2px 0 4px !important;
    font-size:24px !important;
    line-height:1.15 !important;
    color:#f5f7fb !important;
  }

  .brand-kicker{
    display:block !important;
    font-size:12px !important;
    color:#9ddcff !important;
    font-weight:900 !important;
  }

  .brand p{
    display:block !important;
    margin:0 !important;
    font-size:12px !important;
    color:rgba(226,232,240,.72) !important;
  }

  .top-links{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }

  .top-links a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:8px 13px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#eaf4ff !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:900 !important;
    background:rgba(18,29,49,.62) !important;
  }

  .app-shell{
    padding-top:8px !important;
  }

  .workspace-card{
    top:var(--fixed-top) !important;
    height:calc(100vh - var(--fixed-top) - 8px) !important;
  }

  .stage-viewport{
    height:calc(100vh - var(--fixed-top) - 58px) !important;
  }

  .side-panel{
    margin-top:0 !important;
  }
}

/* Illustrator directory link should sit at the left, not right */
.creator-list-link-wrap{
  text-align:left !important;
}
body.is-creator-source .creator-list-link-wrap{
  display:block !important;
}
.creator-list-link-wrap a{
  justify-content:flex-start !important;
}


/* =========================================================
   v1.4.0 topbar fixed + free-version text UI
   ========================================================= */
@media (min-width:1051px){
  :root{--topbar-h:98px;--fixed-top:calc(var(--topbar-h) + 8px)}
  .topbar{
    position:fixed !important;
    left:0 !important;right:0 !important;top:0 !important;
    z-index:100000 !important;
  }
  .app-shell{margin-top:var(--topbar-h) !important;}
  .workspace-card{top:var(--fixed-top) !important;height:calc(100vh - var(--fixed-top) - 8px) !important;}
  .stage-viewport{height:calc(100vh - var(--fixed-top) - 58px) !important;}
}
.text-tools{display:grid;gap:8px;margin-top:0}
.text-tools .block-btn{margin-bottom:2px}
.field-text-content textarea{min-height:72px;resize:vertical}
.inline.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.field.compact{margin-bottom:8px}
.field.compact input[type="range"]{padding:0;accent-color:#7cc7ff}
.font-quick-picks{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.mini-chip{appearance:none;border:1px solid var(--line);background:#121d31;color:var(--text);border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer;font-weight:800}
.mini-chip:hover{border-color:#4b678f;transform:translateY(-1px)}
.text-tools-block .field span{font-size:12px;color:var(--muted);font-weight:900}
.text-layer{white-space:pre-wrap;line-height:1.25;min-width:40px;padding:0;margin:0;text-align:left}


/* =========================================================
   v1.4.1 text UI polish / font load / export alignment
   ========================================================= */
.stage-layer-floating{
  top:10px !important;
  right:10px !important;
  opacity:.92;
}
.stage-layer-floating button{
  min-width:0 !important;
}

/* Text section: closer to free version, more readable */
.text-tool-body{
  position:relative;
}
.text-add-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  color:rgba(226,232,240,.78);
  font-size:12px;
  font-weight:900;
}
.text-add-head .primary{
  padding:8px 12px !important;
}
.text-full{
  margin-bottom:10px !important;
}
.font-preset-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 12px;
}
.font-preset-grid button{
  padding:9px 8px;
  font-size:12px;
  border-radius:12px;
}
.font-preset-grid button.is-active{
  border-color:rgba(124,199,255,.9);
  background:linear-gradient(135deg,rgba(124,199,255,.22),rgba(183,130,255,.16));
}
.text-controls-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.text-controls-grid .field{
  margin-bottom:2px;
}
.color-popup-btn{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  padding:8px 10px !important;
  border-radius:12px;
  background:#0b1220 !important;
}
.color-chip{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  flex:0 0 auto;
}
.native-color-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.color-palette-popover{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:50;
  padding:12px;
  border:1px solid rgba(124,199,255,.28);
  border-radius:16px;
  background:rgba(8,14,26,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.color-palette-title{
  margin-bottom:8px;
  color:#eaf4ff;
  font-size:12px;
  font-weight:900;
}
.color-palette-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.color-palette-grid button{
  position:relative;
  min-height:38px;
  padding:8px 4px 6px;
  font-size:11px;
  border-radius:12px;
}
.color-palette-grid button::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  margin:0 auto 4px;
  border-radius:999px;
  background:var(--swatch);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 0 0 1px rgba(0,0,0,.3);
}
.native-color-open{
  width:100%;
  margin-top:9px;
  padding:9px !important;
}
.text-layer{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

@media(max-width:640px){
  .text-controls-grid{
    grid-template-columns:1fr;
  }
  .font-preset-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v1.4.2 material distinction / deco sizing / resize / color UI
   ========================================================= */
#materialsBlock{border-color:rgba(255,214,102,.34) !important;}
body.is-creator-source #materialsBlock{border-color:rgba(72,211,123,.42) !important;box-shadow:0 0 0 1px rgba(72,211,123,.10) inset,0 10px 30px rgba(0,0,0,.18);}
body.is-generated-source #materialsBlock{border-color:rgba(255,214,102,.36) !important;box-shadow:0 0 0 1px rgba(255,214,102,.08) inset,0 10px 30px rgba(0,0,0,.18);}
.asset-card.source-generated{border-color:rgba(255,214,102,.26) !important;box-shadow:0 0 0 1px rgba(255,214,102,.06) inset;}
.asset-card.source-creator{border-color:rgba(72,211,123,.34) !important;box-shadow:0 0 0 1px rgba(72,211,123,.10) inset;}
.asset-card.source-creator .asset-thumb{background:linear-gradient(135deg,rgba(72,211,123,.10),rgba(124,199,255,.06)),#060b13 !important;}
.resize-handle{width:16px !important;height:16px !important;display:none;z-index:20;}
.layer.selected .resize-handle{display:block;}
.resize-nw{left:-8px;top:-8px;right:auto!important;bottom:auto!important;cursor:nwse-resize}
.resize-ne{right:-8px;top:-8px;bottom:auto!important;cursor:nesw-resize}
.resize-sw{left:-8px;bottom:-8px;right:auto!important;top:auto!important;cursor:nesw-resize}
.resize-se{right:-8px;bottom:-8px;cursor:nwse-resize}
.color-popup-btn{background:#ffffff !important;border:1px solid rgba(255,255,255,.32) !important;min-height:36px !important;}
.color-popup-btn span:not(.color-chip){color:#111827 !important;font-weight:900;}
.color-palette-popover{bottom:auto !important;top:112px !important;left:10px !important;right:10px !important;}
.hex-color-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px;}
.hex-color-row input{min-height:36px;border:1px solid var(--line);border-radius:10px;background:#0b1220;color:#eaf4ff;padding:0 10px;font-weight:900;letter-spacing:.04em;}
.hex-color-row button{padding:8px 11px !important;}
.text-layer{display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;overflow:visible !important;}
.layer.selected{cursor:move;}


/* =========================================================
   v1.4.3 material split + free-compatible color boxes
   ========================================================= */

/* 2.1 / 2.2 source split */
.source-tabs{display:none !important}
.material-source-accordions{
  display:grid;
  gap:10px;
  margin:0 0 12px;
}
.material-source-card{
  border-radius:18px;
  overflow:hidden;
  background:rgba(9,16,29,.74);
  border:1px solid rgba(255,255,255,.10);
}
.material-source-card summary::-webkit-details-marker{display:none}
.material-source-summary{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "num main"
    "num sub";
  gap:2px 10px;
  align-items:center;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.material-source-summary .source-number{
  grid-area:num;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  color:#101827;
}
.material-source-summary .source-main{
  grid-area:main;
  font-weight:1000;
  font-size:15px;
  color:#f5f8ff;
}
.material-source-summary small{
  grid-area:sub;
  color:rgba(226,232,240,.68);
  font-size:11px;
  font-weight:800;
}
.generated-source-card{
  border-color:rgba(255,214,102,.46) !important;
  box-shadow:0 0 0 1px rgba(255,214,102,.12) inset;
}
.generated-source-card .source-number{
  background:linear-gradient(135deg,#ffe793,#ffb86b);
}
.creator-source-card{
  border-color:rgba(72,211,123,.56) !important;
  box-shadow:0 0 0 1px rgba(72,211,123,.14) inset;
}
.creator-source-card .source-number{
  background:linear-gradient(135deg,#72f0a6,#7cc7ff);
}
.material-source-summary.active{
  background:linear-gradient(135deg,rgba(124,199,255,.14),rgba(255,255,255,.03));
}
body.is-creator-source #materialsBlock{
  border-color:rgba(72,211,123,.58) !important;
}
body.is-generated-source #materialsBlock{
  border-color:rgba(255,214,102,.52) !important;
}
.creator-list-link-wrap{
  display:none;
  text-align:left !important;
  padding:0 12px 12px;
}
body.is-creator-source .creator-list-link-wrap{
  display:block !important;
}

/* Native color inputs: make the current color visible like the free version */
.text-tools .field.compact input[type="color"],
.text-tools input[type="color"]{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  padding:3px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:#0b1220 !important;
  cursor:pointer !important;
}
.text-tools input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0 !important;
}
.text-tools input[type="color"]::-webkit-color-swatch{
  border:0 !important;
  border-radius:7px !important;
}
.text-tools input[type="color"]::-moz-color-swatch{
  border:0 !important;
  border-radius:7px !important;
}
.color-popup-btn,
.color-palette-popover,
.hex-color-row{
  display:none !important;
}

/* make source difference visible on actual thumbnails too */
.asset-card.source-generated{
  border-color:rgba(255,214,102,.42) !important;
}
.asset-card.source-creator{
  border-color:rgba(72,211,123,.56) !important;
}
.asset-card.source-generated::before,
.asset-card.source-creator::before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  width:8px;
  height:8px;
  border-radius:999px;
  z-index:2;
}
.asset-card{position:relative}
.asset-card.source-generated::before{background:#ffd666}
.asset-card.source-creator::before{background:#48d37b}


/* =========================================================
   v1.4.4 material accordion / color circle polish
   ========================================================= */

/* Material source should be true accordions: content lives directly under active section */
.material-split-body{
  padding-top:2px !important;
}
.material-source-accordions{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.material-source-card{
  overflow:hidden !important;
}
.material-source-card > summary{
  list-style:none !important;
  cursor:pointer !important;
}
.material-source-card > summary::-webkit-details-marker{
  display:none !important;
}
.material-source-summary{
  position:relative;
  min-height:56px;
}
.material-source-summary::after{
  content:"＋";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.68);
  font-size:18px;
  font-weight:900;
}
.material-source-card[open] > .material-source-summary::after{
  content:"－";
}
.material-source-card:not([open]) .material-source-body{
  display:none !important;
}
.material-source-body{
  padding:10px 10px 12px;
}
.generated-source-card[open]{
  border-color:rgba(255,214,102,.50) !important;
  box-shadow:0 0 0 1px rgba(255,214,102,.14) inset;
}
.creator-source-card[open]{
  border-color:rgba(72,211,123,.56) !important;
  box-shadow:0 0 0 1px rgba(72,211,123,.16) inset;
}
.material-controls{
  display:block;
}

/* Keep creator directory left and only inside creator accordion */
.creator-list-link-wrap{
  text-align:left !important;
  margin:0 0 10px !important;
}

/* Compact, always-visible current color as circle */
.text-tools-block input[type="color"],
.text-tool-block input[type="color"],
#textColor,
#textOutlineColor,
#textShadowColor{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:3px solid rgba(255,255,255,.76) !important;
  background:var(--picked-color, currentColor) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.42),0 5px 14px rgba(0,0,0,.22) !important;
  overflow:hidden !important;
  cursor:pointer !important;
}
.text-tools-block input[type="color"]::-webkit-color-swatch-wrapper,
.text-tool-block input[type="color"]::-webkit-color-swatch-wrapper,
#textColor::-webkit-color-swatch-wrapper,
#textOutlineColor::-webkit-color-swatch-wrapper,
#textShadowColor::-webkit-color-swatch-wrapper{
  padding:0 !important;
}
.text-tools-block input[type="color"]::-webkit-color-swatch,
.text-tool-block input[type="color"]::-webkit-color-swatch,
#textColor::-webkit-color-swatch,
#textOutlineColor::-webkit-color-swatch,
#textShadowColor::-webkit-color-swatch{
  border:0 !important;
  border-radius:999px !important;
}
.text-tools-block .field.compact,
.text-tool-block .field.compact{
  align-items:flex-start;
}

/* If v1.4.1/v1.4.2 palette remains from an older cache, keep it out of the way */
.color-palette-popover{
  max-width:280px;
}


/* =========================================================
   v1.4.5 material accordion fix / compact text controls
   ========================================================= */

/* Real accordion header: remove unrequested explanation text and show explicit +/- */
.material-source-summary{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  grid-template-areas:"num main toggle" !important;
  gap:10px !important;
  align-items:center !important;
  min-height:58px !important;
}
.material-source-summary small{
  display:none !important;
}
.material-source-summary::after{
  content:none !important;
  display:none !important;
}
.source-toggle{
  grid-area:toggle;
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  font-weight:1000;
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.material-source-card[open] > .material-source-summary .source-toggle{
  color:#0b1220;
}
.generated-source-card[open] > .material-source-summary .source-toggle{
  background:#ffe793;
}
.creator-source-card[open] > .material-source-summary .source-toggle{
  background:#72f0a6;
}

/* Content must appear directly under opened source, not after both headers */
.material-source-card:not([open]) .material-source-body{
  display:none !important;
}
.material-source-card[open] .material-source-body{
  display:block !important;
  padding:10px 10px 12px !important;
  border-top:1px solid rgba(255,255,255,.08);
}
.material-source-accordions{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.material-controls{
  display:block !important;
  width:100% !important;
}

/* Compact the text section by using horizontal space more aggressively */
@media (min-width:1051px){
  .text-tools-block .inline.two,
  .text-tool-block .inline.two{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .text-tools-block .font-preset-grid,
  .text-tool-block .font-preset-grid{
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
    scrollbar-width:thin;
  }
  .text-tools-block .font-preset-grid button,
  .text-tool-block .font-preset-grid button{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}

/* Color circles stay compact */
#textColor,
#textOutlineColor,
#textShadowColor{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  max-width:30px !important;
}

/* Horizontal-friendly range rows */
.text-tools-block input[type="range"],
.text-tool-block input[type="range"]{
  min-width:0 !important;
}


/* =========================================================
   v1.4.6 accordion toggle + text control space fix
   ========================================================= */

/* Make +/- actually feel like a button and keep it visible */
.source-toggle{
  pointer-events:none;
  flex:0 0 auto;
}
.material-source-summary{
  cursor:pointer !important;
}
.material-source-card:not([open]) .material-source-body{
  display:none !important;
}
#materialControls[style*="display: none"]{
  display:none !important;
}

/* Text section: use the horizontal space instead of leaving blank columns */
.text-tools-block .inline.two,
.text-tool-block .inline.two{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:end !important;
}
.text-tools-block .inline.two .field,
.text-tool-block .inline.two .field{
  margin:0 !important;
  min-width:0 !important;
}
.text-tools-block .field.compact,
.text-tool-block .field.compact{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  grid-template-areas:"label control" !important;
  align-items:center !important;
  gap:8px !important;
  min-height:42px !important;
}
.text-tools-block .field.compact > span,
.text-tool-block .field.compact > span{
  grid-area:label !important;
  white-space:nowrap !important;
  margin:0 !important;
  font-size:11px !important;
}
.text-tools-block .field.compact > input,
.text-tools-block .field.compact > select,
.text-tool-block .field.compact > input,
.text-tool-block .field.compact > select{
  grid-area:control !important;
  min-width:0 !important;
}
.text-tools-block .field.compact input[type="range"],
.text-tool-block .field.compact input[type="range"]{
  width:100% !important;
}
.text-tools-block .field.compact input[type="color"],
.text-tool-block .field.compact input[type="color"],
#textColor,
#textOutlineColor,
#textShadowColor{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  justify-self:start !important;
}
.text-tools-block select,
.text-tool-block select{
  min-height:36px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}
@media(max-width:1250px){
  .text-tools-block .inline.two,
  .text-tool-block .inline.two{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v1.4.7 accordion close hard fix / dense text layout
   ========================================================= */

/* Native details toggle is overridden by JS; make rows clearly clickable */
.material-source-summary{
  user-select:none !important;
}
.source-toggle{
  pointer-events:none !important;
}

/* Dense text controls: make the right side useful, not blank */
.text-tools-block .inline.two,
.text-tool-block .inline.two{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:8px !important;
  align-items:center !important;
  margin:8px 0 !important;
}
.text-tools-block .field.compact,
.text-tool-block .field.compact{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:7px !important;
  min-height:34px !important;
  margin:0 !important;
}
.text-tools-block .field.compact > span,
.text-tool-block .field.compact > span{
  white-space:nowrap !important;
  font-size:11px !important;
  line-height:1 !important;
  margin:0 !important;
}
.text-tools-block .field.compact input[type="range"],
.text-tool-block .field.compact input[type="range"]{
  width:100% !important;
  min-width:54px !important;
}
.text-tools-block .field.compact select,
.text-tool-block .field.compact select{
  width:100% !important;
  min-width:72px !important;
  min-height:32px !important;
  padding:5px 26px 5px 9px !important;
  border-radius:10px !important;
}
.text-tools-block .field.compact input[type="color"],
.text-tool-block .field.compact input[type="color"],
#textColor,#textOutlineColor,#textShadowColor{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  justify-self:start !important;
}
.text-tools-block .font-preset-grid,
.text-tool-block .font-preset-grid{
  display:flex !important;
  gap:7px !important;
  overflow-x:auto !important;
  padding:0 0 4px !important;
  margin:8px 0 !important;
  scrollbar-width:thin !important;
}
.text-tools-block .font-preset-grid button,
.text-tool-block .font-preset-grid button{
  flex:0 0 auto !important;
  padding:7px 10px !important;
  white-space:nowrap !important;
  border-radius:10px !important;
}
@media(max-width:1280px){
  .text-tools-block .inline.two,
  .text-tool-block .inline.two{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   v1.4.8: no-details material accordion + real dense text grid
   ========================================================= */

/* Material cards are DIV + BUTTON now. Do not rely on details/open anymore. */
.material-source-card{
  display:block !important;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
  padding:10px 10px 12px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
.material-source-summary{
  width:100% !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  text-align:left !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  grid-template-areas:"num main toggle" !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  background:transparent !important;
  cursor:pointer !important;
}
.material-source-summary::after{
  content:none !important;
  display:none !important;
}
.material-source-summary small{
  display:none !important;
}
.source-toggle{
  grid-area:toggle !important;
  pointer-events:none !important;
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  font-weight:1000 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.86) !important;
}
.generated-source-card.is-open .source-toggle{
  background:#ffe793 !important;
  color:#0b1220 !important;
}
.creator-source-card.is-open .source-toggle{
  background:#72f0a6 !important;
  color:#0b1220 !important;
}
#materialControls[hidden]{
  display:none !important;
}

/* Text controls: use the full width, two rows of four controls */
.text-dense-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px 10px !important;
  align-items:end !important;
  margin:10px 0 0 !important;
}
.text-dense-grid .field.compact{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  min-height:34px !important;
  margin:0 !important;
}
.text-dense-grid .field.compact > span{
  white-space:nowrap !important;
  font-size:11px !important;
  line-height:1 !important;
  margin:0 !important;
  color:#a9d7ff !important;
}
.text-dense-grid input[type="range"]{
  width:100% !important;
  min-width:54px !important;
}
.text-dense-grid select{
  width:100% !important;
  min-width:78px !important;
  min-height:32px !important;
  padding:5px 24px 5px 8px !important;
  border-radius:10px !important;
}
.text-dense-grid input[type="color"],
#textColor,
#textOutlineColor,
#textShadowColor{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  justify-self:start !important;
  border-width:2px !important;
}

/* Remove old inline row spacing once text-dense-grid exists */
.text-tools-block .inline.two,
.text-tool-block .inline.two{
  margin:0 !important;
}

@media(max-width:1280px){
  .text-dense-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media(max-width:620px){
  .text-dense-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v1.4.9 HARD accordion override / no gomi definitions
   ========================================================= */
.material-source-card{
  display:block !important;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
}
.material-source-summary{
  width:100% !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.material-source-summary *{
  pointer-events:none !important;
}
.material-source-card:not(.is-open) .source-toggle{
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.86) !important;
}
#materialControls[hidden]{
  display:none !important;
}

/* v1.4.9 text dense layout: force 2 rows x 4 controls and fill right side */
.text-dense-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px 10px !important;
  width:100% !important;
}
.text-dense-grid .field.compact{
  display:grid !important;
  grid-template-columns:auto minmax(62px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 !important;
  min-width:0 !important;
}
.text-dense-grid .field.compact > span{
  white-space:nowrap !important;
  font-size:11px !important;
}
.text-dense-grid input[type="range"]{
  width:100% !important;
}
.text-dense-grid select{
  width:100% !important;
  min-width:80px !important;
}
@media(max-width:980px){
  .text-dense-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v1.5.0 CLEAN material toggle
   - no data-source on buttons, no details/open dependency
   - only #generatedSourceToggle / #creatorSourceToggle control source accordion
   ========================================================= */
.material-source-card{
  display:block !important;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
}
.material-source-summary{
  width:100% !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  text-align:left !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.material-source-summary *{
  pointer-events:none !important;
}
.material-source-summary::after{
  content:none !important;
  display:none !important;
}
.material-source-card:not(.is-open) .source-toggle{
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.86) !important;
}
#materialControls[hidden]{
  display:none !important;
}

/* Dense text controls: force use of right-side space */
.text-dense-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px 10px !important;
  width:100% !important;
}
.text-dense-grid .field.compact{
  display:grid !important;
  grid-template-columns:auto minmax(62px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 !important;
  min-width:0 !important;
}
.text-dense-grid .field.compact > span{
  white-space:nowrap !important;
  font-size:11px !important;
}
.text-dense-grid input[type="range"]{
  width:100% !important;
}
.text-dense-grid select{
  width:100% !important;
  min-width:80px !important;
}
@media(max-width:980px){
  .text-dense-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v1.5.1 inline material toggle safety
   ========================================================= */
#generatedSourceToggle,
#creatorSourceToggle{
  cursor:pointer !important;
  pointer-events:auto !important;
}
#generatedSourceToggle *,
#creatorSourceToggle *{
  pointer-events:none !important;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
}
#materialControls[hidden]{
  display:none !important;
}
body::after{
  content:"";
  display:none;
}


/* =========================================================
   v1.5.2 radical rebuild: source toggle is ID-only JS
   ========================================================= */
#generatedSourceToggle,
#creatorSourceToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  width:100% !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
#generatedSourceToggle *,
#creatorSourceToggle *{
  pointer-events:none !important;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
}
#materialControls[hidden]{
  display:none !important;
}
.material-source-summary::after{
  content:none !important;
  display:none !important;
}

/* quick visual marker for v1.5.2 deployed */
#materialsBlock > summary::after{
  content:" v1.5.2";
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}


/* =========================================================
   v1.5.3 no-move material controls
   - materialControls is a stable sibling, never appended/moved by JS
   - CSS order places it under active card
   ========================================================= */
.material-source-accordions{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
#generatedMaterialCard{ order:1 !important; }
#creatorMaterialCard{ order:3 !important; }
#materialControls{
  order:2 !important;
  display:block !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px;
  background:rgba(6,11,19,.45);
}
body.is-creator-source #generatedMaterialCard{ order:1 !important; }
body.is-creator-source #creatorMaterialCard{ order:2 !important; }
body.is-creator-source #materialControls{ order:3 !important; }
#materialControls[hidden]{
  display:none !important;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open{
  border-width:1px !important;
}
.material-source-summary{
  width:100% !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.material-source-summary *{
  pointer-events:none !important;
}

/* visual marker */
#materialsBlock > summary::after{
  content:" v1.5.3";
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}


/* =========================================================
   v1.5.4 independent generated/creator sections
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.5.4";
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
  padding:10px 10px 12px !important;
  border-top:1px solid rgba(255,255,255,.08);
}
.material-source-body[hidden]{
  display:none !important;
}
.material-controls-panel{
  display:block !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px;
  background:rgba(6,11,19,.45);
}
.generated-controls{
  border-color:rgba(255,214,102,.18);
}
.creator-controls{
  border-color:rgba(72,211,123,.22);
}
#generatedSourceToggle,
#creatorSourceToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  width:100% !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
#generatedSourceToggle *,
#creatorSourceToggle *{
  pointer-events:none !important;
}
.creator-list-link-wrap{
  display:block !important;
}


/* =========================================================
   v1.5.5 rebuilt independent material sections
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.5.5";
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
  padding:10px 10px 12px !important;
  border-top:1px solid rgba(255,255,255,.08);
}
.material-source-body[hidden]{
  display:none !important;
}
.generated-controls,
.creator-controls{
  display:block !important;
}
#generatedSourceToggle,
#creatorSourceToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  width:100% !important;
  border:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
#generatedSourceToggle *,
#creatorSourceToggle *{
  pointer-events:none !important;
}
.creator-list-link-wrap{
  display:block !important;
}


/* =========================================================
   v1.6.2 clean base material + export consistency
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.2" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}
.material-source-card .material-source-body{
  display:none !important;
}
.material-source-card.is-open .material-source-body{
  display:block !important;
}
.material-source-body[hidden]{
  display:none !important;
}
#generatedSourceToggle,
#creatorSourceToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
}
#generatedSourceToggle *,
#creatorSourceToggle *{
  pointer-events:none !important;
}


/* =========================================================
   v1.6.3: stale material definitions removed
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.3" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}
#generatedMaterialCard:not(.is-open) #generatedMaterialBody,
#creatorMaterialCard:not(.is-open) #creatorMaterialBody,
#generatedMaterialBody[hidden],
#creatorMaterialBody[hidden]{
  display:none !important;
}


/* =========================================================
   v1.6.4: canvas fit without OS display-scale whitespace drift
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.4" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}

/* Height is now controlled by fitStage() to match the rendered canvas. */
.stage-viewport{
  min-height:0 !important;
  height:auto;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.stage{
  flex:0 0 auto !important;
  transform-origin:center center !important;
}


/* =========================================================
   v1.6.5 mobile sticky canvas + mobile layer controls
   PC layout remains unchanged outside mobile media query.
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.5" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}
.mobile-layer-controls{
  display:none;
}

@media (max-width: 760px){
  :root{
    --mobile-sticky-top: 0px;
  }
  .app-shell{
    display:block !important;
    padding:10px !important;
  }
  .workspace-card{
    position:sticky !important;
    top:var(--mobile-sticky-top) !important;
    z-index:80 !important;
    margin:0 0 14px !important;
    padding:10px !important;
    border-radius:18px !important;
    background:rgba(17,24,39,.97) !important;
    backdrop-filter:blur(14px);
  }
  .workspace-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:8px !important;
  }
  .workspace-head strong{
    font-size:14px !important;
  }
  .workspace-head small{
    font-size:11px !important;
  }
  .canvas-export-actions{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
  }
  .canvas-export-actions button{
    min-height:36px !important;
    padding:7px 8px !important;
    font-size:12px !important;
    border-radius:11px !important;
  }
  .stage-viewport{
    margin-top:8px !important;
    border-radius:16px !important;
    min-height:0 !important;
  }
  /* Hide PC floating buttons on mobile so they do not invade canvas. */
  .stage-layer-floating{
    display:none !important;
  }
  .mobile-layer-controls{
    display:block !important;
    margin-top:8px !important;
    padding:8px !important;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(4,8,16,.58);
    box-shadow:0 10px 26px rgba(0,0,0,.20);
  }
  .mobile-layer-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin-bottom:8px;
  }
  .mobile-layer-actions button{
    min-width:0 !important;
    padding:7px 5px !important;
    font-size:11px !important;
    border-radius:10px !important;
    white-space:nowrap;
  }
  .mobile-scale-control{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:8px;
    align-items:center;
    color:rgba(226,232,240,.78);
    font-size:11px;
    font-weight:900;
  }
  .mobile-scale-control input[type="range"]{
    width:100%;
    min-width:0;
  }
  .mobile-scale-control b{
    min-width:42px;
    text-align:right;
    color:#dff3ff;
    font-size:11px;
  }
  .mobile-layer-controls button:disabled,
  .mobile-scale-control input:disabled{
    opacity:.45;
  }
  .hint{
    display:none !important;
  }
  .side-panel{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .asset-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width: 430px){
  .mobile-layer-actions{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }
  .mobile-layer-actions button{
    font-size:10px !important;
    padding:7px 3px !important;
  }
  .mobile-scale-control{
    grid-template-columns:1fr;
    gap:5px;
  }
  .mobile-scale-control b{
    justify-self:end;
  }
}


/* =========================================================
   v1.6.6 mobile fixed canvas
   PC layout remains untouched. Mobile canvas/control dock is fixed.
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.6" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}

@media (max-width: 760px){
  body.mobile-fixed-canvas-active{
    padding-top:var(--mobile-workspace-height, 360px) !important;
  }

  body.mobile-fixed-canvas-active .workspace-card{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:120 !important;
    margin:0 !important;
    padding:8px 10px 10px !important;
    border-radius:0 0 18px 18px !important;
    background:rgba(17,24,39,.985) !important;
    backdrop-filter:blur(16px);
    box-shadow:0 16px 38px rgba(0,0,0,.36) !important;
  }

  body.mobile-fixed-canvas-active .workspace-head{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    align-items:start !important;
    margin-bottom:6px !important;
  }

  body.mobile-fixed-canvas-active .workspace-head strong{
    font-size:13px !important;
    line-height:1.2 !important;
  }

  body.mobile-fixed-canvas-active .workspace-head small{
    font-size:10px !important;
    margin-top:1px !important;
  }

  body.mobile-fixed-canvas-active .canvas-export-actions{
    display:flex !important;
    gap:6px !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
  }

  body.mobile-fixed-canvas-active .canvas-export-actions button{
    min-height:32px !important;
    padding:6px 8px !important;
    font-size:11px !important;
    border-radius:10px !important;
    white-space:nowrap !important;
  }

  body.mobile-fixed-canvas-active .stage-viewport{
    margin-top:6px !important;
    border-radius:14px !important;
    min-height:0 !important;
  }

  body.mobile-fixed-canvas-active .mobile-layer-controls{
    display:block !important;
    margin-top:6px !important;
    padding:7px !important;
    border-radius:13px !important;
  }

  body.mobile-fixed-canvas-active .mobile-layer-actions{
    gap:5px !important;
    margin-bottom:6px !important;
  }

  body.mobile-fixed-canvas-active .mobile-layer-actions button{
    min-height:30px !important;
    padding:5px 6px !important;
    font-size:11px !important;
    border-radius:10px !important;
  }

  body.mobile-fixed-canvas-active .mobile-scale-control{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:6px !important;
    font-size:10px !important;
  }

  body.mobile-fixed-canvas-active .hint{
    display:none !important;
  }

  body.mobile-fixed-canvas-active .topbar{
    position:relative !important;
    top:auto !important;
    z-index:1 !important;
  }
}


/* =========================================================
   v1.6.7: text section starts closed
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.7" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}


/* =========================================================
   v1.6.8: QR close button + remove unclear fit button
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.8" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}

.qr-box-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.qr-box-head strong{
  font-size:13px;
  color:#dff3ff;
}
.qr-close-btn{
  padding:7px 10px !important;
  font-size:12px !important;
  border-radius:999px !important;
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(18,29,49,.9) !important;
}
.qr-box-body{
  text-align:center;
}
.qr-box .danger-text{
  color:#ffdce1;
}
@media(max-width:760px){
  body.mobile-fixed-canvas-active .canvas-export-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   v1.6.9: Pro key auth gate
   - Material thumbnails remain visible before auth.
   - Edit/export/share operations require kirarimello_pro permission.
   ========================================================= */
#materialsBlock > summary::after{
  content:" v1.6.9" !important;
  font-size:10px;
  color:rgba(124,199,255,.58);
  margin-left:6px;
}
.auth-block{
  border-color:rgba(124,199,255,.22) !important;
  background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(12,20,34,.92)) !important;
}
.auth-lead{margin-top:0 !important;}
.auth-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin:4px 0 10px;}
.auth-status{
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.auth-status.ok{border-color:rgba(109,255,157,.38);color:#9df8bd;background:rgba(109,255,157,.07)}
.auth-status.ng{border-color:rgba(255,123,140,.45);color:#ffdce1;background:rgba(255,123,140,.07)}
.auth-buy-link{
  display:block;
  margin-top:9px;
  padding:9px 11px;
  border:1px solid rgba(255,217,120,.32);
  border-radius:13px;
  color:#ffe29a;
  background:rgba(255,217,120,.08);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  text-align:center;
}
.auth-buy-link:hover{border-color:rgba(255,217,120,.72);text-decoration:none;}
body.kmpro-auth-ok .auth-block{border-color:rgba(109,255,157,.36) !important;}
body:not(.kmpro-auth-ok) .canvas-export-actions button,
body:not(.kmpro-auth-ok) .object-actions button,
body:not(.kmpro-auth-ok) #addUploadBtn,
body:not(.kmpro-auth-ok) #addTextBtn,
body:not(.kmpro-auth-ok) #downloadBtnSide,
body:not(.kmpro-auth-ok) #shareQrBtnSide{
  border-color:rgba(255,255,255,.10) !important;
}
body:not(.kmpro-auth-ok) .stage::after{
  pointer-events:none;
}
@media(max-width:760px){
  .auth-actions{grid-template-columns:1fr 1fr;}
  body.mobile-fixed-canvas-active .auth-block{margin-top:8px;}
}


/* =========================================================
   v1.7.0: Pro auth UI polish (amber)
   - avoid green border overlap with creator section
   - improve desktop spacing and reduce forced same-width feeling
   ========================================================= */
.auth-block{
  border-color:rgba(255,198,94,.34) !important;
  background:
    linear-gradient(180deg,rgba(20,18,28,.98),rgba(14,18,30,.95)) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,198,94,.06);
}
.auth-block > summary{
  color:#fff3cf;
}
.auth-block > summary::after{
  color:rgba(255,217,138,.78) !important;
}
.auth-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(190px,.95fr);
  gap:14px;
  align-items:start;
}
.auth-main-col,
.auth-side-col{
  min-width:0;
}
.auth-main-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-side-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:flex-start;
}
.auth-lead{
  margin:0 !important;
  font-size:12px;
  line-height:1.7;
}
.auth-key-field{
  margin:0 !important;
}
.auth-key-field > span{
  color:#ffe4a8;
}
.auth-key-field input{
  height:44px;
  border-radius:15px;
  border-color:rgba(255,208,120,.16);
  background:linear-gradient(180deg,#0b1220,#0c1422);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.auth-key-field input:focus{
  border-color:rgba(255,198,94,.58);
  box-shadow:0 0 0 3px rgba(255,198,94,.12);
  outline:none;
}
.auth-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin:0;
}
.auth-actions .primary,
.auth-actions button{
  min-height:44px;
  border-radius:15px;
}
.auth-actions .primary{
  background:linear-gradient(135deg,rgba(72,84,138,.92),rgba(92,78,142,.88));
  border-color:rgba(152,185,255,.55);
}
.auth-actions #proAuthClearBtn{
  padding-inline:14px;
  white-space:nowrap;
}
.auth-status{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:11px 12px;
  border-radius:15px;
  border:1px solid rgba(255,208,120,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  color:#bfc9d8;
}
.auth-status.ok{
  border-color:rgba(255,198,94,.34);
  color:#ffe6a3;
  background:linear-gradient(180deg,rgba(255,198,94,.10),rgba(255,198,94,.05));
}
.auth-status.ng{
  border-color:rgba(255,123,140,.45);
  color:#ffdce1;
  background:rgba(255,123,140,.07);
}
.auth-buy-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:0;
  padding:10px 14px;
  border-radius:15px;
  border-color:rgba(255,198,94,.28);
  color:#ffd87d;
  background:linear-gradient(180deg,rgba(255,198,94,.06),rgba(255,198,94,.03));
}
.auth-buy-link:hover{
  border-color:rgba(255,198,94,.58);
  background:linear-gradient(180deg,rgba(255,198,94,.10),rgba(255,198,94,.05));
}
body.kmpro-auth-ok .auth-block{
  border-color:rgba(255,198,94,.38) !important;
}
@media (min-width:1051px){
  .auth-tools{
    padding-top:4px;
  }
}
@media (max-width:760px){
  .auth-layout{
    grid-template-columns:1fr;
  }
  .auth-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   v1.7.1: Pro auth action alignment
   - lower the right action group to align with key/status area
   - reduce top-heavy button feeling
   - keep amber Pro section identity
   ========================================================= */
@media (min-width:761px){
  .auth-layout{
    grid-template-columns:minmax(0,1.45fr) minmax(180px,.82fr);
    gap:14px;
    align-items:start;
  }

  .auth-side-col-lower{
    padding-top:34px;
  }

  .auth-actions{
    grid-template-columns:1fr auto;
    gap:8px;
  }

  .auth-actions .primary,
  .auth-actions button{
    min-height:40px;
    padding-top:8px;
    padding-bottom:8px;
  }

  .auth-buy-link{
    min-height:40px;
    padding-top:8px;
    padding-bottom:8px;
  }

  .auth-status{
    min-height:40px;
    padding-top:9px;
    padding-bottom:9px;
  }

  .auth-key-field input{
    height:42px;
  }
}

@media (min-width:1051px){
  .auth-layout{
    grid-template-columns:minmax(0,1.5fr) minmax(188px,.8fr);
  }

  .auth-side-col-lower{
    padding-top:32px;
  }
}

@media (max-width:760px){
  .auth-side-col-lower{
    padding-top:0;
  }
}


/* =========================================================
   v1.7.2: Pro auth row alignment
   - lead text becomes its own row
   - key/status and action buttons start on the same row
   - removes floating upper-right feeling
   ========================================================= */
.auth-layout-v172{
  display:block !important;
}

.auth-layout-v172 .auth-lead{
  margin:0 0 10px !important;
}

.auth-control-row{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(180px,.82fr);
  gap:14px;
  align-items:start;
}

.auth-control-row .auth-main-col{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.auth-control-row .auth-side-col-lower{
  padding-top:20px !important;
}

.auth-control-row .auth-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin:0;
}

.auth-control-row .auth-actions .primary,
.auth-control-row .auth-actions button,
.auth-control-row .auth-buy-link{
  min-height:40px;
}

.auth-control-row .auth-buy-link{
  margin-top:8px;
}

@media (min-width:1051px){
  .auth-control-row{
    grid-template-columns:minmax(0,1.5fr) minmax(188px,.8fr);
  }
  .auth-control-row .auth-side-col-lower{
    padding-top:20px !important;
  }
}

@media (max-width:760px){
  .auth-control-row{
    grid-template-columns:1fr;
  }
  .auth-control-row .auth-side-col-lower{
    padding-top:0 !important;
  }
  .auth-control-row .auth-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   v1.7.3: Font preset selection fix
   ========================================================= */


/* =========================================================
   v1.7.5: Custom color panel, native picker disabled
   ========================================================= */
.color-field input[type="hidden"]{
  display:none !important;
}
.color-swatch-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border-radius:13px;
  background:#0b1220;
}
.color-swatch{
  display:inline-block;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.7);
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.custom-color-panel{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  width:min(360px,calc(100vw - 28px));
  padding:14px;
  border:1px solid rgba(255,198,94,.38);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(12,18,30,.98),rgba(8,12,20,.98));
  box-shadow:0 24px 80px rgba(0,0,0,.48);
}
.custom-color-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.custom-color-panel-head strong{
  color:#fff3cf;
  font-size:14px;
}
.custom-color-close{
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
}
.custom-color-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:12px;
}
.custom-color-grid button{
  position:relative;
  min-height:38px;
  padding:8px 6px 8px 28px;
  font-size:11px;
}
.custom-color-grid button::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  border-radius:999px;
  background:var(--c);
  border:1px solid rgba(255,255,255,.72);
}
.custom-color-row{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  align-items:center;
  margin:8px 0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.custom-color-row input[type="range"]{
  width:100%;
  accent-color:#c94cff;
}
.custom-color-footer{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
.custom-color-preview{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.75);
  background:#c94cff;
}
.custom-color-footer input{
  min-height:38px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0b1220;
  color:var(--text);
  padding:0 10px;
  font-weight:900;
}
@media(max-width:760px){
  .custom-color-panel{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
  }
}


/* =========================================================
   v1.7.6: circle-only main color buttons
   ========================================================= */
.color-circle-field{
  align-items:start;
}
.color-circle-field .color-swatch-btn.circle-only{
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#0b1220;
}
.color-circle-field .color-swatch-btn.circle-only .color-swatch{
  width:24px;
  height:24px;
}


/* =========================================================
   v1.7.7: custom color panel preset/preview refine
   ========================================================= */
.custom-color-footer-no-apply{
  grid-template-columns:42px 1fr;
}


/* =========================================================
   v1.7.8: outline color live reflection fix
   ========================================================= */


/* =========================================================
   v1.7.9: remove duplicated inline hue controls
   ========================================================= */


/* =========================================================
   v1.8.0: isolated arcText layer
   ========================================================= */
.text-add-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.arc-text-add-btn{
  border-color:rgba(255,198,94,.30);
  color:#ffe0a0;
  background:rgba(255,198,94,.06);
}
.arc-text-mini-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 8px;
  padding:10px;
  border:1px solid rgba(255,198,94,.16);
  border-radius:14px;
  background:rgba(255,198,94,.035);
}
.arc-text-preview{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.arc-text-layer{
  overflow:visible !important;
}
@media(max-width:760px){
  .text-add-actions,
  .arc-text-mini-tools{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v1.8.1: arcText button binding and selection sync fix
   ========================================================= */


/* =========================================================
   v1.8.2: remove arc add button / move arc controls to bottom
   ========================================================= */
.arc-text-bottom-tools{
  margin-top:12px;
}


/* =========================================================
   v1.8.3: move arc controls to text section bottom (not layer section)
   ========================================================= */


/* =========================================================
   v1.8.4: deselect active object by clicking blank canvas
   ========================================================= */


/* =========================================================
   v1.8.5: deselect active object by clicking outside canvas
   ========================================================= */


/* =========================================================
   v1.8.6: preserve image aspect ratio on upload and PNG export
   ========================================================= */


/* =========================================================
   v1.8.7: coconala URL update / canvas reset button
   ========================================================= */
.reset-canvas-btn{
  border-color:rgba(255,123,140,.42);
  color:#ffdce1;
  background:rgba(255,123,140,.07);
}
.reset-canvas-btn:hover{
  border-color:rgba(255,123,140,.80);
}