/* Folio Suite control plane — brand palette.
   bg #FFFFFF · text #111111 · cards/boxes #F4F4F4 · Roboto */
:root {
  --bg: #FFFFFF;
  --text: #111111;
  --muted: #767676;
  --line: #E2E2E2;
  --accent: #111111;
  --card: #F4F4F4;
  --err-bg: #F6E5E3; --err-fg: #8A4B42;
  --ok-bg: #E7F0E8;  --ok-fg: #466B4E;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Roboto', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
a { color: var(--accent); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.25rem;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-weight: 700; letter-spacing: .5px; text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: 1.4rem; }
.topbar nav a { text-decoration: none; color: var(--text); font-size: .92rem; }
.topbar nav a:hover { color: var(--muted); }
.topbar .who {
  color: var(--muted); font-size: .85rem; letter-spacing: .03em;
  padding-left: 1.4rem; border-left: 1px solid var(--line);
}
.inline { display: inline; margin: 0; }
.linkbtn {
  background: none; border: none; color: var(--text);
  cursor: pointer; font: inherit; font-size: .92rem; padding: 0; text-decoration: none;
}
.linkbtn:hover { color: var(--muted); }

/* User dropdown menu */
.usermenu { position: relative; border-left: 1px solid var(--line); padding-left: 1.4rem; }
.usermenu-toggle {
  background: none; border: none; cursor: pointer; font: inherit; font-size: .92rem;
  color: var(--text); padding: 0; display: flex; align-items: center; gap: .35rem;
}
.usermenu-toggle:hover { color: var(--muted); }
.usermenu-toggle .caret { font-size: .7rem; color: var(--muted); }
.usermenu-drop {
  position: absolute; right: 0; top: calc(100% + .35rem); min-width: 160px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem 0; box-shadow: 0 8px 24px rgba(0,0,0,.09); display: none; z-index: 200;
}
/* Opened by click (JS adds .open) or keyboard focus — NOT hover, which closed
   the menu as the pointer crossed the gap on the way to an item. */
.usermenu.open .usermenu-drop, .usermenu:focus-within .usermenu-drop { display: block; }
.usermenu-drop a, .usermenu-drop .linkbtn {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: .55rem 1.1rem; color: var(--text); font-size: .9rem; text-decoration: none;
}
.usermenu-drop a:hover, .usermenu-drop .linkbtn:hover { background: var(--bg); }

/* Studio nav: grouped links + a few small dropdowns, replacing one long flat "Menu" list */
.studionav { display: flex; align-items: center; gap: 1.4rem; }
.studionav-link { text-decoration: none; color: var(--text); font-size: .92rem; }
.studionav-link:hover { color: var(--muted); }
.navmenu { position: relative; }
.navmenu-toggle {
  background: none; border: none; cursor: pointer; font: inherit; font-size: .92rem;
  color: var(--text); padding: 0; display: flex; align-items: center; gap: .35rem;
}
.navmenu-toggle:hover { color: var(--muted); }
.navmenu-toggle .caret { font-size: .7rem; color: var(--muted); }
.navmenu-drop {
  position: absolute; left: 0; top: calc(100% + .35rem); min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem 0; box-shadow: 0 8px 24px rgba(0,0,0,.09); display: none; z-index: 200;
}
.navmenu.open .navmenu-drop, .navmenu:focus-within .navmenu-drop { display: block; }
.navmenu-drop a {
  display: block; width: 100%; box-sizing: border-box;
  padding: .55rem 1.1rem; color: var(--text); font-size: .9rem; text-decoration: none;
}
.navmenu-drop a:hover { background: var(--bg); }
.usermenu-drop form { margin: 0; }

/* Hamburger toggle — hidden on desktop, shown once the studio nav can't fit */
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;flex-direction:column;justify-content:center;gap:4px;}
.navtoggle-bar{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;}

@media(max-width:900px){
  .navtoggle{display:flex;}
  .topbar{flex-wrap:wrap;}
  #topbarNav{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    margin-top:.75rem;border-top:1px solid var(--line);padding-top:.25rem;
  }
  #topbarNav.nav-open{display:flex;}
  #topbarNav > a{padding:.7rem 0;border-bottom:1px solid var(--line);}
  .studionav{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .studionav-link{padding:.7rem 0;border-bottom:1px solid var(--line);}
  .navmenu{width:100%;}
  .navmenu-toggle{width:100%;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--line);}
  .navmenu-drop{
    position:static;box-shadow:none;border:none;border-radius:0;
    background:var(--bg);padding:0 0 .3rem 1rem;display:none;min-width:0;
  }
  .navmenu.open .navmenu-drop{display:block;}
  .navmenu-drop a{padding:.55rem 0;}
  .usermenu{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.5rem;}
  .usermenu-toggle{width:100%;justify-content:space-between;padding:.5rem 0;}
  .usermenu-drop{position:static;box-shadow:none;border:none;border-radius:0;background:var(--bg);min-width:0;}
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 2rem 2rem; }

.flash { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1.25rem; font-size: .95rem; }
.flash-error { background: var(--err-bg); color: var(--err-fg); }
.flash-ok { background: var(--ok-bg); color: var(--ok-fg); }

h1 { font-weight: 500; margin: 0 0 1rem; }
h2 { font-weight: 500; }

/* Auth card */
.authbox { max-width: 380px; margin: 4rem auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 2rem; }
.authbox h1 { text-align: center; }
.authbox-wide { max-width: 1560px; }
.page-billing main.wrap, .page-signup main.wrap { max-width: 1560px; }
.page-signup .authbox { background: transparent; border: none; padding: 2rem 0; }

/* Segmented Monthly/Yearly toggle — /signup, same joined-button look as the
   Monthly/Yearly pair on /studio/billing (no outer track, so the selected
   side's black fill always reaches the shared edge exactly). */
