/* © 2026 Jaival Patel */

/* Enforce strict flat aesthetics: disable gradients and blurs globally */
* {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
}

/* Material 3 Token System & Custom Properties */
:root {
  --md-primary: hsl(25, 75%, 65%);
  --md-on-primary: #ffffff;
  --md-surface: hsl(20, 6%, 5%);
  --md-on-surface: hsl(20, 5%, 92%);
  --md-surface-container: hsl(20, 5%, 10%);
  --md-surface-container-high: hsl(20, 5%, 15%);
  --md-surface-container-highest: hsl(20, 5%, 20%);
  --md-outline: hsl(20, 6%, 35%);
  --md-outline-variant: hsl(20, 5%, 18%);
  
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  
  --topbar-height: 56px;
  --bottom-nav-height: 64px;

  --accent: hsl(25, 75%, 65%);
  --accent-hover: hsl(25, 75%, 58%);
  --accent-light: hsl(25, 60%, 85%);
  --accent-dim: hsl(25, 50%, 28%);
}

/* Typography & Font Definitions */
body {
  font-family: 'Google Sans Flex', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#view-mode,
#preview-card-frame {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Permanent Watermark Footer Font & Underline Styling */
#watermark,
#view-watermark,
#watermark-link,
#view-watermark-link,
.watermark-footer {
  font-family: 'Martel Sans', sans-serif !important;
}

.watermark-footer a,
#watermark-link,
#view-watermark-link {
  opacity: 0.6;
}

.watermark-footer a:hover,
#watermark-link:hover,
#view-watermark-link:hover {
  opacity: 0.8;
}

#watermark,
#view-watermark,
#watermark-link,
#view-watermark-link,
.watermark-footer,
.watermark-footer a,
.watermark-footer .underline,
.watermark-footer u {
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* Material Symbols Rounded Icon styling */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(20, 5%, 20%);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(20, 6%, 35%);
}

/* Base transitions */
a, button, input, textarea, select {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Header & Topbar */
.topbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 4px;
  background-color: var(--accent-dim);
  border: 1px solid var(--accent);
}

.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-width: 1px;
}

/* Accordion Smooth Expand/Collapse Animations */
.builder-card-body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out;
  opacity: 0;
}

.builder-card-body-wrapper.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.builder-card-body-inner {
  overflow: hidden;
}

