/* =========================================================
   ARTY.DECO — Mirror Studio
   ========================================================= */
.me-lock, .me-lock body { overflow: hidden !important; }
.me {
  --bg: #140a1c; --panel: rgba(32, 18, 42, .86); --line: rgba(255, 255, 255, .09); --txt: #f6f0fa; --mut: rgba(246, 240, 250, .58);
  --acc: #9b2fd9; --gold: #f2d48a; --vio: #8e44c4;
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 64px 1fr; background: var(--bg); color: var(--txt);
  font-family: var(--font-body, 'Manrope', sans-serif);
}
.me[hidden] { display: none; }
.me.opening { animation: meOpen .65s cubic-bezier(.2, .8, .2, 1) both; }
.me.closing { animation: meClose .42s cubic-bezier(.6, 0, .8, .2) both; }
@keyframes meOpen { from { clip-path: circle(0 at var(--ox) var(--oy)); } to { clip-path: circle(150vmax at var(--ox) var(--oy)); } }
@keyframes meClose { from { clip-path: circle(150vmax at var(--ox) var(--oy)); opacity: 1; } to { clip-path: circle(0 at var(--ox) var(--oy)); opacity: .6; } }
.me svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(.me) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* top bar */
.me-top { display: flex; align-items: center; gap: .9rem; padding: 0 1rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #1d0f28, #2a1238 60%, #1d0f28); position: relative; z-index: 3; }
.me-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; letter-spacing: .02em; }
.me-brand img { height: 30px; width: auto; }
.me-brand span { background: linear-gradient(90deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.05rem; }
.me-tools { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.me-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--txt); transition: background .2s, transform .2s; }
.me-icon:hover { background: rgba(255, 255, 255, .08); }
.me-icon:active { transform: scale(.92); }
.me-icon:disabled { opacity: .3; cursor: default; }
.me-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); gap: 2px; }
.me-seg button { padding: .45rem .95rem; border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--mut); transition: all .25s; }
.me-seg button.on { background: #fff; color: #2a1238; }
.me-seg.wide { display: flex; width: 100%; }
.me-seg.wide button { flex: 1; padding: .65rem .5rem; }
.me-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; margin-left: .6rem; }
.me-price small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); font-weight: 800; }
.me-price strong { font-family: var(--font-display, 'Syne', sans-serif); font-size: 1.35rem; color: var(--gold); white-space: nowrap; }
.me-price strong.bump { animation: meBump .45s ease; }
@keyframes meBump { 40% { transform: scale(1.08); color: #fff; } }
.me-add { display: inline-flex; align-items: center; gap: .55rem; height: 44px; padding: 0 1.2rem; border-radius: 999px; background: linear-gradient(135deg, var(--acc), #ff2d87); color: #fff !important; font-weight: 800; box-shadow: 0 10px 26px -10px rgba(155, 47, 217, .8); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.me-add::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: meShine 3.2s ease-in-out infinite; }
@keyframes meShine { 60%, 100% { transform: translateX(120%); } }
.me-add:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(155, 47, 217, .9); }
.me-add i { font-style: normal; transition: transform .25s; }
.me-add:hover i { transform: translateX(3px); }
.me-add .short { display: none; }

/* body */
.me-body { display: grid; grid-template-columns: 86px 340px 1fr; min-height: 0; }
.me-rail { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-right: 1px solid var(--line); background: #170b20; }
.me-rail button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px; border-radius: 16px; color: var(--mut); font-size: .7rem; font-weight: 700; transition: color .25s; }
.me-rail button svg { width: 22px; height: 22px; transition: transform .3s; }
.me-rail button:hover { color: #fff; }
.me-rail button:hover svg { transform: translateY(-2px); }
.me-rail button.on { color: #fff; }
.me-rail-ind { position: absolute; left: 10px; right: 10px; top: 0; height: 70px; border-radius: 16px; background: linear-gradient(135deg, rgba(142, 68, 196, .55), rgba(155, 47, 217, .35)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), height .3s, width .3s; }

.me-panel { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(14px); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.me-pcontent { padding: 1.2rem 1.15rem 2rem; }
.me-pcontent.in > * { animation: meIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.me-pcontent.in > *:nth-child(2) { animation-delay: .04s; } .me-pcontent.in > *:nth-child(3) { animation-delay: .08s; } .me-pcontent.in > *:nth-child(4) { animation-delay: .12s; } .me-pcontent.in > *:nth-child(5) { animation-delay: .16s; } .me-pcontent.in > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes meIn { from { opacity: 0; transform: translateY(10px); } }
.me-panel h3 { font-family: var(--font-display, 'Syne', sans-serif); font-size: 1.25rem; margin: 0 0 .4rem; }
.me-panel h4 { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 1.3rem 0 .65rem; font-weight: 800; }
.me-hint { color: var(--mut); font-size: .84rem; margin: 0 0 1rem; line-height: 1.5; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.me-row h4 { margin-bottom: .65rem; }
.me-search { display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); margin-bottom: .9rem; color: var(--mut); }
.me-search:focus-within { border-color: rgba(242, 212, 138, .6); }
.me-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; }

/* designs */
.me-designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.me-dz, .me-upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .3rem .45rem; border-radius: 14px; border: 1.5px solid transparent; background: rgba(255, 255, 255, .04); transition: transform .25s, border-color .25s, background .25s; min-width: 0; }
.me-dz:hover, .me-upload:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .08); }
.me-dz.on { border-color: var(--gold); background: rgba(242, 212, 138, .12); box-shadow: 0 0 0 3px rgba(242, 212, 138, .14); }
.me-dz[hidden] { display: none; }
.me-th { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.me-th canvas { position: absolute; inset: 0; margin: auto; max-width: 88%; max-height: 88%; width: auto; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.me-dz small { font-size: .66rem; font-weight: 700; color: var(--mut); width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-dz.on small { color: #fff; }
.me-upload { cursor: pointer; justify-content: center; border: 1.5px dashed rgba(255, 255, 255, .25); text-align: center; }
.me-upload svg { width: 26px; height: 26px; color: var(--gold); }
.me-upload b { font-size: .74rem; }
.me-upload small { font-size: .6rem; color: var(--mut); }

/* glasses */
.me-glasslist { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; }
.me-gchip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--mut); transition: all .2s; }
.me-gchip i { width: 14px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px #111; }
.me-gchip.on { border-color: var(--gold); color: #fff; background: rgba(242, 212, 138, .1); }
.me-gchip.add { border-style: dashed; }
.me-gchip.add svg { width: 15px; height: 15px; }
.me-sug { font-size: .72rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; background: linear-gradient(135deg, rgba(242, 212, 138, .2), rgba(155, 47, 217, .2)); color: var(--gold); animation: mePulse 2.4s ease-in-out infinite; }
@keyframes mePulse { 50% { box-shadow: 0 0 0 5px rgba(242, 212, 138, .1); } }
.me-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.me-shape { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .2rem; border-radius: 14px; border: 1.5px solid var(--line); transition: all .2s; }
.me-shape canvas { width: 44px; height: 44px; transition: transform .3s; }
.me-shape span { font-size: .64rem; font-weight: 700; color: var(--mut); }
.me-shape:hover canvas { transform: scale(1.1) rotate(-4deg); }
.me-shape.on { border-color: var(--gold); background: rgba(242, 212, 138, .1); }
.me-shape.on span { color: #fff; }
.me-sws { display: flex; flex-wrap: wrap; gap: .5rem; }
.me-sws.big { gap: .7rem; }
.me-swl { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.me-swl small { font-size: .64rem; font-weight: 700; color: var(--mut); text-align: center; }
.me-swl em { font-style: normal; color: var(--gold); display: block; }
.me-sw { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s; }
.me-sws.big .me-sw { width: 42px; height: 42px; }
.me-sw:hover { transform: scale(1.1); }
.me-sw.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--gold); transform: scale(1.06); }
.me-toggle { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; font-size: .86rem; font-weight: 700; cursor: pointer; }
.me-toggle input { display: none; }
.me-toggle span { width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .16); position: relative; flex-shrink: 0; transition: background .25s; }
.me-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); }
.me-toggle input:checked + span { background: linear-gradient(135deg, var(--acc), #ff2d87); }
.me-toggle input:checked + span::after { transform: translateX(18px); }
.me-toggle em { margin-left: auto; font-style: normal; color: var(--gold); font-size: .78rem; }
.me-range { display: grid; grid-template-columns: 78px 1fr 58px; align-items: center; gap: .6rem; margin-top: .9rem; font-size: .8rem; font-weight: 700; color: var(--mut); }
.me-range output { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.me input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); outline: none; }
.me input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--vio); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); transition: transform .15s; }
.me input[type=range]::-webkit-slider-thumb:active { transform: scale(1.2); }
.me input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--vio); cursor: pointer; }
.me-btnrow { display: flex; gap: .45rem; margin-top: 1.2rem; }
.me-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1rem; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 800; font-size: .84rem; transition: all .2s; }
.me-btn svg { width: 17px; height: 17px; }
.me-btn:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .05); }
.me-btnrow .me-btn:first-child { flex: 1; }
.me-btn.danger:hover { border-color: #ff3b4f; color: #ff7d8a; }
.me-btn.primary { background: linear-gradient(135deg, var(--acc), #ff2d87); border-color: transparent; color: #fff; }
.me-btn.ghost { border-color: transparent; color: var(--mut); }

/* light */
.me-ledcard { position: relative; overflow: hidden; padding: 1rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.me-ledcard .me-toggle { margin-top: 0; position: relative; }
.me-ledcard .me-hint { position: relative; margin: .6rem 0 0; }
.me-ledglow { position: absolute; inset: -40%; background: radial-gradient(closest-side, var(--led), transparent); opacity: 0; transition: opacity .5s; }
.me-ledcard.on .me-ledglow { opacity: .35; animation: meBreath 3s ease-in-out infinite; }
@keyframes meBreath { 50% { opacity: .18; } }

/* size */
.me-bigval { display: flex; align-items: baseline; gap: .35rem; margin: .4rem 0 .8rem; }
.me-bigval b { font-family: var(--font-display, 'Syne', sans-serif); font-size: 3rem; line-height: 1; background: linear-gradient(135deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-bigval span { font-weight: 800; color: var(--mut); }
.me-bigval small { margin-left: auto; color: var(--mut); font-weight: 700; }
.me-hrange { margin-bottom: .9rem; }
.me-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.me-presets button { padding: .55rem .2rem; border-radius: 12px; border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; transition: all .2s; }
.me-presets b { font-family: var(--font-display, 'Syne', sans-serif); }
.me-presets small { font-size: .64rem; color: var(--mut); font-weight: 700; }
.me-presets button.on { border-color: var(--gold); background: rgba(242, 212, 138, .1); }
.me-field { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.3rem; font-size: .78rem; font-weight: 700; color: var(--mut); }
.me-field textarea { padding: .7rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; resize: vertical; }

/* room */
.me-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.me-rooms button { aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; border: 2px solid transparent; transition: transform .2s, border-color .2s; }
.me-rooms button:hover { transform: scale(1.04); }
.me-rooms button.on { border-color: var(--gold); }
.me-myroom { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .3); font-size: .72rem; font-weight: 800; cursor: pointer; text-align: center; padding: .3rem; }

/* stage */
.me-stage { position: relative; overflow: hidden; min-width: 0; min-height: 0; touch-action: none; }
.me-room { position: absolute; inset: 0; --wall: #efe8dd; --floorc: #cdbfac; --floor: 84%; background: linear-gradient(180deg, var(--wall) 0, var(--wall) var(--floor), var(--floorc) var(--floor), var(--floorc) 100%); background-size: cover; background-position: center 65%; transition: background-color .5s; }
.me-room::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(255, 255, 255, .35), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--floor), rgba(0, 0, 0, .1) calc(var(--floor) + 1px), rgba(0, 0, 0, .25) 100%); pointer-events: none; }
.me-room::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--floor) - 14px); height: 14px; background: linear-gradient(180deg, #fff, #e6e1d9); box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.me-room.photo { background-color: #222; }
.me-room.photo::before { background: linear-gradient(180deg, rgba(0, 0, 0, .15), transparent 30%, rgba(0, 0, 0, .25)); }
.me-room.photo::after { display: none; }
.dark-wall .me-room::before { background: radial-gradient(ellipse 60% 55% at 50% 35%, rgba(255, 255, 255, .12), transparent 70%); }
.me-scene { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.me-art { position: absolute; }
.me-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#meCanvas { filter: drop-shadow(10px 18px 18px rgba(0, 0, 0, .35)) drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
#meOverlay { touch-action: none; }
.me-art.sparkle::after { content: ""; position: absolute; inset: -6%; border-radius: 30%; background: radial-gradient(closest-side, rgba(242, 212, 138, .55), transparent); animation: meSpark .8s ease-out forwards; pointer-events: none; }
@keyframes meSpark { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }
.me-floorshadow { position: absolute; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); filter: blur(3px); }
.me-person { position: absolute; color: rgba(30, 20, 40, .22); display: flex; flex-direction: column; align-items: center; transition: opacity .3s; pointer-events: none; }
.me-person svg { height: 100%; width: auto; fill: currentColor; stroke: none; }
.me-person b { position: absolute; top: -22px; font-size: .7rem; font-weight: 800; color: rgba(30, 20, 40, .55); white-space: nowrap; }
.dark-wall .me-person, .me-room.photo ~ .me-scene .me-person { color: rgba(255, 255, 255, .28); }
.dark-wall .me-person b, .me-room.photo ~ .me-scene .me-person b { color: rgba(255, 255, 255, .7); }
.me-person[hidden] { display: none; }
.me-ruler { position: absolute; width: 14px; border-left: 2px solid rgba(30, 20, 40, .35); pointer-events: none; }
.me-ruler::before, .me-ruler::after { content: ""; position: absolute; left: -7px; width: 12px; border-top: 2px solid rgba(30, 20, 40, .35); }
.me-ruler::before { top: 0; } .me-ruler::after { bottom: 0; }
.me-ruler b { position: absolute; top: 50%; right: 8px; transform: translateY(-50%) rotate(-90deg); transform-origin: right center; white-space: nowrap; font-size: .72rem; font-weight: 800; color: rgba(30, 20, 40, .7); background: rgba(255, 255, 255, .7); padding: .1rem .45rem; border-radius: 6px; }
.dark-wall .me-ruler, .dark-wall .me-ruler::before, .dark-wall .me-ruler::after { border-color: rgba(255, 255, 255, .4); }
.me-wlabel { position: absolute; text-align: center; font-size: .72rem; font-weight: 800; color: rgba(30, 20, 40, .65); pointer-events: none; }
.me-wlabel::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; border-top: 2px solid rgba(30, 20, 40, .3); }
.me-3d { position: absolute; inset: 0; }
.me-3d canvas { display: block; }
.me-ctx { position: absolute; top: 0; left: 0; z-index: 3; display: flex; gap: 4px; padding: 5px; border-radius: 14px; background: rgba(20, 10, 28, .9); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); animation: meIn .25s ease both; transition: transform .12s linear; }
.me-ctx button { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; transition: background .2s; }
.me-ctx button:hover { background: rgba(255, 255, 255, .12); }
.me-ctx button.del:hover { background: #d93025; }
.me-hud { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: .5rem; pointer-events: none; z-index: 2; }
.me-hud span { padding: .45rem .85rem; border-radius: 999px; background: rgba(20, 10, 28, .78); backdrop-filter: blur(8px); font-size: .76rem; font-weight: 800; color: #fff; }
.me-hud .warn { background: rgba(217, 48, 37, .92); animation: meShake .5s ease; }
.me-hud [hidden] { display: none; }
@keyframes meShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.me-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; background: rgba(20, 10, 28, .78); backdrop-filter: blur(8px); z-index: 2; }
.me-zoom button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.me-zoom button:hover { background: rgba(255, 255, 255, .12); }
.me-zoom span { min-width: 46px; text-align: center; font-size: .74rem; font-weight: 800; }
.is3d .me-zoom, .is3d .me-ctx, .is3d .me-tip { display: none !important; }
.me-tip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; max-width: min(92%, 520px); text-align: center; padding: .55rem 1rem; border-radius: 14px; background: rgba(20, 10, 28, .78); backdrop-filter: blur(8px); font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .85); transition: opacity .5s, transform .5s; pointer-events: none; margin: 0; }
.me-tip.gone { opacity: 0; transform: translate(-50%, 10px); }
.me-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 10, 28, .25); z-index: 4; }
.me-loading span { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: var(--gold); animation: spin .8s linear infinite; }