.cycle-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: .25rem 0 1.5rem; }
#cycleToggle label { margin: 0; position: relative; }
.cycle-toggle label:not(:last-child) { border-right: 1px solid var(--line); }
.cycle-toggle input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.cycle-toggle span { display: block; padding: .55rem 1.25rem; font-size: .88rem; color: var(--text); cursor: pointer; background: #fff; transition: background .15s, color .15s; white-space: nowrap; }
.cycle-toggle input:checked + span { background: #111; color: #fff; }
.cycle-toggle label:hover input:not(:checked) + span { background: var(--card); }

/* Pricing cards — /signup and /studio/billing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; align-items: stretch; margin: 1.5rem 0; }
.pricing-card { position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 2rem 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }
.pricing-card.is-featured { border-color: #111; box-shadow: 0 16px 36px -18px rgba(0,0,0,.32); transform: translateY(-6px); }
label.pricing-card { cursor: pointer; }
.pricing-card:hover { border-color: #111; background: #fafafa; }
.pricing-card:has(input:checked) { border-color: #111; box-shadow: 0 0 0 2px #111; transform: translateY(-6px); background: #fff; }
.pricing-radio { position: absolute; opacity: 0; pointer-events: none; }
.pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: .32rem .9rem; border-radius: 999px; white-space: nowrap; }
.pricing-name { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .7rem; }
.pricing-price { font-size: 2.15rem; font-weight: 700; line-height: 1; color: var(--text); }
.pricing-price small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.pricing-yearly { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; min-height: 1.1em; }
.pricing-cta-slot { margin: 1.4rem 0 0; }
.pricing-cta { display: block; width: 100%; text-align: center; padding: .65rem; border-radius: 8px;
  font-weight: 500; font-size: .92rem; border: 1px solid var(--line); background: #fff; color: var(--text);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pricing-card.is-featured .pricing-cta { background: #111; color: #fff; border-color: #111; }
.pricing-card.is-featured .pricing-cta-row .pricing-cta { background: #fff; color: var(--text); border-color: var(--line); }
.pricing-cta:hover { background: #111; color: #fff; border-color: #111; }
.pricing-cta.is-current { background: var(--card); color: var(--muted); border-color: var(--line); cursor: default; }
.pricing-cta.is-current:hover { background: var(--card); color: var(--muted); border-color: var(--line); }
.pricing-cta-row { display: flex; }
.pricing-cta-row .pricing-cta { border-radius: 0; }
.pricing-cta-row form:first-child .pricing-cta { border-radius: 8px 0 0 8px; border-right-width: .5px; }
.pricing-cta-row form:last-child .pricing-cta { border-radius: 0 8px 8px 0; border-left-width: .5px; }
.pricing-features { list-style: none; margin: 1.4rem 0 0; padding: 1.25rem 0 0; flex: 1; border-top: 1px solid var(--line); }
.pricing-features li { display: flex; align-items: flex-start; gap: .55rem; padding: .38rem 0; font-size: .87rem; color: var(--text); }
.pricing-features li.is-excluded { color: var(--muted); }
.pricing-features .pf-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; }
.pricing-features .pf-icon.is-no { opacity: .35; }
label { display: block; font-size: .85rem; color: var(--muted); margin: 1rem 0 .25rem; }
input[type=email], input[type=password], input[type=text],
input[type=date], input[type=datetime-local], input[type=number],
input[type=tel], input[type=url] {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; color: var(--text); background: #fff;
}
button.primary {
  margin-top: 1.5rem; width: 100%; padding: .65rem; border: none; border-radius: 6px;
  background: var(--text); color: #fff; font: inherit; font-weight: 500; cursor: pointer;
}
button.primary:hover { opacity: .92; }

/* Cards / stats */
.cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.card { flex: 1 1 160px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.25rem; }
.card .n { font-size: 2rem; font-weight: 700; }
.card .l { color: var(--muted); font-size: .85rem; }

.muted { color: var(--muted); }

/* Page header with action button */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.btn { display: inline-block; padding: .5rem 1rem; background: var(--text); color: #fff;
  border: none; border-radius: 6px; text-decoration: none; font: inherit; font-size: .9rem; cursor: pointer; }
.btn:hover { opacity: .92; }
.btn-danger { background: #9b4a40; }
.linkbtn:hover { opacity: .8; }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.grid th, table.grid td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
table.grid th { color: var(--muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.grid tr:last-child td { border-bottom: none; }
@media(max-width:640px){
  table.grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.grid th, table.grid td{white-space:nowrap;}
}
code { background: #eeeeee; padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

/* Status / role tags */
.tag { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .03em; }
.tag-active { background: var(--ok-bg); color: var(--ok-fg); }
.tag-suspended { background: #f3e6cf; color: #8a6d2f; }
.tag-archived { background: #e2e2e2; color: #4a4a4a; }
.tag-owner { background: #e4ecf3; color: #3d5a73; }

/* Row actions — small outline buttons that never wrap mid-word */
.ta-right { text-align: right !important; }
.ta-center { text-align: center !important; }
td.actions { white-space: nowrap; text-align: right; }
td.actions form { display: inline-block; margin: 0 0 0 .4rem; }
.btn-sm {
  display: inline-block; padding: .34rem .7rem; font-size: .82rem; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  color: var(--text); text-decoration: none; cursor: pointer; vertical-align: middle;
}
.btn-sm:hover { border-color: var(--muted); background: var(--bg); }
.btn-sm + .btn-sm { margin-left: .4rem; }
.btn-sm-go { border-color: #cdd9e3; color: #3d5a73; background: #f1f5f9; }
.btn-sm-go:hover { border-color: #3d5a73; background: #e4ecf3; }
.btn-sm-danger { border-color: #e0c4c0; color: #9b4a40; background: #faf2f1; }
.btn-sm-danger:hover { border-color: #9b4a40; background: #f3e0dd; }
.ext { color: var(--muted); font-size: .9em; }
.btn-sm-go .ext { color: inherit; }
.hint { margin-top: .7rem; font-size: .82rem; }

/* Forms */
.stack label { display: block; margin: 0 0 1rem; color: var(--text); font-size: .95rem; }
.stack label input, .stack label select, .stack label textarea { margin-top: .3rem; }
.stack textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; color: var(--text); background: #fff;
}
.stack.narrow { max-width: 420px; }
.tokeninput{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden;}
.tokeninput-prefix{padding:.6rem 0 .6rem .7rem;color:var(--muted);font-size:.92rem;}
.tokeninput input{border:none;padding:.6rem .7rem .6rem .1rem;flex:1;font:inherit;color:var(--text);}
.tokeninput input:focus{outline:none;}
select { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--text); background: #fff; }
.row2 { display: flex; gap: 1rem; } .row2 label { flex: 1; }
.row3 { display: flex; gap: 1rem; } .row3 label { flex: 1; }
.hint { display: block; color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.actionrow { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.actionrow form { margin: 0; }
hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
h2.danger { color: #9b4a40; }
.danger { color: #9b4a40; }

.wrap h2 { font-weight: 500; margin-top: 1.75rem; }
.wrap ul, .wrap ol { line-height: 1.7; }

/* ============================================================
   PUBLIC / MARKETING DESIGN  (landing · legal · help)
   ============================================================ */
:root{
  --pub-ink:#111111;          /* heading ink */
  --pub-soft:#6b6b6b;         /* secondary text */
  --pub-line:#e2e2e2;
  --pub-bg-alt:#f4f4f4;
  --pub-accent:#111111;
  --pub-accent-d:#000000;
  --pub-accent2:#4749d6;      /* button accent, kept subtle rather than saturated */
  --pub-accent2-d:#3739ad;
  --pub-radius:16px;
  --pub-shadow:0 1px 2px rgba(0,0,0,.04), 0 18px 44px -26px rgba(0,0,0,.30);
  --pub-shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 10px 24px -16px rgba(0,0,0,.22);
}
.container{max-width:1160px;margin:0 auto;padding:0 1.5rem;}
.page-landing .container{max-width:1600px;}

/* ---- Public header ---- */
.pubbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--pub-line);}
.pubbar-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--pub-ink);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.92rem;}
.wordmark .dot{width:9px;height:9px;border-radius:50%;background:var(--pub-accent);}
.brand-logo{height:34px;width:auto;display:block;}
.brand-logo-full{height:56px;}
.topbar .brand{display:inline-flex;align-items:center;}
.topbar .brand .brand-logo{height:20px;}
.g-tenant-logo{max-height:36px;max-width:220px;display:block;}
.g-poweredby{color:var(--pub-soft);text-decoration:none;}
.g-poweredby:hover{color:var(--pub-ink);text-decoration:underline;}
.pubnav{display:flex;align-items:center;gap:2rem;}
.pubnav a{text-decoration:none;color:var(--pub-soft);font-size:1.08rem;}
.pubnav a:hover{color:var(--pub-ink);}
.pubnav .signin{padding:.6rem 1.3rem;border:1px solid var(--pub-accent);border-radius:999px;color:var(--pub-accent);transition:.15s;}
.pubnav .signin:hover{background:var(--pub-accent);color:#fff;}
@media(max-width:640px){.pubnav .navlink{display:none;}}

/* ---- Buttons ---- */
.btn-primary{display:inline-block;padding:.9rem 1.9rem;background:var(--pub-accent2);color:#fff;
  border-radius:999px;text-decoration:none;font-weight:500;font-size:1.02rem;border:1px solid var(--pub-accent2);transition:.15s;}
.btn-primary:hover{background:var(--pub-accent2-d);border-color:var(--pub-accent2-d);}
.btn-ghost{display:inline-block;padding:.9rem 1.65rem;color:var(--pub-ink);border-radius:999px;
  text-decoration:none;font-weight:500;font-size:1.02rem;border:1px solid var(--pub-line);background:#fff;transition:.15s;}
.btn-ghost:hover{border-color:var(--pub-soft);}

/* ---- Hero ---- */
.page-landing main.wrap{max-width:none;margin:0;padding:0;}
.hero{padding:5.5rem 0;background:linear-gradient(180deg,#0d0d0e 0%,#1a1a1c 100%);}
.hero-grid{display:grid;grid-template-columns:.85fr 1.25fr;gap:2.5rem;align-items:center;}
.hero-text{text-align:left;}
.hero .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:1.15rem;color:rgba(255,255,255,.55);font-weight:700;margin:0 0 1em;}
.hero h1{font-size:clamp(2.5rem,4.2vw,3.9rem);line-height:1.08;font-weight:300;letter-spacing:-.01em;
  color:#fff;margin:0 0 1.1rem;}
.hero h1 b{font-weight:600;}
.hero-sub{font-size:1.25rem;color:rgba(255,255,255,.7);max-width:580px;margin:0 0 2.2rem;line-height:1.62;}
.hero-cta{display:flex;gap:.8rem;justify-content:flex-start;flex-wrap:wrap;}
.hero-cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32);}
.hero-cta .btn-ghost:hover{border-color:#fff;}
.hero-media .gallery-preview-frame{width:100%;margin:0;}
.hero-media .gallery-preview-caption{color:rgba(255,255,255,.55);}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;}
  .hero-text{text-align:center;}
  .hero-sub{margin:0 auto 2.2rem;}
  .hero-cta{justify-content:center;}
}

/* ---- Sections ---- */
.sec{padding:4.25rem 0;}
.sec-alt{background:var(--pub-bg-alt);border-top:1px solid var(--pub-line);border-bottom:1px solid var(--pub-line);}
.sec-head{text-align:center;max-width:680px;margin:0 auto 2.75rem;}
.sec-head h2{font-size:clamp(2rem,4vw,2.7rem);font-weight:400;color:var(--pub-ink);margin:0 0 .7rem;}
.sec-head p{color:var(--pub-soft);margin:0;font-size:1.18rem;}

/* ---- Feature cards ---- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;}
.fcard{background:#fff;border:1px solid var(--pub-line);border-radius:var(--pub-radius);
  padding:2rem;box-shadow:var(--pub-shadow-sm);transition:.15s;}
.fcard:hover{box-shadow:var(--pub-shadow);transform:translateY(-2px);}
.fcard-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(71,73,214,.1);color:var(--pub-accent2);margin-bottom:1.25rem;}
.fcard-icon svg{width:24px;height:24px;}
.fcard h3{margin:0 0 .5rem;font-weight:500;font-size:1.22rem;color:var(--pub-ink);}
.fcard p{margin:0;color:var(--pub-soft);font-size:1.05rem;line-height:1.62;}

/* ---- Steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}
.step{padding:1.25rem;}
.step-num{width:38px;height:38px;border-radius:50%;background:var(--pub-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;margin-bottom:.9rem;}
.step h3{margin:0 0 .4rem;font-weight:500;color:var(--pub-ink);font-size:1.2rem;}
.step p{margin:0;color:var(--pub-soft);font-size:1.05rem;line-height:1.62;}

/* ---- CTA band (merged into the "how it works" section) ---- */
.ctaband-inline{text-align:center;padding-top:3.5rem;margin-top:3.5rem;border-top:1px solid var(--pub-line);}
.ctaband-inline h2{font-size:clamp(2rem,4.2vw,2.7rem);font-weight:400;color:var(--pub-ink);margin:0 0 1.4rem;}
.ctaband-inline .hero-cta{justify-content:center;}

/* ---- Homepage: real-gallery preview mockup (widescreen, like a monitor, 4x3 grid of photos) ---- */
.gallery-preview-frame{background:#fff;border-radius:var(--pub-radius);display:flex;flex-direction:column;
  aspect-ratio:4/3;box-shadow:0 30px 70px -30px rgba(0,0,0,.55);padding:1.25rem;border:1px solid var(--pub-line);}
.gallery-preview-bar{flex:0 0 auto;display:flex;gap:.4rem;margin-bottom:.85rem;padding-left:.2rem;}
.gallery-preview-bar span{width:9px;height:9px;border-radius:50%;background:var(--pub-line);}
.gallery-preview-grid.g-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:.5rem;}
.gallery-preview-grid .g-item{margin:0;}
.gallery-preview-grid .g-item img{width:100%;height:100%;object-fit:cover;}
.gallery-preview-caption{flex:0 0 auto;text-align:center;color:var(--pub-soft);font-size:.9rem;margin:.85rem 0 0;}
@media(max-width:560px){
  .gallery-preview-grid.g-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);}
}

/* ---- Homepage: feature rows (text / mockup, alternating) ---- */
.feature-row{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;margin-bottom:5rem;}
.feature-row:last-of-type{margin-bottom:0;}
.feature-row-reverse .feature-row-text{order:2;}
.feature-row-reverse .feature-row-media{order:1;}
.feature-row-text{text-align:left;}
.feature-label{text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;font-weight:600;color:var(--pub-accent2);margin:0 0 .6rem;}
.feature-row-text h2{font-size:clamp(2rem,3.4vw,2.6rem);font-weight:400;color:var(--pub-ink);margin:0 0 .9rem;}
.feature-row-text p{color:var(--pub-soft);font-size:1.14rem;line-height:1.68;margin:0 0 1.4rem;max-width:56ch;}
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;text-align:left;}
.feature-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--pub-ink);font-size:1.05rem;}
.feature-list li::before{content:'\2713';flex:0 0 auto;width:18px;height:18px;margin-top:.15rem;border-radius:50%;
  background:var(--pub-accent2);color:#fff;font-size:.68rem;line-height:18px;text-align:center;}
@media(max-width:820px){
  .feature-row{grid-template-columns:1fr;gap:1.75rem;margin-bottom:3.25rem;}
  .feature-row-reverse .feature-row-text,.feature-row-reverse .feature-row-media{order:initial;}
  .feature-row-text{text-align:center;}
  .feature-row-text p{margin-left:auto;margin-right:auto;max-width:520px;}
  .feature-list{margin:0 auto;align-items:flex-start;width:fit-content;}
}

/* ---- Homepage: feature-row mockups (mockup frame chrome, reused across rows) ---- */
.mockup-frame{background:#fff;border-radius:var(--pub-radius);box-shadow:var(--pub-shadow);
  border:1px solid var(--pub-line);padding:1.35rem;}
.mockup-bar{display:flex;gap:.4rem;margin-bottom:1rem;padding-left:.15rem;}
.mockup-bar span{width:9px;height:9px;border-radius:50%;background:var(--pub-line);}
.mockup-gallery-grid.g-grid{display:grid;grid-template-columns:repeat(2,1fr);column-count:unset;gap:.6rem;}
.mockup-gallery-grid .g-item{margin:0;}
.mockup-gallery-grid .g-item img{aspect-ratio:4/3;object-fit:cover;height:100%;}
.mb-mock{position:relative;height:320px;background:#fafafa;border-radius:10px;overflow:hidden;}
.mockup-board.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:0;padding-bottom:0;}
.mockup-board .board-col{padding:.6rem;}

/* ---- Homepage: capability cards (separate section from feature rows) ---- */
.fine-print-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;}

/* ---- Homepage: "built by a photographer" ---- */
.builtby-sec{padding:4.5rem 0;}
.builtby-inner{display:flex;align-items:center;gap:3rem;}
.builtby-photo{width:280px;height:280px;object-fit:cover;border-radius:var(--pub-radius);flex:0 0 auto;box-shadow:var(--pub-shadow-sm);}
.builtby-text{flex:1;}
.builtby-text h2{font-size:clamp(2rem,3.4vw,2.6rem);font-weight:400;color:var(--pub-ink);margin:.3rem 0 1rem;}
.builtby-text p{color:var(--pub-soft);font-size:1.14rem;line-height:1.72;margin:0;}
@media(max-width:720px){.builtby-inner{flex-direction:column;text-align:center;}.builtby-photo{width:220px;height:220px;}}

/* ---- Homepage: FAQ ---- */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;}
.faq-item{border:1px solid var(--pub-line);border-radius:12px;padding:1.15rem 1.4rem;background:#fff;}
.faq-item summary{cursor:pointer;font-weight:500;font-size:1.1rem;color:var(--pub-ink);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--pub-soft);font-weight:300;margin-left:1rem;}
.faq-item[open] summary::after{content:'\2013';}
.faq-item p{margin:.85rem 0 0;color:var(--pub-soft);font-size:1.05rem;line-height:1.65;}

/* ---- Public footer ---- */
.pubfoot{background:var(--card);border-top:1px solid var(--pub-line);}
.pubfoot .container{max-width:1160px;padding-left:2.5rem;padding-right:2.5rem;}
.pubfoot-inner{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding:4.25rem 0 2.5rem;}
.pubfoot .fm{max-width:320px;}
.pubfoot .fm .wordmark{margin-bottom:.8rem;}
.pubfoot p{color:var(--pub-soft);font-size:.85rem;margin:.3rem 0;line-height:1.6;}
.pubfoot-links{display:flex;gap:3rem;flex-wrap:wrap;}
.pubfoot-links h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--pub-soft);margin:0 0 .7rem;font-weight:600;}
.pubfoot-links a{display:block;color:var(--pub-ink);text-decoration:none;font-size:.9rem;margin:.45rem 0;}
.pubfoot-links a:hover{color:var(--pub-accent);}
.pubfoot-base{border-top:1px solid var(--pub-line);padding:1.2rem 0;font-size:.8rem;color:var(--pub-soft);text-align:center;}
@media(max-width:640px){
  .pubfoot .container{padding-left:1.5rem;padding-right:1.5rem;}
  .pubfoot-inner{flex-direction:column;align-items:center;text-align:center;}
  .pubfoot .fm{max-width:100%;}
  .pubfoot-links{justify-content:center;text-align:center;gap:2.5rem;}
}

/* ---- Legal / Help doc pages ---- */
.page-doc main.wrap{max-width:1060px;}
.doc-head{padding:.5rem 0 1.8rem;border-bottom:1px solid var(--pub-line);margin-bottom:2.2rem;}
.doc-head .eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--pub-soft);font-weight:600;}
.doc-head h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:300;color:var(--pub-ink);margin:.6rem 0 .5rem;}
.doc-updated{color:var(--pub-soft);font-size:.88rem;margin:0;}
.doc-grid{display:grid;grid-template-columns:220px 1fr;gap:3rem;align-items:start;}
.doc-toc{position:sticky;top:88px;}
.doc-toc h4{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--pub-soft);margin:0 0 .8rem;font-weight:600;}
.doc-toc a{display:block;color:var(--pub-soft);text-decoration:none;font-size:.85rem;
  padding:.28rem 0 .28rem .85rem;border-left:2px solid transparent;line-height:1.4;}
