/* Prompt Minds "liquid glass" layer — loaded after each page's own CSS.
 * Glass is faked with layered gradients, a top gloss and inset edge light: no backdrop-filter on content, so it stays
 * fast on phones (blur is GPU-heavy when repeated). Respects light/dark theme and prefers-reduced-motion. */
:root {
  --g-surface: linear-gradient(145deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.06) 100%);
  --g-edge: rgba(255,255,255,.16);
  --g-edge-hi: rgba(255,255,255,.38);
  --g-shadow: 0 18px 50px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
  --g-inset: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.03);
  --g-gloss: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 38%, rgba(255,255,255,0) 60%);
  --g-prism: conic-gradient(from 200deg at 85% 110%, rgba(255,120,80,0), rgba(255,170,90,.12), rgba(120,220,255,.12), rgba(170,120,255,.1), rgba(255,120,80,0) 60%);
  --g-primary: linear-gradient(135deg, #2aa7ef 0%, #1b7fe0 45%, #7b4fd6 100%);
  --g-primary-shadow: 0 10px 28px rgba(27,140,224,.42), 0 2px 6px rgba(27,100,200,.35);
  --g-radius-pill: 999px;
  --g-panel: linear-gradient(150deg, rgba(30,36,62,.96) 0%, rgba(15,18,34,.98) 55%, rgba(20,24,44,.97) 100%);
  --g-panel-gloss: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 30%);
}
[data-theme="light"] {
  --g-surface: linear-gradient(145deg, rgba(255,255,255,.92) 0%, rgba(246,249,253,.78) 50%, rgba(255,255,255,.88) 100%);
  --g-edge: rgba(15,30,60,.10);
  --g-edge-hi: rgba(255,255,255,.95);
  --g-shadow: 0 16px 40px rgba(30,50,90,.12), 0 2px 6px rgba(30,50,90,.08);
  --g-inset: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(15,30,60,.05), inset 0 0 0 1px rgba(255,255,255,.6);
  --g-gloss: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 62%);
  --g-prism: conic-gradient(from 200deg at 85% 110%, rgba(255,120,80,0), rgba(255,170,90,.28), rgba(120,210,255,.28), rgba(170,120,255,.24), rgba(255,120,80,0) 60%);
  --g-panel: linear-gradient(150deg, rgba(255,255,255,.95) 0%, rgba(247,250,254,.9) 60%, rgba(255,255,255,.94) 100%);
  --g-panel-gloss: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 30%);
}

/* ---------- glass surfaces: main tool panel, result boxes, stat tiles, upload zone ---------- */
.tool-content > .tool-card, .sidebar { background: var(--g-panel) !important; }
.result-display, .breakdown-item, .upload-area, .tool-section-card { background: var(--g-surface) !important; }
.tool-content > .tool-card,
.result-display, .breakdown-item, .upload-area, .tool-section-card {
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-inset), var(--g-shadow) !important;
  position: relative; isolation: isolate;
}
.tool-content > .tool-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--g-panel-gloss); }
.result-display::after, .breakdown-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: var(--g-gloss), var(--g-prism);
  background-repeat: no-repeat;
}
.upload-area { border-style: dashed !important; }
.upload-area:hover, .upload-area.dragover { border-color: rgba(27,152,224,.6) !important; box-shadow: var(--g-inset), 0 0 0 4px rgba(27,152,224,.12), var(--g-shadow) !important; }

