/* ================= THEMES ================= */
:root,[data-theme="midnight"]{
  --bg:#0e1220; --bg2:#141a2e; --card:#171d33; --card2:#1e2540; --line:#2a3354;
  --text:#eceaf4; --muted:#a3a8c3; --accent:#e8c27a; --accent2:#f6dfae; --ink:#1a1405; --glow:rgba(232,194,122,.16);
}
[data-theme="ocean"]{ --bg:#08141f; --bg2:#0d2030; --card:#0f2638; --card2:#153349; --line:#234a66;
  --text:#e6f4fb; --muted:#9cc2d8; --accent:#5cc8e8; --accent2:#b5e8f7; --ink:#04202c; --glow:rgba(92,200,232,.15); }
[data-theme="royal"]{ --bg:#140f26; --bg2:#1c1636; --card:#211a40; --card2:#2b2352; --line:#3d3375;
  --text:#efeaff; --muted:#b3a8e0; --accent:#b79cff; --accent2:#dccfff; --ink:#1a1033; --glow:rgba(183,156,255,.16); }
[data-theme="rose"]{ --bg:#1c1118; --bg2:#25171f; --card:#2b1b25; --card2:#35222e; --line:#4a3040;
  --text:#f6ebf0; --muted:#c3a3b3; --accent:#f2a9bd; --accent2:#ffd3df; --ink:#2a1019; --glow:rgba(242,169,189,.15); }
[data-theme="sunset"]{ --bg:#1f120e; --bg2:#2a1912; --card:#301c14; --card2:#3d251a; --line:#5a3827;
  --text:#fdeee4; --muted:#d0a98f; --accent:#ff9a62; --accent2:#ffd0b0; --ink:#2a1005; --glow:rgba(255,154,98,.16); }
[data-theme="forest"]{ --bg:#0d1914; --bg2:#12231c; --card:#152a22; --card2:#1c372d; --line:#2a4a3d;
  --text:#e8f3ec; --muted:#9fc0b0; --accent:#8fd4a9; --accent2:#c3ecd2; --ink:#0a1a12; --glow:rgba(143,212,169,.14); }
[data-theme="crimson"]{ --bg:#1a0d10; --bg2:#240f14; --card:#2b1217; --card2:#38171e; --line:#52252e;
  --text:#fbe9ea; --muted:#cfa3a8; --accent:#ef6a74; --accent2:#ffb4ba; --ink:#2a0509; --glow:rgba(239,106,116,.16); }
[data-theme="teal"]{ --bg:#07191b; --bg2:#0b2427; --card:#0e2b2e; --card2:#143a3e; --line:#1f5256;
  --text:#e3f6f5; --muted:#98c4c2; --accent:#35c9bd; --accent2:#9aeee6; --ink:#03211f; --glow:rgba(53,201,189,.15); }
[data-theme="slate"]{ --bg:#111214; --bg2:#17181b; --card:#1b1d21; --card2:#24262b; --line:#34373e;
  --text:#f0f1f3; --muted:#9a9ea8; --accent:#e5e7eb; --accent2:#ffffff; --ink:#111214; --glow:rgba(255,255,255,.08); }
[data-theme="ivory"]{ --bg:#f5efe4; --bg2:#efe6d6; --card:#fffdf8; --card2:#f6efe2; --line:#e3d8c2;
  --text:#2c261d; --muted:#7b705e; --accent:#a8742a; --accent2:#8a5c1c; --ink:#ffffff; --glow:rgba(168,116,42,.14); }
[data-theme="sand"]{ --bg:#f2ead9; --bg2:#eadfc8; --card:#fbf6ea; --card2:#f4ecda; --line:#dccfb2;
  --text:#3a2f1e; --muted:#85755b; --accent:#b8863b; --accent2:#8c6322; --ink:#ffffff; --glow:rgba(184,134,59,.15); }
[data-theme="lavender"]{ --bg:#f3effa; --bg2:#ebe5f6; --card:#ffffff; --card2:#f5f1fc; --line:#ddd3ee;
  --text:#2a2340; --muted:#75698f; --accent:#7a56c8; --accent2:#5d3fa8; --ink:#ffffff; --glow:rgba(122,86,200,.14); }
[data-theme="mint"]{ --bg:#eef7f2; --bg2:#e3f1ea; --card:#ffffff; --card2:#f1f9f5; --line:#cfe4d9;
  --text:#1f3329; --muted:#628272; --accent:#2f9266; --accent2:#1f7350; --ink:#ffffff; --glow:rgba(47,146,102,.14); }
[data-theme="sky"]{ --bg:#eaf4fb; --bg2:#dcecf7; --card:#ffffff; --card2:#f0f7fc; --line:#c9dfee;
  --text:#1d2f3f; --muted:#5f7d94; --accent:#2b86c5; --accent2:#1c6aa1; --ink:#ffffff; --glow:rgba(43,134,197,.14); }
[data-theme="blush"]{ --bg:#fbf1f1; --bg2:#f6e4e4; --card:#ffffff; --card2:#fbf3f3; --line:#efd9d9;
  --text:#3a2528; --muted:#8c6a6e; --accent:#c2556a; --accent2:#a43d52; --ink:#ffffff; --glow:rgba(194,85,106,.14); }
[data-theme="peach"]{ --bg:#fdf0e8; --bg2:#f9e1d3; --card:#ffffff; --card2:#fdf4ee; --line:#f0d3c1;
  --text:#3b2619; --muted:#8f6a55; --accent:#e0743f; --accent2:#b9561f; --ink:#ffffff; --glow:rgba(224,116,63,.14); }


[data-theme="emerald"]{ --bg:#06140f; --bg2:#0a1f17; --card:#0c261c; --card2:#11332a; --line:#1d4a3a;
  --text:#e4f7ee; --muted:#94c4ae; --accent:#3ddc97; --accent2:#a2f0cb; --ink:#04180f; --glow:rgba(61,220,151,.15); }
[data-theme="amber"]{ --bg:#181106; --bg2:#221809; --card:#271c0b; --card2:#33250f; --line:#50391a;
  --text:#fff3dc; --muted:#cdb58a; --accent:#ffb92e; --accent2:#ffdf9c; --ink:#231600; --glow:rgba(255,185,46,.16); }
[data-theme="indigo"]{ --bg:#0a0d24; --bg2:#10143a; --card:#141a46; --card2:#1c2358; --line:#303a86;
  --text:#e9ecff; --muted:#a3abe0; --accent:#7c8cff; --accent2:#c3caff; --ink:#0a0f3a; --glow:rgba(124,140,255,.17); }
[data-theme="plum"]{ --bg:#1a0d1e; --bg2:#240f2a; --card:#2b1334; --card2:#391a44; --line:#5a2b6b;
  --text:#fbe9ff; --muted:#cba3d6; --accent:#e58bf0; --accent2:#f6c8fb; --ink:#2a0a31; --glow:rgba(229,139,240,.16); }
[data-theme="cocoa"]{ --bg:#17100c; --bg2:#201813; --card:#271c16; --card2:#33251d; --line:#4d3a2d;
  --text:#f8ece2; --muted:#c4a995; --accent:#d9a066; --accent2:#f0cfa5; --ink:#25160a; --glow:rgba(217,160,102,.15); }
[data-theme="steel"]{ --bg:#0f151b; --bg2:#151e27; --card:#19232e; --card2:#223040; --line:#34485c;
  --text:#e8f0f7; --muted:#9db3c6; --accent:#7fb2d9; --accent2:#bddcf3; --ink:#08131c; --glow:rgba(127,178,217,.15); }
[data-theme="pearl"]{ --bg:#f3f4f7; --bg2:#e8eaf0; --card:#ffffff; --card2:#f5f6fa; --line:#dde0ea;
  --text:#20263a; --muted:#6c7590; --accent:#4f63b0; --accent2:#3a4a92; --ink:#ffffff; --glow:rgba(79,99,176,.14); }
[data-theme="coral"]{ --bg:#fff1ee; --bg2:#fde2dc; --card:#ffffff; --card2:#fff6f4; --line:#f6d2ca;
  --text:#3a211d; --muted:#8f6a63; --accent:#e5584a; --accent2:#c2392d; --ink:#ffffff; --glow:rgba(229,88,74,.14); }
[data-theme="olive"]{ --bg:#f4f3e6; --bg2:#e9e8d0; --card:#fffffa; --card2:#f7f6e8; --line:#dcdbb8;
  --text:#2b2e18; --muted:#7a7d58; --accent:#7a8a2e; --accent2:#5c6a1c; --ink:#ffffff; --glow:rgba(122,138,46,.15); }
[data-theme="aqua"]{ --bg:#e8f6f7; --bg2:#d6eef0; --card:#ffffff; --card2:#eef9fa; --line:#c3e3e6;
  --text:#153033; --muted:#5b8286; --accent:#1f9aa6; --accent2:#167682; --ink:#ffffff; --glow:rgba(31,154,166,.14); }


[data-theme="ruby"]{ --bg:#1c0a0d; --bg2:#270d12; --card:#2f1017; --card2:#3d1620; --line:#5e2430;
  --text:#ffe9ec; --muted:#d1a1a9; --accent:#ff4d6a; --accent2:#ffb3c0; --ink:#2b0309; --glow:rgba(255,77,106,.16); }
[data-theme="jade"]{ --bg:#061712; --bg2:#0a221b; --card:#0d2b22; --card2:#133a2e; --line:#1f5545;
  --text:#e2fbf1; --muted:#8fcab5; --accent:#1ed6a0; --accent2:#9bf2d6; --ink:#031a13; --glow:rgba(30,214,160,.15); }
[data-theme="sapphire"]{ --bg:#081230; --bg2:#0d1b45; --card:#101f50; --card2:#172a66; --line:#26409a;
  --text:#e6eeff; --muted:#9db4ee; --accent:#4d8dff; --accent2:#b4cdff; --ink:#051034; --glow:rgba(77,141,255,.17); }
[data-theme="copper"]{ --bg:#1b0f09; --bg2:#26150d; --card:#2d1910; --card2:#3b2216; --line:#5c3722;
  --text:#ffeee2; --muted:#d1a98c; --accent:#e07b45; --accent2:#f6c4a2; --ink:#2a1005; --glow:rgba(224,123,69,.16); }
[data-theme="cream"]{ --bg:#faf5e9; --bg2:#f1e8d2; --card:#fffdf6; --card2:#f8f1de; --line:#e9dfc2;
  --text:#33291a; --muted:#85775a; --accent:#c28a2c; --accent2:#9a6a16; --ink:#ffffff; --glow:rgba(194,138,44,.14); }
[data-theme="sakura"]{ --bg:#fdf0f4; --bg2:#fadde7; --card:#ffffff; --card2:#fef5f8; --line:#f4cfdc;
  --text:#3d2230; --muted:#96697c; --accent:#e0608c; --accent2:#bc3f69; --ink:#ffffff; --glow:rgba(224,96,140,.14); }
[data-theme="sage"]{ --bg:#eef3ec; --bg2:#dfe9dc; --card:#ffffff; --card2:#f3f8f1; --line:#cbdcc6;
  --text:#22301f; --muted:#667a62; --accent:#5c8f5a; --accent2:#437043; --ink:#ffffff; --glow:rgba(92,143,90,.14); }
[data-theme="lemon"]{ --bg:#fffbe6; --bg2:#fcf3c4; --card:#ffffff; --card2:#fffcee; --line:#f1e6a8;
  --text:#38300c; --muted:#8a7d3a; --accent:#d4a90a; --accent2:#a98300; --ink:#ffffff; --glow:rgba(212,169,10,.15); }

[data-theme="noir"]{ --bg:#0a0a0a; --bg2:#111111; --card:#151515; --card2:#1d1d1d; --line:#2d2d2d;
  --text:#f2f2f2; --muted:#a0a0a0; --accent:#ffffff; --accent2:#d9d9d9; --ink:#000; --glow:rgba(255,255,255,.1); }
[data-theme="navy"]{ --bg:#081426; --bg2:#0c1d38; --card:#0f2344; --card2:#152e58; --line:#264a82;
  --text:#e8f0ff; --muted:#9db5dd; --accent:#6fb1ff; --accent2:#bcd9ff; --ink:#05142b; --glow:rgba(111,177,255,.16); }
[data-theme="rosewood"]{ --bg:#1a0f10; --bg2:#241416; --card:#2b191b; --card2:#38201f; --line:#573234;
  --text:#f6e9e7; --muted:#c7a5a1; --accent:#e8a09a; --accent2:#f6cdc8; --ink:#2a0d0c; --glow:rgba(232,160,154,.16); }
[data-theme="moss"]{ --bg:#11150c; --bg2:#181e10; --card:#1c2314; --card2:#262f1b; --line:#3d4a2a;
  --text:#eef2e2; --muted:#b2bf97; --accent:#b8d86b; --accent2:#dcebaa; --ink:#1a2206; --glow:rgba(184,216,107,.15); }
[data-theme="dusk"]{ --bg:#1a1426; --bg2:#231a33; --card:#2a203d; --card2:#352a4d; --line:#4f4175;
  --text:#f1ecfa; --muted:#b9acd6; --accent:#ffa7c4; --accent2:#ffd0e0; --ink:#2a0f1c; --glow:rgba(255,167,196,.16); }
[data-theme="honey"]{ --bg:#1c1507; --bg2:#261c0a; --card:#2d210c; --card2:#3a2b10; --line:#5c4519;
  --text:#fbf1da; --muted:#d1bd8a; --accent:#ffcf4d; --accent2:#ffe5a0; --ink:#2a1d00; --glow:rgba(255,207,77,.16); }
[data-theme="lilac"]{ --bg:#f6f0fb; --bg2:#ece2f6; --card:#ffffff; --card2:#f8f2fc; --line:#e0d0ef;
  --text:#34224a; --muted:#7d6a97; --accent:#9b5bd6; --accent2:#7a3fb8; --ink:#ffffff; --glow:rgba(155,91,214,.15); }
[data-theme="seafoam"]{ --bg:#eaf8f4; --bg2:#d9f0ea; --card:#ffffff; --card2:#f0faf7; --line:#c2e5dc;
  --text:#123b33; --muted:#5d8c80; --accent:#1fa58a; --accent2:#0f7f68; --ink:#ffffff; --glow:rgba(31,165,138,.15); }
[data-theme="linen"]{ --bg:#f7f3ee; --bg2:#ede6dc; --card:#fffdfa; --card2:#f6f0e8; --line:#e2d8c9;
  --text:#3a2f25; --muted:#85766a; --accent:#a1633a; --accent2:#7d4725; --ink:#ffffff; --glow:rgba(161,99,58,.15); }
[data-theme="smoke"]{ --bg:#16181c; --bg2:#1d2025; --card:#22262c; --card2:#2c3139; --line:#3f4652;
  --text:#e9edf2; --muted:#a5afbb; --accent:#9fb4c7; --accent2:#cfdbe7; --ink:#0d1620; --glow:rgba(159,180,199,.15); }
[data-theme="berry"]{ --bg:#1d0b17; --bg2:#290f20; --card:#32122a; --card2:#40183a; --line:#6a2a5d;
  --text:#fbe9f3; --muted:#d3a3c1; --accent:#ff6fae; --accent2:#ffb5d6; --ink:#2b0618; --glow:rgba(255,111,174,.16); }
[data-theme="daylight"]{ --bg:#ffffff; --bg2:#f1f5f9; --card:#ffffff; --card2:#f8fafc; --line:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --accent:#2563eb; --accent2:#1d4ed8; --ink:#ffffff; --glow:rgba(37,99,235,.14); }

:root{--hf:'Cormorant Garamond',Georgia,serif;--bf:Inter,system-ui,sans-serif;--hw:700;--fs:1;--pr:50%}
[data-shape="rounded"]{--pr:26%}
[data-shape="arch"]{--pr:999px 999px 28px 28px}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,sans-serif;background:#07080d;color:#fff;line-height:1.65;
  height:100dvh;display:flex;flex-direction:column;overflow:hidden}
h1,h2,h3{font-family:var(--hf);font-weight:var(--hw)}
.device{font-family:var(--bf)}

/* ================= EDITOR TOP BAR ================= */
.seg{display:flex;background:#161a28;border:1px solid #232840;border-radius:12px;padding:3px;gap:2px}
.seg button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#9aa0bd;padding:7px 12px;border-radius:9px;
  cursor:pointer;font:500 13px Inter,sans-serif;transition:.2s}
.seg button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.seg button:hover{color:#fff}
.seg button.on{background:#262c47;color:#fff}
.tbtn{display:inline-flex;align-items:center;gap:6px;background:#e8c27a;color:#1a1405;border:0;border-radius:10px;padding:8px 14px;
  font:600 13px Inter,sans-serif;cursor:pointer;transition:.2s}
.tbtn:hover{filter:brightness(1.08)}
.tbtn.ghost{background:#161a28;color:#dfe2f3;border:1px solid #2a3050}
.tbtn.ghost:hover{background:#1e2338}
.fmt{display:none;gap:4px;align-items:center}
.fmt button{background:#161a28;border:1px solid #2a3050;color:#e9e9f2;border-radius:8px;width:32px;height:32px;cursor:pointer;font-weight:700}
.only-edit{display:none!important}
body.editing .only-edit{display:inline-flex!important}
body.editing .fmt{display:flex}

/* Preview pill (appears in preview mode, everything else hides) */
.pill{display:none;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:80;align-items:center;gap:8px;
  background:rgba(13,15,23,.92);backdrop-filter:blur(10px);border:1px solid #2a3050;border-radius:16px;padding:5px 6px;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.previewing .pill{display:flex}
body.previewing .rrail,body.previewing .spanel{display:none!important}

/* ================= STYLE MENU (right side, separate small panels) ================= */
.rrail{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:56;width:50px;padding:6px;display:flex;flex-direction:column;gap:2px;
  background:transparent;border:1px solid transparent;border-radius:22px;transition:background .25s,border-color .25s}
.rrail button{display:flex;align-items:center;justify-content:center;width:100%;height:42px;padding:0;border:0;border-radius:14px;cursor:pointer;
  background:none;color:color-mix(in srgb,var(--text) 78%,transparent);transition:.2s}
.rrail button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rrail button:hover{background:var(--card2);color:var(--text)}
.rrail button.on{background:var(--glow);color:var(--accent)}
.rrail .rtoggle{display:none}
.rrail{max-height:calc(100% - 20px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rrail::-webkit-scrollbar{display:none}
.side hr{flex:none}
.dock{position:absolute;left:0;right:0;margin:0 auto;bottom:14px;width:max-content;max-width:calc(100% - 132px);z-index:58;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;padding:5px;
  border-radius:22px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.dock button{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:14px;cursor:pointer;background:none;
  color:color-mix(in srgb,var(--text) 78%,transparent);transition:.2s}
.dock button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock button:hover{background:var(--card2);color:var(--text)}
.dock button.on{background:var(--glow);color:var(--accent)}
.dock .go{color:var(--accent)}
.dock .fm{font:700 16px var(--bf)}
.dock .rsep{border:0;width:1px;height:22px;background:var(--line);margin:0 4px;flex:none}
body.previewing .dock{display:none}
.spanel{display:none;position:absolute;right:70px;top:50%;transform:translateY(-50%);z-index:57;width:min(310px,calc(100% - 150px));
  max-height:min(78%,620px);overflow-y:auto;background:#0d0f17;border:1px solid #2a3050;border-radius:18px;padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);color:#e9e9f2;font-family:Inter,sans-serif;line-height:1.4}
.spanel.on{display:block}
.sp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sp-head b{font:600 13px Inter,sans-serif;letter-spacing:.04em}
.sp-x{background:#161a28;border:1px solid #2a3050;color:#cfd3e8;border-radius:9px;width:28px;height:28px;cursor:pointer;font-size:13px}
.spanel h4{font:600 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8d93b3;margin:14px 0 8px}
.spanel .sp-body > h4:first-child{margin-top:0}
.sw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw-grid.c4{grid-template-columns:repeat(4,1fr)}
.sw{border:1px solid #2a3050;border-radius:12px;padding:7px;background:#141828;cursor:pointer;color:#cfd3e8;font:500 11px Inter,sans-serif;text-align:center;transition:.15s;user-select:none}
.sw:hover{background:#1b2036}
.sw i{display:block;height:24px;border-radius:7px;margin-bottom:5px}
.sw i.shp{width:26px;height:26px;margin:0 auto 5px;background:#59608f}
.sw .cvthumb{display:block;height:34px;border-radius:7px;margin-bottom:5px;background-size:cover;background-position:center;background-color:#222}
.sw .lt{display:block;width:100%;height:38px;margin-bottom:5px}
.sw .lt *{fill:#59608f}
.sw.on .lt *{fill:#e8c27a}
.sw.on{border-color:#e8c27a;box-shadow:0 0 0 1px #e8c27a}
.fonts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.fonts .sw b{display:block;font-size:24px;line-height:1.1;margin-bottom:3px;color:#fff}
.spanel .row-btns{display:flex;gap:8px;margin-top:12px}
.spanel .tbtn{flex:1;justify-content:center}

/* ================= STAGE + DEVICE FRAME ================= */
.stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding:20px;
  background:radial-gradient(circle at 1px 1px,#1a1e2e 1px,transparent 0) 0 0/22px 22px,#07080d}
body.previewing .stage{padding-top:20px;padding-bottom:70px}
.device{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  border-radius:16px;container-type:inline-size;container-name:dev;transition:width .35s ease,border-radius .35s ease,box-shadow .35s ease;
  box-shadow:0 0 0 1px #20243a}
.device[data-dev="tablet"]{width:820px;max-width:100%;max-height:1100px;border-radius:26px;box-shadow:0 0 0 10px #000,0 0 0 11px #2a2f48,0 30px 80px rgba(0,0,0,.6)}
.device[data-dev="mobile"]{width:390px;max-width:100%;max-height:844px;border-radius:34px;box-shadow:0 0 0 10px #000,0 0 0 11px #2a2f48,0 30px 80px rgba(0,0,0,.6)}
body[data-dev="tablet"] .stage,body[data-dev="mobile"] .stage{padding-top:72px}
body[data-dev="desktop"] .stage{padding:0}
body[data-dev="desktop"] .device{border-radius:0;box-shadow:none}
body[data-dev="desktop"].previewing .stage{padding-top:0}

.scroller{--g1:radial-gradient(900px 420px at 80% -8%,var(--glow),transparent 60%);
  --g2:radial-gradient(700px 400px at -10% 40%,var(--glow),transparent 60%);
  height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:16px;
  background:var(--pat,none),var(--g1),var(--g2),var(--bg);background-size:var(--pats,auto),auto,auto,auto}
/* page background patterns */
[data-bgp="dots"] .scroller{--pat:radial-gradient(circle at 1px 1px,var(--line) 1.2px,transparent 0);--pats:24px 24px}
[data-bgp="grid"] .scroller{--pat:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);--pats:34px 34px,34px 34px}
[data-bgp="stripes"] .scroller{--pat:repeating-linear-gradient(45deg,transparent 0 14px,var(--glow) 14px 15px);--pats:auto}
[data-bgp="lines"] .scroller{--pat:repeating-linear-gradient(0deg,transparent 0 27px,var(--line) 27px 28px);--pats:auto}
[data-bgp="vlines"] .scroller{--pat:repeating-linear-gradient(90deg,transparent 0 27px,var(--line) 27px 28px);--pats:auto}
[data-bgp="hatch"] .scroller{--pat:repeating-linear-gradient(45deg,transparent 0 17px,var(--line) 17px 18px),repeating-linear-gradient(-45deg,transparent 0 17px,var(--line) 17px 18px);--pats:auto,auto}
[data-bgp="finegrid"] .scroller{--pat:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);--pats:16px 16px,16px 16px}
[data-bgp="bigdots"] .scroller{--pat:radial-gradient(circle,var(--line) 3px,transparent 3.6px);--pats:42px 42px}
[data-bgp="checks"] .scroller{--pat:conic-gradient(var(--glow) 25%,transparent 0 50%,var(--glow) 0 75%,transparent 0);--pats:56px 56px}
[data-bgp="zigzag"] .scroller{--pat:linear-gradient(135deg,var(--glow) 25%,transparent 25%),linear-gradient(225deg,var(--glow) 25%,transparent 25%),linear-gradient(45deg,var(--glow) 25%,transparent 25%),linear-gradient(315deg,var(--glow) 25%,transparent 25%);--pats:44px 44px,44px 44px,44px 44px,44px 44px}
[data-bgp="ripples"] .scroller{--pat:repeating-radial-gradient(circle at 50% 0,transparent 0 26px,var(--line) 26px 27px);--pats:auto}
[data-bgp="spot"] .scroller{--pat:radial-gradient(ellipse 70% 50% at 50% 0,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);--pats:auto}
[data-bgp="fade"] .scroller{--pat:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 45%,color-mix(in srgb,var(--accent2) 12%,transparent));--pats:auto}
[data-bgp="bokeh"] .scroller{--pat:radial-gradient(circle at 12% 20%,var(--glow) 0 60px,transparent 62px),radial-gradient(circle at 80% 14%,var(--glow) 0 90px,transparent 92px),radial-gradient(circle at 66% 70%,var(--glow) 0 70px,transparent 72px),radial-gradient(circle at 20% 82%,var(--glow) 0 110px,transparent 112px);--pats:auto,auto,auto,auto}
[data-bgp="aurora"] .scroller{--pat:radial-gradient(650px 320px at 15% 8%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%),radial-gradient(560px 340px at 92% 55%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 70%);--pats:auto,auto}

/* ================= SIDE MENU (icons only, opens on click) ================= */
.side{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:55;width:50px;
  background:transparent;border:1px solid transparent;border-radius:22px;padding:6px;
  overflow-x:hidden;overflow-y:auto;max-height:calc(100% - 20px);scrollbar-width:none;
  transition:width .25s ease,background .25s,border-color .25s,box-shadow .25s}
.side::-webkit-scrollbar{display:none}
.side.open{width:178px;background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.side .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.side a,.side-toggle{display:flex;align-items:center;justify-content:center;gap:0;height:42px;padding:0;border-radius:14px;color:color-mix(in srgb,var(--text) 78%,transparent);text-decoration:none;
  white-space:nowrap;font:500 14px var(--bf);background:none;border:0;width:100%;cursor:pointer;transition:.2s;text-align:left}
.side.open a,.side.open .side-toggle{justify-content:flex-start;gap:14px;padding:0 10px}
.side .ic{width:21px;height:21px;display:grid;place-items:center;flex:none;line-height:1}
.side-toggle{color:var(--text)}
.side .side-toggle .ic svg.x{display:none}
.side.open .side-toggle .ic svg.x{display:block}
.side.open .side-toggle .ic svg.h{display:none}
.side hr{border:0;height:1px;background:var(--line);margin:4px 6px}
.side .lbl{display:none}
.side.open .lbl{display:inline}
.side a:hover,.side-toggle:hover{background:var(--card2);color:var(--text)}
.side a.active{background:var(--glow);color:var(--accent)}
.side-toggle{color:var(--text)}

/* ================= PAGE ================= */
main{font-size:calc(16px * var(--fs));margin-left:64px;width:calc(100% - 128px);padding:28px 28px 60px;display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
section{margin-bottom:26px;animation:rise .7s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 10px 40px rgba(0,0,0,.12);transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
body.editing .card:hover{transform:none}
.sec-title{font-size:2em;margin-bottom:18px;color:var(--accent);display:flex;align-items:center;gap:14px}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.muted{color:var(--muted)}

/* card styles */
[data-card="glass"] .card{background:color-mix(in srgb,var(--card) 50%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:color-mix(in srgb,var(--text) 16%,transparent)}
[data-card="glass"],[data-card="outline"]{--fade:var(--bg)}
[data-card="outline"] .card{background:transparent;box-shadow:none;border:1.5px solid var(--line)}
[data-card="elevated"] .card{border-color:transparent;box-shadow:0 22px 60px rgba(0,0,0,.35)}
[data-card="sharp"] .card{border-radius:6px}
[data-card="sharp"] .service .row,[data-card="sharp"] .tribute,[data-card="sharp"] .quote,[data-card="sharp"] .g-item,[data-card="sharp"] .empty{border-radius:4px}

/* card corner radius + highlight */
[data-cr="0"] .card{border-radius:0}
[data-cr="8"] .card{border-radius:8px}
[data-cr="14"] .card{border-radius:14px}
[data-cr="22"] .card{border-radius:22px}
[data-cr="32"] .card{border-radius:32px}
[data-cr="44"] .card{border-radius:44px}
[data-cr="0"] :is(.service .row,.tribute,.quote,.g-item,.empty){border-radius:0}
[data-cr="8"] :is(.service .row,.tribute,.quote,.g-item,.empty){border-radius:6px}
[data-cr="14"] :is(.service .row,.tribute,.quote,.g-item,.empty){border-radius:10px}
[data-cr="22"] :is(.service .row,.tribute,.quote,.g-item,.empty){border-radius:16px}
[data-cr="32"] :is(.service .row,.tribute,.quote,.g-item,.empty){border-radius:22px}
[data-cr="44"] :is(.service .row,.tribute,.quote,.g-item,.empty){border-radius:28px}
[data-hl="border"] .card{border-color:var(--accent)}
[data-hl="glow"] .card{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 0 38px var(--glow),0 10px 40px rgba(0,0,0,.12)}
[data-hl="top"] .card:not(.hero){border-top:3px solid var(--accent)}
[data-hl="left"] .card:not(.hero){border-left:4px solid var(--accent)}
[data-hl="tint"] .card:not(.hero){background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 15%,var(--card)),var(--card) 62%)}
[data-hl="double"] .card{box-shadow:0 0 0 4px var(--bg),0 0 0 5.5px color-mix(in srgb,var(--accent) 60%,transparent),0 10px 40px rgba(0,0,0,.12)}
[data-hl="neon"] .card{border-color:var(--accent);box-shadow:0 0 14px var(--glow),0 0 32px var(--glow),inset 0 0 18px var(--glow)}

/* ---------- Hero ---------- */
.hero{--ph:230px;--ch:240px;position:relative;overflow:hidden;text-align:center;padding:0;background:var(--card)}
.cover{height:var(--ch);position:relative;
  background:radial-gradient(circle at 20% 120%,var(--glow),transparent 55%),radial-gradient(circle at 85% -20%,var(--glow),transparent 55%),linear-gradient(135deg,var(--card2),var(--bg2));
  background-size:cover;background-position:center}
.cover.has-img{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.cover:not(.has-img)::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);background-size:20px 20px}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 15% 30%,var(--accent2),transparent),radial-gradient(2px 2px at 40% 70%,var(--accent),transparent),
  radial-gradient(1.5px 1.5px at 65% 25%,var(--accent2),transparent),radial-gradient(2px 2px at 82% 60%,var(--accent),transparent),
  radial-gradient(1.5px 1.5px at 92% 20%,var(--accent2),transparent),radial-gradient(1.5px 1.5px at 28% 85%,var(--accent2),transparent);
  animation:twinkle 3.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.2}to{opacity:1}}
.cover-fade{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--fade,var(--card)))}
.cover-ctl{position:absolute;top:12px;left:12px;gap:8px;z-index:3}
.cover-ctl .btn{background:rgba(0,0,0,.62);color:#fff;backdrop-filter:blur(6px);padding:8px 14px;font-size:13px}
.hero-body{padding:0 28px 32px;margin-top:calc(var(--ph) / -2);position:relative}
.portrait{position:relative;width:var(--ph);height:var(--ph);border-radius:var(--pr);margin:0 auto 16px;
  box-shadow:0 0 0 9px var(--fade,var(--card)),0 18px 60px var(--glow)}
.portrait::before{content:"";position:absolute;inset:-5px;border-radius:var(--pr);
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--line),var(--accent));animation:spin 9s linear infinite}
[data-shape="rounded"] .portrait::before,[data-shape="arch"] .portrait::before{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait img{position:relative;z-index:1;width:100%;height:100%;border-radius:var(--pr);object-fit:cover;display:block;background:#222;border:5px solid var(--fade,var(--card))}
.photo-ctl{gap:8px;margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.photo-ctl .btn{padding:8px 14px;font-size:13px}
.tag{letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--accent)}
.hero h1{font-size:clamp(36px,6vw,60px);line-height:1.08;margin:8px 0;
  background:linear-gradient(90deg,var(--text),var(--accent2) 55%,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.editing .hero h1{background:none;-webkit-text-fill-color:var(--text)}
.dates{color:var(--muted);font-size:1em;margin-bottom:12px}
.orn{color:var(--accent);letter-spacing:.6em;margin:2px 0 12px;opacity:.9}
.tagline{font-size:1.2em;font-style:italic;max-width:560px;margin:0 auto}
.quote{margin:18px auto 0;max-width:560px;padding:14px 18px;border-radius:14px;background:var(--card2);border:1px solid var(--line);
  color:var(--accent2);font-family:var(--hf);font-size:1.45em;font-style:italic}
.candle-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.btn{background:var(--accent);color:var(--ink);border:0;border-radius:12px;padding:11px 20px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--card2)}
.flame{display:inline-block;animation:flick 1.4s infinite alternate;transform-origin:50% 90%}
@keyframes flick{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.14) rotate(3deg)}}
#btnCandle{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}

.bio p{margin-bottom:14px;font-size:1.06em}
.bio ul,.bio ol{margin:0 0 14px 22px}

/* Timeline */
.tl{position:relative;margin-left:8px;border-left:2px solid var(--line);padding-left:28px}
.tl-item{position:relative;margin-bottom:24px}
.tl-item::before{content:"";position:absolute;left:-37px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--card),0 0 14px var(--glow)}
.tl-year{color:var(--accent);font-weight:600;font-size:.88em;letter-spacing:.1em}
.tl-title{font-family:var(--hf);font-weight:var(--hw);font-size:1.55em}
.tl-text{color:var(--muted)}

/* Gallery */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.g-item{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;transition:box-shadow .3s,border-color .3s,transform .3s}
.g-item img{width:100%;height:100%;object-fit:cover;transition:.4s}
.g-item:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 0 0 1px var(--accent),0 10px 34px color-mix(in srgb,var(--accent) 50%,transparent)}
.g-item:hover img{transform:scale(1.08)}
.empty{color:var(--muted);padding:22px;text-align:center;border:1px dashed var(--line);border-radius:16px}

/* Service */
.service{display:grid;gap:14px}
.service .row{display:flex;gap:14px;align-items:flex-start;background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.service .ic{font-size:22px}
.service .lbl{font-size:.75em;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.service .val{font-size:1.06em}

/* Tributes */
.form{display:grid;gap:10px;margin-bottom:22px}
input,textarea{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 14px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}
::placeholder{color:var(--muted)}
.tribute{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px;position:relative}
.tribute b{color:var(--accent2)}
.tribute small{color:var(--muted);margin-left:8px}
footer{margin-left:64px;margin-right:64px;padding:0 28px 40px;color:var(--muted);font-size:13px;text-align:center}

/* ================= LAYOUTS (Style → Layout) ================= */
/* wide desktop frames */
@container dev (min-width: 1000px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

  /* 1) Classic: full-width hero + two columns */
  [data-layout="classic"] main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:28px 36px 60px 28px}
  [data-layout="classic"] #home,[data-layout="classic"] #gallery{grid-column:1 / -1}
  [data-layout="classic"] .hero{--ph:270px;--ch:320px}

  /* 2) Split: sticky profile on the left, content on the right */
  [data-layout="split"] main{grid-template-columns:390px minmax(0,1fr);column-gap:28px;padding:28px 36px 60px 28px}
  [data-layout="split"] #home{grid-column:1;grid-row:1 / span 5;position:sticky;top:24px;align-self:start}
  [data-layout="split"] main > section:not(#home){grid-column:2}
  [data-layout="split"] .hero{--ph:190px;--ch:170px}
  [data-layout="split"] .hero-body{padding:0 20px 26px}
  [data-layout="split"] .hero h1{font-size:clamp(30px,3vw,42px)}
  [data-layout="split"] .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
/* 3) Magazine: wide hero (photo left, text right) + stacked wide cards */
@container dev (min-width: 760px){
  [data-layout="magazine"] .hero{--ph:220px;--ch:300px}
  [data-layout="magazine"] .hero-body{display:grid;grid-template-columns:var(--ph) 1fr;gap:36px;align-items:start;text-align:left;padding:0 40px 38px}
  [data-layout="magazine"] .portrait{margin:0 0 14px}
  [data-layout="magazine"] .hero-text{padding-top:calc(var(--ph) / 2 + 14px)}
  [data-layout="magazine"] .tagline{margin:0;max-width:none}
  [data-layout="magazine"] .quote{margin-left:0;margin-right:0;max-width:680px}
  [data-layout="magazine"] .candle-row{justify-content:flex-start}
  [data-layout="magazine"] .photo-ctl{justify-content:flex-start}
}
/* 4) Story: one centered, narrow column */
@container dev (min-width: 641px){
  [data-layout="story"] main{margin:0 auto;width:min(840px, calc(100% - 184px));padding:28px 0 60px}
  [data-layout="story"] footer{margin:0 auto;width:min(840px, calc(100% - 184px));padding:0 0 40px}
  [data-layout="story"] .hero{--ph:240px;--ch:270px}
  [data-layout="story"] .grid{grid-template-columns:repeat(3,1fr)}
}

/* 5) Split Right: profile on the right */
@container dev (min-width: 1000px){
  [data-layout="splitr"] main{grid-template-columns:minmax(0,1fr) 390px;column-gap:28px;padding:28px 28px 60px 28px}
  [data-layout="splitr"] #home{grid-column:2;grid-row:1 / span 5;position:sticky;top:24px;align-self:start}
  [data-layout="splitr"] main > section:not(#home){grid-column:1}
  [data-layout="splitr"] .hero{--ph:190px;--ch:170px}
  [data-layout="splitr"] .hero-body{padding:0 20px 26px}
  [data-layout="splitr"] .hero h1{font-size:clamp(30px,3vw,42px)}
  [data-layout="splitr"] .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

  /* 6) Mosaic: 3-column board */
  [data-layout="mosaic"] main{grid-template-columns:repeat(3,minmax(0,1fr));padding:28px 36px 60px 28px}
  [data-layout="mosaic"] #home,[data-layout="mosaic"] #gallery{grid-column:1 / -1}
  [data-layout="mosaic"] #about,[data-layout="mosaic"] #tributes{grid-column:span 2}
  [data-layout="mosaic"] .hero{--ph:250px;--ch:300px}
  [data-layout="mosaic"] .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

/* ---- layouts WITHOUT cards (flat sections) ---- */
[data-layout="minimal"] .card:not(.hero),[data-layout="editorial"] .card:not(.hero){
  background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-layout="minimal"] .card:not(.hero):hover,[data-layout="editorial"] .card:not(.hero):hover{transform:none}
[data-layout="minimal"] .card:not(.hero){border-bottom:1px solid var(--line);padding:30px 2px}
[data-layout="editorial"] .card:not(.hero){border-top:1px solid var(--line);padding:34px 0}
[data-layout="minimal"] .tl-item::before,[data-layout="editorial"] .tl-item::before{box-shadow:0 0 0 5px var(--bg),0 0 14px var(--glow)}
@container dev (min-width: 641px){
  [data-layout="minimal"] main,[data-layout="editorial"] main{margin:0 auto;width:min(900px, calc(100% - 184px));padding:28px 0 60px}
  [data-layout="minimal"] footer,[data-layout="editorial"] footer{margin:0 auto;width:min(900px, calc(100% - 184px));padding:0 0 40px}
  [data-layout="minimal"] .hero,[data-layout="editorial"] .hero{--ph:230px;--ch:260px}
}
/* 8) Editorial: heading on the left, content on the right */
@container dev (min-width: 760px){
  [data-layout="editorial"] .card:not(.hero){display:grid;grid-template-columns:210px 1fr;column-gap:36px;align-items:start}
  [data-layout="editorial"] .card:not(.hero) > .sec-head{grid-column:1;grid-row:1;margin:0;position:sticky;top:20px}
  [data-layout="editorial"] .card:not(.hero) > .sec-head .sec-title{margin:0;font-size:1.7em;display:block}
  [data-layout="editorial"] .card:not(.hero) .sec-title::after{display:none}
  [data-layout="editorial"] .card:not(.hero) > :not(.sec-head){grid-column:2}
}

/* 7) Cinema: text on top of a big cover picture */
[data-layout="cinema"] .hero{display:grid;--ph:150px;--ch:540px}
[data-layout="cinema"] .cover{grid-area:1 / 1;height:auto;min-height:var(--ch)}
[data-layout="cinema"] .cover-fade{height:80%;background:linear-gradient(to bottom,transparent,rgba(4,5,10,.9))}
[data-layout="cinema"] .hero-body{grid-area:1 / 1;align-self:end;margin-top:0;z-index:2;padding:90px 28px 36px;--fade:rgba(8,9,15,.75);color:#fff}
[data-layout="cinema"] .hero h1,[data-layout="cinema"] body.editing .hero h1{background:none;-webkit-text-fill-color:#fff;color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.65);font-size:clamp(40px,6vw,72px)}
[data-layout="cinema"] .dates,[data-layout="cinema"] .tagline,[data-layout="cinema"] .muted{color:#f0f0f6;text-shadow:0 2px 12px rgba(0,0,0,.6)}
[data-layout="cinema"] .quote{background:rgba(0,0,0,.38);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(6px)}
[data-layout="cinema"] .portrait{box-shadow:0 0 0 7px rgba(8,9,15,.55),0 14px 50px rgba(0,0,0,.5)}
@container dev (min-width: 1000px){ [data-layout="cinema"] .hero{--ph:180px;--ch:700px} }
@container dev (max-width: 640px){ [data-layout="cinema"] .hero{--ph:130px;--ch:470px} }

/* 9) Banner: left-aligned hero, text beside the photo, no cards */
[data-layout="banner"] .card:not(.hero){background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-left:3px solid var(--accent);padding:6px 0 6px 26px}
[data-layout="banner"] .card:not(.hero):hover{transform:none}
[data-layout="banner"] .tl-item::before{box-shadow:0 0 0 5px var(--bg),0 0 14px var(--glow)}
@container dev (min-width: 760px){
  [data-layout="banner"] .hero{--ph:210px;--ch:230px}
  [data-layout="banner"] .hero-body{display:grid;grid-template-columns:var(--ph) 1fr;gap:34px;align-items:start;text-align:left;padding:0 40px 34px}
  [data-layout="banner"] .portrait{margin:0 0 14px}
  [data-layout="banner"] .hero-text{padding-top:calc(var(--ph) / 2 + 14px)}
  [data-layout="banner"] .tagline{margin:0;max-width:none}
  [data-layout="banner"] .quote{margin-left:0;margin-right:0;max-width:680px}
  [data-layout="banner"] .candle-row,[data-layout="banner"] .photo-ctl{justify-content:flex-start}
}
@container dev (min-width: 1000px){
  [data-layout="banner"] main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;padding:28px 40px 60px 28px}
  [data-layout="banner"] #home,[data-layout="banner"] #gallery{grid-column:1 / -1}
}

/* Editing visuals */
body.editing [contenteditable=true]{outline:1px dashed var(--accent);outline-offset:3px;border-radius:6px;min-height:1em;cursor:text}
body.editing [contenteditable=true]:focus{outline:2px solid var(--accent);background:var(--glow)}
body.editing .portrait{cursor:pointer}
body.editing .portrait::after{content:"📷 Change photo";position:absolute;inset:0;z-index:3;border-radius:var(--pr);background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:600}
.rm{position:absolute;right:8px;top:8px;background:#8a2d3b;color:#fff;border:0;border-radius:8px;padding:2px 8px;cursor:pointer;z-index:2}
.tl-item .rm{right:0;top:0}
/* Preview mode: hide every editing trace */
body.editing.previewing .only-edit{display:none!important}
body.editing.previewing [contenteditable=true]{outline:none;background:none;cursor:auto}
body.editing.previewing .portrait{cursor:default}
body.editing.previewing .portrait::after{display:none}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:#e8c27a;color:#1a1405;padding:10px 20px;border-radius:12px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:99;text-align:center;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= LIGHTBOX (glow follows the theme color) ================= */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 18%,#05060a) 0%,rgba(3,4,8,.96) 72%)}
.lightbox.on{display:flex}
#lbImg{max-width:min(92vw,1100px);max-height:78vh;border-radius:18px;border:2px solid var(--accent);background:#111;
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 16%,transparent),
             0 0 46px 8px color-mix(in srgb,var(--accent) 55%,transparent),
             0 0 140px 34px color-mix(in srgb,var(--accent) 28%,transparent);
  animation:lbIn .35s ease}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lb-x,.lb-nav{position:absolute;width:46px;height:46px;border-radius:50%;cursor:pointer;color:#fff;font-size:22px;line-height:1;
  background:color-mix(in srgb,var(--accent) 24%,rgba(0,0,0,.55));border:1px solid var(--accent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);transition:.2s;display:grid;place-items:center}
.lb-x:hover,.lb-nav:hover{background:var(--accent);color:var(--ink)}
.lb-x{top:18px;right:18px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:28px;padding-bottom:3px}
.lb-nav.prev{left:18px}
.lb-nav.next{right:18px}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--accent2);font:600 13px Inter,sans-serif;letter-spacing:.12em}
.lightbox.single .lb-nav{display:none}
@media (max-width:600px){ .lb-nav{width:40px;height:40px} .lb-nav.prev{left:8px} .lb-nav.next{right:8px} }

/* ================= RESPONSIVE (based on the frame width) ================= */
@container dev (max-width: 640px){
  .side{top:auto;bottom:14px;left:8px;transform:none;flex-direction:column-reverse;display:flex;width:50px}
  .side.open{width:170px}
  .side a,.side hr{display:none}
  .side.open a{display:flex}
  .side.open hr{display:block}
  main{margin-left:0;width:100%;padding:18px 12px 80px}
  footer{margin-left:0;margin-right:0;padding-bottom:80px}
  .card{padding:20px}
  .rrail{top:auto;bottom:14px;right:8px;transform:none;flex-direction:column-reverse}
  .rrail .rtoggle{display:flex}
  .rrail .ritem{display:none}
  .rrail.open .ritem{display:flex}
  .rrail{max-height:calc(100% - 28px)}
  .rrail.open{background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
  .spanel{right:64px;top:auto;bottom:14px;transform:none;width:calc(100% - 126px);max-height:62%}
  .card.hero{padding:0}
  .hero{--ph:190px;--ch:180px}
  .hero-body{padding:0 18px 26px}
  .quote{font-size:1.2em}
  .sec-title{font-size:1.7em}
}
@container dev (min-width: 641px) and (max-width: 1000px){
  main{margin-left:64px;width:calc(100% - 128px);padding:24px 20px 60px}
  footer{margin-left:64px;margin-right:64px}
}
@media (prefers-reduced-motion:reduce){
  .portrait::before,#btnCandle,.cover::after{animation:none}
}
/* Real small screens: no device switcher, whole window */
@media (max-width:700px){
  .pill .seg{display:none}
  .stage{padding:0}
  .device{border-radius:0!important;box-shadow:none!important;width:100%!important;max-width:none!important;max-height:none!important}
  .dock .devb,.dock .devsep{display:none}
  body.previewing .stage{padding:0}
}

/* ================= GRAVEPEDIA ADDITIONS ================= */
/* flowers + tributes */
.fl-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.fl-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border:1px solid var(--line);border-radius:14px;background:var(--card2);color:var(--muted);cursor:pointer;font:500 11px var(--bf);transition:.18s}
.fl-opt:hover{transform:translateY(-2px);border-color:var(--accent)}
.fl-opt.on{background:var(--glow);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fl-label{font:600 12px var(--bf);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 -2px}
.fl-counts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px}
.fl-counts:empty{display:none}
.fc-total{color:var(--muted);font-size:.9em;margin-right:4px}
.fc{display:inline-flex;align-items:center;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 4px}
.fc b{color:var(--accent2);font-size:.9em}
.t-flower{float:right;margin:-4px 0 0 10px;line-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.builder-note{background:var(--glow);border:1px dashed var(--accent);color:var(--text);border-radius:14px;padding:12px 16px;margin-bottom:16px;font-size:.9em}
body.builder .tform-demo{opacity:.55;pointer-events:none}
.credit{margin-top:10px;font-size:12px;opacity:.8}
.credit a{color:var(--accent);text-decoration:none}
/* autosave indicator (inside dock) */
.save-state{display:flex;align-items:center;justify-content:center;width:30px;height:42px;flex:none}
.save-state i{width:9px;height:9px;border-radius:50%;background:#7b8099;transition:.3s}
.save-state[data-s="saved"] i{background:#34d399;box-shadow:0 0 8px #34d39988}
.save-state[data-s="dirty"] i,.save-state[data-s="saving"] i{background:#fbbf24;animation:pulse 1s infinite}
.save-state[data-s="err"] i{background:#f87171}
@keyframes pulse{50%{opacity:.35}}
.dock a.dk{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;color:color-mix(in srgb,var(--text) 78%,transparent);transition:.2s}
.dock a.dk:hover{background:var(--card2);color:var(--text)}
.dock a.dk svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* publish modal */
.modal{display:none;position:fixed;inset:0;z-index:120;background:rgba(3,4,10,.66);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:18px}
.modal.on{display:flex}
.modal-box{width:min(440px,100%);background:#0d0f17;border:1px solid #2a3050;border-radius:20px;padding:20px;color:#e9e9f2;font-family:Inter,sans-serif;box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:92vh;overflow:auto}
.modal-box h3{font:600 18px Inter,sans-serif;margin-bottom:4px}
.modal-box p.sub{color:#8d93b3;font-size:13px;margin-bottom:16px}
.modal-box label.lb{display:block;font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8d93b3;margin:14px 0 6px}
.modal-box input[type=text]{background:#141828;border:1px solid #2a3050;color:#fff;border-radius:12px;padding:11px 13px;width:100%;font:inherit}
.modal-box .hint{font-size:12px;color:#7b8099;margin-top:6px;word-break:break-all}
.st-opts{display:grid;gap:8px}
.st-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid #2a3050;border-radius:12px;padding:10px 12px;background:#141828;cursor:pointer}
.st-opt:has(input:checked){border-color:#e8c27a;background:#1c1f31}
.st-opt input{margin-top:4px;accent-color:#e8c27a;width:auto}
.st-opt b{display:block;font-size:14px}.st-opt small{color:#8d93b3;font-size:12px}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions button{flex:1;border-radius:12px;padding:11px;font:600 14px Inter,sans-serif;cursor:pointer;border:1px solid #2a3050;background:#161a28;color:#dfe2f3}
.modal-actions button.pri{background:#e8c27a;color:#1a1405;border:0}
.pub-msg{margin-top:12px;font-size:13px;border-radius:10px;padding:0}
.pub-msg.ok,.pub-msg.bad{padding:10px 12px}
.pub-msg.ok{background:#12301f;color:#9be9bd}.pub-msg.bad{background:#35161a;color:#ffb4bd}
.pub-msg a{color:#e8c27a;word-break:break-all}
/* public page: full window, no editor chrome */
body.view .stage{padding:0}
body.view .rrail,body.view .spanel,body.view .dock,body.view .pill,body.view .only-edit{display:none!important}

/* ===== detail rows, burial map, text toolbar, tribute flowers ===== */
.service .row{position:relative}
.service .ic{width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--accent);font-size:inherit}
.service .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service .rbody{min-width:0;flex:1}
.service .row .rm{right:10px;top:10px}
body.editing:not(.previewing) .service [data-ic-btn]{cursor:pointer;border-radius:10px;outline:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:3px}
body.editing:not(.previewing) .service [data-ic-btn]:hover{background:var(--glow)}
.service .val a,.bio a,.tl-text a,.tagline a,.quote a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
body.editing [data-ph]:empty::before{content:attr(data-ph);color:var(--muted);opacity:.65;pointer-events:none}
.map-ctl{margin-top:14px;display:grid;gap:6px}
.map-ctl .lbl2{font:600 11px var(--bf);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.map-ctl small{color:var(--muted);font-size:12px;line-height:1.4}
.map-wrap{margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card2);aspect-ratio:16/9;width:100%;min-width:0}
@container dev (max-width: 640px){.map-wrap{aspect-ratio:4/3}}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
[data-cr="0"] .map-wrap{border-radius:0}[data-cr="8"] .map-wrap{border-radius:6px}[data-cr="14"] .map-wrap{border-radius:10px}[data-cr="32"] .map-wrap{border-radius:22px}[data-cr="44"] .map-wrap{border-radius:28px}
.notice{background:var(--glow);border:1px solid var(--accent);color:var(--text);border-radius:14px;padding:12px 16px;margin-bottom:16px;font-size:.95em}
.notice a{color:var(--accent);font-weight:600}
.t-flowers{display:flex;flex-wrap:wrap;gap:2px;margin-top:8px}
.t-flowers span{line-height:0}
.fl-opt{position:relative}
.fl-opt .cnt{position:absolute;top:4px;right:6px;font:700 11px var(--bf);font-style:normal;color:var(--ink);background:var(--accent);border-radius:999px;padding:1px 6px}
.fl-clear{margin-left:8px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:1px 10px;font:500 11px var(--bf);cursor:pointer;text-transform:none;letter-spacing:0}
.fl-hint{color:var(--muted);font-size:12px}
.side a.has-dot .ic{position:relative}
.side a.has-dot .ic::after{content:"";position:absolute;top:-3px;right:-4px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--bg)}
/* floating text toolbar (appears at the text you are editing) */
.fmtbar{position:fixed;z-index:130;background:#0d0f17;border:1px solid #2a3050;border-radius:14px;padding:4px;box-shadow:0 14px 40px rgba(0,0,0,.55);color:#e9e9f2;max-width:calc(100vw - 16px)}
.fmtbar[hidden],.icpicker[hidden]{display:none}
.fb-row{display:flex;gap:2px;align-items:center}
.fb-row[hidden]{display:none}
.fmtbar button{width:36px;height:36px;border:0;border-radius:10px;background:none;color:#dfe2f3;cursor:pointer;font:700 15px Inter,sans-serif;display:grid;place-items:center}
.fmtbar button:hover{background:#1e2338}
.fmtbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fb-link input{width:min(240px,60vw);background:#141828;border:1px solid #2a3050;color:#fff;border-radius:10px;padding:8px 10px;font:14px Inter,sans-serif}
.icpicker{position:fixed;z-index:131;display:grid;grid-template-columns:repeat(5,40px);gap:4px;background:#0d0f17;border:1px solid #2a3050;border-radius:14px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.icpicker button{width:40px;height:40px;border:0;border-radius:10px;background:#141828;color:#dfe2f3;cursor:pointer;display:grid;place-items:center}
.icpicker button:hover{background:#262c47;color:#e8c27a}
.icpicker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

main>section{min-width:0}

/* ===== new layouts: Story Wide + Story Full ===== */
@container dev (min-width: 641px){
  [data-layout="storywide"] main{margin:0 auto;width:min(1080px, calc(100% - 184px));padding:28px 0 60px}
  [data-layout="storywide"] footer{margin:0 auto;width:min(1080px, calc(100% - 184px));padding:0 0 40px}
  [data-layout="storywide"] .hero{--ph:250px;--ch:300px}
  [data-layout="storywide"] .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-layout="storyfull"] main{margin:0 64px;width:calc(100% - 128px);padding:28px 0 60px}
  [data-layout="storyfull"] footer{margin:0 64px;padding:0 0 40px}
  [data-layout="storyfull"] .hero{--ph:260px;--ch:340px}
  [data-layout="storyfull"] .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}

/* ===== remove / restore cards and lines ===== */
.card{position:relative}
.restore{display:none;margin:2px 0 8px;border:1px dashed var(--accent);background:var(--glow);color:var(--accent);border-radius:999px;padding:7px 16px;font:600 13px var(--bf);cursor:pointer;max-width:100%}
.restore:hover{background:var(--accent);color:var(--ink)}
section.is-off > .card{display:none}
section.is-off{margin-bottom:8px;animation:none}
body.editing:not(.previewing) section.is-off .restore{display:inline-flex}
body.view section.is-off,body.previewing section.is-off{display:none}
body.view .side a.off,body.previewing .side a.off{display:none!important}
.hv-del{position:fixed;z-index:128;width:26px;height:26px;padding:0;border-radius:50%;border:0;background:#8a2d3b;color:#fff;cursor:pointer;font-size:12px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.hv-del[hidden]{display:none}
body.view [data-hv].is-off,body.previewing [data-hv].is-off{display:none!important}
body.editing:not(.previewing) [data-hv].is-off{display:block;width:max-content;max-width:100%;margin:6px auto;padding:6px 14px;font-size:0;line-height:0;color:transparent;background:var(--glow);border:1px dashed var(--accent);border-radius:999px;box-shadow:none;backdrop-filter:none;cursor:pointer;outline:none}
body.editing:not(.previewing) [data-hv].is-off *{display:none}
body.editing:not(.previewing) [data-hv].is-off::before{content:"＋ Add back: " attr(data-hvl);font:600 12px var(--bf);line-height:1.3;color:var(--accent)}
body.editing:not(.previewing) [data-hv].is-off::after{display:none}

/* ===== card header: title + remove button in one row ===== */
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sec-head .sec-title{flex:1;min-width:0;margin-bottom:0}
.card-del{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:11px;border:1px solid var(--line);background:var(--card2);color:var(--muted);cursor:pointer;transition:.2s}
.card-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.card-del:hover{background:#b3394c;border-color:#b3394c;color:#fff}
.card-del:active{transform:scale(.94)}

/* ===== extra text cards ===== */
.add-card-wrap{grid-column:1 / -1;display:none;margin:0 0 20px}
body.editing:not(.previewing) .add-card-wrap{display:block}
.add-card{width:100%;border:1px dashed var(--accent);background:var(--glow);color:var(--accent);border-radius:16px;padding:14px;font:600 14px var(--bf);cursor:pointer;transition:.2s}
.add-card:hover{background:var(--accent);color:var(--ink)}
.xcard .xbody{line-height:1.8}
.xcard .xbody a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.xcard .xbody ul,.xcard .xbody ol{margin:8px 0 8px 22px}
.xcard .xbody p{margin-bottom:10px}

/* ===== menu position / display: identical in the editor, Preview and the public page ===== */
:root{--mb:56px}
.side-cfg{display:none}
.side-cfg{align-items:center;justify-content:center;gap:0;height:42px;padding:0;border:0;border-radius:14px;background:transparent;color:color-mix(in srgb,var(--text) 78%,transparent);cursor:pointer;font:inherit}
.side-cfg:hover{background:var(--card2);color:var(--text)}
.side-cfg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side.open .side-cfg{justify-content:flex-start;gap:14px;padding:0 10px}
.side-cfg .lbl{display:none}.side.open .side-cfg .lbl{display:inline;font-size:14px}
[data-mpos="right"] .side{left:auto;right:12px}
[data-mpos="right"] .side a,[data-mpos="right"] .side-toggle,[data-mpos="right"] .side-cfg{flex-direction:row-reverse}
/* top / bottom: a real bar, so it never covers the cards */
[data-mpos="top"] .side,[data-mpos="bottom"] .side{left:0;right:0;width:auto;max-width:none;max-height:none;transform:none;height:var(--mb);display:flex;flex-direction:row;align-items:center;justify-content:safe center;gap:2px;padding:0 8px;overflow-x:auto;overflow-y:hidden;
  background:color-mix(in srgb,var(--card) 94%,var(--bg));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0;border-radius:0}
[data-mpos="top"] .side{top:0;bottom:auto;border-bottom:1px solid var(--line)}
[data-mpos="bottom"] .side{bottom:0;top:auto;border-top:1px solid var(--line)}
[data-mpos="top"] .scroller{margin-top:var(--mb);height:calc(100% - var(--mb))}
[data-mpos="bottom"] .scroller{height:calc(100% - var(--mb))}
[data-mpos="bottom"] body.editing:not(.previewing) .side{bottom:74px}
[data-mpos="bottom"] body.editing:not(.previewing) .scroller{height:calc(100% - var(--mb) - 74px)}
[data-mpos="top"] .side-toggle,[data-mpos="bottom"] .side-toggle,[data-mpos="top"] .side hr,[data-mpos="bottom"] .side hr{display:none}
[data-mpos="top"] .side a,[data-mpos="bottom"] .side a{display:flex;width:auto;flex:none;padding:0 12px}
[data-mpos="top"] .side-cfg,[data-mpos="bottom"] .side-cfg{width:auto;flex:none;padding:0 12px}
body.editing:not(.previewing) .side-cfg{display:flex}
/* display mode */
[data-mmode="icontext"] .side .lbl,[data-mmode="text"] .side .lbl{display:inline}
[data-mmode="text"] .side a .ic,[data-mmode="text"] .side-toggle .ic{display:none}
[data-mmode="text"] .side a{padding:0 16px;border-radius:999px}
[data-mmode="icontext"] .side a,[data-mmode="icontext"] .side-cfg{gap:8px}
@container dev (min-width: 641px){
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side{width:auto;min-width:50px;background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.3)}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side a{justify-content:flex-start;padding:0 14px}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side-toggle{display:none}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side hr{display:none}
}
@container dev (max-width: 640px){
  [data-mpos="right"] .side{left:auto;right:8px;flex-direction:column-reverse}
  [data-mpos="right"] .side.open{align-items:flex-end}
  .side:not(.open) .side-cfg{display:none!important}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side{width:auto}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side.open{min-width:170px}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side-toggle{background:var(--card);border:1px solid var(--line);border-radius:999px;height:46px;width:auto;min-width:0;padding:0 16px;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.35);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  :is([data-mpos="left"],[data-mpos="right"])[data-mmode="text"] .side-toggle .ic{display:inline-flex}
  :is([data-mpos="left"],[data-mpos="right"]):is([data-mmode="icontext"],[data-mmode="text"]) .side-toggle .lbl{display:inline}
}
/* settings popup (editor only) */
.mpanel{position:fixed;z-index:200;width:min(310px,calc(100vw - 24px));max-height:82vh;overflow:auto;background:#0d0f17;border:1px solid #2a3050;border-radius:16px;padding:14px;color:#e9e9f2;font-family:Inter,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.mpanel[hidden]{display:none}
.mpanel h4{font:600 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8d93b3;margin:14px 0 8px}
.mpanel .mp-head{display:flex;justify-content:space-between;align-items:center}
.mpanel .mp-head b{font:600 13px Inter,sans-serif}
.mpanel .mp-head button{background:none;border:0;color:#8d93b3;cursor:pointer;font-size:16px}
.mpanel .mp-note{color:#8d93b3;font-size:12px;line-height:1.5;margin-top:6px}
.mpanel .mp-lab{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center;margin-bottom:6px;font-size:12px;color:#8d93b3}
.mpanel .mp-lab input{background:#141828;border:1px solid #2a3050;color:#fff;border-radius:9px;padding:7px 9px;font:13px Inter,sans-serif;width:100%;min-width:0}
.mpanel .sw-grid{margin:0}
body.previewing .mpanel{display:none!important}

/* ===== Google-style search preview (publish window) ===== */
.sp-note{color:var(--muted,#8d93b3);font-size:12px;line-height:1.5;margin-bottom:8px}
.modal-box .cnt{color:#7b8099;font-size:12px;text-align:right;margin-top:4px}.modal-box .cnt.bad{color:#fbbf24}
.modal-box input#seoTitle{width:100%}
.serp{background:#fff;border-radius:14px;padding:14px 16px;margin-top:8px;font-family:Arial,Helvetica,sans-serif;color:#202124}
.serp .s-url{display:flex;align-items:center;gap:8px;font-size:12px;color:#202124;line-height:1.3;overflow:hidden;white-space:nowrap}
.serp .s-fav{width:26px;height:26px;border-radius:50%;background:#f1f3f4;display:grid;place-items:center;flex:none;font-size:13px}
.serp .s-site{font-size:14px;line-height:1.2}.serp .s-path{color:#4d5156;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.serp .s-title{font-size:20px;line-height:1.3;color:#1a0dab;margin:6px 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.serp .s-desc{font-size:14px;line-height:1.58;color:#4d5156;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.seo-f{display:grid;gap:4px;margin-top:10px}
.seo-f textarea{background:#141828;border:1px solid #2a3050;color:#fff;border-radius:12px;padding:10px 12px;width:100%;font:14px Inter,sans-serif;resize:vertical;min-height:70px}
.seo-f .cnt{color:#7b8099;font-size:12px;text-align:right}
.seo-f .cnt.bad{color:#fbbf24}
.seo-note{color:#7b8099;font-size:12px;margin-top:6px}

/* ===== move card up / down ===== */
.card-mv{flex:none;gap:4px}
.card-mv button{width:30px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--muted);cursor:pointer;transition:.2s}
.card-mv button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card-mv button:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.g-item .ged{position:absolute;top:8px;left:8px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.g-item .ged svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.editing .g-item .ged{display:inline-flex!important}
body.editing.previewing .g-item .ged{display:none!important}
.g-item .ged:hover{background:var(--accent);color:var(--bg)}

/* ===== menu: hide items, fixed (always visible), button styles ===== */
.side a.moff{display:none!important}
[data-mfix="fixed"] .side-toggle{display:none}
[data-mfix="fixed"] .side .lbl{display:none}
[data-mfix="fixed"][data-mmode="icontext"] .side .lbl,[data-mfix="fixed"][data-mmode="text"] .side .lbl{display:inline}
@container dev (max-width: 640px){
  [data-mfix="fixed"]:is([data-mpos="left"],[data-mpos="right"]) .side a{display:flex}
  [data-mfix="fixed"]:is([data-mpos="left"],[data-mpos="right"]) .side hr{display:none}
  [data-mfix="fixed"]:is([data-mpos="left"],[data-mpos="right"]) .side{flex-direction:column;max-height:calc(100% - 28px);background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
  [data-mfix="fixed"]:is([data-mpos="left"],[data-mpos="right"]) .side a.moff{display:none!important}
}
[data-mstyle]:not([data-mstyle="plain"]) .side{gap:6px}
[data-mstyle="pill"] .side a{border-radius:999px;background:var(--card2)}
[data-mstyle="pill"] .side a.active,[data-mstyle="solid"] .side a.active{background:var(--accent);color:var(--bg)}
[data-mstyle="outline"] .side a{border:1px solid var(--line);border-radius:12px}
[data-mstyle="outline"] .side a.active{border-color:var(--accent)}
[data-mstyle="solid"] .side a{background:var(--card2);border-radius:12px}
[data-mstyle="underline"] .side a{border-radius:0;border-bottom:2px solid transparent;background:none}
[data-mstyle="underline"] .side a.active{border-bottom-color:var(--accent);background:none}
[data-mstyle="underline"]:is([data-mpos="left"],[data-mpos="right"]) .side a{border-bottom:0;border-left:2px solid transparent}
[data-mstyle="underline"]:is([data-mpos="left"],[data-mpos="right"]) .side a.active{border-left-color:var(--accent)}

/* menu on the right: the editor's style rail moves to the left so nothing overlaps */
[data-mpos="right"] body.editing .rrail{right:auto;left:12px}
[data-mpos="right"] body.editing .spanel{right:auto;left:70px}

@media (max-width: 640px){
  [data-mpos="right"] body.editing .rrail{right:auto;left:8px}
  [data-mpos="right"] body.editing .spanel{right:auto;left:64px}
}

/* ===== image crop window ===== */
.crop-box{width:min(560px,100%)}
.crop-view{display:grid;place-items:center;background:#05060b;border-radius:14px;padding:10px;margin:6px 0 10px}
#cropCv{display:block;border-radius:8px;cursor:grab;touch-action:none;max-width:100%;background:#111}
#cropCv:active{cursor:grabbing}
.crop-ctl{display:flex;align-items:center;gap:12px;font-size:12px;color:#8d93b3}
.crop-ctl input{flex:1}
.crop-ar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.crop-ar button{background:#141828;border:1px solid #2a3050;color:#cfd3e8;border-radius:10px;padding:6px 12px;font:500 12px Inter,sans-serif;cursor:pointer}
.crop-ar button.on{border-color:#e8c27a;color:#e8c27a}
.crop-note{color:#7b8099;font-size:12px;margin-top:10px}
.mpanel .mp-row{display:grid;grid-template-columns:38px 1fr 40px;gap:8px;align-items:center;margin-bottom:6px}
.mpanel .mp-row input[type=text]{background:#141828;border:1px solid #2a3050;color:#fff;border-radius:9px;padding:8px 9px;font:13px Inter,sans-serif;width:100%;min-width:0}
.mpanel .mp-ic{width:38px;height:36px;border-radius:10px;border:1px solid #2a3050;background:#141828;color:#e8c27a;cursor:pointer;display:grid;place-items:center;padding:0}
.mpanel .mp-ic svg,.mpanel .mp-icons svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mpanel .mp-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0;padding:8px;background:#05060b;border-radius:12px}
.mpanel .mp-icons button{height:36px;border-radius:9px;border:1px solid #2a3050;background:#141828;color:#cfd3e8;cursor:pointer;display:grid;place-items:center;padding:0}
.mpanel .mp-icons button:hover{border-color:#e8c27a;color:#e8c27a}
.mpanel .mp-on{position:relative;width:40px;height:22px;justify-self:end;cursor:pointer}
.mpanel .mp-on input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mpanel .mp-on i{position:absolute;inset:0;border-radius:99px;background:#2a3050;transition:.2s}
.mpanel .mp-on i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#cfd3e8;transition:.2s}
.mpanel .mp-on input:checked + i{background:#e8c27a}
.mpanel .mp-on input:checked + i::after{left:21px;background:#0d0f17}
.mpanel .sw-grid{grid-template-columns:repeat(3,1fr)}
.mpanel .sw-grid.c4{grid-template-columns:repeat(4,1fr)}
.mpanel .mp-lab{display:none}
@container dev (max-width: 640px){
  .sec-head{flex-wrap:wrap}
  .sec-head .sec-title{flex:1 1 100%}
  .sec-head .card-mv,.sec-head .card-del{margin-left:0}
  body.editing .sec-head .card-mv{margin-left:auto}
  [data-mfix="fixed"] body.editing:not(.previewing) .side:not(.open) .side-cfg{display:flex!important}
}