/* MapToNap Glass — shared liquid-glass UI for every tool page (homepage excluded).
   Layout: tool canvases stay where they are; side panels, top bars and floating cards become glass. */
:root.mg{
  --mg-bg:#ECEFF4; --mg-ink:#14161C; --mg-ink2:#4A4F5E; --mg-ink3:#8A90A0;
  --mg-glass:rgba(255,255,255,.74); --mg-glass2:rgba(255,255,255,.54);
  --mg-fill:rgba(20,22,28,.05); --mg-fill2:rgba(20,22,28,.09);
  --mg-line:rgba(20,22,28,.08); --mg-line2:rgba(20,22,28,.14);
  --mg-acc:#EF4935; --mg-acc2:#FF8A5B; --mg-ok:#16B26F;
  --mg-rim:rgba(255,255,255,.95); --mg-rim2:rgba(255,255,255,.35);
  --mg-shadow:0 20px 46px -16px rgba(28,32,56,.28),0 3px 10px -4px rgba(28,32,56,.1);
  --mg-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mg-num:"SF Pro Display",-apple-system,"Inter",system-ui,sans-serif;
  --mg-spring:cubic-bezier(.3,1.3,.5,1);
}
/* ambient backdrop behind the glass */
html.mg body{background:
  radial-gradient(900px 620px at 6% 8%,rgba(108,178,238,.22),transparent 62%),
  radial-gradient(820px 600px at 96% 4%,rgba(236,138,162,.20),transparent 60%),
  radial-gradient(900px 700px at 88% 100%,rgba(82,196,178,.18),transparent 62%),
  radial-gradient(760px 600px at 10% 100%,rgba(242,162,119,.18),transparent 60%),
  var(--mg-bg) !important;
  -webkit-font-smoothing:antialiased}
html.mg body>.app,html.mg .appShell,html.mg body>.main,html.mg body>.stage,html.mg .app>.main{background:transparent !important}

/* ---------- surfaces ---------- */
html.mg .mg-panel,html.mg .mg-bar.mg-float,html.mg .mg-card,
html.mg .inspector,html.mg .insp,html.mg .linkbanner,html.mg .zoomCtl,html.mg .zoom-ctl{
  background:linear-gradient(165deg,var(--mg-glass),var(--mg-glass2)) !important;
  -webkit-backdrop-filter:blur(28px) saturate(185%) !important;backdrop-filter:blur(28px) saturate(185%) !important;
  border:0 !important;
  box-shadow:var(--mg-shadow),inset 0 1px 0 var(--mg-rim),inset 0 0 0 1px rgba(255,255,255,.5) !important;
}
html.mg .mg-panel{border-radius:24px !important;box-sizing:border-box}
/* in-flow side panels keep their full width and float 8px over the canvas edge */
html.mg .mg-panel:not(.mg-float){position:relative !important;z-index:6;top:8px;height:calc(100% - 16px) !important;max-height:calc(100dvh - 16px)}
html.mg .mg-panel.mg-left:not(.mg-float){left:8px}
html.mg .mg-panel.mg-right:not(.mg-float){left:-8px}
html.mg .mg-bar.mg-float{margin:10px 10px 0 !important;border-radius:20px !important}
html.mg .mg-bar.mg-flat{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66)) !important;-webkit-backdrop-filter:blur(24px) saturate(180%) !important;backdrop-filter:blur(24px) saturate(180%) !important;border-bottom:1px solid var(--mg-line) !important;box-shadow:0 8px 24px -18px rgba(28,32,56,.35) !important}
html.mg .mg-card,html.mg .inspector,html.mg .insp{border-radius:22px !important}
html.mg .mg-panel>*,html.mg .mg-bar>*{border-color:var(--mg-line) !important}
html.mg .mg-panel [class*="top"]:first-child,html.mg .mg-panel .sb-top{border-bottom-color:var(--mg-line) !important}

