:root{
  --bg:#0a0f16;--panel:#111a26;--panel2:#0e1621;--line:#24354b;
  --text:#f2f5fb;--muted:#9fb0c7;--primary:#4ea1ff;--danger:#ff6f6f;--safe:#4ea1ff55;
  --topbar-h:64px;--dock-h:84px;--sidebar-w:340px;--rightbar-w:292px;--panel-gap:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif}
button,input,select,textarea{font:inherit}
button:disabled{opacity:.45;cursor:not-allowed}

/* ===== TOPBAR ===== */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(10,15,22,.92);backdrop-filter:blur(8px);min-height:var(--topbar-h)}
.brand h1{margin:0;font-size:18px}
.brand p{margin:4px 0 0;color:var(--muted);font-size:12px;opacity:.85}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ===== LAYOUT ===== */
.layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);gap:var(--panel-gap);padding:12px;min-height:calc(100vh - var(--topbar-h));align-items:start}
.sidebar,.rightbar{display:flex;flex-direction:column;gap:12px;align-self:start}
.sidebar{overflow:visible}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) var(--rightbar-w);gap:var(--panel-gap);align-items:start}
.editor-panel{display:flex;flex-direction:column;gap:12px;position:sticky;top:88px;align-self:start;padding:10px}
.rightbar{position:relative}