.builder-card-header {
  transition: opacity 0.15s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.builder-card-header > * {
  pointer-events: none;
}
.builder-card-header button,
.builder-card-header a,
.builder-card-header input,
.builder-card-header .cursor-pointer {
  pointer-events: auto;
}
.builder-card-header:hover {
  opacity: 0.88;
}

/* Builder Mode Theme Styling (Flat Dark & Light) */
body.builder-dark {
  background-color: hsl(20, 6%, 5%);
  color: hsl(20, 5%, 92%);
}
body.builder-dark #main-header {
  background-color: hsl(20, 5%, 10%);
  border-color: hsl(20, 5%, 18%);
  color: hsl(20, 5%, 92%);
}
body.builder-dark .builder-card {
  background-color: hsl(20, 5%, 10%);
  border-color: hsl(20, 5%, 18%);
  color: hsl(20, 5%, 92%);
  border-radius: 20px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.builder-dark .builder-card:focus-within {
  border-color: hsl(20, 5%, 22%);
}
body.builder-dark .builder-accordion-card.is-active,
body.builder-dark .builder-accordion-card:has(.builder-card-body-wrapper.is-open) {
  background-color: hsl(20, 5%, 11.5%);
  border-color: hsla(25, 75%, 65%, 0.45);
}
body.builder-dark .builder-input {
  background-color: hsl(20, 6%, 5%);
  border-color: hsl(20, 5%, 18%);
  color: hsl(20, 5%, 92%);
  border-radius: 14px;
}
body.builder-dark .builder-input:focus {
  border-color: var(--accent);
}
body.builder-dark .builder-subtext {
  color: hsl(20, 8%, 70%);
}
body.builder-dark .builder-muted-btn {
  background-color: hsl(20, 5%, 15%);
  border-color: hsl(20, 5%, 18%);
  color: hsl(20, 5%, 92%);
}
body.builder-dark .builder-muted-btn:hover {
  background-color: hsl(20, 5%, 20%);
  color: #ffffff;
}
body.builder-dark .builder-footer {
  border-color: hsl(20, 5%, 18%);
}

body.builder-light {
  background-color: hsl(30, 25%, 97%);
  color: #0f172a;
}
body.builder-light #main-header {
  background-color: hsl(30, 30%, 99%);
  border-color: hsl(25, 15%, 88%);
  color: #0f172a;
}
body.builder-light .builder-card {
  background-color: hsl(30, 30%, 99%);
  border-color: hsl(25, 15%, 88%);
  color: #0f172a;
  border-radius: 20px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.builder-light .builder-card:focus-within {
  border-color: hsl(25, 15%, 80%);
}
body.builder-light .builder-accordion-card.is-active,
body.builder-light .builder-accordion-card:has(.builder-card-body-wrapper.is-open) {
  background-color: hsl(30, 25%, 96.5%);
  border-color: hsla(25, 75%, 55%, 0.5);
}
body.builder-light .builder-input {
  background-color: hsl(30, 20%, 96%);
  border-color: hsl(25, 15%, 82%);
  color: #0f172a;
  border-radius: 14px;
}
body.builder-light .builder-input:focus {
  border-color: var(--accent);
}
body.builder-light .builder-subtext {
  color: hsl(20, 10%, 45%);
}
body.builder-light .builder-muted-btn {
  background-color: hsl(30, 18%, 94%);
  border-color: hsl(25, 15%, 85%);
  color: #0f172a;
}
body.builder-light .builder-muted-btn:hover {
  background-color: hsl(25, 15%, 85%);
  color: #000000;
}
body.builder-light .builder-footer {
  border-color: hsl(25, 15%, 88%);
}

/* Refined Subtle Preview Shadow */
.preview-card-shadow {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
body.builder-dark .preview-card-shadow {
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.35);
}
body.builder-light .preview-card-shadow {
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.08);
}