/* ---------- typography (UI only; drawings keep their own fonts) ---------- */
html.mg :is(.mg-panel,.mg-bar,.mg-card,.inspector,.insp,.toast,.mg-b-light,.mg-b-dark,.mg-b-accent,input,select,textarea,label):where(:not(svg,svg *)){font-family:var(--mg-font) !important}
html.mg :is(.mg-panel,.mg-bar,.mg-card) :where(*:not(svg,svg *,code,pre,.mono,kbd)){font-family:var(--mg-font) !important}
html.mg :is(.mg-panel,.mg-bar,.mg-card,.inspector) :is(.lbl,.secTitle,.sectionTitle,.sectionLabel,.sec>label,.cardTitle,.k,.label,.lk-cat,.ins-cat,.sb-sub,.kicker,h4,h5,h6){font-size:11px !important;font-weight:750 !important;letter-spacing:.06em !important;text-transform:uppercase;color:var(--mg-ink3) !important}
html.mg :is(.mg-panel,.mg-bar,.mg-card) :is(h1,h2,h3,.ttl,.title,.brandName,.sb-name,.ins-name,.name){font-weight:750 !important;letter-spacing:-.01em !important;color:var(--mg-ink)}
html.mg :is(.mg-panel,.mg-bar,.mg-card) :is(p,span,div,small,li,label){font-weight:inherit}
html.mg :is(.mg-panel,.mg-card,.inspector){color:var(--mg-ink);font-weight:550}
html.mg :is(.mg-panel,.mg-card) :is(.hint,.note,.help,.desc,.notice,.tip){background:var(--mg-fill) !important;border:0 !important;border-radius:14px !important;color:var(--mg-ink2) !important;font-weight:550 !important;font-size:12.5px !important;line-height:1.5 !important}