/* ===== PANELS ===== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.panel h2{margin:0 0 12px;font-size:16px}
.panel-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.field span{font-size:12px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.field.compact{margin-bottom:0}
.inline{display:flex;gap:8px;align-items:center}
.inline.two>*{flex:1}
.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 12px;cursor:pointer;transition:.15s ease;font-size:13px}
.btn:hover{border-color:#4b678f;transform:translateY(-1px)}
.btn.primary{border-color:var(--primary)}
.btn.danger{border-color:var(--danger)}
.btn-block{width:100%}
.status-list{display:grid;gap:6px;color:var(--muted);font-size:12px}
.status-list strong{color:var(--text)}

/* ===== RIGHTBAR TABS ===== */
.rightbar{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:visible;align-self:start;position:sticky;top:12px;max-height:calc(100vh - var(--topbar-h) - 24px)}
.rightbar-tabs{display:flex;gap:8px;background:#101729;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px}
.rightbar-tab{flex:1;border:0;border-radius:9px;background:transparent;color:#dbe6ff;padding:9px 10px;font:inherit;font-weight:700;cursor:pointer}
.rightbar-tab.active{background:#2a5bd7;color:#fff;box-shadow:0 6px 16px rgba(42,91,215,.28)}
.righttab-panel{display:none;min-height:0;overflow:auto;max-height:calc(100vh - var(--topbar-h) - 110px)}
.righttab-panel.is-active{display:block}

/* ===== EDITOR STAGE ===== */
.editor-toolbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.toolbar-main-actions,.toolbar-pane-actions{gap:8px;flex-wrap:wrap}
.pane-toggle{display:none}
.stage-viewport{background:#0b1119;border:1px solid var(--line);border-radius:16px;min-height:0;display:block;position:relative;padding:0;overflow:hidden}
.stage{position:absolute;background:#0d1420;border:1px solid #1c2939;transform-origin:top left;user-select:none;touch-action:none;overflow:visible;isolation:isolate}
.stage.mode-header{width:1125px;height:480px}
.stage.mode-ring{width:513px;height:513px}
.background-image{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.background-image.hidden{display:none}
.safe-guide{position:absolute;left:140px;top:60px;width:845px;height:360px;border:2px dashed var(--safe);pointer-events:none;z-index:9999}
.safe-guide.hidden{display:none}
.ring-guide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px dashed rgba(255,255,255,.35);border-radius:50%;pointer-events:none;z-index:9996}
.ring-guide.hidden{display:none}
.ring-guide-outer{width:513px;height:513px}
.ring-guide-inner{width:356px;height:356px;border-color:rgba(255,255,255,.22)}

/* ===== LAYERS ===== */
.layer{position:absolute;top:0;left:0;transform-origin:top left;cursor:move;outline:none}
.layer.selected{outline:2px solid rgba(78,161,255,.75);outline-offset:2px}
.layer img{display:block;max-width:none;pointer-events:none;user-select:none}
.layer.text-layer{white-space:pre-wrap;line-height:1.25;min-width:40px;padding:0;margin:0;color:#fff}
.text-content{display:inline-block}
.layer .resize-handle{position:absolute;width:16px;height:16px;border-radius:999px;background:#4ea1ff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);display:none;pointer-events:auto;z-index:6}
.layer.selected .resize-handle{display:block}
.layer .resize-nw{left:-9px;top:-9px;right:auto;bottom:auto;cursor:nwse-resize}
.layer .resize-ne{right:-9px;top:-9px;bottom:auto;cursor:nesw-resize}
.layer .resize-sw{left:-9px;bottom:-9px;right:auto;cursor:nesw-resize}
.layer .resize-se{right:-9px;bottom:-9px;cursor:nwse-resize}

/* ===== TEXT TOOLS ===== */
.text-tools{display:grid;gap:8px;margin-top:10px}
.font-quick-picks{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.mini-chip{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer}
.mini-chip:hover{border-color:#4b678f}
.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.inspector{display:flex;flex-direction:column}
.inspector input[type="range"]{padding:0}
.text-panel{position:sticky;top:88px;align-self:start}
.field-text-content textarea{min-height:72px;resize:vertical}
.layer-label-field{display:none !important}
.status-optional{display:none}

/* ===== MOBILE: hidden on PC ===== */
.mobile-mode-switch,.mobile-dock,.mobile-scrim,.mobile-material-tabs,.mobile-scale-bar,.mobile-material-source-switch{display:none}

/* ===== OLD MATERIAL GROUP (accordion fallback) ===== */
.material-group{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:0;overflow:hidden}
.material-group summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:space-between}
.material-group summary::-webkit-details-marker{display:none}
.material-group summary::after{content:"＋";color:var(--muted);font-size:16px;line-height:1}
.material-group[open] summary::after{content:"－"}
.material-group .panel-note{padding:0 12px 12px;margin:0}

/* ===== RESPONSIVE: ≤1280px ===== */
@media (max-width:1280px){
  :root{--sidebar-w:314px;--rightbar-w:280px}
  .panel-note{font-size:11px}
}

/* ===== RESPONSIVE: ≤1100px ===== */
@media (max-width:1100px){
  :root{--sidebar-w:286px;--rightbar-w:260px}
  .brand p{display:none}
  .btn{padding:9px 10px;font-size:12px}
}

/* ===== PC COLOR INPUT (≥901px) ===== */
@media (min-width:901px){
  .field input[type="color"]{
    width:100%;min-width:0;height:30px;padding:2px;border-radius:10px;
    border:1px solid var(--line);background:var(--panel2);cursor:pointer;opacity:.92
  }
  .field input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
  .field input[type="color"]::-webkit-color-swatch{border:0;border-radius:7px}
  .field input[type="color"]::-moz-color-swatch{border:0;border-radius:7px}
}

/* ===== HEADER ICON BIG CIRCLE FIX (Stable) ===== */
#headerIconGuide,.header-icon-guide{position:absolute !important;left:50% !important;bottom:-128px !important;transform:translateX(-50%) !important;width:513px !important;height:513px !important;border:2px dashed rgba(255,255,255,.92) !important;border-radius:50% !important;pointer-events:none !important;z-index:99998 !important;clip-path:inset(0 0 25% 0) !important;filter:drop-shadow(0 0 1px rgba(0,0,0,.98)) drop-shadow(0 0 6px rgba(0,0,0,.52)) !important}
#headerIconCover,.header-icon-cover{position:absolute !important;left:50% !important;bottom:-128px !important;transform:translateX(-50%) !important;width:513px !important;height:513px !important;background:rgba(255,255,255,.16) !important;border-radius:50% !important;pointer-events:none !important;z-index:99997 !important;clip-path:inset(0 0 25% 0) !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22) !important}

/* ===== RING SCREEN: hide header guides, hide background ===== */
.stage.mode-ring #headerIconGuide,
.stage.mode-ring #headerIconCover,
.stage.mode-ring .header-icon-guide,
.stage.mode-ring .header-icon-cover{display:none !important}
.stage.mode-ring .background-image{display:none !important}

/* ===== PREVIEW OVERLAY ===== */
@keyframes assetShimmer{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}
.preview-overlay{position:absolute;inset:0;pointer-events:none;z-index:99996;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='180' viewBox='0 0 280 180'><g transform='rotate(-24 140 90)'><text x='24' y='92' font-size='30' font-family='Arial' fill='rgba(255,255,255,0.92)'>PREVIEW</text><text x='164' y='156' font-size='30' font-family='Arial' fill='rgba(255,255,255,0.92)'>PREVIEW</text></g></svg>");background-repeat:repeat;background-size:280px 180px;opacity:.34;mix-blend-mode:difference}
.stage .preview-overlay.hidden{display:none}

/* ===== MOBILE DOCK MATERIAL GROUP (shared, used inside @media) ===== */
.mobile-dock-material-label{font-size:9px;line-height:1;color:#a9b6d4;text-align:center}
.mobile-dock-material-buttons{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:#18233c;border:1px solid rgba(255,255,255,.08)}
.mobile-dock-source-btn{min-height:56px;padding:8px 3px;border:0;border-radius:12px;background:#22304f;color:#eef4ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-weight:700;cursor:pointer}
.mobile-dock-source-btn.active,.mobile-material-source-btn.active{background:#2a5bd7;color:#fff;box-shadow:0 6px 16px rgba(42,91,215,.28)}
.mobile-dock-source-btn .dock-icon,.mobile-dock-source-btn .dock-label{display:block}
.mobile-dock-source-btn .dock-icon{font-size:14px;line-height:1;margin-bottom:2px}
.mobile-dock-source-btn .dock-label{font-size:10px;line-height:1.2}

/* ================================================
   V36 — MATERIALS PANEL LAYOUT (Canonical, replaced)
   ================================================ */
.mobile-material-source-switch{display:none}

.materials-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
  overflow:visible;
}

.materials-source-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
}
.materials-phase-note{margin:0;color:var(--muted);font-size:11px;line-height:1.5}

.materials-source-block{
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  background:var(--panel2);
  height:248px;
  min-height:248px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
.materials-source-block[data-source-block="creator"]{
  border-color:rgba(79,154,99,.62);
  box-shadow:0 0 0 2px rgba(79,154,99,.15) inset;
}

.materials-source-head{display:flex;align-items:center;gap:10px;margin:0;flex:0 0 auto}
.materials-source-head h2{margin:0;font-size:15px;line-height:1.3;font-weight:800}
.materials-source-dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex:0 0 auto}
.materials-source-dot-generated{background:#cdb94a}
.materials-source-dot-creator{background:#4f9a63}

.material-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin:0;flex:0 0 auto}
.material-tab{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;cursor:pointer;white-space:nowrap;font-weight:700;appearance:none}
.material-tab:hover{border-color:#4b678f}
.material-tab.active{border-color:var(--primary);background:rgba(78,161,255,.14);box-shadow:0 0 0 1px rgba(78,161,255,.28)}

.material-panels{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right:4px;
  scrollbar-gutter:stable;
}

.material-group.material-panel{display:none;padding:0;margin:0;border:0;background:transparent;border-radius:0}
.material-group.material-panel.is-active{display:block}

.material-filterbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0}
.material-filter-chip{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:5px 10px;font-size:12px;line-height:1.15;cursor:pointer}
.material-filter-chip:hover{border-color:#4b678f}
.material-filter-chip.is-active{color:var(--text);border-color:var(--primary);box-shadow:0 0 0 1px rgba(78,161,255,.35)}

.asset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0}
.asset-card{appearance:none;border:0;background:transparent;color:var(--text);border-radius:0;padding:0;cursor:pointer;display:block;min-width:0}
.asset-card-thumb{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#09111a;border-radius:10px;overflow:hidden}
.asset-card-thumb img{width:88%;height:88%;object-fit:contain;display:block}

/* Tags ALWAYS outside cards — hide everything inside cards */
.asset-card-body,
.asset-card-creator,
.asset-card-meta,
.asset-card-tags,
.asset-card-tag,
.materials-panel .asset-card span{display:none !important}

/* ===== PC LAYOUT: SIDEBAR + MATERIALS + RIGHTBAR (≥901px) ===== */
@media (min-width:901px){
  .layout{
    height:calc(100vh - var(--topbar-h));
    overflow:hidden;
    align-items:stretch;
  }
  .sidebar{
    position:sticky;
    top:12px;
    height:calc(100vh - var(--topbar-h) - 24px);
    max-height:calc(100vh - var(--topbar-h) - 24px);
    overflow:auto;
    padding-right:4px;
  }
  .sidebar > .panel{
    flex:0 0 auto;
  }
  #materialsPanel{
    overflow:visible;
  }

  .workspace{
    height:calc(100vh - var(--topbar-h) - 24px);
    min-height:0;
  }
  .editor-panel{
    position:sticky;
    top:12px;
    height:calc(100vh - var(--topbar-h) - 24px);
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .stage-viewport{flex:1 1 auto;min-height:0;height:auto;padding:6px}
  .rightbar{
    top:12px;
    position:sticky;
    max-height:calc(100vh - var(--topbar-h) - 24px);
    overflow:hidden;
  }

  /* Right tab switching must not shift or double-show */
  .rightbar-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    flex:0 0 auto;
  }
  .rightbar-tab{
    min-height:40px;
    padding:9px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .rightbar > [data-righttab-panel]{
    display:none !important;
    min-height:0;
    overflow:auto;
    flex:1 1 auto;
  }
  .rightbar > [data-righttab-panel].is-active{
    display:block !important;
  }

  /* Project name removed */
  #basicSettingsPanel label.field:has(#projectTitle){
    display:none !important;
  }

  /* Upload input: keep native behavior, improve only button skin */
  .field-upload{
    gap:8px;
  }
  #uploadInput{
    width:100%;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--muted);
  }
  #uploadInput::file-selector-button{
    margin-right:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    padding:10px 16px;
    background:linear-gradient(180deg,#24324b,#1a2538);
    color:#eef4ff;
    cursor:pointer;
    font:inherit;
    font-weight:700;
  }
  #uploadInput:hover::file-selector-button{
    border-color:#4b678f;
  }
}


/* ===== LEGAL ACCORDION ===== */
#termsPanel{padding:10px 12px}
.legal-accordion{border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.02);overflow:hidden}
.legal-accordion[open]{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10)}
.legal-summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;align-items:flex-start;gap:10px;user-select:none}
.legal-summary::-webkit-details-marker{display:none}
.legal-summary::after{content:"＋";margin-left:auto;color:var(--muted);font-size:18px;line-height:1;flex:0 0 auto;transition:transform .16s ease,color .16s ease}
.legal-accordion[open] .legal-summary::after{content:"－";color:#dce8ff}
.legal-summary-texts{min-width:0}
.legal-summary h2{margin:0;font-size:14px}
.legal-lead{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.legal-body{padding:0 14px 14px;border-top:1px solid rgba(255,255,255,.06);max-height:min(42vh,420px);overflow:auto;color:#dbe6ff;font-size:12px;line-height:1.7}
.legal-body h3{margin:12px 0 6px;font-size:12px;color:#f4f7ff}
.legal-body p{margin:10px 0}
.legal-list{margin:8px 0 0 18px;padding:0;display:grid;gap:6px}
.legal-links{font-size:11px;color:var(--muted)}
.legal-links a{color:#9dc7ff;text-decoration:none}
.legal-links a:hover{text-decoration:underline}



/* ===== MOBILE UI (≤900px) ===== */
@media (max-width:900px){
  :root{--dock-h:84px}
  html,body{height:100dvh;overflow:hidden}

  /* — topbar — */
  .topbar{
    position:sticky;top:0;z-index:70;
    display:grid;grid-template-columns:1fr;gap:8px;
    padding:10px 12px 8px
  }
  .brand p{display:none}
  .brand h1{font-size:18px;line-height:1.2}
  .top-actions{
    display:flex;flex-wrap:nowrap;align-items:center;
    gap:8px;width:100%;margin-top:0
  }
  .mobile-mode-switch{
    flex:1 1 auto;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;min-width:0
  }
  .mobile-mode-btn,
  .top-actions>#btnRenderDownload{
    min-height:40px;height:40px;padding:0 10px;
    white-space:nowrap;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;border-radius:12px
  }
  .mobile-mode-btn{appearance:none;border:1px solid rgba(255,255,255,.08);background:rgba(14,22,33,.9);color:var(--text);font:inherit;font-weight:700}
  .mobile-mode-btn.active{background:rgba(78,161,255,.24);border-color:rgba(78,161,255,.75)}
  .top-actions>#btnRenderDownload{flex:0 0 116px;min-width:116px}

  /* — layout — */
  .layout{display:block;padding:8px;height:calc(100dvh - var(--topbar-h));overflow:hidden}
  .workspace{display:block;height:auto;overflow:hidden;position:relative}
  .editor-panel{
    position:relative;top:auto;
    display:flex;flex-direction:column;gap:8px;
    height:calc(100dvh - var(--topbar-h) - var(--dock-h) - 36px);
    min-height:0;padding:8px;overflow:hidden
  }
  .editor-toolbar{display:block;flex:0 0 auto;margin:0}
  .toolbar-main-actions{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;width:100%
  }
  .toolbar-main-actions .btn{min-height:38px;padding:8px 6px;font-size:12px}
  .toolbar-pane-actions{display:none !important}
  .pane-toggle{display:inline-flex;justify-content:center}
  .stage-viewport{
    background:#101722;border:1px solid rgba(255,255,255,.14);
    border-radius:16px;padding:6px;
    flex:1 1 auto;min-height:0;overflow:hidden
  }
  .stage{transform-origin:top left}
  .stage.mode-header{overflow:hidden}
  .stage.mode-ring{overflow:visible}

  /* — sidebar / rightbar: bottom sheets — */
  .sidebar,.rightbar{
    position:fixed;left:8px;right:8px;
    bottom:calc(var(--dock-h) + 8px);top:auto;
    max-height:42dvh;overflow:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    z-index:56;
    transform:translateY(calc(100% + 24px));
    opacity:0;pointer-events:none;
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.34);
    background:#0f1524
  }
  body.mobile-pane-sidebar-open .sidebar,
  body.mobile-pane-right-open .rightbar,
  body.mobile-pane-text-open .rightbar,
  body.mobile-pane-layer-open .rightbar{
    transform:translateY(0);opacity:1;pointer-events:auto
  }
  .sidebar .panel{padding:10px 10px 14px;background:transparent;border:0;box-shadow:none}
  .rightbar .panel{padding:10px 10px 14px;background:transparent;border:0;box-shadow:none}
  .sidebar .panel-note,.rightbar .panel-note{display:none}
  .rightbar-tabs{display:none}

  /* — scrim — */
  .mobile-scrim{display:block !important;position:fixed;inset:0;background:rgba(3,8,20,.28);backdrop-filter:blur(2px);z-index:46}
  .mobile-scrim.hidden{display:none !important}

  /* — mobile dock (4 groups) — */
  .mobile-dock{
    display:grid !important;
    grid-template-columns:1.25fr 0.9fr 0.9fr 0.9fr;
    gap:8px;
    position:fixed;left:10px;right:10px;bottom:10px;
    z-index:60;
    background:rgba(12,18,34,.94);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;padding:8px;
    box-shadow:0 14px 30px rgba(0,0,0,.3)
  }
  .mobile-dock-btn{
    border:0;border-radius:12px;
    background:#18233c;color:#eef4ff;
    padding:8px 4px;font:inherit;font-weight:700;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:54px;cursor:pointer
  }
  .mobile-dock-btn.active{
    background:rgba(78,161,255,.28);
    box-shadow:0 0 0 1px rgba(78,161,255,.55) inset,0 4px 14px rgba(78,161,255,.18)
  }
  .mobile-dock-btn .dock-icon{font-size:16px;line-height:1;display:block}
  .mobile-dock-btn .dock-label{font-size:11px;line-height:1.1;display:block}
  /* smaller buttons for non-material group */
  .mobile-dock>.mobile-dock-btn:not(.mobile-dock-material-group):not(.mobile-dock-source-btn){
    min-height:44px;padding:5px 4px;gap:2px
  }
  .mobile-dock>.mobile-dock-btn:not(.mobile-dock-material-group):not(.mobile-dock-source-btn) .dock-icon{font-size:13px}
  .mobile-dock>.mobile-dock-btn:not(.mobile-dock-material-group):not(.mobile-dock-source-btn) .dock-label{font-size:10px}
  .mobile-dock-material-group{min-height:58px}
  .mobile-dock-source-btn{min-height:46px;padding:8px 5px;gap:2px}
  .mobile-dock-source-btn .dock-icon{font-size:14px;line-height:1}
  .mobile-dock-source-btn .dock-label{font-size:10px;line-height:1.1}
  .mobile-dock-material-buttons{gap:6px}

  /* — scale bar — */
  .mobile-scale-bar{
    display:flex !important;align-items:center;gap:10px;
    position:fixed;left:16px;right:16px;
    bottom:calc(var(--dock-h) + 2px);
    z-index:61;padding:8px 12px;border-radius:14px;
    background:rgba(12,18,34,.62);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.08)
  }
  .mobile-scale-bar.hidden{display:none !important}
  #mobileScaleSlider{order:1;flex:1 1 auto}
  .mobile-scale-label{order:2;font-size:12px;color:#eef4ff;white-space:nowrap;text-align:right}

  /* — header/icon guide — */
  #headerIconGuide,#headerIconCover{display:block !important}
  .header-icon-cover{clip-path:inset(0 0 33.34% 0) !important}

  /* — misc hidden — */
  .status-optional,.panel-note.material-footer-note,#editorHint{display:none !important}
  body.mobile-pane-text-open #layerPanel,
  body.mobile-pane-layer-open #textPanel{display:none !important}
  .rightbar-tabs{display:none !important}

  /* — sidebar panels: show only active pane — */
  body.mobile-pane-materials-open #basicSettingsPanel,
  body.mobile-pane-materials-open #uploadPanel,
  body.mobile-pane-materials-open #termsPanel{display:none !important}
  body.mobile-pane-materials-open #materialsPanel{display:flex !important;flex-direction:column}
  body.mobile-pane-upload-open #basicSettingsPanel,
  body.mobile-pane-upload-open #materialsPanel{display:none !important}
  body.mobile-pane-upload-open #uploadPanel,
  body.mobile-pane-upload-open #termsPanel{display:block !important;overflow:auto;padding-bottom:84px}
  body.mobile-pane-text-open #textPanel{display:block !important;overflow:auto;padding-bottom:84px}
  body.mobile-pane-layer-open #layerPanel{display:block !important;overflow:auto;padding-bottom:84px}

  /* — material source switch visible on mobile — */
  .mobile-material-source-switch{
    display:flex !important;flex-direction:column;gap:6px;margin:0 0 8px
  }
  .materials-phase-note{font-size:10px;margin:0 0 2px}
  .mobile-material-source-label{font-size:10px;line-height:1;color:#a9b6d4;text-align:center}
  .mobile-material-source-buttons{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    padding:5px;border-radius:12px;
    background:#18233c;border:1px solid rgba(255,255,255,.08)
  }
  .mobile-material-source-btn{
    min-height:44px;padding:8px 6px;border:0;border-radius:12px;
    background:#22304f;color:#eef4ff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font:inherit;font-weight:700
  }
  .mobile-material-source-btn.active{
    background:rgba(78,161,255,.24);
    box-shadow:0 0 0 1px rgba(78,161,255,.55) inset
  }
  .mobile-material-source-btn .dock-icon{font-size:15px;line-height:1}
  .mobile-material-source-btn .dock-label{font-size:11px;line-height:1.1}

  /* — materials panel: auto height on mobile — */
  .materials-source-block{
    min-height:0;height:auto;padding:12px;gap:6px
  }
  .materials-source-head h2{font-size:14px}
  .material-tabbar{gap:6px}
  .material-tab{min-height:32px;padding:6px 10px;border-radius:10px;font-size:12px}
  .material-filterbar{gap:6px;margin:0 0 6px}
  .asset-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

  /* mobile material panel scroll */
  .material-panels{overflow:auto;max-height:55dvh;padding-bottom:8px}
}

/* ===== TARGETED FIXES AFTER ROLLBACK ===== */
@media (max-width:900px){
  .mobile-dock{
    grid-template-columns:1.35fr 0.88fr 0.88fr 0.88fr;
  }
  .mobile-dock-material-group{min-height:62px}
  .mobile-dock-source-btn{min-height:50px;padding:8px 6px}
  .mobile-dock-source-btn .dock-icon{font-size:15px}
  .mobile-dock-source-btn .dock-label{font-size:11px}
  .mobile-dock > .mobile-dock-btn:not(.mobile-dock-material-group){
    min-height:42px;
    padding:4px 4px;
  }
  .mobile-dock > .mobile-dock-btn:not(.mobile-dock-material-group) .dock-icon{font-size:13px}
  .mobile-dock > .mobile-dock-btn:not(.mobile-dock-material-group) .dock-label{font-size:10px}

  .materials-source-block[data-source-block]{display:none}
  .materials-source-block.is-active-source{display:flex}
}

/* Fallback when :has is unsupported */
.project-title-hidden-helper{display:none !important}

/* ===== V10: mobile asset tap feedback only ===== */
@media (max-width:900px){
  .asset-card{
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    transition:
      transform .10s ease,
      filter .10s ease,
      box-shadow .14s ease,
      outline-color .14s ease,
      background-color .14s ease;
  }
  .asset-card-thumb{
    transition:
      transform .10s ease,
      filter .10s ease,
      box-shadow .14s ease,
      outline-color .14s ease,
      background-color .14s ease;
    outline:1px solid transparent;
    box-shadow:0 0 0 0 rgba(78,161,255,0);
  }
  .asset-card.is-pressed .asset-card-thumb,
  .asset-card:active .asset-card-thumb{
    transform:scale(.965);
    filter:brightness(.88);
    outline-color:rgba(78,161,255,.72);
    box-shadow:0 0 0 2px rgba(78,161,255,.30), 0 10px 22px rgba(0,0,0,.26);
    background:#122036;
  }
  .asset-card.is-loading .asset-card-thumb{
    filter:saturate(.92);
  }
}

@media (max-width:900px){
  #termsPanel{padding-top:0}
  .legal-summary{padding:11px 12px}
  .legal-body{max-height:min(34vh,280px);font-size:11px}
}


/* ===== PC only: soft orange edge ===== */
@media (min-width: 901px){
  :root{
    --pc-accent-orange-line: rgba(255, 177, 112, .34);
    --pc-accent-orange-glow: rgba(255, 177, 112, .10);
  }

  .panel,
  .materials-source-block,
  .canvas-wrap,
  .editor-panel,
  .rightbar > [data-righttab-panel]{
    border-color: var(--pc-accent-orange-line);
    box-shadow:
      0 0 0 1px rgba(255, 177, 112, .08) inset,
      0 10px 28px rgba(0,0,0,.16),
      0 0 0 1px var(--pc-accent-orange-glow);
  }

  .material-group,
  .field input,
  .field select,
  .field textarea,
  .btn,
  .mini-chip,
  .material-tab,
  .material-filter-chip{
    border-color: rgba(255, 177, 112, .22);
  }
}

/* ===== PC only: Top / Info orange edge tuning ===== */
@media (min-width: 901px){
  .brand-mini-link{
    border-color: rgba(255, 177, 112, .32);
    background: rgba(255, 177, 112, .05);
    box-shadow: 0 0 0 1px rgba(255, 177, 112, .08) inset;
  }
  .brand-mini-link:hover{
    border-color: rgba(255, 177, 112, .48);
    background: rgba(255, 177, 112, .10);
  }
  .brand-mini-link:focus-visible{
    outline: 2px solid rgba(255, 177, 112, .42);
    outline-offset: 2px;
  }
}



/* ===== CANONICAL 2026-03-25: mobile header / mobile materials / mobile canvas ===== */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.brand-row h1{margin:0;min-width:0}
.brand-links{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.brand-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);color:var(--text);text-decoration:none;
  font-size:12px;font-weight:700;line-height:1;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease,opacity .16s ease,box-shadow .16s ease;
  opacity:.92
}
.brand-link:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.brand-link:active{transform:translateY(1px) scale(.98)}
@media (min-width:901px){
  .brand-link{
    min-height:32px;padding:0 12px;
    border-color:rgba(255,177,112,.32);
    background:rgba(255,177,112,.05);
    box-shadow:0 0 0 1px rgba(255,177,112,.08) inset
  }
  .brand-link:hover{border-color:rgba(255,177,112,.52);background:rgba(255,177,112,.10)}
}

@media (max-width:900px){
  /* top row: title + links on same line */
  .topbar .brand{min-width:0;flex:1 1 auto}
  .topbar .brand p{display:none}
  .brand-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    width:100%;
    min-width:0
  }
  .brand-row h1{
    font-size:18px;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-width:0
  }
  .brand-links{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin-left:auto;
    flex:0 0 auto
  }
  .brand-link{
    min-width:46px;
    min-height:28px;
    padding:0 9px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:.02em;
    border-color:rgba(255,255,255,.12);
    background:rgba(17,26,41,.92);
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset
  }

  /* remove duplicated internal generated/creator switch; dock remains source of truth */
  .mobile-material-source-switch{display:none !important}

  /* allow more room for asset list */
  .materials-source-block{padding:12px 12px 10px;gap:6px}
  .material-panels{
    overflow:auto;
    max-height:calc(42dvh - 18px);
    padding-bottom:8px
  }

  /* avoid overlap between outer editor frame and bottom dock */
  .editor-panel{
    height:calc(100dvh - var(--topbar-h) - var(--dock-h) - 54px);
    padding-bottom:12px
  }
  .stage-viewport{
    background:#d7d7d7;
    border-color:rgba(0,0,0,.12)
  }
}

.material-filter-section{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;width:100%;margin:0 0 8px;}
.material-filter-row{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;}
.material-filter-more{font-weight:700;}

/* ===== creator directory link (single clean implementation) ===== */
.creator-directory-link-wrap{
  margin: -2px 0 4px;
}
.creator-directory-link{
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  text-decoration:underline;
  text-underline-offset:2px;
}
.creator-directory-link:hover{
  color:var(--text);
}
@media (max-width:900px){
  .creator-directory-link-wrap{
    margin: 0 0 4px;
  }
  .creator-directory-link{
    font-size:12px;
  }
}