/* ============================================================================
LivoDraft — SHARED TOOL-PAGE UI STANDARD
Link this in every tool page's :
✓ FREE (or .ld-badge.paid)
Classes are ld-prefixed so they never collide with a page's own CSS.
Future tools: link this file + paste the header block above. That's the standard.
============================================================================ */
:root{
--ld-gold:#CBB176;--ld-gold-l:#E7D6AC;--ld-gold-d:#94773C;--ld-copper-d:#7A5E2E;
--ld-ink:#0D0D0D;--ld-muted:#5b554c;--ld-faint:#a99f8d;--ld-line:#E8E3DA;
--ld-green:#1f7a43;--ld-greenbg:#E7F3EA;
--ld-fd:'DM Serif Display','Cormorant Garamond',serif;
--ld-fb:'DM Sans','Inter',sans-serif;
--ld-grad-gold:linear-gradient(135deg,#E7D6AC,#CDB275 55%,#AE8C4A);
}
.ld-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 14px;margin:0 0 20px;border-bottom:1px solid var(--ld-line)}
.ld-brand{font-family:var(--ld-fd);font-size:22px;color:var(--ld-ink);text-decoration:none;line-height:1}
.ld-brand b{color:var(--ld-gold-d);font-weight:400}
.ld-brand small{display:block;font-family:var(--ld-fb);font-size:9px;font-weight:500;color:var(--ld-faint);letter-spacing:.02em;margin-top:2px}
.ld-back{display:inline-flex;align-items:center;gap:5px;font-family:var(--ld-fb);font-size:12.5px;font-weight:600;color:var(--ld-ink);text-decoration:none;padding:9px 15px;border:1px solid var(--ld-line);border-radius:10px;background:#fff;white-space:nowrap;box-shadow:0 3px 8px -4px rgba(31,28,22,.25);transition:transform .15s,border-color .15s,color .15s}
.ld-back:hover{border-color:var(--ld-gold);color:var(--ld-copper-d);transform:translateY(-1px)}
.ld-back svg{width:14px;height:14px}
.ld-titlerow{display:flex;align-items:flex-start;gap:15px;margin:0 0 16px}
.ld-toolic{flex:0 0 50px;height:50px;border-radius:14px;background:var(--ld-grad-gold);display:flex;align-items:center;justify-content:center;color:#3a2f10;box-shadow:0 8px 20px -8px rgba(171,139,76,.6)}
.ld-toolic svg{width:25px;height:25px}
.ld-tt{flex:1;min-width:0}
.ld-h1{font-family:var(--ld-fd);font-size:32px;font-weight:700;letter-spacing:-.01em;line-height:1.06;margin:0;color:var(--ld-ink)}
.ld-lede{font-family:var(--ld-fb);font-size:13.5px;color:var(--ld-muted);line-height:1.55;margin:4px 0 0;max-width:660px}
.ld-lede b{color:var(--ld-ink)}
.ld-badge{align-self:center;background:var(--ld-greenbg);color:var(--ld-green);font-family:var(--ld-fb);font-size:11px;font-weight:700;letter-spacing:.05em;padding:5px 11px;border-radius:999px;white-space:nowrap}
.ld-badge.paid{background:#FBF1D9;color:var(--ld-copper-d)}
/* shared gold progress ring — */
.ld-ring{width:128px;height:128px;position:relative;margin:8px auto 2px}
.ld-ring .ld-ring-c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ld-fd);font-size:30px;color:var(--ld-ink)}
.ld-ringfill{transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1)}
@media(max-width:640px){.ld-h1{font-size:26px}.ld-titlerow{gap:12px}.ld-toolic{flex-basis:44px;height:44px}.ld-topbar{margin-bottom:14px}}