.doc-toc a:hover{color:var(--pub-ink);}
.doc-toc a.active{color:var(--pub-accent);border-left-color:var(--pub-accent);font-weight:500;}
.doc-main{min-width:0;}
.doc-main h2{font-size:1.32rem;font-weight:500;color:var(--pub-ink);margin:2.4rem 0 .8rem;scroll-margin-top:88px;}
.doc-main h2:first-child{margin-top:0;}
.doc-main h3{font-size:1.02rem;font-weight:600;color:var(--pub-ink);margin:1.5rem 0 .5rem;}
.doc-main p,.doc-main li{color:#333333;line-height:1.7;}
.doc-main ul,.doc-main ol{padding-left:1.3rem;}
.doc-main li{margin:.45rem 0;}
.doc-main a{color:var(--pub-accent);}
.doc-main code{background:var(--pub-bg-alt);}
.doc-lead{font-size:1.12rem;color:var(--pub-soft)!important;}
.callout{background:var(--pub-bg-alt);border:1px solid var(--pub-line);border-left:3px solid var(--pub-accent);
  border-radius:10px;padding:.9rem 1.2rem;margin:1.3rem 0;}
.callout p{margin:.3rem 0;color:var(--pub-ink)!important;font-size:.95rem;}
@media(max-width:820px){.doc-grid{grid-template-columns:1fr;}.doc-toc{display:none;}}

/* ============================================================
   STUDIO (photographer CRM portal)
   ============================================================ */
.topbar nav a.navcta{padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--text);}
.topbar nav a.navcta:hover{border-color:var(--muted);}
.btn-light{display:inline-block;padding:.5rem 1rem;background:#fff;border:1px solid var(--line);border-radius:6px;
  text-decoration:none;color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;}