/* ---------- buttons ---------- */
html.mg-ready :is(.mg-b-light,.mg-b-dark,.mg-b-accent){border-radius:12px !important;font-weight:650 !important;letter-spacing:0 !important;text-transform:none;transition:background .2s,color .2s,box-shadow .2s,transform .18s var(--mg-spring) !important}
html.mg-ready :is(.mg-b-light,.mg-b-dark,.mg-b-accent):active{transform:scale(.96)}
html.mg-ready .mg-b-light{background:rgba(255,255,255,.62) !important;color:var(--mg-ink) !important;border:0 !important;box-shadow:inset 0 0 0 1px var(--mg-line),0 1px 2px rgba(20,22,28,.04) !important}
html.mg-ready .mg-b-light:hover{background:rgba(255,255,255,.9) !important}
html.mg-ready :is(.mg-b-dark,.mg-b-light:is(.on,.active,.sel,.is-active,.selected,[aria-pressed="true"],[aria-selected="true"])){background:linear-gradient(180deg,#2A2D38,#15171D) !important;color:#fff !important;border:0 !important;box-shadow:0 8px 18px -10px rgba(20,22,28,.6),inset 0 1px 0 rgba(255,255,255,.18) !important}
html.mg-ready .mg-b-accent{background:linear-gradient(135deg,var(--mg-acc),var(--mg-acc2)) !important;color:#fff !important;border:0 !important;box-shadow:0 10px 22px -10px var(--mg-acc),inset 0 1px 0 rgba(255,255,255,.35) !important}
html.mg-ready :is(.mg-b-light,.mg-b-dark,.mg-b-accent)[disabled]{opacity:.4}
html.mg-ready .mg-bar :is(.mg-b-light,.mg-b-dark,.mg-b-accent):not(.mg-b-card){white-space:nowrap}
html.mg .mg-bar :is(.ttl,.title,h1,h2,b,strong,.brand,.logo,.brandName,[class*="title"],[class*="Title"]){white-space:nowrap}
html.mg[data-mg-page=layout] .mg-panel .sb-top{flex-wrap:wrap;row-gap:8px}
/* cards (project actions, presets) */
html.mg-ready .mg-b-card{border-radius:18px !important;border:0 !important;transition:transform .2s var(--mg-spring),box-shadow .2s !important}
html.mg-ready .mg-b-card:not(.mg-b-dark){background:linear-gradient(165deg,rgba(255,255,255,.8),rgba(255,255,255,.58)) !important;box-shadow:var(--mg-shadow),inset 0 1px 0 var(--mg-rim),inset 0 0 0 1px rgba(255,255,255,.55) !important;color:var(--mg-ink)}
html.mg-ready .mg-b-card.mg-b-dark{border-radius:18px !important}
html.mg-ready .mg-b-card:is(.on,.active,.sel){box-shadow:0 0 0 2px var(--mg-acc),var(--mg-shadow) !important}
html.mg-ready .mg-b-card:hover{transform:translateY(-2px)}
/* rail / sidebar navigation rows */
html.mg-ready .mg-b-nav{background:transparent !important;border:0 !important;border-radius:14px !important;box-shadow:none !important;transition:background .2s !important}
html.mg-ready .mg-b-nav:hover{background:rgba(255,255,255,.55) !important}
html.mg-ready .mg-b-nav:is(.on,.active,.sel){background:#fff !important;box-shadow:0 6px 16px -8px rgba(20,22,28,.3),inset 0 0 0 1px rgba(255,255,255,.9) !important}
html.mg-ready .mg-b-nav:is(.on,.active,.sel):before{display:none !important}
html.mg .toolNav .nm{font-weight:650 !important;font-size:13.5px !important}
html.mg .toolNav .ico{border:0 !important;background:rgba(255,255,255,.7) !important;box-shadow:inset 0 0 0 1px var(--mg-line) !important;border-radius:10px !important}
html.mg .toolNav.on .ico{background:linear-gradient(135deg,var(--mg-acc),var(--mg-acc2)) !important;color:#fff !important;box-shadow:0 6px 14px -6px var(--mg-acc) !important}
/* segmented controls: white thumb on a soft track */
html.mg .seg{background:var(--mg-fill) !important;border:0 !important;border-radius:14px !important;padding:3px !important;gap:2px !important;overflow:visible !important}
html.mg-ready .seg>.mg-b-light,html.mg-ready .seg>.so{background:transparent !important;box-shadow:none !important;border:0 !important;border-radius:11px !important;color:var(--mg-ink2) !important}
html.mg-ready .seg>:is(.on,.active,.sel,[aria-pressed="true"]){background:#fff !important;color:var(--mg-ink) !important;box-shadow:0 3px 10px -3px rgba(0,0,0,.2),inset 0 1px 0 #fff !important}
/* chips */
html.mg-ready .chip{border-radius:99px !important;background:var(--mg-fill) !important;box-shadow:none !important;border:0 !important;font-weight:600 !important;color:var(--mg-ink) !important}
html.mg-ready .chip:is(.on,.active,.sel){background:linear-gradient(180deg,#2A2D38,#15171D) !important;color:#fff !important}
/* list rows and toggles (iOS switches) */
html.mg :is(.mg-panel,.mg-card) .row{border:0 !important;border-radius:13px !important;background:var(--mg-fill) !important}
html.mg .row .rt{width:42px !important;height:26px !important;border-radius:99px !important;background:rgba(20,22,28,.14) !important}
html.mg .row .rt::after{top:2px !important;left:2px !important;width:22px !important;height:22px !important;box-shadow:0 2px 6px rgba(0,0,0,.25) !important;transition:transform .35s var(--mg-spring) !important}
html.mg .row.on .rt{background:var(--mg-ok) !important}
html.mg .row.on .rt::after{transform:translateX(16px) !important}
html.mg .row .rk{font-weight:600 !important}

/* ---------- fields ---------- */
html.mg :is(.mg-panel,.mg-bar,.mg-card,.inspector,.insp) :is(input:not([type]),input[type=text],input[type=number],input[type=search],input[type=email],input[type=url],select,textarea){
  background:rgba(255,255,255,.7) !important;border:1px solid var(--mg-line2) !important;border-radius:12px !important;color:var(--mg-ink) !important;font-weight:600 !important;box-shadow:none !important;outline:none;transition:border-color .2s,box-shadow .2s}
html.mg :is(.mg-panel,.mg-bar,.mg-card,.inspector,.insp) :is(input,select,textarea):focus{border-color:var(--mg-acc) !important;box-shadow:0 0 0 4px rgba(239,73,53,.16) !important}
html.mg input[type=checkbox],html.mg input[type=radio]{accent-color:var(--mg-acc)}
html.mg input[type=range]{-webkit-appearance:none;appearance:none;background:transparent !important;height:26px;accent-color:var(--mg-acc)}
html.mg input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--mg-acc),var(--mg-acc2) var(--mgp,50%),rgba(20,22,28,.12) var(--mgp,50%))}
html.mg input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8px;border:0;box-shadow:0 2px 8px rgba(0,0,0,.26),0 0 0 .5px rgba(0,0,0,.08)}
html.mg input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:rgba(20,22,28,.12)}
html.mg input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--mg-acc),var(--mg-acc2))}
html.mg input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.26)}
html.mg input[type=color]{border-radius:10px !important}