/* ---------- buttons ---------- */
.btn, .tenure-btn, .btn-secondary {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--g-radius-pill) !important;
  background: var(--g-surface) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-inset), 0 6px 18px rgba(0,0,0,.18) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.btn::before, .tenure-btn::before, .btn-share::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 55%, rgba(255,255,255,0) 100%);
  opacity: .45;
}
.btn-primary, .tenure-btn.active {
  background: var(--g-primary) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(20,40,120,.35), var(--g-primary-shadow) !important;
  text-shadow: 0 1px 1px rgba(0,30,80,.35);
}
.btn-primary::before, .tenure-btn.active::before { opacity: .85; }
.btn:hover, .tenure-btn:hover, .btn-share:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active, .tenure-btn:active, .btn-share:active { transform: translateY(0) scale(.98); }
.btn:focus-visible, .tenure-btn:focus-visible { outline: none; box-shadow: var(--g-inset), 0 0 0 3px rgba(27,152,224,.45) !important; }

/* ---------- inputs ---------- */
.calc-input-wrapper, .tdt-textarea, select.calc-input, .search-wrapper, .blog-search-wrap {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
}
.calc-input-wrapper:focus-within, .tdt-textarea:focus, select.calc-input:focus, .search-wrapper:focus-within, .blog-search-wrap:focus-within {
  border-color: rgba(27,152,224,.65) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.1), 0 0 0 4px rgba(27,152,224,.14) !important;
}
.calc-input-wrapper .calc-input { background: transparent !important; border: 0 !important; box-shadow: none !important; }
[data-theme="light"] .calc-input-wrapper, [data-theme="light"] .tdt-textarea, [data-theme="light"] select.calc-input { box-shadow: inset 0 2px 5px rgba(15,30,60,.07), inset 0 1px 0 #fff !important; }

/* ---------- toggle pill group (Years/Months, tabs) ---------- */
.tenure-toggle { padding: 4px; border-radius: var(--g-radius-pill); background: var(--g-surface); border: 1px solid var(--g-edge); box-shadow: inset 0 2px 6px rgba(0,0,0,.14); }

/* ---------- sidebar tool links ---------- */
.sidebar { border: 1px solid var(--g-edge) !important; box-shadow: var(--g-inset), var(--g-shadow) !important; }
.sidebar .tool-list a { border-radius: 14px !important; border: 1px solid var(--g-edge) !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important; transition: transform .15s ease, border-color .15s ease !important; }
.sidebar .tool-list a:hover { transform: translateX(3px); border-color: rgba(27,152,224,.5) !important; }
.sidebar .tool-list a.active { background: linear-gradient(135deg, rgba(42,167,239,.22), rgba(123,79,214,.18)) !important; border-color: rgba(27,152,224,.55) !important; }
[data-theme="light"] .sidebar .tool-list a { background: linear-gradient(180deg, #fff, #f6f9fd) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(15,30,60,.06) !important; }

/* ---------- coloured glass buttons (keep their meaning: green = share/WhatsApp/success, red = danger) ---------- */
.btn.btn-share, .btn-share, .btn-whatsapp, .btn-success {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--g-radius-pill) !important;
  background: linear-gradient(135deg, #34d97a 0%, #1fae63 50%, #12876b 100%) !important;
  border: 1px solid rgba(255,255,255,.28) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,70,40,.3), 0 10px 26px rgba(25,170,95,.35) !important;
  text-shadow: 0 1px 1px rgba(0,60,30,.3);
}
.btn-danger {
  background: linear-gradient(135deg, #ff7a6b 0%, #f0473c 55%, #c8283a 100%) !important;
  border: 1px solid rgba(255,255,255,.28) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(110,0,20,.3), 0 10px 26px rgba(230,60,60,.32) !important;
}
.btn-whatsapp::before, .btn-success::before, .btn-danger::before { opacity: .85; }
.btn-text { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.btn-text::before { display: none; }

/* ---------- space between buttons ---------- */
.btn-group { display: flex; flex-wrap: wrap; gap: 14px !important; }
.btn-group > .btn, .btn-group > a.btn, .btn-group > label.btn { margin: 0 !important; }
:not(.btn-group) > .btn + .btn, :not(.btn-group) > .btn + a.btn { margin-left: 12px; }
@media (max-width: 480px) { .btn-group { gap: 10px !important; } }

/* ---------- small glass cards used across pages ---------- */
.similar-card, .stat-box, .tip-item, .download-card, .preview-box, .faq-item, .connect-card,
.hub-card, .tools-grid .tool-card, .seo-feature-card, .feature-card, .how-work-card, .founder-stat-card, .pmqc, .blog-card {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-inset), 0 10px 28px rgba(0,0,0,.22) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
[data-theme="light"] :is(.similar-card, .stat-box, .tip-item, .download-card, .preview-box, .faq-item, .connect-card, .hub-card, .tools-grid .tool-card, .seo-feature-card, .feature-card, .how-work-card, .founder-stat-card, .pmqc, .blog-card) { box-shadow: var(--g-inset), 0 8px 22px rgba(30,50,90,.09) !important; }
:is(.similar-card, .hub-card, .tools-grid .tool-card, .connect-card, .feature-card, .blog-card):hover {
  transform: translateY(-3px);
  border-color: rgba(27,152,224,.45) !important;
  box-shadow: var(--g-inset), 0 16px 38px rgba(27,120,224,.22) !important;
}

/* ---------- pills & chips ---------- */
.hero-badge, .interest-pill, .pmqc-pop a, .tool-meta, .category-pill:not(.active) {
  background: var(--g-surface) !important; border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.12) !important;
}
.pmqc-pop a:hover { background: var(--g-primary) !important; color: #fff !important; }
.category-pill.active { background: var(--g-primary) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--g-primary-shadow) !important; }
.pmqc-go, .pmqc-swap { background: var(--g-primary) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(20,40,120,.35), var(--g-primary-shadow) !important; }
.pmqc-field select { background: var(--g-surface) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.12) !important; }

/* ---------- header menu panel: one element, so a real frosted blur is affordable here ---------- */
html #pm-mega { background: rgba(13,13,28,.82); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.5); }
html[data-theme="light"] #pm-mega { background: rgba(255,255,255,.84); border-color: rgba(15,30,60,.1); box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(20,30,60,.16); }

/* readable text on neutral glass buttons inside tools (some tool CSS gives plain .btn white text meant for a coloured fill).
 * Scoped to tool content: on the homepage the page's own CSS keeps .btn blue, so its white text must stay. */
.tool-content :is(.btn:not(.btn-primary):not(.btn-share):not(.btn-whatsapp):not(.btn-success):not(.btn-danger):not(.btn-text), .tenure-btn:not(.active)) { color: #eef1f8 !important; }
[data-theme="light"] .tool-content :is(.btn:not(.btn-primary):not(.btn-share):not(.btn-whatsapp):not(.btn-success):not(.btn-danger):not(.btn-text), .tenure-btn:not(.active)) { color: #1f2a44 !important; text-shadow: none !important; }
/* form submit buttons are the main action: primary glass */
.form-container :is(button[type="submit"], input[type="submit"], .btn[type="submit"]), .form-container #check-referral-btn {
  background: var(--g-primary) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(20,40,120,.35), var(--g-primary-shadow) !important; text-shadow: 0 1px 1px rgba(0,30,80,.35) !important;
}
[data-theme="light"] .form-container :is(label, h2) { color: #fff !important; }

/* ---------- site forms (contact, project enquiry): glass fields on the gradient card ---------- */
.form-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.32) !important; border-radius: 14px !important; color: #fff !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.form-container :is(input, textarea)::placeholder { color: rgba(255,255,255,.7) !important; }
.form-container :is(input, textarea, select):focus {
  outline: none !important; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)) !important;
  border-color: rgba(255,255,255,.75) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.14), 0 0 0 4px rgba(255,255,255,.18) !important;
}
.form-container select option { color: #1a1a2e; }
.form-container .input-icon { color: rgba(255,255,255,.85) !important; z-index: 2; }
[data-theme="light"] .form-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)) !important; color: #1a1a2e !important;
  border-color: rgba(255,255,255,.9) !important; box-shadow: inset 0 2px 5px rgba(15,30,60,.08), 0 2px 8px rgba(15,30,60,.06) !important;
}
[data-theme="light"] .form-container :is(input, textarea)::placeholder { color: #6b7280 !important; }
[data-theme="light"] .form-container .input-icon { color: #1b6ec2 !important; }

/* ---------- hover: a light streak sweeps across the glass + coloured glow (mouse devices only) ---------- */
:is(.btn, .tenure-btn, .btn-share, .btn-whatsapp, .btn-success, .btn-danger, .pmqc-go, .category-pill)::after {
  content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 45% !important; height: 100% !important;
  border-radius: 0 !important; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 75%, rgba(255,255,255,0) 100%) !important;
  transform: translateX(-170%) skewX(-18deg); opacity: 0; transition: none !important;
}
.pmqc-go, .category-pill { position: relative; overflow: hidden; isolation: isolate; }
[data-theme="light"] :is(.btn-secondary, .tenure-btn:not(.active), .btn:not(.btn-primary):not(.btn-share):not(.btn-danger):not(.btn-success):not(.btn-whatsapp))::after {
  background: linear-gradient(105deg, rgba(27,152,224,0) 0%, rgba(27,152,224,.06) 25%, rgba(27,152,224,.22) 50%, rgba(27,152,224,.06) 75%, rgba(27,152,224,0) 100%) !important;
}
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .tenure-btn, .btn-share, .btn-whatsapp, .btn-success, .btn-danger, .pmqc-go, .category-pill):hover::after {
    opacity: 1; transform: translateX(330%) skewX(-18deg);
    transition: transform .95s cubic-bezier(.45,.05,.25,1), opacity .2s ease !important;
  }
  :is(.btn, .tenure-btn):not(.btn-primary):not(.active):not(.btn-share):not(.btn-whatsapp):not(.btn-success):not(.btn-danger):hover {
    border-color: rgba(27,152,224,.55) !important;
    box-shadow: var(--g-inset), 0 0 0 3px rgba(27,152,224,.12), 0 10px 26px rgba(27,152,224,.28) !important;
  }
  :is(.btn-primary, .tenure-btn.active, .pmqc-go):hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(20,40,120,.35), 0 0 0 3px rgba(42,167,239,.18), 0 14px 34px rgba(27,140,224,.55) !important;
  }
  :is(.btn-share, .btn-whatsapp, .btn-success):hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,70,40,.3), 0 0 0 3px rgba(52,217,122,.18), 0 14px 34px rgba(25,170,95,.5) !important;
  }
  .btn-danger:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px rgba(240,71,60,.18), 0 14px 34px rgba(230,60,60,.45) !important; }
  :is(.btn, .tenure-btn, .pmqc-go) > i { transition: transform .25s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
  :is(.btn, .tenure-btn, .pmqc-go):hover > i { transform: scale(1.15) rotate(-6deg); }
}
.btn-text::after { display: none !important; }

@media (prefers-reduced-motion: reduce) { :is(.btn, .tenure-btn, .btn-share, .btn-whatsapp, .btn-success, .btn-danger, .pmqc-go, .category-pill)::after { display: none !important; } :is(.btn, .tenure-btn, .pmqc-go):hover > i { transform: none !important; } .btn, .tenure-btn, .btn-share, .sidebar .tool-list a, .similar-card, .hub-card, .tools-grid .tool-card, .connect-card, .feature-card { transition: none !important; } :is(.similar-card, .hub-card, .tools-grid .tool-card, .connect-card, .feature-card, .btn, .tenure-btn):hover { transform: none !important; } }
@media (max-width: 768px) { :root { --g-shadow: 0 10px 28px rgba(0,0,0,.3); } [data-theme="light"] { --g-shadow: 0 10px 24px rgba(30,50,90,.1); } }