* { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:'Outfit',sans-serif; color:#1c1c1c; min-height:100vh; background:#f3f1ee; -webkit-font-smoothing:antialiased; }
  button, input, select, textarea { font-family:inherit; font-size:14px; }
  svg { display:block; }

  /* Four Seasons Group link pages. Shared by the public pages and the Manage screen. */
  .pbar { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:30; display:flex; gap:2px; background:rgba(20,20,20,.9); backdrop-filter:blur(8px); padding:4px; border-radius:999px; overflow-x:auto; max-width:94vw; scrollbar-width:none; }
  .pbar::-webkit-scrollbar { display:none; }
  .pbar a { color:#bbb; text-decoration:none; font-size:12px; padding:7px 12px; border-radius:999px; white-space:nowrap; }
  .pbar a.on { background:#fff; color:#1c1c1c; }

  /* ================= Link page ================= */
  .page { min-height:100vh; background:var(--pbg); padding:18px 8px 90px; display:flex; justify-content:center; font-family:var(--body); color:var(--pink); }
  .stack { width:100%; max-width:460px; }
  .grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

  .ptop { display:flex; justify-content:space-between; align-items:center; padding:4px 4px 10px; }
  .pbrand { display:flex; align-items:center; gap:10px; background:var(--chip); border-radius:999px; padding:5px 16px 5px 5px; font-size:14px; font-weight:500; }
  .plogo { width:34px; height:34px; border-radius:50%; background:var(--pink); color:var(--pbg); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:.3px; }
  .plogoimg { display:block; max-height:40px; max-width:62%; width:auto; margin-left:6px; }
  .pshare { width:44px; height:44px; border-radius:50%; border:none; background:var(--chip); color:var(--pink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .pshare svg { width:18px; height:18px; }

  .c, .sec { animation:rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
  @keyframes rise { from { opacity:0; transform:translateY(14px); } }
  .phone .c, .phone .sec { animation:none; }

  .c { position:relative; display:flex; flex-direction:column; min-width:0; background:var(--cb); color:var(--ct); border-radius:32px; padding:24px; text-decoration:none; overflow:hidden; transition:transform .2s ease; }
  a.c:active { transform:scale(.985); }
  @media (hover:hover) { a.c:hover { transform:translateY(-2px); } }
  .c.full { grid-column:span 2; }
  .c.faded, .sec.faded { opacity:.4; }
  .flag { position:absolute; top:10px; right:12px; z-index:3; font-size:11px; background:#1c1c1c; color:#fff; padding:3px 9px; border-radius:999px; font-family:'Outfit',sans-serif; }
  .c h1, .c h2, .c .big { font-family:var(--head); font-weight:var(--headw, 400); }
  .mono { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.6px; text-transform:uppercase; }
  .tag { display:inline-block; align-self:flex-start; border:1.5px solid currentColor; border-radius:999px; padding:5px 14px; font-size:14px; margin-bottom:16px; white-space:nowrap; }
  .circ { width:48px; height:48px; border-radius:50%; background:var(--ct); color:var(--cb); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s; }
  .circ svg { width:20px; height:20px; }
  a.c:hover .circ { transform:rotate(45deg); }
  .foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:22px; font-weight:500; font-size:16px; }

  /* Photo placeholder */
  .ph { background:radial-gradient(circle at 25% 25%, rgba(255,255,255,.35), transparent 55%), radial-gradient(circle at 85% 80%, rgba(0,0,0,.28), transparent 60%), var(--phc, var(--cb)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--phi, var(--ct)); font-size:13px; }
  .ph svg { width:26px; height:26px; opacity:.7; }
  .photo { background-size:cover; background-position:center; }

  /* Header */
  .t-header { padding:22px 10px 26px; background:transparent; }
  .t-header .eyebrow { opacity:.6; margin-bottom:14px; }
  .t-header h1 { font-size:54px; line-height:.98; letter-spacing:-2.5px; }
  .page[style*='--headw:7'] .t-header h1, .page[style*='--headw:8'] .t-header h1, .page[style*='--headw:9'] .t-header h1 { line-height:.92; letter-spacing:-2px; }
  .t-header .sub { font-size:18px; opacity:.65; margin-top:16px; line-height:1.35; max-width:92%; }

  /* Highlight */
  .t-highlight .himg { height:190px; border-radius:22px; margin:-12px -12px 20px; }
  .t-highlight h2 { font-size:32px; line-height:1.04; letter-spacing:-1px; }
  .t-highlight p { font-size:15px; opacity:.8; margin-top:10px; line-height:1.45; }

  /* Button: same height, type and shape as the section bars so they sit together */
  .t-button { flex-direction:row; align-items:center; gap:14px; border-radius:999px; padding:7px 22px 7px 7px; align-self:stretch; min-height:58px; }
  .t-button .circ { width:44px; height:44px; }
  .t-button .circ svg { width:18px; height:18px; }
  .t-button .lbl { flex:1; font-size:17px; font-weight:500; letter-spacing:-.2px; font-family:var(--body); }
  .t-button.half { padding-right:16px; gap:12px; }
  .t-button.half .lbl { font-size:16px; }
  .t-button .go svg { width:18px; height:18px; opacity:.6; }

  /* Link list */
  .t-list .lhead { display:flex; justify-content:space-between; align-items:flex-start; }
  .t-list .li { display:flex; align-items:center; gap:14px; padding:9px 0; color:inherit; text-decoration:none; font-size:20px; letter-spacing:-.2px; }
  .t-list .li svg { width:22px; height:22px; flex-shrink:0; }
  .t-list .li .ar { margin-left:auto; opacity:0; transition:opacity .2s; }
  .t-list .li:hover .ar { opacity:.6; }

  /* Image: photo on top */
  .t-image.l-top { padding:8px; }
  .t-image.l-top .img { height:220px; border-radius:24px; position:relative; }
  .t-image.l-top.half .img { height:160px; border-radius:22px; }
  .t-image.l-top .body { padding:14px 12px 10px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
  .t-image.l-top h2 { font-size:22px; line-height:1.1; letter-spacing:-.4px; }
  .t-image.l-top.half h2 { font-size:17px; }
  .t-image.l-top p { font-size:13px; opacity:.65; margin-top:4px; }
  .t-image.l-top.half .circ { width:36px; height:36px; }
  .t-image.l-top.half .circ svg { width:16px; height:16px; }
  .chip { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:#1c1c1c; border-radius:999px; padding:5px 12px; font-size:12px; font-family:'Outfit',sans-serif; }

  /* Image: text on photo */
  .t-image.l-overlay { padding:0; min-height:380px; justify-content:flex-end; color:#fff; }
  .t-image.l-overlay.half { min-height:260px; }
  .t-image.l-overlay .img { position:absolute; inset:0; }
  .t-image.l-overlay .img.photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%); }
  .t-image.l-overlay .img.ph { --phi:var(--ct); }
  .t-image.l-overlay .ov { position:relative; z-index:2; padding:22px; color:var(--ovt); }
  .t-image.l-overlay h2 { font-size:34px; line-height:1.02; letter-spacing:-1.2px; }
  .t-image.l-overlay.half h2 { font-size:22px; letter-spacing:-.5px; }
  .t-image.l-overlay p { font-size:15px; opacity:.85; margin-top:8px; line-height:1.4; }
  .t-image.l-overlay .chip { top:16px; left:16px; z-index:2; }
  .t-image.l-overlay .circ { position:absolute; right:18px; top:16px; z-index:2; background:#fff; color:#1c1c1c; }

  /* Image: photo with colour block */
  .t-image.l-block { padding:0; background:transparent; overflow:visible; }
  .t-image.l-block .img { height:250px; border-radius:32px; position:relative; }
  .t-image.l-block.half .img { height:170px; border-radius:26px; }
  .t-image.l-block .blk { position:relative; background:var(--cb); color:var(--ct); border-radius:32px; margin-top:-40px; padding:24px; display:flex; flex-direction:column; }
  .t-image.l-block h2 { font-size:30px; line-height:1.04; letter-spacing:-1px; }
  .t-image.l-block.half h2 { font-size:20px; }
  .t-image.l-block p { font-size:15px; opacity:.8; margin-top:10px; line-height:1.45; }

  /* Gallery */
  .t-gallery { padding:20px 0 20px; }
  .t-gallery .ghead { padding:0 20px; display:flex; justify-content:space-between; align-items:center; }
  .t-gallery .ghead .tag { margin-bottom:14px; }
  .t-gallery .ghead .count { line-height:1; }
  .t-gallery .count { opacity:.6; }
  .t-gallery .gright { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
  .gnav { display:none; width:36px; height:36px; border-radius:50%; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; align-items:center; justify-content:center; padding:0; }
  .gnav svg { width:18px; height:18px; }
  .gnav:hover { background:var(--ct); color:var(--cb); border-color:var(--ct); }
  @media (hover:hover) and (pointer:fine) { .gnav { display:inline-flex; } .t-gallery .count { margin-right:6px; } }
  .gtrack { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 20px; scrollbar-width:none; }
  .gtrack::-webkit-scrollbar { display:none; }
  .slide { flex:0 0 74%; scroll-snap-align:center; text-decoration:none; color:inherit; position:relative; }
  .slide .img { height:250px; border-radius:24px; position:relative; }
  .slide .cap { font-size:15px; margin-top:10px; padding:0 4px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .slide .cap small { display:block; font-size:12px; opacity:.6; margin-top:2px; }
  /* Photo behind the text */
  .c.hasbg { background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 100%), var(--bgimg) center/cover no-repeat, var(--cb); color:#fff; }
  .c.hasbg .circ { background:#fff; color:#1c1c1c; }
  .t-highlight.hasbg { min-height:360px; justify-content:flex-end; }
  .t-highlight.hasbg .tag, .t-stat.hasbg .tag, .t-countdown.hasbg .tag { align-self:flex-start; }
  .t-text.hasbg { min-height:240px; justify-content:flex-end; }
  .t-countdown.hasbg .meter { background:rgba(255,255,255,.25); }
  /* Gallery: text on photo */
  .g-overlay .slide .img { height:340px; }
  .g-overlay .gph { position:relative; border-radius:24px; overflow:hidden; }
  .g-overlay .gph .img { border-radius:24px; }
  .g-overlay .gph .img.photo::after { content:''; position:absolute; inset:0; border-radius:24px; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); }
  .g-overlay .gov { position:absolute; left:0; right:0; bottom:0; padding:20px; color:#fff; z-index:2; }
  .g-overlay .gov h3 { font-family:var(--head); font-weight:400; font-size:28px; line-height:1.02; letter-spacing:-.8px; }
  .g-overlay .gov p { font-size:14px; opacity:.85; margin-top:6px; }
  .g-overlay .gcirc { position:absolute; top:14px; right:14px; z-index:2; background:#fff; color:#1c1c1c; width:42px; height:42px; }
  .slide .capgo svg { width:18px; height:18px; opacity:.7; }
  .ib svg { width:14px; height:14px; }

  /* Big number and countdown */
  .t-stat .big { font-size:56px; line-height:1; letter-spacing:-2px; margin-top:auto; }
  .t-stat .big.long { font-size:30px; letter-spacing:-.8px; }
  .t-stat p, .t-countdown p { font-size:14px; opacity:.7; margin-top:8px; }
  .t-stat .tag, .t-countdown .tag { font-size:12px; padding:4px 11px; }
  .t-countdown .big { font-size:64px; line-height:1; letter-spacing:-3px; margin-top:auto; }
  .t-countdown .meter { height:4px; border-radius:2px; background:color-mix(in srgb, var(--ct) 20%, transparent); margin-top:14px; overflow:hidden; }
  .t-countdown .meter i { display:block; height:100%; background:var(--ct); border-radius:2px; }

  .t-text p { font-size:26px; line-height:1.15; font-weight:500; letter-spacing:-.6px; font-family:var(--body); }

  .t-files .frow { display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid color-mix(in srgb, var(--ct) 12%, transparent); }
  .t-files .frow:first-of-type { border-top:none; }
  .t-files .ftile { width:48px; height:56px; border-radius:12px; background:var(--ct); color:var(--cb); display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; font-family:'DM Mono',monospace; font-size:10px; font-weight:500; gap:2px; }
  .t-files .ftile svg { width:18px; height:18px; }
  .t-files .finfo { flex:1; min-width:0; }
  .t-files .finfo b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:17px; line-height:1.2; font-weight:500; letter-spacing:-.2px; }
  .t-files .finfo span { font-size:12px; opacity:.6; }
  .t-files .fbtn { height:42px; border-radius:999px; border:1.5px solid currentColor; color:inherit; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 14px; font-size:14px; font-weight:500; flex-shrink:0; }
  .t-files .fdl { width:42px; padding:0; background:var(--ct); color:var(--cb); border-color:var(--ct); }
  .t-files .fbtn svg { width:17px; height:17px; }
  .t-files .off { opacity:.4; pointer-events:none; }
  .t-socials { flex-direction:row; justify-content:center; gap:10px; padding:14px; flex-wrap:wrap; }
  .t-socials a { width:52px; height:52px; border-radius:50%; background:var(--ct); color:var(--cb); display:flex; align-items:center; justify-content:center; transition:transform .2s; }
  .t-socials a:hover { transform:translateY(-2px); }
  .t-socials a svg { width:22px; height:22px; }

  .t-form h2 { font-size:30px; line-height:1.04; letter-spacing:-1px; }
  .t-form > p { font-size:15px; opacity:.8; margin-top:10px; line-height:1.45; }
  .t-form form { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
  .t-form input, .t-form textarea { border:none; border-radius:999px; padding:14px 18px; background:rgba(255,255,255,.14); color:inherit; font-family:var(--body); font-size:15px; resize:none; outline:none; }
  .t-form textarea { border-radius:22px; }
  .t-form.light input, .t-form.light textarea { background:rgba(0,0,0,.06); }
  .t-form input::placeholder, .t-form textarea::placeholder { color:inherit; opacity:.55; }
  .t-form button { border:none; border-radius:999px; padding:15px; background:var(--ct); color:var(--cb); font-weight:600; font-size:15px; cursor:pointer; font-family:var(--body); display:flex; align-items:center; justify-content:center; gap:8px; }
  .t-form button svg { width:18px; height:18px; }
  .t-form .thanks { font-size:20px; margin-top:16px; line-height:1.3; }
  .t-form .fine { font-size:11px; opacity:.55; margin-top:4px; padding:0 6px; line-height:1.4; }

  /* Sections */
  .sec { grid-column:span 2; }
  .sec-h { width:100%; display:flex; align-items:center; gap:12px; background:var(--cb); color:var(--ct); border:none; border-radius:999px; padding:7px 7px 7px 22px; font-family:var(--body); font-size:17px; cursor:pointer; text-align:left; }
  .sec-h .sdot { width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.45; flex-shrink:0; }
  .sec-h .st { flex:1; font-weight:500; letter-spacing:-.2px; }
  .sec-h .scount { opacity:.6; }
  .sec-h .schev { width:44px; height:44px; border-radius:50%; background:var(--ct); color:var(--cb); display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .sec-h .schev svg { width:18px; height:18px; }
  .sec.open .schev { transform:rotate(180deg); }
  .sec-b { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1); }
  .sec.open .sec-b { grid-template-rows:1fr; }
  .sec-in { overflow:hidden; min-height:0; }
  .sec-in > .grid { padding-top:8px; }
  .sec .c { animation:none; }

  .pfoot { text-align:center; font-size:12px; opacity:.45; margin-top:26px; }

  /* ================= Manage ================= */
  #manage { display:none; min-height:100vh; padding-bottom:60px; }
  .mtop { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px; background:#1c1c1c; color:#fff; flex-wrap:wrap; }
  .mtop h1 { font-size:17px; font-weight:600; }
  .tabs { display:flex; gap:2px; background:#2e2e2e; padding:4px; border-radius:999px; overflow-x:auto; }
  .tab { background:none; border:none; color:#bbb; padding:8px 16px; border-radius:999px; cursor:pointer; font-weight:500; white-space:nowrap; }
  .tab.active { background:#fff; color:#1c1c1c; }
  .btn { border:none; border-radius:999px; padding:9px 16px; cursor:pointer; font-weight:500; background:#e6e3df; color:#1c1c1c; white-space:nowrap; }
  .btn.dark { background:#1c1c1c; color:#fff; }
  .btn.orange { background:#ef7a38; color:#fff; }
  .btn.sm { padding:6px 12px; font-size:13px; }
  .swatches button.auto { font-size:12px; font-weight:600; color:#6b6762; background:#fff; box-shadow:0 0 0 1px #d8d4cf; }
  .savewrap { display:flex; align-items:center; gap:10px; }
  .unsaved-note { font-size:13px; color:#f3b48f; white-space:nowrap; }
  .unsaved-note[hidden] { display:none; }
  #saveBtn.unsaved { box-shadow:0 0 0 3px rgba(239,122,56,.35); animation:savepulse 1.8s ease-in-out infinite; }
  @keyframes savepulse { 50% { box-shadow:0 0 0 7px rgba(239,122,56,0); } }
  .btn.ghost { background:transparent; color:#9a3b2a; }
  .btn.on { background:#1c1c1c; color:#fff; }
  .ib { width:30px; height:30px; border-radius:50%; border:none; background:#f0eeeb; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#1c1c1c; flex-shrink:0; }
  .ib:hover { background:#e2dfdb; }
  .ib.del { color:#9a3b2a; }

  .view { max-width:1320px; margin:0 auto; padding:22px 20px 40px; }
  .pbody { display:grid; grid-template-columns:210px minmax(0,1fr) 390px; gap:20px; }
  .side .pg { width:100%; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid transparent; border-radius:14px; padding:9px 10px; cursor:pointer; text-align:left; margin-bottom:6px; }
  .side .pg.on { border-color:#1c1c1c; }
  .side .pg .sw { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
  .side .pg b { font-size:14px; font-weight:500; display:block; }
  .side .pg small { font-size:12px; color:#8d857f; }

  .panel { background:#fff; border-radius:18px; padding:18px; margin-bottom:12px; }
  .panel h2 { font-size:15px; font-weight:600; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
  .fg { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .fg .span { grid-column:span 2; }
  label { display:block; font-size:12px; color:#6b6460; margin-bottom:4px; }
  input[type=text], input[type=url], input[type=date], input[type=search], select, textarea { width:100%; border:1px solid #d8d4cf; border-radius:10px; padding:9px 10px; background:#fff; color:#1c1c1c; }
  textarea { resize:vertical; min-height:64px; }
  .swatches { display:flex; gap:6px; flex-wrap:wrap; }
  .swatches button { width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #d8d4cf; cursor:pointer; }
  .swatches button.on { box-shadow:0 0 0 2px #1c1c1c; }
  .seg { display:inline-flex; background:#f0eeeb; border-radius:999px; padding:3px; flex-wrap:wrap; }
  .seg button { border:none; background:none; padding:6px 13px; border-radius:999px; cursor:pointer; font-size:13px; }
  .seg button.on { background:#1c1c1c; color:#fff; }
  .stepper { display:inline-flex; align-items:center; gap:8px; background:#f0eeeb; border-radius:999px; padding:3px; }
  .stepper b { min-width:20px; text-align:center; }

  .imgf { display:flex; gap:10px; align-items:center; }
  .thumb { width:64px; height:64px; border-radius:14px; flex-shrink:0; background:#f0eeeb center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:#8d857f; }
  .thumb svg { width:20px; height:20px; }
  .imgc { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .imgc .r { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

  .ci { background:#fff; border-radius:16px; margin-bottom:8px; border:1.5px solid transparent; position:relative; }
  .ci.open { border-color:#1c1c1c; }
  .ci.child { margin-left:28px; }
  .ci.child::before { content:''; position:absolute; left:-16px; top:-8px; bottom:-8px; width:2px; background:#d8d4cf; }
  .ci.child.last::before { bottom:50%; }
  .ci.child::after { content:''; position:absolute; left:-16px; top:50%; width:12px; height:2px; background:#d8d4cf; }
  .ci.sect { background:#1c1c1c; color:#fff; }
  .ci.sect small { color:#aaa !important; }
  .ci.sect .ib { background:#333; color:#fff; }
  .ci-h { display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; }
  .ci-h .sw { width:34px; height:34px; border-radius:10px; flex-shrink:0; border:1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
  .ci-h .sw svg { width:16px; height:16px; }
  .ci-h .txt { flex:1; min-width:0; }
  .ci-h b { font-size:14px; font-weight:600; }
  .ci-h small { display:block; color:#8d857f; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ci-h .w { font-size:11px; color:#8d857f; background:#f0eeeb; border-radius:999px; padding:3px 8px; }
  .ci-tools { display:flex; gap:4px; align-items:center; }
  .ci-b { padding:6px 14px 16px; border-top:1px solid #f0eeeb; background:#fff; color:#1c1c1c; border-radius:0 0 15px 15px; }
  .ci-b .row3 { display:flex; gap:18px; align-items:flex-end; margin:10px 0 12px; flex-wrap:wrap; }
  .grip { cursor:grab; color:#a9a39d; display:inline-flex; align-items:center; justify-content:center; width:22px; height:30px; flex-shrink:0; touch-action:none; }
  .grip svg { width:16px; height:16px; }
  .grip:active { cursor:grabbing; }
  .drag-ghost { opacity:.35; }
  .item { display:grid; grid-template-columns:22px 120px 1fr 1.5fr auto; gap:6px; align-items:center; margin-top:6px; }
  .item.two { grid-template-columns:22px 120px 1fr auto; }
  .itemblk { border:1px solid #ece9e5; border-radius:14px; padding:10px; margin-top:8px; display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:start; }
  .itemblk .fg { grid-template-columns:1fr 1fr; }
  .sub-h { font-size:12px; color:#6b6460; margin:14px 0 2px; display:flex; justify-content:space-between; align-items:center; }

  .picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
  .pick { background:#fff; border:1.5px solid #e6e3df; border-radius:14px; padding:12px; text-align:left; cursor:pointer; display:flex; gap:10px; align-items:flex-start; }
  .pick:hover { border-color:#1c1c1c; }
  .pick svg { width:18px; height:18px; margin-top:2px; flex-shrink:0; }
  .pick b { display:block; font-size:14px; font-weight:600; }
  .pick small { color:#8d857f; font-size:12px; }

  .phonewrap { position:sticky; top:76px; align-self:start; }
  .phone { height:calc(100vh - 110px); max-height:840px; border:10px solid #1c1c1c; border-radius:48px; overflow:auto; background:#fff; scrollbar-width:none; }
  .phone::-webkit-scrollbar { display:none; }
  .phone .page { min-height:100%; padding:14px 6px 30px; }
  .phonecap { text-align:center; font-size:12px; color:#8d857f; margin-top:8px; }

  .brandcard { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .colours { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .colours .cw { position:relative; }
  .colours input[type=color] { width:44px; height:44px; border:none; border-radius:12px; padding:0; cursor:pointer; background:none; }
  .colours .x { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:none; background:#1c1c1c; color:#fff; font-size:11px; cursor:pointer; line-height:18px; }
  .fontprev { border-radius:18px; padding:18px; }
  .fontprev .h { font-size:34px; line-height:1; letter-spacing:-1px; }
  .fontprev .b { font-size:14px; margin-top:8px; opacity:.8; }

  .fbar { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
  .fbar .grp { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .fbar select { width:auto; border-radius:999px; }
  .stats { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:12px; }
  .stat { background:#fff; border-radius:18px; padding:16px; }
  .stat .n { font-size:28px; font-weight:600; letter-spacing:-.5px; }
  .stat .t { font-size:12px; color:#6b6460; margin-top:2px; }
  .g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th { text-align:left; font-size:12px; color:#6b6460; font-weight:500; padding:8px 6px; border-bottom:1px solid #e6e3df; }
  td { padding:9px 6px; border-bottom:1px solid #f3f1ee; }
  .num { text-align:right; }
  .bar { height:6px; border-radius:3px; }
  .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
  .chart { display:flex; align-items:flex-end; gap:3px; height:130px; }
  .chart div { flex:1; background:#ef7a38; border-radius:3px 3px 0 0; min-height:2px; position:relative; }
  .chart div:hover { background:#1c1c1c; }
  .chart div:hover::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#1c1c1c; color:#fff; font-size:11px; padding:3px 7px; border-radius:6px; white-space:nowrap; margin-bottom:4px; z-index:2; }
  .empty { color:#8d857f; font-size:14px; padding:10px 0; }
  .vrow { cursor:pointer; }
  .vrow:hover td { background:#faf9f7; }
  .vrow.on td { background:#f3f1ee; }
  .pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:#f0eeeb; }
  .pill.lead { background:#ef7a38; color:#fff; }
  .journey { list-style:none; max-height:520px; overflow:auto; }
  .journey li { display:grid; grid-template-columns:96px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid #f3f1ee; font-size:13px; }
  .journey .when { color:#8d857f; }
  .note { font-size:13px; color:#6b6460; line-height:1.5; }
  .tablewrap { overflow-x:auto; }

  .toast { position:fixed; bottom:70px; left:50%; transform:translateX(-50%); background:#1c1c1c; color:#fff; padding:10px 18px; border-radius:999px; font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:40; max-width:90vw; text-align:center; }
  .toast.show { opacity:1; }

  @media (max-width:1150px) { .pbody { grid-template-columns:200px minmax(0,1fr); } #editor { min-width:0; } .phonewrap { display:none; } .stats { grid-template-columns:repeat(3,1fr); } }
  @media (max-width:760px) {
    .view { padding:14px 10px 40px; }
    .mtop { padding:10px 12px; }
    .pbody, .g2, .brandcard { grid-template-columns:minmax(0,1fr) !important; }
    .side, #editor { min-width:0; }
    .ci-tools .ib[data-act=dupCard] { display:none; }
    .ci-h { gap:8px; padding:9px 8px; }
    .side { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
    .side .pg { width:auto; flex-shrink:0; margin:0; }
    .side #pageList { display:flex; gap:6px; }
    .side #addPage { width:auto !important; flex-shrink:0; }
    .stats { grid-template-columns:1fr 1fr; }
    .fg { grid-template-columns:1fr; } .fg .span { grid-column:auto; }
    .item, .item.two { grid-template-columns:22px 1fr 1fr; }
    .ci-h .w { display:none; }
    .ci.child { margin-left:18px; } .ci.child::before, .ci.child::after { left:-11px; } .ci.child::after { width:8px; }
  }