:root {
  --bg-body: #0b0c0f;
  --bg-panel: #121419;
  --bg-input: #181b22;
  --bg-btn: #1f2330;
  --border-light: #272c3a;
  --border-btn: #3a4055;
  --text-main: #c7ccdb;
  --text-muted: #5a6178;
  --text-bright: #ffffff;
  --text-label: #9aa1b6;
  --accent-base: #7c5cff;
  --accent-hover: #9079ff;
  --accent-light: #b5a9ff;
  --accent-dark: #2a1f55;
}

body.theme-rmit {
  color-scheme: light;
  --bg-body: #f4f4f4;
  --bg-panel: #ffffff;
  --bg-input: #e0e0e0;
  --bg-btn: #e5e5e5;
  --border-light: #d4d4d4;
  --border-btn: #c4c4c4;
  --text-main: #000054;
  --text-muted: #757575;
  --text-bright: #000000;
  --text-label: #333333;
  --accent-base: #e60028;
  --accent-hover: #ff1a40;
  --accent-light: #ff667e;
  --accent-dark: #ffdbe0;
}

body.theme-ocean {
  --bg-body: #081119;
  --bg-panel: #0d1b28;
  --bg-input: #132738;
  --bg-btn: #193348;
  --border-light: #1e3d56;
  --border-btn: #2a5575;
  --text-main: #d0e3f2;
  --text-muted: #6b8ea6;
  --text-bright: #ffffff;
  --text-label: #9bbcd5;
  --accent-base: #00a3ff;
  --accent-hover: #33b5ff;
  --accent-light: #80d4ff;
  --accent-dark: #004d80;
}

body.theme-light {
  color-scheme: light;
  --bg-body: #f1f5f9;
  --bg-panel: #ffffff;
  --bg-input: #f8fafc;
  --bg-btn: #e2e8f0;
  --border-light: #cbd5e1;
  --border-btn: #94a3b8;
  --text-main: #334155;
  --text-muted: #64748b;
  --text-bright: #0f172a;
  --text-label: #475569;
  --accent-base: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-light: #93c5fd;
  --accent-dark: #e0f2fe;
}