/* success */
.me-done { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(10, 4, 16, .72); backdrop-filter: blur(8px); animation: meFade .3s ease; padding: 20px; }
.me-done[hidden] { display: none; }
@keyframes meFade { from { opacity: 0; } }
.me-done-card { position: relative; width: min(440px, 100%); text-align: center; padding: 2rem 1.6rem 1.6rem; border-radius: 28px; background: linear-gradient(160deg, #2a1238, #170b20); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); animation: mePop .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes mePop { from { opacity: 0; transform: scale(.85) translateY(20px); } }
.me-check svg { width: 64px; height: 64px; stroke: #5dff1f; stroke-width: 3; }
.me-check circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: meDraw .6s .1s ease forwards; }
.me-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: meDraw .4s .55s ease forwards; }
@keyframes meDraw { to { stroke-dashoffset: 0; } }
.me-done-card h3 { font-family: var(--font-display, 'Syne', sans-serif); font-size: 1.5rem; margin: .5rem 0 .3rem; }
.me-done-card p { color: var(--mut); margin: 0 0 1rem; }
.me-done-card img { max-height: 180px; max-width: 70%; margin: 0 auto 1.2rem; display: block; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.me-done-btns { display: grid; gap: .5rem; }
.me-confetti { position: absolute; left: 50%; top: 30%; width: 9px; height: 14px; border-radius: 2px; animation: meConf 1.1s cubic-bezier(.2, .7, .4, 1) forwards; pointer-events: none; }
@keyframes meConf { to { transform: translate(var(--x), var(--y)) rotate(540deg); opacity: 0; } }

/* entry button in the page */
.me-launch { display: inline-flex; align-items: center; gap: .6rem; }
.me-launch .spark { display: inline-block; animation: spin 6s linear infinite; }

/* responsive */
@media (max-width: 1100px) {
  .me-body { grid-template-columns: 78px 300px 1fr; }
  .me-price strong { font-size: 1.1rem; }
}
@media (max-width: 820px) {
  .me { grid-template-rows: 56px 1fr; }
  .me-top { gap: .4rem; padding: 0 .5rem; }
  .me-brand span { display: none; }
  .me-brand img { height: 26px; }
  .me-tools { gap: 0; }
  .me-seg button { padding: .4rem .7rem; }
  .me-price { margin-left: .3rem; }
  .me-price small { display: none; }
  .me-price strong { font-size: 1rem; }
  .me-add { height: 40px; padding: 0 .9rem; }
  .me-add .full { display: none; }
  .me-add .short { display: inline; }
  .me-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto 64px; }
  .me-stage { grid-row: 1; }
  .me-panel { grid-row: 2; max-height: 42vh; border-right: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; margin-top: -18px; position: relative; z-index: 3; box-shadow: 0 -16px 30px -16px rgba(0, 0, 0, .6); }
  .me-panel::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .25); margin: 8px auto 0; }
  .me-pcontent { padding: .7rem 1rem 1.4rem; }
  .me-rail { grid-row: 3; flex-direction: row; justify-content: space-around; padding: 6px; border-right: 0; border-top: 1px solid var(--line); gap: 0; }
  .me-rail button { flex: 1; padding: 6px 2px; font-size: .62rem; }
  .me-rail-ind { top: 6px; bottom: 6px; left: 0; right: auto; height: auto; }
  .me-designs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .me-shapes { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
  .me-shape canvas { width: 36px; height: 36px; }
  .me-shape span { display: none; }
  .me-hud { top: 10px; left: 10px; right: 10px; }
  .me-hud span { font-size: .68rem; padding: .35rem .65rem; }
  .me-zoom { right: 10px; bottom: 28px; }
  .me-zoom span { display: none; }
  .me-tip { display: none; }
}
@media (max-width: 420px) {
  .me-icon { width: 34px; height: 34px; }
  .me-seg button { padding: .38rem .55rem; font-size: .74rem; }
  .me-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[dir="rtl"] .me-price { align-items: flex-start; }
[dir="rtl"] .me-tools { margin-left: 0; margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  .me.opening, .me.closing { animation: none; }
}

/* numbers stay left-to-right inside Arabic text */
.me-price strong, .me-ruler b, .me-wlabel, .me-person b, .me-presets small, .me-bigval small, .me-range output, .me-zoom span { direction: ltr; unicode-bidi: isolate; }
.me-hud span { unicode-bidi: plaintext; }
@media (max-width: 520px) {
  .me-top { gap: .25rem; }
  .me-brand { display: none; }
  .me-tools [data-act="redo"] { display: none; }
  .me-tools { margin-left: 0; margin-right: auto; }
  [dir="rtl"] .me-tools { margin-right: 0; margin-left: auto; }
  .me-add { padding: 0 .8rem; gap: .35rem; }
  .me-add i { display: none; }
}

/* ===================== v2: AI, form, free shape ===================== */
.me-rail button.ai svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(242, 212, 138, .6)); animation: meTw 3s ease-in-out infinite; }
@keyframes meTw { 50% { transform: scale(1.12) rotate(8deg); } }
.me-hud .warn { pointer-events: auto; display: inline-flex; align-items: center; gap: .5rem; }
.me-hud .warn button { padding: .2rem .6rem; border-radius: 999px; background: #fff; color: #b3261e; font-weight: 800; font-size: .72rem; }

/* AI header + orb */
.me-aihead { display: flex; gap: .9rem; align-items: center; margin-bottom: .9rem; }
.me-aihead h3 { margin: 0; background: linear-gradient(90deg, #fff, var(--gold), #ff8bd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-aihead p { margin: .15rem 0 0; color: var(--mut); font-size: .8rem; line-height: 1.45; }
.me-orb { position: relative; width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #f2d48a 18%, #ff2d87 48%, #6b2a8f 80%); box-shadow: 0 0 26px rgba(255, 45, 135, .55), inset 0 -6px 14px rgba(0, 0, 0, .35); animation: meOrb 6s ease-in-out infinite; }
.me-orb i { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(242, 212, 138, .5); animation: meRing 3s ease-out infinite; }
.me-orb i:nth-child(2) { animation-delay: 1s; } .me-orb i:nth-child(3) { animation-delay: 2s; }
@keyframes meOrb { 50% { filter: hue-rotate(-30deg) brightness(1.15); transform: scale(1.05); } }
@keyframes meRing { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.me-anal { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.me-anal span { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font-size: .72rem; font-weight: 700; animation: meIn .5s both; }
.me-anal span:nth-child(2) { animation-delay: .08s; } .me-anal span:nth-child(3) { animation-delay: .16s; }
.me-anal i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.me-shimmer { background: linear-gradient(90deg, var(--mut) 30%, #fff 50%, var(--mut) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: meShim 1.4s linear infinite; }
@keyframes meShim { to { background-position: -200% 0; } }

/* score */
.me-score { display: grid; grid-template-columns: 112px 1fr; gap: 1rem; align-items: center; padding: .9rem; border-radius: 20px; background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--line); }
.me-ring { position: relative; width: 112px; height: 112px; }
.me-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.me-ring circle { fill: none; stroke-width: 9; }
.me-ring .bg { stroke: rgba(255, 255, 255, .09); }
.me-ring .fg { stroke: url(#meRingG); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px rgba(255, 45, 135, .5)); }
.me-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.me-ring b { font-family: var(--font-display, 'Syne', sans-serif); font-size: 2.1rem; line-height: 1; }
.me-ring small { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); font-weight: 800; margin-top: .2rem; }
.me-score[data-grade="a"] .me-ring b { color: #7dffb0; } .me-score[data-grade="b"] .me-ring b { color: var(--gold); } .me-score[data-grade="c"] .me-ring b { color: #ff8a7a; }
.me-bars { display: grid; gap: .5rem; min-width: 0; }
.me-bar { display: grid; grid-template-columns: 1fr 26px; grid-template-rows: auto 6px; column-gap: .4rem; font-size: .7rem; font-weight: 700; color: var(--mut); }
.me-bar span { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-bar b { grid-column: 2; grid-row: 1 / 3; align-self: end; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.me-bar i { grid-column: 1; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.me-bar em { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, #9b2fd9, #f2d48a); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.me-bar[data-lv="a"] em { background: linear-gradient(90deg, #26c281, #7dffb0); } .me-bar[data-lv="c"] em { background: linear-gradient(90deg, #d93025, #ff8a7a); }
.me-notes { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.me-notes li { position: relative; padding-left: 1.2rem; font-size: .78rem; line-height: 1.45; color: rgba(246, 240, 250, .82); animation: meIn .4s both; }
.me-notes li::before { content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%; background: #7dffb0; }
.me-notes li.warn::before { background: #ffb020; }
[dir="rtl"] .me-notes li { padding-left: 0; padding-right: 1.2rem; } [dir="rtl"] .me-notes li::before { left: auto; right: 0; }
.me-fixes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.me-fix { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; background: linear-gradient(135deg, rgba(155, 47, 217, .25), rgba(255, 45, 135, .25)); border: 1px solid rgba(155, 47, 217, .5); font-size: .74rem; font-weight: 800; animation: meIn .4s both; transition: transform .2s; }
.me-fix svg { width: 15px; height: 15px; }
.me-fix:hover { transform: translateY(-2px); }

/* proposals */
.me-props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.me-prop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .4rem .6rem; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .04); text-align: center; transition: transform .25s, border-color .25s, background .25s; animation: meIn .5s both; min-width: 0; }
.me-prop:nth-child(2) { animation-delay: .08s; } .me-prop:nth-child(3) { animation-delay: .16s; }
.me-prop:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(242, 212, 138, .08); }
.me-prop:first-child::before { content: "★"; position: absolute; top: 6px; right: 8px; color: var(--gold); font-size: .8rem; }
.me-pth { width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .14), transparent 70%); overflow: hidden; }
.me-pth img { max-width: 92%; max-height: 92%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); animation: mePop .5s both; }
.me-skel { width: 60%; height: 80%; border-radius: 40% 40% 12px 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: meShim 1.2s linear infinite; }
.me-prop b { font-family: var(--font-display, 'Syne', sans-serif); font-size: .9rem; }
.me-prop small { font-size: .62rem; line-height: 1.35; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.me-prop em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--gold); direction: ltr; unicode-bidi: isolate; }

/* chat */
.me-chat { display: flex; flex-direction: column; gap: .5rem; max-height: 260px; overflow-y: auto; padding: .2rem .1rem .4rem; scrollbar-width: thin; }
.me-msg { display: flex; gap: .45rem; align-items: flex-end; animation: meIn .35s both; }
.me-msg p { margin: 0; padding: .6rem .8rem; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .08); font-size: .8rem; line-height: 1.5; max-width: 88%; }
.me-msg.mine { justify-content: flex-end; }
.me-msg.mine p { border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, #8e44c4, #ff2d87); }
.me-av { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; color: #fff; background: radial-gradient(circle at 35% 30%, #f2d48a, #ff2d87 55%, #6b2a8f); }
.me-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.me-tags em { font-style: normal; font-size: .66rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; background: rgba(125, 255, 176, .14); color: #a8ffcb; }
.me-msg.typing p { display: flex; gap: 4px; padding: .75rem .9rem; }
.me-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .4; animation: meDot 1s infinite; }
.me-msg.typing span:nth-child(2) { animation-delay: .15s; } .me-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes meDot { 40% { opacity: 1; transform: translateY(-3px); } }
.me-chips { display: flex; gap: .35rem; overflow-x: auto; padding: .5rem 0 .3rem; scrollbar-width: none; }
.me-chips::-webkit-scrollbar { display: none; }
.me-chips button { flex-shrink: 0; padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(242, 212, 138, .35); color: var(--gold); font-size: .72rem; font-weight: 700; transition: background .2s; }
.me-chips button:hover { background: rgba(242, 212, 138, .12); }
.me-ask { display: flex; gap: .4rem; margin-top: .3rem; padding: .3rem; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.me-ask:focus-within { border-color: rgba(242, 212, 138, .6); box-shadow: 0 0 0 3px rgba(242, 212, 138, .1); }
.me-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: .85rem; padding: .4rem .5rem; }
.me-ask button { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), #ff2d87); color: #fff; }
[dir="rtl"] .me-ask button svg { transform: scaleX(-1); }

/* form: cut style cards, free shape */
.me-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.me-mode { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .7rem .5rem .75rem; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .03); text-align: center; transition: all .25s; }
.me-mode b { font-size: .86rem; } .me-mode b em { font-style: normal; color: var(--gold); font-size: .7rem; }
.me-mode small { font-size: .66rem; color: var(--mut); line-height: 1.35; }
.me-mode:hover { transform: translateY(-2px); }
.me-mode.on { border-color: var(--gold); background: rgba(242, 212, 138, .1); box-shadow: 0 0 0 3px rgba(242, 212, 138, .12); }
.me-fig { width: 52px; height: 70px; }
.me-fig .b { fill: rgba(255, 255, 255, .35); }
.me-fig .g { fill: #e8ecef; stroke: #d4a84b; stroke-width: 2; }
.me-fig .p { fill: #111; stroke: rgba(255, 255, 255, .4); }
.me-mode.on .me-fig .b { fill: #c9a24c; }
.me-mode.on .me-fig .g { animation: meGlint 2.6s ease-in-out infinite; }
@keyframes meGlint { 50% { fill: #fff; } }
.me-shape.free { border-style: dashed; border-color: rgba(176, 107, 255, .55); }
.me-freebar { margin-top: .7rem; padding: .7rem; border-radius: 14px; background: rgba(176, 107, 255, .1); border: 1px solid rgba(176, 107, 255, .35); }
.me-freebar p { margin: 0 0 .55rem; font-size: .74rem; line-height: 1.45; color: rgba(246, 240, 250, .8); }
.me-freebar div { display: flex; gap: .35rem; flex-wrap: wrap; }
.me-freebar .me-btn { padding: .45rem .7rem; font-size: .74rem; }

@media (max-width: 820px) {
  .me-rail button { font-size: .58rem; }
  .me-rail button svg { width: 20px; height: 20px; }
  .me-shapes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .me-props { grid-template-columns: repeat(3, minmax(118px, 1fr)); overflow-x: auto; }
  .me-score { grid-template-columns: 96px 1fr; padding: .7rem; }
  .me-ring { width: 96px; height: 96px; }
  .me-ring b { font-size: 1.8rem; }
  .me-chat { max-height: 200px; }
  .me-aihead p { font-size: .74rem; }
  .me-orb { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
  .me-share { display: none !important; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .me-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.me-sugs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.me-sugs button { padding: .3rem .65rem; border-radius: 999px; border: 1px solid rgba(242, 212, 138, .45); color: var(--gold); font-size: .7rem; font-weight: 700; background: rgba(242, 212, 138, .06); transition: background .2s, transform .2s; }
.me-sugs button:hover { background: rgba(242, 212, 138, .16); transform: translateY(-1px); }