/* ---------- feedback ---------- */
html.mg .toast{background:rgba(22,24,30,.82) !important;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-radius:16px !important;font-family:var(--mg-font) !important;font-weight:650 !important;font-size:13.5px !important;letter-spacing:0 !important;padding:12px 18px !important;box-shadow:0 18px 40px -14px rgba(0,0,0,.5) !important}
html.mg .linkbanner{color:var(--mg-ink) !important;border-radius:99px !important;font-family:var(--mg-font) !important;font-weight:700 !important;letter-spacing:0 !important}
html.mg ::-webkit-scrollbar{width:10px;height:10px}
html.mg ::-webkit-scrollbar-thumb{background:rgba(20,22,28,.16);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
html.mg ::-webkit-scrollbar-track{background:transparent}
/* workspace Night theme */
html.mg[data-theme=night]{--mg-bg:#0A0C11;--mg-ink:#F2F4F9;--mg-ink2:#B3BACB;--mg-ink3:#7A8196;--mg-glass:rgba(32,36,49,.74);--mg-glass2:rgba(20,23,32,.62);--mg-fill:rgba(255,255,255,.06);--mg-fill2:rgba(255,255,255,.11);--mg-line:rgba(255,255,255,.08);--mg-line2:rgba(255,255,255,.14);--mg-rim:rgba(255,255,255,.22);--mg-shadow:0 24px 56px -16px rgba(0,0,0,.65),0 4px 12px -6px rgba(0,0,0,.45)}
html.mg-ready[data-theme=night] .mg-b-light{background:rgba(255,255,255,.07) !important;color:var(--mg-ink) !important}
html.mg-ready[data-theme=night] .mg-b-light:hover{background:rgba(255,255,255,.12) !important}
html.mg-ready[data-theme=night] :is(.mg-b-dark,.mg-b-light:is(.on,.active,.sel,.is-active,.selected,[aria-pressed="true"])){background:linear-gradient(180deg,#F4F5F8,#DCDFE6) !important;color:#111318 !important}
html.mg-ready[data-theme=night] .mg-b-card:not(.mg-b-dark){background:linear-gradient(165deg,rgba(38,42,56,.8),rgba(24,27,36,.66)) !important}
html.mg-ready[data-theme=night] .mg-b-nav:is(.on,.active,.sel){background:rgba(255,255,255,.1) !important}
html.mg-ready[data-theme=night] .mg-b-nav:hover{background:rgba(255,255,255,.06) !important}
html.mg[data-theme=night] .mg-bar.mg-flat{background:linear-gradient(180deg,rgba(20,23,32,.86),rgba(20,23,32,.7)) !important}
html.mg[data-theme=night] .toolNav .ico{background:rgba(255,255,255,.08) !important}
html.mg[data-theme=night] body{background:radial-gradient(900px 620px at 6% 8%,rgba(91,141,255,.16),transparent 62%),radial-gradient(820px 600px at 96% 4%,rgba(239,73,53,.14),transparent 60%),radial-gradient(900px 700px at 88% 100%,rgba(45,212,191,.12),transparent 62%),var(--mg-bg) !important}
@media (prefers-reduced-motion:reduce){html.mg *{transition:none !important}}