/* ════════════════════════════════════════════════════════════════
   SHELL — shared chrome for every tool (top bar, mode tabs, layout
   shell, panels, footer, toast). Tool-specific styles live in each
   tool's own CSS under /tools/<tool>/.
════════════════════════════════════════════════════════════════ */
:root{
  --bg:#ffffff; --panel:#fff; --ink:#1f2430; --muted:#6b7280; --line:#e3e7ef;
  --indigo:#5b3df5; --indigo-d:#4a2fe0; --indigo-soft:#efecff;
  --amber:#fbbf24; --amber-d:#f59e0b;
  --green:#19a260; --orange:#ec6a1e; --blue:#3b82f6;
  --radius:16px; --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
 

/* ── TOP BAR ── */
.topbar{background:#fff;position:sticky;top:0;z-index:50}
.topbar-main{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:12px 22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-mark{height:30px;width:auto;display:block}   /* real logo gem (gold/teal/blue mosaic) */
.brand-name{font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-name .bn-blue{color:#0140bb}   /* "Digi" — logo royal blue */
.brand-name .bn-navy{color:#0a1a5e}   /* "Lakshya" — logo deep navy */
.help-link{display:flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:16px}
.login-pill{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:700;color:#7a4d12;background:linear-gradient(135deg,#fde68a,#f59e0b);border:1px solid #f0c360;border-radius:20px;padding:8px 15px;cursor:pointer;white-space:nowrap;transition:.15s;box-shadow:0 2px 8px rgba(245,158,11,.25)}
/* sits at the right end of the tab row, below the top divider line */
.mode-tabs .login-pill{margin-left:auto;align-self:center;height:fit-content}
.login-pill:hover{filter:brightness(1.03);box-shadow:0 3px 11px rgba(245,158,11,.35)}
.login-pill i{font-size:12px}
.login-pill.is-premium{color:#14543a;background:linear-gradient(135deg,#bbf7d0,#34d399);border-color:#86e0b2;box-shadow:0 2px 8px rgba(16,185,129,.25)}
/* logout icon — only appears once premium is active, so users know the pill signs them out */
.login-pill-out{display:none;font-size:11px;opacity:.85}
.login-pill.is-premium .login-pill-out{display:inline-block}
/* gentle attention pulse on the pill while the user is still a guest */
.login-pill:not(.is-premium){animation:pillPulse 2.4s ease-in-out infinite}
@keyframes pillPulse{0%,100%{box-shadow:0 2px 8px rgba(245,158,11,.28)}50%{box-shadow:0 0 0 5px rgba(245,158,11,.16),0 3px 12px rgba(245,158,11,.45)}}
/* animated "get a plan" nudge under the Premium Login button (hidden once premium) */
.pill-nudge{position:absolute;top:calc(100% + 6px);right:22px;z-index:46;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:11px;font-weight:800;color:#b45309;background:#fff;border:1px solid #f3d9a8;border-radius:20px;padding:3px 11px;box-shadow:0 4px 12px rgba(0,0,0,.12);white-space:nowrap}
.pill-nudge:hover{background:#fffaf0}
.pill-nudge-arrow{color:#f59e0b;animation:pillNudgeBob 1.1s ease-in-out infinite}
@keyframes pillNudgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.login-pill.is-premium ~ .pill-nudge{display:none}
@media(max-width:680px){ .login-pill-txt{display:none} .login-pill{padding:8px 11px} .pill-nudge{right:11px;font-size:10px;padding:3px 9px} }
/* "See all plans & buy" link in the login modal upsell */
.login-plans-link{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--indigo);text-decoration:none;white-space:nowrap}
.login-plans-link:hover{text-decoration:underline}
.login-plans-link i{font-size:11px}
/* copy-email toast (mailto: clicks copy the address instead of opening a mail app) */
.dl-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);z-index:9999;background:#101725;color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
.dl-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* login modal extra copy */
.login-help{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5;text-align:center}
.login-help a{color:var(--indigo);font-weight:700;text-decoration:none}
.login-upsell{margin-top:14px;padding:13px 14px;border:1px solid #f3d9a8;border-radius:11px;background:linear-gradient(180deg,#fff9ee,#fffdf8);text-align:left}
.login-upsell>strong{display:block;font-size:12.5px;color:#7a4d12;margin-bottom:5px}
.login-upsell p{font-size:11.5px;line-height:1.55;color:#6a5535;margin-bottom:6px}
.login-upsell p:last-child{margin-bottom:0}
.login-upsell a{color:var(--indigo);font-weight:700;text-decoration:none}
.login-upsell-client{color:#15794a !important}
/* "lock in current rate" note inside the login upsell */
.login-lockin{margin-top:9px !important;padding:9px 11px;border:1px solid #d6cbfb;border-radius:9px;background:linear-gradient(180deg,#f5f1ff,#fbf8ff);color:#4a3d72 !important;font-size:11.5px;line-height:1.5}
.login-lockin i{color:#6d28d9}
.login-lockin strong{color:#4c1d95}

/* ── Early-bird announcement bar (between the tabs and the tools) ── */
.announce-bar{max-width:1280px;margin:14px auto 0;padding:9px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(90deg,#eef1ff,#f7ecff);border:1px solid #ddd6fb;border-radius:13px}
.announce-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#6d28d9,#db2777);border-radius:20px;padding:4px 10px;flex:none}
.announce-txt{flex:1;min-width:200px;font-size:12.5px;line-height:1.45;color:#3a3550}
.announce-txt strong{color:#4c1d95}
.announce-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#6d4bf0,#9333ea);border:none;border-radius:9px;padding:8px 15px;cursor:pointer;white-space:nowrap;flex:none;transition:.15s}
.announce-cta:hover{filter:brightness(1.07)}
@media(max-width:620px){.announce-bar{margin-top:10px}.announce-cta{width:100%;justify-content:center}}

/* diary index tabs — coloured "paper" page-dividers that PARTIALLY OVERLAP each
   other (stacked, like a planner) to save horizontal space. Icons are hidden and
   each tab carries extra right padding, so the overlap only covers empty paper —
   every label stays fully visible. Later tabs paint over earlier ones (DOM order),
   and the rightmost tab is fully revealed. */
.mode-tabs{display:flex;gap:0;max-width:1280px;margin:-1px auto 0;padding:0 22px;align-items:flex-start;position:relative}
.mode-tab{
  display:flex;align-items:center;text-align:left;
  border:1px solid var(--line);border-top:none;
  border-radius:0 0 17px 17px;
  /* left padding (17) ≥ overlap (14): a label never sits in the overlap zone,
     so it stays fully visible whichever tab is on top */
  padding:8px 24px 11px 17px;
  margin-left:-14px;                    /* partial overlap with the previous tab */
  background:#f4f5f9;color:#5b6470;
  box-shadow:4px 5px 9px -3px rgba(20,30,60,.18);
  position:relative;top:0;transition:.16s ease}
.mode-tab:first-child{margin-left:0}
.mode-tab:not([disabled]):hover{top:2px}
.mode-tab[disabled]{cursor:not-allowed;opacity:.92}
/* active = the open page: brighter and lifted above the stack so its full label
   always reads on top */
.mode-tab.active{padding:11px 31px 17px 21px;top:0;box-shadow:6px 9px 18px -4px rgba(20,30,60,.24)}
.mode-tab.active .mode-txt strong{font-size:15.5px}      /* selected tab ~20% larger */
.mode-tab.active .mode-txt small{font-size:12.5px}
/* Stack LEFT-over-right: each tab sits in front of the ones to its right, so the
   tabs cascade behind. The active tab is always lifted to the very top.
   (Declared after the rules above so the active z-index wins.) */
.mode-tab:nth-child(1){z-index:4}
.mode-tab:nth-child(2){z-index:3}
.mode-tab:nth-child(3){z-index:2}
.mode-tab:nth-child(4){z-index:1}
.mode-tab.active{z-index:6}
/* resting tabs — exact dominant logo-gem hues: green #009858 · orange #ff5c00 · blue #0049c8 · gold #ffb200 */
.mode-tab.t-green {background:linear-gradient(180deg,#d6f5e2,#b4eacc);border-color:#8fdbb0;color:#097c47}
.mode-tab.t-orange{background:linear-gradient(180deg,#ffe6d6,#ffceb0);border-color:#ffb88e;color:#c0410a}
.mode-tab.t-blue  {background:linear-gradient(180deg,#d9e7fd,#bbd4fb);border-color:#9bbcf3;color:#0c47bf}
.mode-tab.t-gold  {background:linear-gradient(180deg,#fff1cb,#ffe39c);border-color:#f6cd6c;color:#9a6b00}
/* active tab: stronger fill + bold bottom edge in the full gem colour */
.mode-tab.active.t-green {background:linear-gradient(180deg,#c7f0d9,#a5e5c4);border-color:#84d5a8;border-bottom:3px solid #0aa258;color:#06603a}
.mode-tab.active.t-orange{background:linear-gradient(180deg,#ffdcc6,#ffc09e);border-color:#ffb085;border-bottom:3px solid #f25a06;color:#8f3208}
.mode-tab.active.t-blue  {background:linear-gradient(180deg,#cadef9,#a8c7f6);border-color:#8fb4ef;border-bottom:3px solid #1257d6;color:#0a3690}
.mode-tab.active.t-gold  {background:linear-gradient(180deg,#ffe9b4,#ffd980);border-color:#f3c860;border-bottom:3px solid #f5a300;color:#6f4e00}
.mode-ico{display:none}   /* hidden — saves horizontal space for the overlapping tabs */
.mode-ico.gold{background:#e6a51b}.mode-ico.orange{background:#ec6a1e}.mode-ico.green{background:#0f9d63}.mode-ico.blue{background:#2563eb}
.mode-txt{display:flex;flex-direction:column;gap:1px}
.mode-txt strong{font-size:12.5px;font-weight:800;color:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.2}
.mode-txt small{font-size:10.5px;opacity:.72;color:inherit;font-weight:600;white-space:nowrap;line-height:1.2}
.mode-txt small i{margin-right:1px}

/* ── ELECTRIC-AQUA "Generate" CTA ──
   The primary Generate action in each tool wears this so it visibly stands
   apart from the amber/indigo CTAs and pulls the eye. Uses !important to win
   over each tool's own button colour, and respects reduced-motion. */
.btn-electric{
  background:linear-gradient(135deg,#2cf0df 0%,#06c7e0 46%,#0a9bea 100%) !important;
  color:#04323b !important;
  border:none !important;
  box-shadow:0 6px 18px rgba(6,182,212,.5) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.18);
  animation:btnElectricPulse 2.6s ease-in-out infinite;
}
.btn-electric i{color:#04323b !important}
.btn-electric:hover{filter:brightness(1.07) saturate(1.06);box-shadow:0 9px 26px rgba(8,206,231,.66) !important}
.btn-electric:active{filter:brightness(.97)}
.btn-electric:disabled{animation:none;filter:none;box-shadow:0 4px 12px rgba(6,182,212,.3) !important}
@keyframes btnElectricPulse{
  0%,100%{box-shadow:0 6px 16px rgba(6,182,212,.40)}
  50%{box-shadow:0 7px 26px rgba(10,212,233,.72)}
}
@media(prefers-reduced-motion:reduce){ .btn-electric{animation:none} }

/* ── TOOL MOUNT ── one .tool per build; only the active one is shown ── */
.tool[hidden]{display:none}

/* ── LOCKED TOOL GATE — light blur (content stays ~75% visible) + login box ── */
.tool.locked>main,.tool.locked>.app{filter:blur(4px);pointer-events:none;user-select:none;-webkit-user-select:none}
.lock-gate{display:none}
.tool.locked>.lock-gate{display:grid;place-items:start center;position:fixed;left:0;right:0;top:0;bottom:0;z-index:40;padding:max(8vh,90px) 18px 24px;background:rgba(248,249,253,.28);overflow-y:auto}
.lock-card{background:#fff;width:100%;max-width:380px;border-radius:18px;padding:30px 28px 26px;text-align:center;box-shadow:0 24px 60px rgba(16,24,40,.22);border:1px solid var(--line)}
.lock-ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px;font-size:23px;color:#fff;background:linear-gradient(135deg,#5b3df5,#9333ea)}
.lock-card h3{font-size:19px;font-weight:800;margin-bottom:8px}
.lock-sub{font-size:12.5px;line-height:1.55;color:var(--muted);margin-bottom:18px}
.lock-sub a{color:var(--indigo);font-weight:700;text-decoration:none}
.lock-sub a:hover{text-decoration:underline}
.lock-form{display:flex;flex-direction:column;gap:10px}
.lock-form input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:13.5px;background:#fafbff}
.lock-form input:focus{outline:none;border-color:var(--indigo);background:#fff;box-shadow:0 0 0 3px rgba(91,61,245,.12)}
.lock-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--indigo);color:#fff;border:none;border-radius:10px;padding:12px;font-weight:700;font-size:13.5px;cursor:pointer;transition:.15s;margin-top:2px}
.lock-btn:hover{background:var(--indigo-d)}
.lock-err{font-size:11.5px;font-weight:600;color:#c0392b;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:2px}
.lock-err[hidden]{display:none}

/* shared login modal (HTML5 Build Ad premium sizes) */
.login-modal[hidden]{display:none}
.login-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.login-backdrop{position:absolute;inset:0;background:rgba(13,21,38,.5);backdrop-filter:blur(2px)}
.login-card{position:relative;z-index:1;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.login-card .legal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:8px}
.login-card .legal-close:hover{background:#f1f3f8;color:var(--ink)}

/* small Terms link sitting under an action button */
.action-terms{display:inline-block;background:none;border:none;padding:4px 2px 0;margin:6px auto 0;font:inherit;font-size:11px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.action-terms:hover{color:var(--indigo)}
.coming-soon-panel{max-width:560px;margin:60px auto;text-align:center;padding:40px 28px;border:1px dashed var(--line);border-radius:var(--radius);background:#fafbff}
.coming-soon-panel .cs-ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;font-size:26px;margin:0 auto 16px}
.coming-soon-panel h2{font-size:22px;font-weight:800;margin-bottom:8px}
.coming-soon-panel p{color:var(--muted);font-size:14px}

/* ── SHARED LAYOUT ── */
.app{max-width:1280px;margin:18px auto;padding:0 18px;display:flex;flex-direction:column;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.05)}

/* honest "automated drafts → talk to experts for quality" callout near results */
.quality-cta{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:14px 16px;border:1px solid #f3d9a8;border-radius:12px;background:linear-gradient(180deg,#fff9ee,#fffdf8)}
.quality-cta>i{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:15px;color:#fff;background:linear-gradient(135deg,#f59e0b,#ec6a1e)}
.quality-cta strong{display:block;font-size:13px;font-weight:800;color:#7a4d12;margin-bottom:2px}
.quality-cta span{font-size:12px;line-height:1.5;color:#8a6a3c}
.quality-cta a{color:var(--indigo);font-weight:700;text-decoration:none}
.quality-cta a:hover{text-decoration:underline}

/* small disclaimer shown next to download/export actions */
.dl-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.45;color:var(--muted);background:#f7f8fb;border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-top:12px}
.dl-note i{color:#9aa3b8;margin-top:1px;flex:none}

 
/* ── LEGAL MODAL (Terms of Use) ── */
.legal-modal[hidden]{display:none}
.legal-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.legal-backdrop{position:absolute;inset:0;background:rgba(13,21,38,.55);backdrop-filter:blur(2px)}
.legal-card{position:relative;background:#fff;color:var(--ink);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;border-radius:16px;padding:30px 30px 26px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.legal-card h2{font-size:21px;font-weight:800;margin-bottom:4px}
.legal-updated{font-size:11.5px;color:var(--muted);margin-bottom:16px}
.legal-card>p{font-size:13px;line-height:1.6;color:#3a4250;margin-bottom:14px}
.legal-list{margin:0 0 14px;padding-left:18px;display:flex;flex-direction:column;gap:11px}
.legal-list li{font-size:12.5px;line-height:1.55;color:#3a4250}
.legal-list strong{color:var(--ink)}
.legal-card a{color:var(--indigo);font-weight:600;text-decoration:none}
.legal-card a:hover{text-decoration:underline}
.legal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:8px}
.legal-close:hover{background:#f1f3f8;color:var(--ink)}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#101725;color:#fff;padding:12px 18px;border-radius:11px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.3s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success .toast-icon{color:#34d399}.toast.error .toast-icon{color:#f87171}.toast.info .toast-icon{color:#60a5fa}

@media(max-width:900px){ .mode-txt small{display:none} }
@media(max-width:820px){ .topbar-main{flex-wrap:wrap} .mode-tabs{flex-wrap:wrap} }

/* ── TEAM BAND (shared, shown on every tool page) ── */
.team-band{background:#eef0fb;border-top:1px solid var(--line);padding:26px 18px;text-align:center}
.team-avatars{display:flex;justify-content:center;margin-bottom:12px}
.team-avatars img{width:46px;height:46px;border-radius:50%;border:3px solid #fff;margin-left:-12px;object-fit:cover;box-shadow:0 2px 6px rgba(20,30,60,.18)}
.team-avatars img:first-child{margin-left:0}
.team-more{width:46px;height:46px;border-radius:50%;border:3px solid #fff;margin-left:-12px;background:#312e81;color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 6px rgba(20,30,60,.18)}
.team-line{font-size:17px;font-weight:800;color:#3a4257;letter-spacing:-.01em}
@media(max-width:560px){ .team-avatars img,.team-more{width:38px;height:38px;margin-left:-10px} .team-line{font-size:15px} }

/* ── Existing-client callout ── */
.client-callout{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;text-align:center;
  padding:14px 22px;background:linear-gradient(180deg,#eafaf0,#f3fcf6);border-top:1px solid #cdebd7}
.client-callout>i{color:#16a34a;font-size:17px;flex:none}
.client-callout p{margin:0;font-size:13.5px;line-height:1.5;color:#2f4a3c}
.client-callout p strong{color:#15794a}
.client-callout-cta{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#16a34a,#0e9f6e);border-radius:9px;padding:8px 16px;text-decoration:none;white-space:nowrap;transition:.15s}
.client-callout-cta:hover{filter:brightness(1.06)}

/* ── TRUST BAR (page-level, above footer) ── */
.trust-bar{background:#fff;border-top:1px solid var(--line)}
.trust-inner{max-width:1280px;margin:0 auto;padding:20px 18px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-item{display:flex;align-items:center;gap:11px}
.trust-item i{width:34px;height:34px;border-radius:10px;background:#eef1f8;color:var(--indigo);display:grid;place-items:center;font-size:15px;flex:none}
.trust-item span{display:flex;flex-direction:column}
.trust-item strong{font-size:13px;font-weight:700}
.trust-item small{font-size:11px;color:var(--muted)}
@media(max-width:820px){ .trust-inner{grid-template-columns:1fr 1fr} }