body.theme-navy {
  --bg-body: #040914;
  --bg-panel: #0a1122;
  --bg-input: #0f1a30;
  --bg-btn: #162442;
  --border-light: #203359;
  --border-btn: #2d4575;
  --text-main: #c4d7f5;
  --text-muted: #6b84ab;
  --text-bright: #ffffff;
  --text-label: #92aed6;
  --accent-base: #4f8bf9;
  --accent-hover: #7caeff;
  --accent-light: #b3cfff;
  --accent-dark: #102a5c;
}
    @font-face {
      font-family: 'Museo';
      src: url('data/fonts/Museo300-Regular.woff2') format('woff2');
      font-weight: 300;
    }

    @font-face {
      font-family: 'Museo';
      src: url('data/fonts/Museo500-Regular.woff2') format('woff2');
      font-weight: 500;
    }

    @font-face {
      font-family: 'Museo';
      src: url('data/fonts/Museo700-Regular.woff2') format('woff2');
      font-weight: 700;
    }

    @font-face {
      font-family: 'Helvetica Neue LT Pro';
      src: url('data/fonts/helveticaneueltpro_lt.woff2') format('woff2');
      font-weight: 300;
    }

    @font-face {
      font-family: 'Helvetica Neue LT Pro';
      src: url('data/fonts/helveticaneueltpro_roman.woff2') format('woff2');
      font-weight: 400;
    }

    @font-face {
      font-family: 'Helvetica Neue LT Pro';
      src: url('data/fonts/helveticaneueltpro.woff2') format('woff2');
      font-weight: 500;
    }

    @keyframes anim-zoom-in {
      from { opacity: 0; transform: scale(var(--zoom-from, 1.1)); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes anim-zoom-in-nofade {
      from { transform: scale(var(--zoom-from, 1.1)); }
      to { transform: scale(1); }
    }

    @keyframes anim-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes anim-slide-up {
      from { opacity: 0; translate: 0 20px; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes anim-slide-up-nofade {
      from { translate: 0 20px; }
      to { translate: 0 0; }
    }

    @keyframes anim-slide-down {
      from { opacity: 0; translate: 0 -20px; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes anim-slide-down-nofade {
      from { translate: 0 -20px; }
      to { translate: 0 0; }
    }

    @keyframes anim-slide-left {
      from { opacity: 0; translate: 20px 0; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes anim-slide-left-nofade {
      from { translate: 20px 0; }
      to { translate: 0 0; }
    }

    @keyframes anim-slide-right {
      from { opacity: 0; translate: -20px 0; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes anim-slide-right-nofade {
      from { translate: -20px 0; }
      to { translate: 0 0; }
    }

    @keyframes anim-pop-in {
      from { opacity: 0; scale: 0.8; }
      to { opacity: 1; scale: 1; }
    }
    @keyframes anim-pop-in-nofade {
      from { scale: 0.8; }
      to { scale: 1; }
    }

    @keyframes anim-typing {

      from { clip-path: inset(0 100% 0 0); }

      to { clip-path: inset(0 0 0 0); }

    }



    @keyframes anim-fade-typing {

      0% {

        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 65%);

        -webkit-mask-size: 300% 100%;

        -webkit-mask-position: 100% 0;

      }

      100% {

        -webkit-mask-position: 0 0;

      }

    }



    @keyframes anim-bg-grow {

      from { transform: scaleX(0); }

      to { transform: scaleX(1); }

    }

    @keyframes anim-swipe-left  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
    @keyframes anim-swipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes anim-swipe-up    { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes anim-swipe-down  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes anim-swipe-left-fade  { from { clip-path: inset(0 0 0 100%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
    @keyframes anim-swipe-right-fade { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
    @keyframes anim-swipe-up-fade    { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
    @keyframes anim-swipe-down-fade  { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }





    @keyframes eff-pulse {

      0% {

        scale: 1;

      }



      50% {

        scale: 1.05;

      }



      100% {

        scale: 1;

      }

    }



    @keyframes eff-float {

      0% {

        translate: 0 0;

      }



      50% {

        translate: 0 -10px;

      }



      100% {

        translate: 0 0;

      }

    }



    @keyframes eff-flash {



      0%,

      50%,

      100% {

        opacity: 1;

      }



      25%,

      75% {

        opacity: 0;

      }

    }



    @keyframes eff-wiggle {

      0% {

        rotate: 0deg;

      }



      25% {

        rotate: -5deg;

      }



      50% {

        rotate: 0deg;

      }



      75% {

        rotate: 5deg;

      }



      100% {

        rotate: 0deg;

      }

    }



    @keyframes eff-spin {
      100% {
        rotate: var(--spin-target, 360deg);
      }
    }



    @keyframes eff-heartbeat {

      0% {

        scale: 1;

      }



      14% {

        scale: 1.3;

      }



      28% {

        scale: 1;

      }



      42% {

        scale: 1.3;

      }



      70% {

        scale: 1;

      }

    }



    @keyframes eff-pan {

      0% { translate: 0 0; }

      100% { translate: var(--pan-x, 0px) var(--pan-y, 0px); }

    }



    @keyframes eff-zoom {

      0% { scale: 1; }

      100% { scale: var(--zoom-target, 1.5); }

    }





    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    html,

    body {

      height: 100%;

      font-family: 'Inter', system-ui, -apple-system, sans-serif;

      color: var(--text-main);

      background: var(--bg-body);

      overflow: hidden;

      color-scheme: dark;

    }



    button {

      font-family: inherit;

      color: inherit;

    }



    :focus {

      outline: none;

    }



    ::selection {

      background: var(--accent-base);

      color: var(--text-bright);

    }



    /* ---------- layout ---------- */

    .app {

      display: grid;

      grid-template-rows: 48px 1fr;

      height: 100vh;

    }



    .app.preview-lock .topbar,

    .app.preview-lock .panel {

      pointer-events: none;

      opacity: 0.3;

      transition: opacity 0.2s;

    }



    .canvas-frame.locked * {

      pointer-events: none !important;

    }



    .menu-item {

      position: relative;

      color: var(--text-main);

      padding: 4px 10px;

      cursor: pointer;

      border-radius: 4px;

      user-select: none;

    }



    .menu-item:hover {

      background: var(--bg-btn);

      color: var(--text-bright);

    }



    .dropdown {

      display: none;

      position: absolute;

      top: 100%;

      left: 0;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      border-radius: 4px;

      min-width: 160px;

      z-index: 200;

      box-shadow: 0 8px 24px rgba(0, 0, 0, .5);

      padding: 4px 0;

    }



    .menu-item:hover .dropdown {

      display: block;

    }



    .dropdown-item.has-sub {

      position: relative;

    }

    

    .dropdown-item .sub-dropdown {

      display: none;

      position: absolute;

      top: -4px;

      left: 100%;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      border-radius: 4px;

      min-width: 140px;

      z-index: 201;

      box-shadow: 0 8px 24px rgba(0, 0, 0, .5);

      padding: 4px 0;

    }

    

    .dropdown-item.has-sub:hover .sub-dropdown {

      display: block;

    }



    .dropdown-item {

      padding: 6px 16px;

      color: var(--text-main);

      display: flex;

      justify-content: space-between;

      align-items: center;

      cursor: pointer;

      font-size: 11px;

      white-space: nowrap;

    }



    .dropdown-item:hover {

      background: var(--accent-base);

      color: var(--text-bright);

    }



    .dropdown-divider {

      height: 1px;

      background: var(--border-light);

      margin: 4px 0;

    }



    .topbar {

      display: flex;

      align-items: center;

      gap: 10px;

      padding: 0 16px;

      background: var(--bg-panel);

      border-bottom: 1px solid var(--bg-btn);

    }



    .topbar .title {

      font-size: 13px;

      font-weight: 600;

      color: var(--text-bright);

      letter-spacing: .02em;

      margin-right: 4px;

    }



    .topbar .spacer {

      flex: 1;

    }



    .topbar input {

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      color: var(--text-main);

      border-radius: 6px;

      padding: 6px 8px;

      font-size: 12px;

      outline: none;

      width: 280px;

    }



    .topbar input:focus {

      border-color: var(--accent-base);

    }



    .topbar label {

      font-size: 11px;

      color: var(--text-label);

    }



    .seg {

      display: inline-flex;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      border-radius: 6px;

      padding: 2px;

    }



    .seg button {

      background: transparent;

      border: none;

      padding: 5px 10px;

      font-size: 11px;

      color: var(--text-label);

      border-radius: 4px;

      cursor: pointer;

      transition: all .12s;

    }



    .seg button.active {

      background: var(--accent-dark);

      color: var(--text-bright);

    }



    .seg button:hover:not(.active) {

      color: var(--text-bright);

    }



    .btn {

      background: var(--bg-btn);

      border: 1px solid var(--border-light);

      color: var(--text-main);

      padding: 6px 12px;

      border-radius: 6px;

      font-size: 12px;

      cursor: pointer;

      transition: all .12s;

    }



    .btn:hover {

      background: var(--border-light);

      border-color: var(--border-btn);

      color: var(--text-bright);

    }



    .btn.primary {

      background: var(--accent-base);

      border-color: var(--accent-base);

      color: var(--text-bright);

    }



    .btn.primary:hover {

      background: var(--accent-hover);

      border-color: var(--accent-hover);

    }



    .btn.ghost {

      background: transparent;

      border: 1px solid var(--border-light);

    }



    .btn.icon {

      padding: 6px 8px;

    }



    .workspace {

      display: grid;

      grid-template-columns: 260px 1fr 260px;

      min-height: 0;

    }



    body.preview-active .app {

      display: block;

    }



    body.preview-active .workspace {

      display: block;

      height: 100vh;

    }



    body.preview-active .panel,

    body.preview-active .menubar,

    body.preview-active .topbar {

      display: none !important;

    }



    body.preview-active .canvas-area {

      height: 100vh;

      box-sizing: border-box;

      border: 3px solid var(--accent-base);

    }



    /* ---------- panels ---------- */

    .panel {

      background: var(--bg-panel);

      border-right: 1px solid var(--bg-btn);

      display: flex;

      flex-direction: column;

      min-height: 0;

    }



    .panel.right {

      border-right: none;

      border-left: 1px solid var(--bg-btn);

    }



    .panel h3 {

      font-size: 10px;

      font-weight: 600;

      color: var(--text-muted);

      text-transform: uppercase;

      letter-spacing: .08em;

      padding: 14px 14px 8px;

      display: flex;

      align-items: center;

      justify-content: space-between;

    }



    .panel h3 button {

      background: transparent;

      border: none;

      color: var(--text-muted);

      cursor: pointer;

      font-size: 14px;

      padding: 0 4px;

    }



    .panel h3 button:hover {

      color: var(--text-bright);

    }



    .panel-section {

      padding: 0 14px 14px;

      border-bottom: 1px solid var(--bg-input);

    }



    .panel-section:last-child {

      border-bottom: none;

    }

    .panel-section.highlighted {

      background: var(--accent-dark);

      border: 1px solid var(--accent-base);

      border-radius: 8px;

      margin: 12px 14px;

      padding: 0 12px 12px;

    }

    .panel-section.highlighted h3 {

      padding: 12px 12px 8px;

    }



    .panel-header-collapsible {

      cursor: pointer;

      user-select: none;

      transition: color 0.2s ease;

    }



    .panel-header-collapsible:hover {

      color: var(--text-bright) !important;

    }



    .panel-header-collapsible .collapse-icon {

      transition: transform 0.2s ease, color 0.2s ease;

      color: var(--text-muted);

    }



    .panel-header-collapsible:hover .collapse-icon {

      color: var(--text-bright);

    }



    .panel-section.collapsed {

      padding-bottom: 0 !important;

    }



    .panel-section.collapsed > *:not(h3) {

      display: none !important;

    }



    .panel-section.collapsed .collapse-icon {

      transform: rotate(-90deg);

    }



    .panel-scroll {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      flex: 1;
      height: 100%;
    }

    .panel-section.sibling-hidden {
      display: none !important;
    }

    .panel-section.full-mode {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      border-bottom: none;
    }

    .panel-section.full-mode > *:not(h3) {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    .panel-section-content {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }



    .add-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 6px;

    }



    .add-btn {

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      padding: 10px 8px;

      border-radius: 6px;

      font-size: 11px;

      color: var(--text-main);

      cursor: pointer;

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 6px;

      transition: all .12s;

    }



    .add-btn:hover {

      background: var(--bg-btn);

      border-color: var(--border-btn);

      color: var(--text-bright);

    }



    .add-btn:disabled {

      opacity: .3;

      cursor: not-allowed;

    }



    .add-btn svg {

      width: 14px;

      height: 14px;

    }



    /* canvas list (in left panel) */

    .canvas-item {

      display: flex;

      align-items: center;

      gap: 6px;

      padding: 6px 8px;

      border-radius: 4px;

      cursor: pointer;

      font-size: 11px;

      color: var(--text-label);

    }



    .canvas-item:hover {

      background: var(--bg-input);

      color: var(--text-main);

    }



    .canvas-item.active {

      background: var(--accent-dark);

      color: var(--text-bright);

    }



    .canvas-item .ci-name {

      flex: 1;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;

      font-weight: 500;

    }



    .canvas-item .ci-dim {

      font-family: 'JetBrains Mono', ui-monospace, monospace;

      font-size: 10px;

      color: var(--text-muted);

    }



    .canvas-item.active .ci-dim {

      color: var(--accent-light);

    }



    .canvas-item .icon-btn {

      display: none;

      background: transparent;

      border: none;

      color: var(--text-muted);

      cursor: pointer;

      padding: 0 4px;

    }



    .canvas-item:hover .icon-btn {

      display: inline-flex;

    }



    .canvas-item .icon-btn:hover {

      color: var(--text-bright);

    }



    /* layers list */

    .layer {

      display: flex;

      align-items: center;

      gap: 8px;

      padding: 6px 8px;

      border-radius: 4px;

      cursor: pointer;

      font-size: 12px;

      color: var(--text-label);

    }



    .layer:hover {

      background: var(--bg-input);

      color: var(--text-main);

    }



    .layer.selected {

      background: var(--accent-dark);

      color: var(--text-bright);

    }

    .layer.read-only-folder {
      color: var(--accent-light, #a78bfa) !important;
      font-weight: 600;
    }
    .layer.read-only-folder .layer-icon {
      color: var(--accent-base, #7c5cff) !important;
      opacity: 1;
    }
    .layer.read-only-asset {
      color: var(--accent-light, #a78bfa) !important;
      opacity: 0.85;
    }
    .layer.read-only-asset .layer-icon {
      color: var(--accent-base, #7c5cff) !important;
      opacity: 1;
    }



    .layer .layer-icon {

      width: 12px;

      height: 12px;

      flex-shrink: 0;

      opacity: .7;

    }



    .layer .layer-name {

      flex: 1;

      white-space: nowrap;

      overflow: hidden;

      -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);

      mask-image: linear-gradient(to right, black 80%, transparent 100%);

    }







    .layer .layer-name::-webkit-scrollbar {

      display: none;

    }



    .layer .layer-name[contenteditable="true"] {
      background: var(--bg-body);
      color: var(--text-bright);
      border: 1px solid var(--accent-base);
      border-radius: 3px;
      padding: 2px 4px;
      margin: -3px -5px;
      outline: none;
      cursor: text;
      user-select: text;
      -webkit-user-select: text;
      mask-image: none !important;
      -webkit-mask-image: none !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }
    .layer .layer-name[contenteditable="true"]::-webkit-scrollbar {
      display: none !important;
    }



    .layer .layer-actions {

      display: flex;

      gap: 2px;

    }



    .layer .icon-btn {

      background: transparent;

      border: none;

      color: var(--text-main);

      cursor: pointer;

      padding: 2px;

      border-radius: 3px;

      display: flex;

      font-size: 11px;

      opacity: 0.3;

      transition: opacity 0.1s, background 0.1s;

    }



    .layer .icon-btn.active {

      opacity: 1;

    }



    .layer .icon-btn svg {

      width: 14px;

      height: 14px;

    }



    .layer .icon-btn:hover {

      opacity: 1;

      background: var(--border-light);

    }



    /* properties panel */

    .prop-row {

      margin-bottom: 8px;

    }



    .prop-row label {

      display: block;

      font-size: 9px;

      color: var(--text-muted);

      text-transform: uppercase;

      letter-spacing: .04em;

      margin-bottom: 3px;

      font-weight: 600;

    }



    .prop-row input[type="text"],

    .prop-row input[type="number"],

    .prop-row input[type="url"],

    .prop-row select,

    .prop-row textarea {

      width: 100%;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      color: var(--text-main);

      border-radius: 4px;

      padding: 4px 6px;

      font-size: 11px;

      outline: none;

    }

    .prop-row input:disabled,
    .prop-row select:disabled,
    .prop-row textarea:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }




    .prop-row input:focus,

    .prop-row select:focus,

    .prop-row textarea:focus {

      border-color: var(--accent-base);

    }



    .prop-row input[type="color"] {

      width: 24px;

      height: 24px;

      border: 1px solid var(--border-light);

      background: var(--bg-input);

      border-radius: 4px;

      padding: 0;

      cursor: pointer;

      flex-shrink: 0;

    }



    .prop-grid-2 {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 6px;

    }

    .prop-row-compact {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-input);
      border: 1px solid var(--border-light);
      border-radius: 4px;
      padding: 2px 6px;
      transition: border-color 0.15s ease-in-out;
      box-sizing: border-box;
      height: 24px;
    }

    .prop-row-compact:focus-within {
      border-color: var(--accent-base);
    }

    .prop-row-compact input[type="number"] {
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
      outline: none !important;
      width: 100% !important;
      color: var(--text-main) !important;
      font-size: 11px !important;
      margin: 0 !important;
      height: 100% !important;
    }

    .prop-row-compact svg {
      color: var(--text-muted);
      transition: color 0.15s ease-in-out;
      flex-shrink: 0;
    }

    .prop-row-compact:focus-within svg {
      color: var(--text-bright);
    }

    .cp-trigger:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }




    .prop-empty {

      font-size: 12px;

      color: var(--text-muted);

      padding: 20px 14px;

      text-align: center;

      line-height: 1.6;

    }



    .align-group {

      display: flex;

      gap: 4px;

    }



    .align-btn {

      flex: 1;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      color: var(--text-label);

      border-radius: 4px;

      padding: 6px 0;

      cursor: pointer;

      transition: all .1s;

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .align-btn:hover {

      background: var(--border-light);

      color: var(--text-bright);

    }



    .align-btn.active {

      background: var(--accent-base);

      border-color: var(--accent-base);

      color: var(--text-bright);

    }



    .checkbox-row {

      display: flex;

      align-items: center;

      gap: 8px;

    }



    .checkbox-row input {

      width: auto;

    }



    .checkbox-row label {

      margin: 0;

      text-transform: none;

      font-size: 11px;

      color: var(--text-main);

      font-weight: 400;

      letter-spacing: 0;

    }



    /* ---------- canvas area ---------- */

    .canvas-area {

      background: var(--bg-body);

      position: relative;

      overflow: auto;

      display: grid;

    }



    /* workspace inside canvas-area */

    .workspace-canvas {

      grid-area: 1 / 1;

      position: relative;

      width: 5000px;

      height: 5000px;

      margin-left: 16px;

      margin-top: 16px;

    }



    /* faint dotted grid for the workspace */

    .workspace-canvas {

      background-image: radial-gradient(rgba(58, 64, 85, .4) 1px, transparent 1px);

      background-size: 24px 24px;

    }



    .canvas-frame {

      position: absolute;

    }



    .canvas-frame.active {

      z-index: 10;

    }



    .canvas-header {

      display: flex;

      align-items: center;

      gap: 8px;

      height: 22px;

      margin-bottom: 6px;

      font-size: 10px;

      font-family: 'JetBrains Mono', ui-monospace, monospace;

      color: var(--text-muted);

      letter-spacing: .04em;

      cursor: move;

      user-select: none;

    }



    .canvas-header .name {

      color: var(--text-main);

      font-family: 'Inter', sans-serif;

      font-weight: 500;

      letter-spacing: 0;

    }



    .canvas-header .dim {

      color: var(--text-muted);

    }



    .canvas-frame.active .canvas-header .name {

      color: var(--accent-light);

    }



    .canvas-frame.active .canvas-header::before {

      content: '';

      width: 6px;

      height: 6px;

      border-radius: 50%;

      background: var(--accent-base);

      box-shadow: 0 0 6px var(--accent-base);

    }



    .canvas {

      position: relative;

      box-shadow: 0 0 0 1px var(--bg-btn), 0 4px 20px rgba(0, 0, 0, 0.4);

    }



    .canvas-frame.active .canvas {

      box-shadow: 0 0 0 1.5px var(--accent-base), 0 8px 30px rgba(0, 0, 0, 0.5);

    }



    /* Drop-target highlight when dragging image files over a canvas */

    .canvas.drop-target {

      outline: 2px dashed var(--accent-base);

      outline-offset: -2px;

      box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5);

    }



    .el {

      position: absolute;

      cursor: move;

      user-select: none;

      pointer-events: auto;

    }



    .el.text {

      display: flex;

      align-items: center;

    }



    .el.text>span {

      width: 100%;

      pointer-events: none;

      line-height: 1.2;

      white-space: pre-wrap;

      word-break: break-word;

    }



    .el.shape-rect,

    .el.shape-circle,

    .el.button {

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .el.button {

      font-weight: 600;

      white-space: pre-wrap;

    }



    .el.image img {

      width: 100%;

      height: 100%;

      object-fit: contain;

      pointer-events: none;

      display: block;

    }



    .el.editing {

      cursor: text;

    }



    .el.editing>span,

    .el.editing>.editable {

      pointer-events: all;

      outline: none;

      cursor: text;

    }



    .editable {

      width: 100%;

      display: block;

      height: auto;

      white-space: pre-wrap;

      word-break: break-word;

    }



    .editable[contenteditable="true"] {

      caret-color: var(--accent-base);

    }



    .el.button .editable::selection {

      background: rgba(0, 0, 0, 0.3);

      color: inherit;

    }



    .selection-outline {

      position: absolute;

      border: calc(1.5px / var(--z, 1)) solid var(--accent-base);

      pointer-events: none;

      z-index: 999999;

    }



    .handle {

      position: absolute;

      width: calc(8px / var(--z, 1));

      height: calc(8px / var(--z, 1));

      background: var(--accent-base);

      border: calc(1.5px / var(--z, 1)) solid var(--text-bright);

      border-radius: calc(2px / var(--z, 1));

      pointer-events: all;

    }



    .selection-outline.group {

      border-color: #ffab00;

    }



    .selection-outline.group .handle {

      background: #ffab00;

    }



    .handle.nw {

      top: calc(-5px / var(--z, 1));

      left: calc(-5px / var(--z, 1));

      cursor: nw-resize;

    }



    .handle.ne {

      top: calc(-5px / var(--z, 1));

      right: calc(-5px / var(--z, 1));

      cursor: ne-resize;

    }



    .handle.sw {

      bottom: calc(-5px / var(--z, 1));

      left: calc(-5px / var(--z, 1));

      cursor: sw-resize;

    }



    .handle.se {

      bottom: calc(-5px / var(--z, 1));

      right: calc(-5px / var(--z, 1));

      cursor: se-resize;

    }



    .handle.n {

      top: calc(-5px / var(--z, 1));

      left: 50%;

      transform: translateX(-50%);

      cursor: ns-resize;

    }



    .handle.s {

      bottom: calc(-5px / var(--z, 1));

      left: 50%;

      transform: translateX(-50%);

      cursor: ns-resize;

    }



    .handle.w {

      top: 50%;

      left: calc(-5px / var(--z, 1));

      transform: translateY(-50%);

      cursor: ew-resize;

    }



    .handle.e {

      top: 50%;

      right: calc(-5px / var(--z, 1));

      transform: translateY(-50%);

      cursor: ew-resize;

    }



    .handle.rot {

      top: calc(-20px / var(--z, 1));

      left: 50%;

      transform: translateX(-50%);

      border-radius: 50%;

      cursor: crosshair;

    }



    .handle.radius {

      border-radius: 50%;

      cursor: nwse-resize;

    }



    .handle.rot,

    .handle.radius,

    .selection-outline.group .handle.rot,

    .selection-outline.group .handle.radius {

      background: #06b6d4;

    }



    /* modal */

    .modal-bg {

      position: fixed;

      inset: 0;

      background: rgba(0, 0, 0, .6);

      display: flex;

      align-items: center;

      justify-content: center;

      z-index: 100;

    }



    .modal {

      background: var(--bg-panel);

      border: 1px solid var(--border-light);

      border-radius: 10px;

      width: 640px;

      max-width: 90vw;

      max-height: 86vh;

      display: flex;

      flex-direction: column;

      box-shadow: 0 20px 60px rgba(0, 0, 0, .5);

    }



    .modal-head {

      display: flex;

      align-items: center;

      padding: 14px 18px;

      border-bottom: 1px solid var(--bg-btn);

    }



    .modal-head h2 {

      font-size: 14px;

      font-weight: 600;

      color: var(--text-bright);

      flex: 1;

    }



    .modal-body {

      flex: 1;

      overflow: auto;

      padding: 16px 18px;

    }



    .modal-body textarea {

      width: 100%;

      height: 380px;

      background: var(--bg-body);

      border: 1px solid var(--bg-btn);

      color: var(--text-main);

      font-family: 'JetBrains Mono', ui-monospace, monospace;

      font-size: 11px;

      padding: 12px;

      border-radius: 6px;

      resize: none;

      outline: none;

      line-height: 1.6;

    }



    .modal-foot {

      display: flex;

      gap: 8px;

      padding: 12px 18px;

      border-top: 1px solid var(--bg-btn);

      justify-content: flex-end;

    }



    .shortcuts-table {

      width: 100%;

      font-size: 13px;

      color: var(--text-main);

    }



    .shortcuts-table td {

      padding: 8px 0;

      border-bottom: 1px solid var(--bg-btn);

    }



    .shortcuts-table td:first-child {

      color: var(--text-label);

    }



    .shortcuts-table td:last-child {

      text-align: right;

    }



    .kbd {

      display: inline-block;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      border-radius: 4px;

      padding: 2px 6px;

      font-family: 'JetBrains Mono', ui-monospace, monospace;

      font-size: 11px;

      color: var(--text-bright);

    }



    /* ---------- context menu ---------- */

    #ctx-menu {

      position: fixed;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      border-radius: 6px;

      box-shadow: 0 8px 24px rgba(0, 0, 0, .5);

      padding: 4px 0;

      min-width: 160px;

      z-index: 999999;

      display: none;

      flex-direction: column;

    }



    .ctx-item {

      padding: 6px 12px;

      font-size: 12px;

      color: var(--text-main);

      cursor: pointer;

      user-select: none;

    }



    .ctx-item:hover {

      background: var(--accent-base);

      color: var(--text-bright);

    }

    .ctx-item.highlight {
      color: var(--accent-light);
      font-weight: 500;
    }

    .ctx-item.has-submenu {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .ctx-item.has-submenu::after {
      content: '▶';
      font-size: 8px;
      margin-left: 8px;
      opacity: 0.5;
    }

    .ctx-submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -1px;
      background: var(--bg-panel);
      border: 1px solid var(--border-light);
      border-radius: 4px;
      padding: 4px 0;
      min-width: 140px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      z-index: 1000;
    }

    .ctx-item.has-submenu:hover > .ctx-submenu {
      display: block;
    }



    .ctx-divider {

      height: 1px;

      background: var(--border-light);

      margin: 4px 0;

    }



    /* ---------- rulers ---------- */

    #ruler-h {

      position: sticky;

      top: 0;

      left: 0;

      width: max-content;

      min-width: 100%;

      height: 16px;

      background: var(--bg-btn);

      border-bottom: 1px solid var(--border-light);

      z-index: 100;

      cursor: row-resize;

      grid-area: 1 / 1;

      display: block;

      margin-left: 16px;

      align-self: start;

    }



    #ruler-v {

      position: sticky;

      left: 0;

      top: 0;

      width: 16px;

      height: max-content;

      min-height: 100%;

      background: var(--bg-btn);

      border-right: 1px solid var(--border-light);

      z-index: 100;

      cursor: col-resize;

      grid-area: 1 / 1;

      display: block;

      margin-top: 16px;

      justify-self: start;

    }



    #ruler-corner {

      position: sticky;

      top: 0;

      left: 0;

      width: 16px;

      height: 16px;

      background: var(--bg-input);

      border-right: 1px solid var(--border-light);

      border-bottom: 1px solid var(--border-light);

      z-index: 101;

      grid-area: 1 / 1;

      align-self: start;

      justify-self: start;

    }



    .guide-h {

      position: absolute;

      left: 0;

      right: 0;

      height: 1px;

      background: #00ffff;

      z-index: 50;

      cursor: row-resize;

    }



    .guide-v {

      position: absolute;

      top: 0;

      bottom: 0;

      width: 1px;

      background: #00ffff;

      z-index: 50;

      cursor: col-resize;

    }



    #size-overlay {

      display: none;

      position: fixed;

      inset: 0;

      background: var(--bg-body);

      z-index: 999999;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      text-align: center;

      padding: 40px;

    }



    .smart-guide {

      position: absolute;

      background: #e91e63;

      z-index: 10000;

      pointer-events: none;

      opacity: 0.8;

    }



    .smart-guide.x {

      width: calc(1px / var(--z, 1));

      top: 0;

      bottom: 0;

    }



    .smart-guide.y {

      height: calc(1px / var(--z, 1));

      left: 0;

      right: 0;

    }



    /* Custom Color Picker Styles */

    .cp-modal {

      position: absolute;

      background: var(--bg-input);

      border: 1px solid var(--border-light);

      border-radius: 8px;

      box-shadow: 0 10px 30px rgba(0,0,0,0.5);

      width: 260px;

      z-index: 10000;

      display: flex;

      flex-direction: column;

      overflow: hidden;

    }

    .cp-header {

      display: flex;

      border-bottom: 1px solid var(--border-light);

    }

    .cp-tab {

      flex: 1;

      padding: 10px 0;

      background: transparent;

      border: none;

      color: var(--text-label);

      font-size: 11px;

      font-weight: 600;

      cursor: pointer;

      text-transform: uppercase;

      letter-spacing: .05em;

    }

    .cp-tab.active {

      color: var(--text-bright);

      border-bottom: 2px solid var(--accent-base);

    }

    .cp-body {

      padding: 16px;

    }

    .cp-row {

      display: flex;

      align-items: center;

      gap: 8px;

    }

    .cp-input {

      flex: 1;

      background: var(--bg-body);

      border: 1px solid var(--border-light);

      color: var(--text-main);

      border-radius: 4px;

      padding: 6px 8px;

      font-size: 12px;

      outline: none;

      text-align: center;

      text-transform: uppercase;

    }

    .cp-btn {

      background: var(--border-light);

      border: 1px solid var(--border-btn);

      color: var(--text-main);

      border-radius: 4px;

      padding: 6px 8px;

      cursor: pointer;

      display: flex;

      align-items: center;

      justify-content: center;

    }

    .cp-btn:hover {

      background: var(--border-btn);

      color: var(--text-bright);

    }

    .cp-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .cp-btn:disabled:hover {
      background: var(--border-light);
      color: var(--text-main);
    }

    .cp-color-btn {

      width: 100%;

      height: 24px;

      border-radius: 4px;

      border: 1px solid var(--border-light);

      cursor: pointer;

    }

    .cp-grad-stop-container {

      flex: 1;

      padding: 2px;

      border: 2px solid transparent;

      border-radius: 6px;

    }

    .cp-grad-stop-container.active {

      border-color: var(--accent-base);

    }

    .cp-divider {

      height: 1px;

      background: var(--border-light);

      margin: 12px 0;

    }

    .cp-swatch-grid {

      display: grid;

      grid-template-columns: repeat(8, 1fr);

      gap: 6px;

    }

    .cp-swatch {

      width: 100%;

      aspect-ratio: 1;

      border-radius: 4px;

      border: 1px solid var(--border-light);

      cursor: pointer;

    }

    .cp-swatch:hover {

      border-color: var(--accent-base);

    }





    @media (max-width: 1023px),

    (max-height: 767px),

    (pointer: coarse) and (hover: none) {

      #size-overlay {

        display: flex;

      }



      .app {

        display: none !important;

      }

    }

/* Fullscreen Mode */
body.fullscreen-mode .app { grid-template-rows: 1fr !important; }
body.fullscreen-mode .topbar { display: none !important; }
body.fullscreen-mode .workspace { grid-template-columns: 1fr !important; }
body.fullscreen-mode .panel { display: none !important; }
body.fullscreen-mode #ruler-h, body.fullscreen-mode #ruler-v, body.fullscreen-mode #ruler-corner, body.fullscreen-mode .guide-h, body.fullscreen-mode .guide-v { display: none !important; }


    /* ---------- Automation panel ---------- */

    .automation-grid {

      display: flex;

      flex-direction: column;

      gap: 6px;

    }



    .automation-btn {

      display: flex;

      align-items: center;

      gap: 8px;

      padding: 8px 10px;

      background: var(--bg-input);

      border: 1px solid #272c3a;

      color: var(--text-main);

      border-radius: 4px;

      cursor: pointer;

      font-size: 11px;

      font-weight: 500;

      text-align: left;

      transition: background 0.15s, border-color 0.15s, color 0.15s;

    }



    .automation-btn:hover {

      background: var(--bg-btn);

    }



    .automation-btn.active {

      color: var(--accent-light);

    }



    .automation-btn svg {

      width: 16px;

      height: 16px;

      flex-shrink: 0;

    }



    .automation-btn > span:first-of-type {

      flex: 1;

    }



    .automation-btn.featured {

      background: linear-gradient(135deg, rgba(124, 92, 255, 0.25), rgba(167, 139, 250, 0.12));

      border-color: var(--accent-base);

      color: var(--text-bright);

      font-weight: 600;

      box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.25), 0 4px 12px rgba(124, 92, 255, 0.18);

    }



    .automation-btn.featured:hover {

      background: linear-gradient(135deg, rgba(124, 92, 255, 0.35), rgba(167, 139, 250, 0.2));

    }



    .automation-btn .badge-ai {

      font-size: 9px;

      font-weight: 700;

      letter-spacing: 0.05em;

      padding: 2px 5px;

      border-radius: 3px;

      background: var(--accent-base);

      color: #fff;

    }



    /* ---------- Safezone overlay ---------- */

    .safezone-overlay {

      position: absolute;

      pointer-events: none;

      border: calc(1px / var(--z, 1)) solid #00ffff;

      opacity: 0.45;

      z-index: 49;

    }



    .safezone-cross {

      position: absolute;

      left: 50%;

      top: 50%;

      width: calc(14px / var(--z, 1));

      height: calc(14px / var(--z, 1));

      transform: translate(-50%, -50%);

    }



    .safezone-cross::before,

    .safezone-cross::after {

      content: '';

      position: absolute;

      background: #00ffff;

    }



    .safezone-cross::before {

      left: 0;

      right: 0;

      top: 50%;

      height: calc(1px / var(--z, 1));

      transform: translateY(-50%);

    }



    .safezone-cross::after {

      top: 0;

      bottom: 0;

      left: 50%;

      width: calc(1px / var(--z, 1));

      transform: translateX(-50%);
    }

    .cp-trigger {
      padding: 0 !important;
      /* Clip the (gradient) background to the padding box so it doesn't bleed under
         the 1px border — Chrome otherwise renders a thin light seam between a dark
         border and a gradient fill on small rounded elements. */
      background-clip: padding-box;
    }


    /* ---------- gradient stop markers ---------- */
    .cp-grad-marker {
      position: absolute;
      top: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
      transform: translateX(-50%);
      cursor: ew-resize;
      box-sizing: border-box;
    }
    .cp-grad-marker.active {
      border-color: var(--accent-base);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 6px var(--accent-base);
    }


    /* Linked-element highlight (visual only — siblings of the selected element, or a
       hovered link-group row). Non-live = static dashed border; live adds the marching-
       ants animation. Both share identical geometry / thickness / offset, so they differ
       only by motion. */
    .el.link-highlight::after,
    .el.link-highlight-hover::after,
    .el.link-highlight-live::after,
    .el.link-highlight-hover-live::after {
      content: '';
      position: absolute;
      inset: calc(-1.5px / var(--z, 1));
      pointer-events: none;
      border-radius: inherit;
      z-index: 100000;
      background-image:
        linear-gradient(90deg, var(--accent-light) 50%, transparent 50%),
        linear-gradient(90deg, var(--accent-light) 50%, transparent 50%),
        linear-gradient(0deg, var(--accent-light) 50%, transparent 50%),
        linear-gradient(0deg, var(--accent-light) 50%, transparent 50%);
      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
      background-size:
        calc(10px / var(--z, 1)) calc(2px / var(--z, 1)),
        calc(10px / var(--z, 1)) calc(2px / var(--z, 1)),
        calc(2px / var(--z, 1)) calc(10px / var(--z, 1)),
        calc(2px / var(--z, 1)) calc(10px / var(--z, 1));
      background-position: 0 0, 0 100%, 0 0, 100% 0;
    }

    /* Live Link Mode — identical border, animated */
    @keyframes marching-ants {
      0% {
        background-position: 0 0, 0 100%, 0 0, 100% 0;
      }
      100% {
        background-position: calc(20px / var(--z, 1)) 0, calc(-20px / var(--z, 1)) 100%, 0 calc(-20px / var(--z, 1)), 100% calc(20px / var(--z, 1));
      }
    }

    .el.link-highlight-live::after,
    .el.link-highlight-hover-live::after {
      animation: marching-ants 0.8s linear infinite;
    }

    /* Circles can't use the 4-edge gradient dashes — they clip into broken
       fragments around the curve. Use a real dashed border, which follows the
       50% border-radius cleanly. */
    .el.shape-circle.link-highlight::after,
    .el.shape-circle.link-highlight-hover::after,
    .el.shape-circle.link-highlight-live::after,
    .el.shape-circle.link-highlight-hover-live::after {
      background: none;
      animation: none;
      border: calc(2px / var(--z, 1)) dashed var(--accent-light);
    }


/* Data-merge: a small badge marks the dynamic-data element — a lightning bolt, plus a
   link icon when the element is in a link group. Shown only on the selected element (not
   its linked siblings) and floated just above the top-right, outside the outline. */
.selection-outline .dm-badge {
  position: absolute;
  bottom: calc(100% + 7px / var(--z, 1));
  right: 0;
  display: flex;
  align-items: center;
  gap: calc(3px / var(--z, 1));
  color: var(--accent-light);
  pointer-events: none;
  z-index: 100001;
}
.selection-outline .dm-badge svg {
  width: calc(13px / var(--z, 1));
  height: calc(13px / var(--z, 1));
  display: block;
  filter: drop-shadow(0 0 calc(1px / var(--z, 1)) rgba(0,0,0,.75));
}

/* Dynamic save-status styling and animations */
#save-status {
  width: 32px;
  min-width: 32px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  margin-right: 12px;
}

@keyframes save-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.6; }
}

@keyframes save-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes save-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes save-dot-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes save-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-2px); }
  40%, 80% { transform: translateX(2px); }
}

.save-icon, .status-indicator {
  transform-origin: center;
  flex-shrink: 0;
}

.status-indicator.loading {
  animation: save-spin 1s linear infinite;
}

.canvas-notification {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translate(-50%, -20px);
  z-index: 100000;
  pointer-events: none;
  visibility: hidden;
  background: rgba(30, 27, 75, 0.85); /* Dark Indigo theme-aware styling */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(124, 92, 255, 0.3);
  color: #f1f5f9;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0.3s;
}

.canvas-notification.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.canvas-notification.warning {
  border-color: rgba(245, 158, 11, 0.4);
}
.canvas-notification.warning .icon {
  color: #f59e0b;
}

.canvas-notification.error {
  border-color: rgba(239, 68, 68, 0.4);
}
.canvas-notification.error .icon {
  color: #ef4444;
}

.canvas-notification.info {
  border-color: rgba(59, 130, 246, 0.4);
}
.canvas-notification.info .icon {
  color: #3b82f6;
}

.canvas-notification .toast-btn {
  background: var(--accent-base);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.2s, transform 0.1s;
  outline: none;
}
.canvas-notification .toast-btn:hover {
  background: var(--accent-hover);
}
.canvas-notification .toast-btn:active {
  transform: scale(0.95);
}

.canvas-notification .icon {
  color: #a78bfa;
  display: flex;
  align-items: center;
}

.layer-hover-outline {
  position: absolute;
  border: calc(1.5px / var(--z, 1)) dashed #22d3ee; /* Distinct dashed cyan outline */
  pointer-events: none;
  z-index: 1000000;
  box-shadow: 0 0 3px rgba(34, 211, 238, 0.3);
  border-radius: 1px;
}

/* Image Preview Hover Overlay */
.img-preview-container:hover .img-preview-overlay {
  opacity: 1 !important;
}

#asset-list {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Custom scrollbar for #asset-list to match modern style */
#asset-list::-webkit-scrollbar {
  width: 4px;
}
#asset-list::-webkit-scrollbar-track {
  background: transparent;
}
#asset-list::-webkit-scrollbar-thumb {
  background: var(--border-light, rgba(255, 255, 255, 0.1));
  border-radius: 2px;
}
#asset-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-base, #3b82f6);
}