/* Material 3 Bottom Navigation Bar for Mobile */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 40;
  border-top-width: 1px;
}
body.builder-dark .bottom-nav {
  background-color: hsl(20, 6%, 5%);
  border-color: hsl(20, 5%, 18%);
}
body.builder-light .bottom-nav {
  background-color: hsl(30, 25%, 97%);
  border-color: hsl(25, 15%, 88%);
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  height: 100%;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.bottom-nav .nav-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 32px;
  border-radius: 9999px;
  transition: background-color 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
.bottom-nav .nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

body.builder-dark .bottom-nav .nav-item { color: hsl(20, 8%, 70%); }
body.builder-dark .bottom-nav .nav-item.active { color: var(--accent); }
body.builder-dark .bottom-nav .nav-item.active .nav-indicator { background-color: var(--accent-dim); }

body.builder-light .bottom-nav .nav-item { color: hsl(20, 10%, 45%); }
body.builder-light .bottom-nav .nav-item.active { color: hsl(25, 75%, 45%); }
body.builder-light .bottom-nav .nav-item.active .nav-indicator { background-color: var(--accent-light); }

/* Toast Notifications */
.toast-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.toast-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.builder-dark .toast-notification {
  background-color: hsl(20, 5%, 15%);
  border: 1px solid hsl(20, 5%, 20%);
  color: hsl(20, 5%, 92%);
}
body.builder-light .toast-notification {
  background-color: hsl(20, 6%, 5%);
  border: 1px solid hsl(20, 5%, 18%);
  color: hsl(30, 25%, 97%);
}

/* Theme definitions - Pure flat solid colors & high contrast */
.theme-slate {
  background-color: #0f172a;
  color: #f8fafc;
  border-color: #334155;
}
.theme-slate .link-btn {
  background-color: #1e293b;
  color: #f8fafc;
  border: 1px solid #334155;
}
.theme-slate .link-btn:hover {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
}

.theme-light {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
.theme-light .link-btn {
  background-color: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}
.theme-light .link-btn:hover {
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.theme-cyber {
  background-color: #000000;
  color: #facc15;
  border-color: #facc15;
}
.theme-cyber .link-btn {
  background-color: #18181b;
  color: #facc15;
  border: 2px solid #facc15;
}
.theme-cyber .link-btn:hover {
  background-color: #facc15;
  color: #000000;
  border-color: #facc15;
}

.theme-emerald {
  background-color: #064e3b;
  color: #ecfdf5;
  border-color: #059669;
}
.theme-emerald .link-btn {
  background-color: #047857;
  color: #ecfdf5;
  border: 1px solid #10b981;
}
.theme-emerald .link-btn:hover {
  background-color: #a7f3d0;
  color: #064e3b;
  border-color: #a7f3d0;
}

.theme-berry {
  background-color: #4c1d95;
  color: #f5f3ff;
  border-color: #7c3aed;
}
.theme-berry .link-btn {
  background-color: #6d28d9;
  color: #f5f3ff;
  border: 1px solid #8b5cf6;
}
.theme-berry .link-btn:hover {
  background-color: #ddd6fe;
  color: #4c1d95;
  border-color: #ddd6fe;
}

.theme-neo {
  background-color: #fff7ed;
  color: #1c1917;
  border-color: #1c1917;
}
.theme-neo .link-btn {
  background-color: #ea580c;
  color: #ffffff;
  border: 2px solid #1c1917;
}
.theme-neo .link-btn:hover {
  background-color: #1c1917;
  color: #ffffff;
  border-color: #1c1917;
}

/* Card theme background override for outer view wrapper */
.page-theme-slate { background-color: #020617; }
.page-theme-light { background-color: #f8fafc; }
.page-theme-cyber { background-color: #09090b; }
.page-theme-emerald { background-color: #022c22; }
.page-theme-berry { background-color: #2e1065; }
.page-theme-neo { background-color: #ffedd5; }

/* Profile Card Inner Elements */
.theme-slate #preview-message, .theme-slate #view-message { border-color: #334155; }
.theme-light #preview-message, .theme-light #view-message { border-color: #cbd5e1; }
.theme-cyber #preview-message, .theme-cyber #view-message { border-color: #facc15; }
.theme-emerald #preview-message, .theme-emerald #view-message { border-color: #059669; }
.theme-berry #preview-message, .theme-berry #view-message { border-color: #7c3aed; }
.theme-neo #preview-message, .theme-neo #view-message { border-color: #1c1917; }

#preview-message-wrap,
#view-message-wrap,
#preview-message,
#view-message,
#preview-card-frame .border-t,
#view-card-container .border-t {
  border-color: inherit;
}

/* Social Icons (Simple Icons via SVG Mask) */
.social-icon-mask {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.social-icon-btn {
  color: currentColor;
  opacity: 0.85;
}
.social-icon-btn:hover {
  opacity: 1;
}

/* Markdown Badge & Formatting Styles */
.markdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
body.builder-dark .markdown-badge {
  background-color: var(--accent-dim);
  border-color: hsla(25, 75%, 65%, 0.35);
  color: var(--accent);
}
body.builder-light .markdown-badge {
  background-color: var(--accent-light);
  border-color: hsla(25, 75%, 65%, 0.35);
  color: hsl(25, 75%, 45%);
}

/* Custom Theme Panel & Badge Styles */
.custom-theme-locked-bg {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.builder-dark .custom-theme-locked-bg {
  background-color: hsl(20, 5%, 10%);
  border-color: hsl(20, 5%, 15%);
}
body.builder-light .custom-theme-locked-bg {
  background-color: hsl(30, 30%, 99%);
  border-color: hsl(25, 15%, 88%);
}

/* Badges */
.badge-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body.builder-dark .badge-locked {
  background-color: hsla(25, 75%, 40%, 0.4);
  border: 1px solid hsla(25, 75%, 50%, 0.5);
  color: hsl(25, 75%, 65%);
}
body.builder-light .badge-locked {
  background-color: hsla(25, 75%, 85%, 0.6);
  border: 1px solid hsla(25, 75%, 70%, 0.5);
  color: hsl(25, 75%, 40%);
}

.badge-unlocked {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
body.builder-dark .badge-unlocked {
  background-color: hsla(25, 75%, 65%, 0.2);
  border: 1px solid hsla(25, 75%, 65%, 0.5);
  color: var(--accent);
}
body.builder-light .badge-unlocked {
  background-color: var(--accent-light);
  border: 1px solid var(--accent);
  color: hsl(25, 75%, 45%);
}

.unlock-success-banner {
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
body.builder-dark .unlock-success-banner {
  background-color: hsla(25, 75%, 65%, 0.2);
  border: 1px solid hsla(25, 75%, 65%, 0.5);
  color: var(--accent);
}
body.builder-light .unlock-success-banner {
  background-color: var(--accent-light);
  border: 1px solid var(--accent);
  color: hsl(25, 75%, 45%);
}

.unlock-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
}
body.builder-dark .unlock-link-card {
  background-color: hsl(20, 5%, 10%);
  border-color: hsl(20, 5%, 18%);
  color: hsl(20, 5%, 92%);
}
body.builder-light .unlock-link-card {
  background-color: hsl(30, 30%, 99%);
  border-color: hsl(25, 15%, 88%);
  color: #0f172a;
}

body.builder-dark .unlock-link-text { color: var(--accent); }
body.builder-light .unlock-link-text { color: hsl(25, 75%, 45%); }

strong { font-weight: 700; }
em { font-style: italic; }
u { text-decoration: underline; text-underline-offset: 2px; }
del { text-decoration: line-through; opacity: 0.8; }

body.builder-dark .modal-divider { border-color: hsl(20, 5%, 18%); }
body.builder-light .modal-divider { border-color: hsl(25, 15%, 88%); }

body.builder-dark .modal-step-card {
  background-color: hsl(20, 5%, 10%);
  border-color: hsl(20, 5%, 18%);
}
body.builder-light .modal-step-card {
  background-color: hsl(30, 20%, 96%);
  border-color: hsl(25, 15%, 88%);
}

body.builder-dark .modal-code {
  color: var(--accent);
  background-color: hsla(25, 75%, 65%, 0.15);
  border: 1px solid hsla(25, 75%, 65%, 0.3);
}
body.builder-light .modal-code {
  color: hsl(25, 75%, 45%);
  background-color: var(--accent-light);
  border: 1px solid hsla(25, 75%, 65%, 0.3);
}

.verify-status-box {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.builder-dark .verify-status-loading {
  background-color: hsl(20, 5%, 10%);
  border-color: hsl(20, 5%, 18%);
  color: hsl(35, 90%, 60%);
}
body.builder-light .verify-status-loading {
  background-color: hsl(35, 80%, 90%);
  border-color: hsl(35, 70%, 75%);
  color: hsl(35, 80%, 30%);
}

body.builder-dark .verify-status-success {
  background-color: hsla(25, 75%, 65%, 0.2);
  border-color: hsla(25, 75%, 65%, 0.5);
  color: var(--accent);
}
body.builder-light .verify-status-success {
  background-color: var(--accent-light);
  border-color: hsla(25, 75%, 65%, 0.5);
  color: hsl(25, 75%, 40%);
}

body.builder-dark .verify-status-error {
  background-color: hsla(0, 70%, 60%, 0.2);
  border-color: hsla(0, 70%, 50%, 0.5);
  color: hsl(0, 80%, 75%);
}
body.builder-light .verify-status-error {
  background-color: hsl(0, 80%, 95%);
  border-color: hsl(0, 60%, 80%);
  color: hsl(0, 70%, 40%);
}

body.builder-dark .restore-error-box {
  background-color: hsla(0, 70%, 60%, 0.2);
  border-color: hsla(0, 70%, 50%, 0.5);
  color: hsl(0, 80%, 75%);
}
body.builder-light .restore-error-box {
  background-color: hsl(0, 80%, 95%);
  border-color: hsl(0, 60%, 80%);
  color: hsl(0, 70%, 40%);
}

body.builder-dark .unlock-verifying-badge {
  color: hsl(35, 90%, 60%);
  background-color: hsla(35, 90%, 60%, 0.15);
  border-color: hsla(35, 90%, 60%, 0.3);
}
body.builder-light .unlock-verifying-badge {
  color: hsl(35, 80%, 30%);
  background-color: hsl(35, 80%, 90%);
  border-color: hsl(35, 70%, 75%);
}