:root{
  --bg:#0b0b0f;
  --line:#24243a;
  --text:#ffffff;
  --muted:#b6b6c9;
  --accent:#7a5cff;
  --danger:#ff3b3b;
  --frame:#000;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans","Meiryo", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(11,11,15,.88);
  backdrop-filter: blur(10px);
}
.brand{ font-weight:900; letter-spacing:.03em; }
.topbar__right{ display:flex; align-items:center; gap:10px; }

.app{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .panel{ order:2; }
}

.stage{ display:flex; flex-direction:column; gap:10px; }
.stage__frame{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background: var(--frame);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Checkerboard editor preview (gray) */
.stage__frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.12) 75%, rgba(255,255,255,.12)),
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.12) 75%, rgba(255,255,255,.12));
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  opacity:.55;
  pointer-events:none;
  filter: grayscale(1);
}

#canvas{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  background: transparent;
}

.stage__footer{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Object list bar */
.objectbar{
  width:100%;
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.objectbar__label{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
}
.objectbar__list{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-width: thin;
}
.objectbar__item{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  white-space:nowrap;
}
.objectbar__item:hover{ border-color: rgba(122,92,255,.7); }
.objectbar__item.is-on{
  border-color: rgba(122,92,255,.95);
  box-shadow: 0 0 0 3px rgba(122,92,255,.18) inset;
}

.panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px;
  height:fit-content;
}

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.field.two{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.field label{ font-size:12px; color:var(--muted); }

.field textarea, .field input[type="text"], .field select{
  background:#0f0f17;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  padding:9px 10px;
  border-radius:12px;
  outline:none;
  resize: vertical;
}
.field textarea::placeholder, .field input[type="text"]::placeholder{ color:rgba(255,255,255,.35); }
.field input[type="range"]{ width:100%; }

.btn{
  border:1px solid rgba(255,255,255,.10);
  background:#0f0f17;
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  user-select:none;
}
.btn:hover{ border-color: rgba(122,92,255,.7); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--primary{
  background: linear-gradient(90deg, rgba(122,92,255,1), rgba(173,92,255,1));
  border-color: rgba(255,255,255,.10);
}
.btn--danger{
  background: rgba(255,59,59,.12);
  border-color: rgba(255,59,59,.35);
}
.btn--primary:hover{ filter: brightness(1.05); }

.divider{ width:1px; height:26px; background:var(--line); }

.file input{ display:none; }
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.check input{ transform: scale(1.1); }

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(16,16,24,.92);
  border:1px solid rgba(255,255,255,.10);
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:none;
}
.toast[aria-hidden="false"]{ display:block; }

.quick{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
}
.chip:hover{ border-color: rgba(122,92,255,.7); }

.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seg__btn{
  border:1px solid rgba(255,255,255,.10);
  background:#0f0f17;
  color:#fff;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
}
.seg__btn.is-on{
  border-color: rgba(122,92,255,.9);
  box-shadow: 0 0 0 3px rgba(122,92,255,.18) inset;
}

.panel__sub{ margin:8px 0 6px; font-weight:800; color:rgba(255,255,255,.88); font-size:12px; letter-spacing:.02em; }
.small{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.4; }

/* Accordion */
.acc{
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 8px;
}
.acc:first-child{ border-top:none; }
.acc__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
}
.acc__summary::-webkit-details-marker{ display:none; }
.acc__title{ font-weight:800; }
.acc__chev{
  width:10px; height:10px;
  border-right:2px solid rgba(255,255,255,.55);
  border-bottom:2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .15s ease;
  opacity:.9;
}
.acc[open] .acc__chev{ transform: rotate(225deg); }
.acc__body{ margin-top:10px; }
/* mojium header logo (responsive safe) */
.brand{
  display:flex;
  align-items:center;
}
.brand__logo{
  height:28px;
  width:auto;
  max-width:100%;
}
@media (max-width: 480px){
  .brand__logo{
    height:22px;
  }
}


/* Philosophiam CTA underline remove */
a.btn {
  text-decoration: none;
}