.export-overlay{
    position:fixed;inset:0;
    background:var(--bg);
    z-index:900;
    display:flex;flex-direction:column;
    opacity:0;pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out);
  }
  .export-overlay.open{opacity:1;pointer-events:auto;}
  .export-bar{
    display:flex;align-items:center;gap:var(--sp-3);
    flex-wrap:wrap;
    padding:var(--sp-4) var(--sp-5);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid color-mix(in srgb, var(--ring) 55%, transparent);
    position:relative;z-index:3;
    animation:cardIn var(--dur-slower) var(--ease-out) both;
  }
  .export-bar .bar-title{
    font-family:'Baloo 2',cursive;font-weight:700;
    color:var(--accent-deep);font-size:1.05rem;
    margin-right:auto;
  }
  .ex-seg{display:flex;gap:4px;background:var(--card);border:var(--solid);border-radius:var(--r-pill);padding:4px;}
  .ex-seg button{
    border:none;background:none;cursor:pointer;
    font-family:'Quicksand',sans-serif;font-size:0.78rem;font-weight:600;
    color:var(--text-soft);padding:6px 14px;border-radius:var(--r-pill);
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .ex-seg button.active{background:var(--grad-soft);color:var(--promo-text);}
  .export-bar .pill{font-size:0.86rem;}
  .export-bar .pill.solid{background:var(--button-primary-bg);color:var(--button-primary-text);box-shadow:0 8px 20px rgba(136,103,194,0.35);}
  .export-bar .pill.solid:hover{transform:translateY(-2px);}
  .ex-warn{
    display:none;
    color:var(--danger-deep);font-size:0.78rem;font-weight:600;
    background:rgba(224,140,140,0.16);
    padding:6px 12px;border-radius:var(--r-pill);
    animation:cardIn var(--dur-base) var(--ease-out) both;
  }
  .ex-warn.show{display:inline-block;}
  .ex-holder{
    flex:1;display:flex;align-items:center;justify-content:center;
    overflow:auto;padding:var(--sp-6);
    transition:margin-left var(--dur-base) var(--ease-out);
  }
  .showpanel .ex-holder{margin-left:280px;}
  .ex-stage{
    position:relative;flex:none;
    transform-origin:center center;
    transition:transform var(--dur-base) var(--ease-bounce);
  }
  #exCanvas{display:block;width:100%;height:100%;border-radius:var(--radius-md);}
  .ex-body{flex:1;min-height:0;display:flex;position:relative;overflow:hidden;background:var(--bg-primary);}
  .ex-panel{
    position:absolute;top:0;left:0;bottom:0;z-index:5;
    width:280px;padding:var(--sp-4);
    background:var(--surface-soft);
    border-right:1px solid var(--border-color);
    box-shadow:18px 0 44px rgba(40,22,60,0.28);
    display:flex;flex-direction:column;gap:var(--sp-4);overflow:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(-110%) scale(0.97);
    transform-origin:left center;
    will-change:transform,opacity;
    transition:opacity var(--dur-base) var(--ease-out),
               transform var(--dur-base) var(--ease-bounce),
               visibility 0s linear var(--dur-base);
  }
  .showpanel .ex-panel{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(0) scale(1);
    transition:opacity var(--dur-base) var(--ease-out),
               transform var(--dur-base) var(--ease-bounce),
               visibility 0s;
  }
  .ex-panel .ex-group{
    border:1px solid var(--border-color);border-radius:var(--radius-md);
    padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);
    background:var(--surface);
  }
  .ex-panel .ex-group h4{
    margin:0;font-family:'Baloo 2',cursive;font-size:0.9rem;
    color:var(--accent-deep);
  }
  .ex-field{display:flex;flex-direction:column;gap:4px;}
  .ex-field label{
    font-size:0.7rem;font-weight:600;color:var(--text-soft);
    text-transform:uppercase;letter-spacing:0.05em;
    display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  }
  .ex-field label output{color:var(--accent-deep);font-weight:700;font-size:0.8rem;}
  .ex-field input[type=range]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:6px;border-radius:999px;
    background:var(--slider-track);
    outline:none;cursor:pointer;
  }
  .ex-field input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:18px;height:18px;border-radius:50%;
    background:var(--slider-thumb);
    border:2px solid var(--surface);
    box-shadow:0 2px 8px rgba(40,20,60,0.35);
    margin-top:-6px;cursor:pointer;
  }
  .ex-field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--slider-track);}
  .ex-field input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--slider-track);}
  .ex-field input[type=range]::-moz-range-thumb{
    width:16px;height:16px;border-radius:50%;
    background:var(--slider-thumb);
    border:2px solid var(--surface);
    cursor:pointer;
  }
  .ex-field input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--ring);outline-offset:2px;}
  .ex-field input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid var(--ring);outline-offset:2px;}
  .ex-posgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .ex-posgrid button{
    aspect-ratio:1;border:1px solid var(--border-color);border-radius:10px;
    background:var(--surface);cursor:pointer;position:relative;overflow:hidden;
    transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
  }
  .ex-posgrid button:hover{border-color:var(--lav);}
  .ex-posgrid button.active{border-color:var(--lav-deep);box-shadow:0 0 0 1px var(--lav-deep);}
  .ex-posgrid .mini{
    position:absolute;background:linear-gradient(135deg,var(--lav),var(--pink));
    border-radius:3px;transition:opacity var(--dur-fast) var(--ease-out);
  }
  .ex-posgrid button.active .mini{opacity:1;}
  .ex-fullbtn{width:100%;}
  .ex-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
  .ex-swatch{
    position:relative;border:1px solid var(--ring);border-radius:10px;
    height:30px;cursor:pointer;overflow:hidden;display:block;
    transition:transform var(--dur-fast) var(--ease-out);
  }
  .ex-swatch:hover{transform:scale(1.06);}
  .ex-swatch input{position:absolute;inset:-6px;opacity:0;cursor:pointer;width:calc(100% + 12px);height:calc(100% + 12px);}
  .ex-panel .ex-seg{flex-wrap:wrap;}
  .ex-panel .ex-seg button{flex:1;padding:6px 8px;font-size:0.72rem;}
  .ex-panel .pill{font-size:0.78rem;}
  .ex-hit{position:absolute;touch-action:none;cursor:move;}
  .ex-hit .ex-outline{
    position:absolute;inset:-1px;
    border:2px dashed transparent;border-radius:14px;
    pointer-events:none;
    transition:border-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
    opacity:0.7;
  }
  .ex-hit.selected .ex-outline{border-color:var(--lav-deep);opacity:1;}
  .ex-hit .ex-tag{
    position:absolute;left:2px;top:-20px;
    font-family:'Quicksand',sans-serif;font-size:0.6rem;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;
    color:var(--lav-deep);background:var(--card);
    padding:2px 8px;border-radius:8px;border:1px solid var(--ring);
    opacity:0;pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease-out);
    white-space:nowrap;box-shadow:var(--shadow-sm);
  }
  .ex-hit.selected .ex-tag{opacity:1;}
  .ex-handle{
    position:absolute;right:-9px;bottom:-9px;
    width:18px;height:18px;border-radius:50%;
    background:var(--surface-raised);border:2px solid var(--lav-deep);
    display:none;cursor:nwse-resize;
    box-shadow:0 2px 10px rgba(70,46,98,0.35);
    z-index:2;
  }
  .ex-hit.selected .ex-handle{display:block;}
  .export-hint{
    text-align:center;padding:var(--sp-3);
    font-size:0.8rem;color:var(--text-faint);
    animation:cardIn var(--dur-slower) var(--ease-out) both;
  }
  .ex-badges{position:absolute;left:2px;top:-20px;display:none;}
  @media (max-width:760px){
    .export-bar{gap:var(--sp-2);padding:var(--sp-3);}
    .ex-holder{padding:var(--sp-3);}
    .showpanel .ex-holder{margin-left:0;}
    .export-bar .bar-title{width:100%;}
    .ex-panel{width:min(84vw,280px);}
  }