.btn-light:hover{border-color:var(--muted);}
.cardlink{text-decoration:none;color:inherit;transition:border-color .15s;}
.cardlink:hover{border-color:var(--muted);}
.actionrow .btn,.actionrow .btn-light{white-space:nowrap;}

.studio-cols{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start;margin-top:1.5rem;}
.studio-cols h2{font-size:1.05rem;font-weight:500;margin:1.8rem 0 .6rem;}
.studio-cols section h2:first-child{margin-top:0;}
.studio-cols aside h2:first-child{margin-top:0;}
@media(max-width:820px){.studio-cols{grid-template-columns:1fr;}}

.subhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.8rem 0 .6rem;}
.subhead h2{margin:0;}

.infobox{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;}
.infobox > div{margin:.3rem 0;font-size:.95rem;}
.infobox .lbl,.inv-meta .lbl{display:inline-block;min-width:64px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;}
.infobox .notes,.notes{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line);color:#333333;white-space:pre-wrap;}

.searchbar{display:flex;gap:.5rem;margin:1rem 0;}
.searchbar input{max-width:340px;}

/* pipeline mini list (dashboard) */
.pipemini{list-style:none;margin:0 0 1rem;padding:0;}
.pipemini li{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.pipemini li b{color:var(--text);}

/* timeline */
.timeline{list-style:none;margin:.6rem 0 0;padding:0;}
.timeline li{padding:.6rem 0 .6rem 1.2rem;border-left:2px solid var(--line);position:relative;margin-left:.2rem;}
.timeline li:before{content:"";position:absolute;left:-5px;top:.95rem;width:8px;height:8px;border-radius:50%;background:var(--muted);}
.tl-body{font-size:.92rem;color:var(--text);}
.tl-meta{font-size:.76rem;color:var(--muted);margin-top:.15rem;text-transform:capitalize;}
.noteform{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem;}
.noteform textarea{width:100%;}

/* pipeline board */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-bottom:1rem;margin-top:1rem;}
.board-col{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem;}
@media (max-width:780px){.board{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.board{grid-template-columns:1fr;}}
.board-head{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.2rem .3rem .5rem;}
.board-head b{color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 .5rem;font-size:.78rem;}
.board-sum{font-size:.78rem;color:var(--muted);padding:0 .3rem .5rem;}
.board-empty{color:var(--line);text-align:center;padding:1rem 0;}
.lead-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem;margin-bottom:.55rem;box-shadow:var(--pub-shadow-sm);}
.lead-title{font-weight:500;text-decoration:none;color:var(--text);font-size:.92rem;}
.lead-title:hover{color:var(--accent);}
.lead-sub{font-size:.8rem;color:var(--muted);margin-top:.1rem;}
.lead-foot{display:flex;justify-content:space-between;align-items:center;margin:.4rem 0 .3rem;font-size:.8rem;}
.lead-val{font-weight:600;}
.stagepick select{font-size:.78rem;padding:.25rem .4rem;}
/* Calendar */
.calbar{display:flex;align-items:center;gap:.6rem;margin:1rem 0;flex-wrap:wrap;}
.calmonth{font-size:1.05rem;font-weight:500;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:.5rem 0 2rem;}
.cal-dow{background:var(--bg);color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;text-align:center;padding:.5rem 0;font-weight:500;}
.cal-cell{background:var(--card);min-height:96px;padding:.35rem;}
.cal-empty{background:var(--bg);}
.cal-num{font-size:.8rem;color:var(--muted);margin-bottom:.2rem;}
.cal-today{box-shadow:inset 0 0 0 2px var(--accent,#3d5a73);}
.cal-today .cal-num{color:var(--text);font-weight:700;}
.cal-ev{display:block;font-size:.74rem;line-height:1.25;margin-bottom:.2rem;padding:.15rem .35rem;border-radius:4px;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#e4ecf3;color:#3d5a73;border-left:3px solid #3d5a73;}
.cal-ev:hover{filter:brightness(.97);}
.cal-ev-t{font-weight:600;}
.cal-confirmed{background:#e4ecf3;color:#3d5a73;border-left-color:#3d5a73;}
.cal-tentative{background:#f5ecd9;color:#8a6d2f;border-left-color:#8a6d2f;}
.cal-completed{background:#e3efe5;color:#466b4e;border-left-color:#466b4e;}
.cal-cancelled{background:#efe2e0;color:#8a4b42;border-left-color:#8a4b42;text-decoration:line-through;}
@media (max-width:640px){.cal-cell{min-height:64px;}.cal-ev{font-size:.66rem;}}

/* invoice editor */
.itemtable input{width:100%;padding:.4rem .5rem;}
.itemtable td{vertical-align:middle;}
.rowdel{background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;line-height:1;}
.rowdel:hover{color:#9b4a40;}
.invtotals{margin:1rem 0;text-align:right;}
.invtotals > div{padding:.2rem 0;color:var(--muted);}
.invtotals b{display:inline-block;min-width:110px;color:var(--text);}
.invtotals .grand{font-size:1.15rem;color:var(--text);border-top:1px solid var(--line);margin-top:.3rem;padding-top:.5rem;}
.invoice-doc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.5rem;}
.inv-meta{display:flex;justify-content:space-between;gap:2rem;margin-bottom:1.2rem;flex-wrap:wrap;}

/* extra status / stage tag colours */
.tag-draft{background:#e2e2e2;color:#4a4a4a;}
.tag-sent{background:#e4ecf3;color:#3d5a73;}
.tag-paid{background:var(--ok-bg);color:var(--ok-fg);}
.tag-void{background:#efe2e0;color:#8a4b42;}
.tag-tentative{background:#f3e6cf;color:#8a6d2f;}
.tag-confirmed{background:#e4ecf3;color:#3d5a73;}
.tag-completed{background:var(--ok-bg);color:var(--ok-fg);}
.tag-cancelled{background:#efe2e0;color:#8a4b42;}
.tag-stage{background:#e2e2e2;color:#333333;}

/* Owner viewing a photographer's Studio via "Open studio" impersonation */
.impersonate-bar{background:#f3e6cf;color:#8a6d2f;border-bottom:1px solid #e6d2a0;
  text-align:center;font-size:.85rem;padding:.55rem 1rem;}
.impersonate-bar a{color:#8a6d2f;font-weight:600;margin-left:.6rem;text-decoration:underline;}

/* owner: CRM enable checkbox row */
.stack label.checkrow{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;}
.checkrow input[type=checkbox]{margin-top:.25rem;width:auto;flex:none;}
.checkrow .hint{display:block;margin-top:.15rem;}

/* Models CRM: multi-select checkbox groups, headshot thumb/preview */
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.4rem 1rem;margin-bottom:1rem;}
.checkgrid .checkrow{margin:0;}
.model-thumb{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block;background:var(--card);}
.model-photo-preview{display:block;margin-top:.6rem;width:120px;height:120px;border-radius:10px;object-fit:cover;border:1px solid var(--line);}
.model-photo{width:180px;height:180px;border-radius:12px;object-fit:cover;border:1px solid var(--line);flex:0 0 auto;}

/* CRM: payments, contracts, settings */
.paybar{background:var(--pub-bg-alt);border:1px solid var(--line);border-radius:10px;padding:.8rem 1.1rem;
  margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;font-size:.9rem;}
.paybar .lbl{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;margin-right:.4rem;}
.paybar-actions{display:flex;gap:.5rem;}
.paybar form{margin:0;}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.5;white-space:pre;}
.contract-body{white-space:pre-wrap;line-height:1.7;color:#333333;font-size:.95rem;}
.signbox{margin-top:1.5rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.5rem;}
.signbox h2{margin-top:0;}
.signbox .btn{margin-top:.6rem;}
.sigpad-wrap{border:1px solid var(--line);border-radius:8px;background:#fff;margin-top:.4rem;overflow:hidden;}
.sigpad{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;}
.sigpad-actions{display:flex;align-items:center;gap:.8rem;margin-top:.5rem;}
.sig-hint{font-size:.82rem;}
.sig-img{display:block;max-width:280px;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff;padding:.3rem;}

/* ============================================================
   GALLERIES — studio-side management
   ============================================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem;margin-top:1rem;}
.gallery-card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:var(--pub-shadow-sm);transition:transform .15s,box-shadow .15s;}
.gallery-card:hover{transform:translateY(-2px);box-shadow:var(--pub-shadow);}
.gallery-card-cover{position:relative;aspect-ratio:4/3;background:var(--bg) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;}
.gallery-card-empty{color:var(--muted);font-size:.85rem;}
.gallery-card-tag{position:absolute;top:.6rem;right:.6rem;}
.gallery-card-body{padding:.85rem 1rem 1rem;}
.gallery-card-title{font-weight:500;font-size:.98rem;margin-bottom:.25rem;}
.gallery-card-meta{color:var(--muted);font-size:.82rem;}

.storage-meter{margin:1rem 0 1.5rem;max-width:420px;}
.storage-meter-label{font-size:.82rem;color:var(--muted);margin-bottom:.35rem;}
.storage-meter-track{background:var(--line);border-radius:999px;height:6px;overflow:hidden;}
.storage-meter-fill{background:var(--accent);height:100%;border-radius:999px;}
.storage-meter-fill.is-full{background:#9b4a40;}
.storage-meter-warning{color:#9b4a40;font-weight:600;}

.share-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;grid-column:1/-1;}
.share-row code{background:#eeeeee;padding:.3rem .6rem;border-radius:6px;font-size:.85em;word-break:break-all;}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem;margin-top:1rem;}
.photo-card{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--card);aspect-ratio:1;cursor:grab;}
.photo-card.is-dragging{opacity:.4;cursor:grabbing;}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-cover-badge{position:absolute;top:.4rem;left:.4rem;background:var(--accent);color:#fff;}
.photo-favourite-badge{position:absolute;bottom:.4rem;left:.4rem;background:rgba(0,0,0,.6);color:#fff;}
.photo-raw-badge{position:absolute;top:.4rem;right:.4rem;background:rgba(0,0,0,.6);color:#fff;font-size:.62rem;
  letter-spacing:.03em;}
.photo-video-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  pointer-events:none;}
.photo-video-badge svg{width:18px;height:18px;margin-left:2px;}
.photo-card-actions{position:absolute;inset:auto 0 0 0;display:flex;gap:.3rem;padding:.4rem;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);opacity:0;transition:opacity .15s;}
.photo-card:hover .photo-card-actions{opacity:1;}
.photo-card-actions .btn-sm{font-size:.72rem;padding:.25rem .5rem;}

/* Upload dropzone + selected-file preview */
.uploader{max-width:560px;margin-top:1rem;}
.uploader-drop{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;
  border:2px dashed var(--line);border-radius:12px;padding:2rem 1.5rem;cursor:pointer;
  color:var(--muted);background:var(--card);transition:border-color .15s,background .15s;}
.uploader-drop:hover,.uploader-drop.is-drag{border-color:var(--accent);background:var(--pub-bg-alt);}
.uploader-icon{width:28px;height:28px;color:var(--muted);}
.uploader-text{font-size:.92rem;}
.uploader-text strong{color:var(--text);}
.uploader-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.6rem;margin:1rem 0;}
.uploader-thumb{margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--bg);}
.uploader-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;}
.uploader-thumb figcaption{font-size:.68rem;color:var(--muted);padding:.3rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.uploader-video-icon{display:flex;align-items:center;justify-content:center;aspect-ratio:1;color:var(--muted);}
.uploader-video-icon svg{width:26px;height:26px;}
.uploader-raw-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;aspect-ratio:1;color:var(--muted);}
.uploader-raw-icon svg{width:26px;height:26px;}
.uploader-raw-icon span{font-size:.62rem;font-weight:700;letter-spacing:.04em;}
.uploader button[disabled]{opacity:.5;cursor:not-allowed;}
.uploader-progress{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0;}
.uploader-progress-row{display:flex;align-items:center;gap:.6rem;font-size:.82rem;}
.uploader-progress-name{flex:0 0 140px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.uploader-progress-track{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden;}
.uploader-progress-bar{height:100%;width:0;background:var(--accent);transition:width .15s linear;}
.uploader-progress-status{flex:0 0 70px;color:var(--muted);text-align:right;}
.uploader-progress-row.is-done .uploader-progress-status{color:var(--accent);}
.uploader-progress-row.is-error .uploader-progress-bar{background:#c0392b;}
.uploader-progress-row.is-error .uploader-progress-status{color:#c0392b;}

/* ============================================================
   GALLERIES — public client-facing view (Pixieset-style)
   ============================================================ */
.page-gallery .pubbar-inner{gap:1rem;}
.g-dl-all{padding:.55rem 1.3rem;font-size:.85rem;}
.g-wrap{max-width:1280px;margin:0 auto;padding:2.5rem 1.5rem 4rem;}
.g-head{text-align:center;margin-bottom:2.2rem;}
.g-head h1{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:300;color:var(--pub-ink);margin:0 0 .5rem;}
.g-head p{color:var(--pub-soft);font-size:.95rem;margin:0;}
.g-grid{column-count:1;column-gap:.9rem;}
@media(min-width:560px){.g-grid{column-count:2;}}
@media(min-width:860px){.g-grid{column-count:3;}}
@media(min-width:1180px){.g-grid{column-count:4;}}
.g-item{position:relative;break-inside:avoid;margin:0 0 .9rem;border-radius:10px;overflow:hidden;
  box-shadow:var(--pub-shadow-sm);background:var(--pub-bg-alt);cursor:zoom-in;}
.g-item img{display:block;width:100%;height:auto;}
.g-collection-item{display:block;text-decoration:none;color:inherit;cursor:pointer;}
.g-collection-caption{display:block;padding:.6rem .75rem;font-size:.9rem;color:var(--pub-ink);}
.g-item img, #gLbImg{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;}
.g-heart{position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .12s;}
.g-heart:hover{transform:scale(1.08);}
.g-heart svg{width:17px;height:17px;fill:none;stroke:#767676;stroke-width:2;transition:fill .12s,stroke .12s;}
.g-heart.is-fav svg{fill:#c1554a;stroke:#c1554a;}
.g-video-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  pointer-events:none;}
.g-video-badge svg{width:24px;height:24px;margin-left:3px;}

.g-lb{position:fixed;inset:0;background:rgba(20,17,14,.94);display:none;z-index:1000;
  flex-direction:column;align-items:center;justify-content:center;}
.g-lb.open{display:flex;}
.g-lb-stage{max-width:92vw;max-height:78vh;display:flex;align-items:center;justify-content:center;}
.g-lb-stage img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:4px;}
.g-lb-stage video{max-width:92vw;max-height:78vh;border-radius:4px;}
.g-lb-close{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:#fff;font-size:2.2rem;
  line-height:1;cursor:pointer;opacity:.85;}
.g-lb-close:hover{opacity:1;}
.g-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;
  color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.1rem;cursor:pointer;}
.g-lb-nav:hover{background:rgba(255,255,255,.22);}
.g-lb-prev{left:1rem;} .g-lb-next{right:1rem;}
.g-lb-bar{margin-top:1.2rem;display:flex;align-items:center;gap:1rem;}
.g-lb-heart{position:static;background:rgba(255,255,255,.14);}
.g-lb-heart svg{stroke:#fff;}
.g-lb-heart.is-fav svg{fill:#e0685c;stroke:#e0685c;}
.g-lb-dl{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.g-lb-dl:hover{border-color:#fff;}
@media(max-width:640px){.g-lb-nav{width:38px;height:38px;}.g-lb-prev{left:.4rem;}.g-lb-next{right:.4rem;}}

/* ============================================================
   STUDIO HOME — Pixieset-style product tiles + quick access
   ============================================================ */
.dash-welcome{font-weight:300;font-size:1.7rem;color:var(--pub-ink);margin:0 0 1.75rem;}

.product-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem;margin-bottom:2.25rem;}
@media(max-width:640px){
  .product-row{grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem;}
  .product-icon{width:44px;height:44px;}
  .product-icon svg{width:22px;height:22px;}
  .product-title{font-size:.95rem;}
}
.product-head{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;text-decoration:none;color:inherit;margin-bottom:.7rem;}
.product-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.product-icon svg{width:26px;height:26px;}
.product-icon-green{background:var(--ok-bg);color:var(--ok-fg);}
.product-icon-blue{background:#e4ecf3;color:#3d5a73;}
.product-icon-amber{background:#f5ecd9;color:#8a6d2f;}
.product-icon-purple{background:#e6e5fa;color:#4749d6;}
.product-title{font-weight:600;font-size:1.05rem;color:var(--text);}
.product-links{display:flex;flex-direction:column;gap:.5rem;padding-top:.6rem;border-top:1px solid var(--line);}
.product-links a{font-size:.88rem;color:var(--text);text-decoration:none;}
.product-links a:hover{color:var(--accent);text-decoration:underline;}

.qa-heading{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:0 0 .9rem;}
.qa-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-bottom:2rem;}
.qa-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.25rem;}
.qa-card h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem;font-size:.92rem;font-weight:600;color:var(--text);}
.qa-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.qa-dot-green{background:var(--ok-fg);}
.qa-dot-blue{background:#3d5a73;}
.qa-empty{margin:0;}
.qa-gallery-row{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;padding:.4rem 0;}
.qa-gallery-row + .qa-gallery-row{border-top:1px solid var(--line);}
.qa-gallery-thumb{width:44px;height:44px;border-radius:6px;background:var(--bg) center/cover no-repeat;flex:none;}
.qa-gallery-info{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.qa-gallery-title{font-size:.9rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qa-gallery-meta{font-size:.78rem;color:var(--muted);}
.qa-timeline{margin:0;}
.qa-timeline li{padding:.45rem 0 .45rem 1.2rem;}

/* ============================================================
   MOODBOARDS — freeform planning canvas (Milanote-style)
   ============================================================ */
.page-moodboard main.wrap{max-width:none;padding:1.5rem 1.5rem 0;}
.mb-pagehead{margin-bottom:1rem;}
.mb-collab-badge{font-size:.8rem;color:var(--pub-soft);background:var(--pub-bg-alt);border:1px solid var(--pub-line);
  border-radius:999px;padding:.3rem .8rem;}
.mb-shell{display:flex;gap:0;height:calc(100vh - 170px);min-height:420px;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1.5rem;}

.mb-toolbar{flex:none;width:88px;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:stretch;padding:.6rem .4rem;overflow-y:auto;}
.mb-tool{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:none;border:none;
  border-radius:8px;padding:.55rem .2rem;cursor:pointer;color:var(--text);font-size:.68rem;font-family:inherit;}
.mb-tool:hover{background:var(--bg);}
.mb-tool svg{width:20px;height:20px;}
.mb-tool[disabled]{color:var(--muted);opacity:.45;cursor:not-allowed;}
.mb-tool[disabled]:hover{background:none;}

.mb-canvas-viewport{flex:1;position:relative;overflow:hidden;cursor:grab;
  background-color:var(--bg);
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:20px 20px;}
.mb-canvas-viewport.is-panning{cursor:grabbing;}
.mb-canvas-inner{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;}

.mb-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 16px -10px rgba(0,0,0,.25);
  overflow:hidden;touch-action:none;display:flex;flex-direction:column;}
.mb-card:hover .mb-resize-handle, .mb-card:hover .mb-card-delete{opacity:1;}

/* Dedicated drag strip — dragging is scoped here, not the whole card, so
   text editing / checkboxes / links underneath stay clickable. */
.mb-card-handle{flex:none;height:13px;cursor:grab;background:rgba(0,0,0,.04);}
.mb-card-handle:active{cursor:grabbing;}
.mb-card-body{flex:1;min-height:0;display:flex;flex-direction:column;}

.mb-card-delete{position:absolute;top:1px;right:3px;width:18px;height:18px;border:none;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .12s;z-index:5;}
.mb-card-delete:hover{background:rgba(0,0,0,.75);}

.mb-resize-handle{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;opacity:0;
  transition:opacity .12s;z-index:5;}
.mb-resize-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);}

.mb-card-note{background:#FEF9E7;}
.mb-card-note .mb-card-handle{background:rgba(0,0,0,.05);}
.mb-note-text{width:100%;flex:1;min-height:0;padding:.4rem .7rem .7rem;font-size:.85rem;line-height:1.5;color:#333;
  overflow-y:auto;outline:none;cursor:text;}

.mb-card-heading{background:transparent;box-shadow:none;border:none;}
.mb-card-heading .mb-card-handle{background:rgba(0,0,0,.04);border-radius:8px 8px 0 0;}
.mb-heading-text{width:100%;flex:1;min-height:0;padding:.3rem .6rem;display:flex;align-items:center;
  font-size:1.4rem;font-weight:700;color:var(--text);outline:none;cursor:text;overflow-wrap:break-word;}
.mb-heading-text:empty:before{content:attr(data-placeholder);color:var(--muted);}

.mb-card-todo .mb-card-body{padding:.3rem .7rem .6rem;}
.mb-todo-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;min-height:0;}
.mb-todo-item{display:flex;align-items:center;gap:.45rem;font-size:.82rem;cursor:default;padding:.15rem 0;}
.mb-todo-item input[type=checkbox]{flex:none;width:auto;margin:0;}
.mb-todo-item span{flex:1;word-break:break-word;}
.mb-todo-item.done span{text-decoration:line-through;color:var(--muted);}
.mb-todo-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;opacity:0;flex:none;padding:0 .2rem;}
.mb-todo-item:hover .mb-todo-remove{opacity:1;}
.mb-todo-addrow{flex:none;display:flex;gap:.35rem;align-items:center;margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--line);}
.mb-todo-add{border:none;font-size:.8rem;font-family:inherit;outline:none;width:100%;flex:1;min-width:0;}
.mb-todo-addbtn{flex:none;background:none;border:1px solid var(--line);border-radius:5px;padding:.15rem .5rem;
  font-size:.72rem;color:var(--muted);cursor:pointer;}
.mb-todo-addbtn:hover{color:var(--text);border-color:var(--muted);}

.mb-card-image{background:#efefef;}
.mb-card-image .mb-card-handle{background:rgba(0,0,0,.12);}
.mb-card-image img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}

.mb-card-file{background:#fff;}
.mb-file-row{display:flex;align-items:center;gap:.5rem;height:100%;padding:0 .8rem;text-decoration:none;color:var(--text);font-size:.82rem;}
.mb-file-row svg{width:22px;height:22px;flex:none;color:var(--muted);}
.mb-file-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Connect ("Line" tool) mode */
.mb-tool.is-active{background:var(--bg);color:var(--accent);}
.mb-canvas-viewport.is-connecting{cursor:crosshair;}
.mb-card.is-connect-selected{outline:2px solid var(--accent);outline-offset:1px;}
.mb-connect-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:50;display:none;
  background:#222;color:#fff;font-size:.82rem;padding:.5rem 1rem;border-radius:999px;align-items:center;gap:.7rem;
  box-shadow:0 4px 14px rgba(0,0,0,.25);}
.mb-canvas-viewport.is-connecting .mb-connect-banner{display:flex;}
.mb-connect-banner button{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:999px;
  padding:.2rem .6rem;font-size:.78rem;cursor:pointer;}
.mb-connect-banner button:hover{background:rgba(255,255,255,.28);}
.mb-lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;}
.mb-lines line{pointer-events:none;}
.mb-lines line[stroke="transparent"]{pointer-events:stroke;}

/* Selection (click a card/stroke/shape, press Delete to remove it) */
.mb-card.is-selected{outline:2px solid var(--accent);outline-offset:2px;}

/* Ink layer — Pen + Shape tools draw straight onto the board, not into a
   card. Sits above every card (a very high z-index, since card z grows
   unbounded as cards are brought to front) so ink always reads as an
   annotation on top. pointer-events:none on the layer lets clicks reach
   cards/background beneath; individual strokes/shapes re-enable it. */
.mb-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:900000;}
.mb-ink-el{pointer-events:auto;cursor:pointer;}
.mb-ink-selection-box{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3;pointer-events:none;}
.mb-canvas-viewport.is-inking{cursor:crosshair;}

/* Floating options banner shown while the Pen/Shape tool is armed */
.mb-tool-banner{display:none;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3);
  padding:.35rem;}
.mb-tool-banner.is-open{display:block;}
.mb-tool-banner-done{flex:none;margin-left:auto;background:var(--accent);color:#fff;border:none;border-radius:6px;
  padding:.3rem .8rem;font-size:.78rem;cursor:pointer;}

/* Undo / redo — floating in the canvas corner, always available */
.mb-history-controls{position:absolute;top:10px;right:10px;z-index:60;display:flex;gap:.3rem;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.3rem;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.25);}
.mb-history-controls button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:5px;color:var(--text);cursor:pointer;padding:0;}
.mb-history-controls button svg{width:15px;height:15px;}
.mb-history-controls button:hover:not(:disabled){background:var(--bg);border-color:var(--line);}
.mb-history-controls button:disabled{color:var(--muted);opacity:.4;cursor:not-allowed;}

/* Link card */
.mb-card-link{background:#fff;}
.mb-link-row{display:flex;align-items:center;gap:.6rem;height:100%;padding:0 .8rem;text-decoration:none;color:var(--text);}
.mb-link-row svg{width:20px;height:20px;flex:none;color:var(--muted);}
.mb-link-text{min-width:0;display:flex;flex-direction:column;}
.mb-link-title{font-size:.84rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mb-link-domain{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mb-link-form{display:flex;gap:.4rem;align-items:center;height:100%;padding:0 .7rem;}
.mb-link-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:5px;padding:.35rem .5rem;font-size:.82rem;font-family:inherit;}
.mb-link-form button{flex:none;background:var(--accent);color:#fff;border:none;border-radius:5px;padding:.35rem .7rem;font-size:.78rem;cursor:pointer;}

/* Board card (opens a nested sub-board) */
.mb-card-board{background:#eef2f6;}
.mb-card-board .mb-card-handle{background:rgba(0,0,0,.05);}
.mb-board-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;height:100%;
  color:#3d5a73;font-size:.85rem;font-weight:500;padding:.5rem;text-align:center;}
.mb-board-icon{display:flex;}
.mb-board-icon svg{width:26px;height:26px;}
.mb-board-title{outline:none;cursor:text;max-width:100%;overflow-wrap:break-word;}
.mb-board-open{background:none;border:1px solid #cdd9e3;border-radius:999px;color:#3d5a73;font-size:.72rem;
  padding:.15rem .6rem;cursor:pointer;}
.mb-board-open:hover{background:#e4ecf3;}

/* Document card (opens the full-page rich-text editor) */
.mb-card-document{background:#f5f2ec;}
.mb-card-document .mb-card-handle{background:rgba(0,0,0,.05);}
.mb-document-row{color:#6b5f4f;}
.mb-document-row .mb-board-open{border-color:#ddd3c4;color:#6b5f4f;}
.mb-document-row .mb-board-open:hover{background:#ece5d8;}

/* Colour patch card */
.mb-card-color{background:#fff;}
.mb-color-wrap{display:flex;flex-direction:column;height:100%;}
.mb-color-swatch{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.mb-color-hex{color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.25);
  pointer-events:none;}
.mb-color-picker{position:absolute;inset:0;width:100%;height:100%;border:none;padding:0;cursor:pointer;opacity:0;}
.mb-color-name{flex:none;padding:.5rem .7rem;font-size:.82rem;color:var(--text);outline:none;cursor:text;
  min-height:1.3em;}
.mb-color-name:empty:before{content:attr(data-placeholder);color:var(--muted);}

/* Column card (stacked plain notes) + Comment card (timestamped entries) share the todo layout */
.mb-card-column .mb-card-body, .mb-card-comment .mb-card-body{padding:.3rem .7rem .6rem;}
.mb-comment-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;min-height:0;}
.mb-comment-item{border-bottom:1px solid var(--line);padding-bottom:.4rem;}
.mb-comment-meta{font-size:.7rem;color:var(--muted);margin-bottom:.1rem;}
.mb-comment-text{font-size:.82rem;word-break:break-word;}

/* Table card */
.mb-table-wrap{flex:1;overflow:auto;padding:.4rem;}
.mb-table{border-collapse:collapse;width:100%;}
.mb-table td{border:1px solid var(--line);padding:.3rem .5rem;font-size:.8rem;min-width:60px;outline:none;}
.mb-table-actions{flex:none;display:flex;gap:.4rem;padding:.3rem .5rem;border-top:1px solid var(--line);}
.mb-table-actions button{background:none;border:1px solid var(--line);border-radius:5px;padding:.15rem .5rem;
  font-size:.72rem;color:var(--muted);cursor:pointer;}
.mb-table-actions button:hover{color:var(--text);border-color:var(--muted);}

/* Draw card */
.mb-card-draw{background:#fff;}
.mb-draw-toolbar{flex:none;position:relative;display:flex;flex-direction:column;
  border-bottom:1px solid var(--line);}
.mb-draw-row{display:flex;align-items:center;gap:.3rem;padding:.28rem .5rem;flex-wrap:wrap;}
.mb-draw-row + .mb-draw-row{border-top:1px solid var(--line);}
.mb-draw-tool{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:5px;color:var(--muted);cursor:pointer;padding:0;}
.mb-draw-tool svg{width:14px;height:14px;}
.mb-draw-tool:hover{color:var(--text);}
.mb-draw-tool.is-active{background:var(--bg);color:var(--accent);border-color:var(--line);}
.mb-draw-widths{display:flex;align-items:center;gap:.28rem;margin:0 .1rem;}
.mb-draw-width{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:5px;padding:0;cursor:pointer;}
.mb-draw-width span{display:block;border-radius:50%;background:var(--muted);}
.mb-draw-width:hover{border-color:var(--line);}
.mb-draw-width.is-selected{border-color:var(--line);background:var(--bg);}
.mb-draw-width.is-selected span{background:var(--accent);}
.mb-draw-swatches{display:flex;gap:.22rem;margin:0 .15rem;flex-wrap:wrap;}
.mb-draw-swatch{flex:none;width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;}
.mb-draw-swatch.is-white{border-color:var(--line);}
.mb-draw-swatch.is-selected{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--accent);}
.mb-draw-swatch-nofill{background:linear-gradient(to top left, transparent calc(50% - 1px), #e53935 calc(50% - 1px), #e53935 calc(50% + 1px), transparent calc(50% + 1px)), #fff;}
.mb-draw-custom{flex:none;width:20px;height:20px;padding:0;border:1px solid var(--line);border-radius:5px;
  background:none;cursor:pointer;}
.mb-draw-clear{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:5px;color:var(--muted);cursor:pointer;padding:0;margin-left:auto;}
.mb-draw-clear svg{width:14px;height:14px;}
.mb-draw-clear:hover{color:#c0392b;border-color:var(--line);}
.mb-shape-popover{display:none;position:absolute;top:100%;left:6px;z-index:20;margin-top:2px;
  background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px -6px rgba(0,0,0,.25);
  padding:.5rem;width:186px;}
.mb-shape-popover.is-open{display:block;}
.mb-shape-types{display:flex;gap:.3rem;margin-bottom:.4rem;}
.mb-shape-type{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:5px;color:var(--muted);cursor:pointer;padding:0;}
.mb-shape-type svg{width:16px;height:16px;}
.mb-shape-type:hover{color:var(--text);}
.mb-shape-type.is-selected{background:var(--bg);color:var(--accent);border-color:var(--accent);}
.mb-shape-filllabel{font-size:.7rem;color:var(--muted);margin-bottom:.25rem;}
.mb-draw-wrap{flex:1;min-height:0;}

/* ── Document editor (full-page, distraction-free) ─────────────────── */
.page-document{background:#fff;}
.doc-topbar{display:flex;align-items:center;gap:1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--line);}
.doc-back{flex:none;color:var(--muted);text-decoration:none;font-size:.85rem;}
.doc-back:hover{color:var(--text);}
.doc-title{flex:1;font-size:1.1rem;font-weight:600;outline:none;cursor:text;text-align:center;
  overflow-wrap:break-word;padding:.1rem .5rem;}
.doc-export-wrap{position:relative;flex:none;}
.doc-export-btn{background:none;border:1px solid var(--line);border-radius:6px;padding:.4rem .8rem;
  font-size:.85rem;color:var(--text);cursor:pointer;}
.doc-export-btn:hover{background:var(--bg);}
.doc-export-menu{display:none;position:absolute;top:100%;right:0;margin-top:.4rem;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3);
  padding:.4rem;min-width:180px;z-index:40;}
.doc-export-menu.is-open{display:block;}
.doc-export-heading{font-size:.7rem;color:var(--muted);padding:.3rem .5rem;}
.doc-export-menu button{display:block;width:100%;text-align:left;background:none;border:none;
  padding:.45rem .5rem;font-size:.85rem;color:var(--text);cursor:pointer;border-radius:5px;}
.doc-export-menu button:hover{background:var(--bg);}

.doc-shell{display:flex;align-items:flex-start;min-height:calc(100vh - 58px);}
.doc-sidebar{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:1rem .4rem;border-right:1px solid var(--line);position:sticky;top:58px;}
.doc-tool-wrap{position:relative;width:100%;}
.doc-tool{width:100%;display:flex;flex-direction:column;align-items:center;gap:.2rem;background:none;
  border:1px solid transparent;border-radius:6px;padding:.45rem .2rem;color:var(--muted);cursor:pointer;
  font-size:.68rem;}
.doc-tool svg{width:17px;height:17px;}
.doc-tool b, .doc-tool i, .doc-tool u, .doc-tool s{font-size:.95rem;font-family:Georgia,serif;}
.doc-tool:hover{background:var(--bg);color:var(--text);border-color:var(--line);}
.doc-style-menu{display:none;position:absolute;left:100%;top:0;margin-left:.4rem;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3);
  padding:.35rem;min-width:150px;z-index:40;}
.doc-style-menu.is-open{display:block;}
.doc-style-menu button{display:block;width:100%;text-align:left;background:none;border:none;
  padding:.4rem .5rem;font-size:.85rem;color:var(--text);cursor:pointer;border-radius:5px;}
.doc-style-menu button:hover{background:var(--bg);}

.doc-page{flex:1;min-width:0;padding:2.5rem 2rem 6rem;max-width:760px;margin:0 auto;}
.doc-editor{outline:none;font-size:1rem;line-height:1.7;color:var(--text);min-height:60vh;}
.doc-editor p, .doc-editor h1, .doc-editor h2, .doc-editor h3, .doc-editor blockquote, .doc-editor pre{min-height:1.3em;}
.doc-editor h1{font-size:1.7rem;font-weight:700;margin:1.2rem 0 .5rem;}
.doc-editor h2{font-size:1.35rem;font-weight:700;margin:1rem 0 .4rem;}
.doc-editor h3{font-size:1.1rem;font-weight:700;margin:.8rem 0 .3rem;}
.doc-editor p{margin:0 0 .8rem;}
.doc-editor blockquote{margin:0 0 .8rem;padding-left:.9rem;border-left:3px solid var(--line);color:var(--muted);
  font-style:italic;}
.doc-editor pre{margin:0 0 .8rem;padding:.7rem .9rem;background:var(--bg);border-radius:6px;
  font-family:ui-monospace,Consolas,monospace;font-size:.85rem;overflow-x:auto;white-space:pre-wrap;}
.doc-editor ul, .doc-editor ol{margin:0 0 .8rem;padding-left:1.4rem;}
.doc-editor a{color:var(--accent);}

.doc-link-popover{display:none;position:absolute;z-index:50;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3);padding:.5rem;gap:.4rem;
  flex-direction:column;width:260px;}
.doc-link-popover.is-open{display:flex;}
.doc-link-popover input{border:1px solid var(--line);border-radius:5px;padding:.4rem .5rem;font-size:.85rem;
  font-family:inherit;}
.doc-link-popover button{align-self:flex-end;background:var(--accent);color:#fff;border:none;border-radius:5px;
  padding:.35rem .8rem;font-size:.8rem;cursor:pointer;}
.doc-link-error{font-size:.75rem;color:#c0392b;}

@media print {
  .doc-topbar, .doc-sidebar, .doc-link-popover{display:none !important;}
  .doc-shell{display:block;}
  .doc-page{max-width:none;padding:0;margin:0;}
}
.mb-draw-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;}