@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
   /* =========================================
       COLORS (ALL CONSOLIDATED)
       ========================================= */

   /* Neutrals / Base */
   --rich-black: #0D0D0D;
   --rich-white: white;
   --soft-white: #F5F5F5;
   --warm-beige: #F2E9E4;
   --vivid-coral: #FF5C5C;
   --grey: grey;
   --dusty-blue: #218decc1;
   --metallic-gold: #d4af37;
   --ink-black: #111111;
   --almost-black: #212121;
   --medium-grey: #757575;
   --translucent-white: rgba(255, 255, 255, 0.94);
   --translucent-light: rgb(253 253 253 / 40%);
   --translucent-green: rgba(0, 255, 0, 0.1);
   --translucent-red: rgba(255, 0, 0, 0.1);
   --glass-white: rgba(255, 255, 255, 0.8);

   /* Glassmorphism */
   --white-glass: rgba(255, 255, 255, 0.15);
   --frost-glass: rgba(255, 255, 255, 0.3);
   --black-glass: rgba(0, 0, 0, 0.15);
   --shade-glass: rgba(0, 0, 0, 0.3);
   --blue-glass: rgba(235, 245, 255, 0.2);
   --border-glass: rgba(255, 255, 255, 0.3);
   --shadow-glass: rgba(0, 0, 0, 0.15);

   /* Purples */
   --deep-purple: #673ab7;
   --light-purple: #f3e5f5;
   --dark-purple: #311b92;
   --indigo: #4b0082;
   --royal-purple: #6a0dad;
   --tyrian-purple: #600658;

   /* Yellows & Reds */
   --royal-gold: #FFD700;
   --golden-yellow: #ffd740;
   --error-red: #e74c3c;
   --vivid-red: #db4040;
   --pale-red: #fff1f1;
   --soft-red: #f3cccc;
   --dark-red: #8d2d2d;
   --crimson-red: #c64b4b;
   --amber-orange: #c7810b;


   /* Blues & Greens */
   --pale-blue: #edf3fb;
   --soft-blue: #f7faff;
   --light-steel-blue: #d9e6f4;
   --medium-steel-blue: #bfd1e7;
   --navy-blue: #122743;
   --slate-grey: #5d718c;
   --dark-navy: #16365f;
   --very-light-blue: #edf4ff;
   --rich-navy: #18385f;
   --deep-navy: #16314f;
   --emerald-green: #1f8a4d;
   --strong-green: #28ad47;
   --success-green: #2ecc71;
   --cyan-blue: #00d2ff;

   /* Greys & Other Specifics */
   --off-white: #f8f9fa;
   --light-grey: #e9ecef;
   --dark-goldenrod: #b8860b;
   --dark-charcoal: #212529;
   --dim-grey: #6c757d;
   --translucent-gold: rgba(184, 134, 11, 0.08);
   --very-dark-grey: #1a1a1a;
   --ghost-white: #f4f4f9;
   --ombre-silver: linear-gradient(135deg, #f5f5f5 0%, #dcdcdc 100%);

   /* Sands & Beiges */
   --warm-sand: #e8e0d3;
   --light-sand: #f4f0e8;
   --floral-white: #fffdf9;
   --desert-sand: #e6ddd0;
   --khaki-sand: #d0c5b4;
   --dark-sand: #baae9b;
   --translucent-taupe: rgba(134, 123, 108, 0.16);


   /* Silver Gradients */
   --icon: linear-gradient(60deg, #cdcdcd 0%, #c9c9c9 50%, #d3d3d3 100%);
   --brondish: linear-gradient(110deg, #8c8c8c 0%, #595959 100%);
   --glass: linear-gradient(175deg, #707070 0%, #404040 100%);
}/* Central Theme Engine */

/* Light: Cream / Off-White */
:root,
[data-theme="light"] {
  --theme-bg: #f9f6f0;
  --theme-surface: #ffffff;
  --theme-subtle: #f4f0e8;
  --theme-text: #2c2c2c;
  --theme-muted: #6e675f;
  --theme-border: #e8e2d8;
  --theme-hover: rgba(0, 0, 0, 0.04);
}

/* White: Pure White */
[data-theme="white"] {
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-subtle: #fafafa;
  --theme-text: #2c2c2c;
  --theme-muted: #757575;
  --theme-border: #ebebeb;
  --theme-hover: rgba(0, 0, 0, 0.03);
}

/* Dark: Deep Black / Charcoal */
[data-theme="dark"] {
  --theme-bg: #121212;
  --theme-surface: #1e1e1e;
  --theme-subtle: #2e2e2e;
  --theme-text: #f4f6f8;
  --theme-muted: #a0a0a0;
  --theme-border: #2e2e2e;
  --theme-hover: rgba(255, 255, 255, 0.05);
}

/* System: Matches light (cream, off-white) by default, shifts to dark on device dark mode */
[data-theme="system"] {
  --theme-bg: #f9f6f0;
  --theme-surface: #ffffff;
  --theme-subtle: #f4f0e8;
  --theme-text: #1e1e1e;
  --theme-muted: #6e675f;
  --theme-border: #e8e2d8;
  --theme-hover: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --theme-bg: #121212;
    --theme-surface: #1e1e1e;
    --theme-subtle: #2e2e2e;
    --theme-text: #f4f6f8;
    --theme-muted: #a0a0a0;
    --theme-border: #2e2e2e;
    --theme-hover: rgba(255, 255, 255, 0.05);
  }
}
:root {


    /* Fonts */
    --font-family: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;



    /* Font Weights */
    --font-weight: bold;

    /* Font Sizes */
    --brand-size: clamp(1rem, 2.5vw, 3rem);
    --nav-size: clamp(0.85rem, 1.5vw, 1.1rem);
    --footer-size: clamp(0.65rem, 0.75vw, 0.7rem);
    --title-size: clamp(1.5rem, 3vw, 3rem);
    --prefix-size: clamp(1rem, 2.37vw, 1.2rem);
    --label-size: clamp(0.8rem, 0.8vw, 0.8rem);
    --h1-size: clamp(1.5rem, 2.5vw, 2.25rem);
    --h2-size: clamp(1.35rem, 2vw, 1.8rem);
    --h3-size: clamp(1.2rem, 1.6vw, 1.5rem);
    --h4-size: clamp(1.05rem, 1.2vw, 1.25rem);

    --font-size: 1rem;






}:root {
    /* =========================================
       SHADOWS
       ========================================= */

    /* Neutral / Base */
    --off-shadow: 0 3px 10px 0 rgb(220 220 220 / 10%), 0 8px 20px 0 rgb(170 170 170 / 10%);
    --box-shadow: 0.25rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.98);
    --subtle-shadow: 0 1px 3px rgba(13, 13, 13, 0.08), 0 2px 6px rgba(13, 13, 13, 0.05);
    --soft-shadow: 0 4px 12px rgba(13, 13, 13, 0.10), 0 8px 24px rgba(13, 13, 13, 0.07);
    --deep-shadow: 0 8px 24px rgba(13, 13, 13, 0.12), 0 18px 48px rgba(13, 13, 13, 0.09);
    --heavy-shadow: 0 16px 48px rgba(13, 13, 13, 0.15), 0 32px 72px rgba(13, 13, 13, 0.10);
    --inset-shadow: inset 0 2px 6px rgba(13, 13, 13, 0.12);
    --hover-shadow:      0 0.625rem 1.5625rem rgba(0, 0, 0, 0.08);

    /* Purple family  (deep-purple / dark-purple) */
    --subtle-purple: 0 2px 8px rgba(103, 58, 183, 0.18), 0 4px 16px rgba(103, 58, 183, 0.10);
    --bright-purple: 0 6px 20px rgba(103, 58, 183, 0.22), 0 12px 36px rgba(49, 27, 146, 0.12);
    --deep-purple-s: 0 12px 36px rgba(103, 58, 183, 0.28), 0 24px 56px rgba(49, 27, 146, 0.16);
    /* -s suffix avoids collision with --deep-purple colour */
    --glow-purple: 0 0 20px rgba(103, 58, 183, 0.45), 0 0 48px rgba(103, 58, 183, 0.20);

    /* Navy / Blue family  (navy-blue / dark-navy / rich-navy) */
    --subtle-navy: 0 2px 8px rgba(18, 39, 67, 0.18), 0 4px 16px rgba(18, 39, 67, 0.10);
    --bright-navy: 0 6px 20px rgba(18, 39, 67, 0.22), 0 12px 36px rgba(22, 54, 95, 0.12);
    --deep-navy-s: 0 12px 36px rgba(18, 39, 67, 0.28), 0 24px 56px rgba(22, 54, 95, 0.16);
    /* -s suffix avoids collision with --deep-navy colour */
    --glow-navy: 0 0 24px rgba(33, 141, 236, 0.30), 0 0 56px rgba(33, 141, 236, 0.12);

    /* Gold / Amber family  (metallic-gold / dark-goldenrod) */
    --subtle-gold: 0 2px 8px rgba(212, 175, 55, 0.20), 0 4px 16px rgba(184, 134, 11, 0.10);
    --bright-gold: 0 6px 20px rgba(212, 175, 55, 0.28), 0 12px 36px rgba(184, 134, 11, 0.14);
    --glow-gold: 0 0 20px rgba(255, 215, 64, 0.40), 0 0 48px rgba(212, 175, 55, 0.18);

    /* Red / Coral family  (vivid-coral / vivid-red / crimson-red) */
   --subtle-red:        0 2px 8px rgba(219, 64, 64, 0.18),  0 4px 16px rgba(219, 64, 64, 0.10);
   --bright-red:        0 6px 20px rgba(219, 64, 64, 0.24), 0 12px 36px rgba(198, 75, 75, 0.14);
   --deep-red:          0 12px 36px rgba(219, 64, 64, 0.30), 0 24px 56px rgba(141, 45, 45, 0.18);
   --glow-red:          0 0 20px rgba(255, 92, 92, 0.40),   0 0 48px rgba(219, 64, 64, 0.18);

   /* Green family  (emerald-green / success-green) */
   --subtle-green:      0 2px 8px rgba(31, 138, 77, 0.18),  0 4px 16px rgba(31, 138, 77, 0.10);
   --bright-green:      0 6px 20px rgba(31, 138, 77, 0.24), 0 12px 36px rgba(40, 173, 71, 0.12);
   --glow-green:        0 0 20px rgba(40, 173, 71, 0.38),   0 0 48px rgba(31, 138, 77, 0.16);

   /* Glass / Translucent  (glass-white / translucent-white) */
   --subtle-glass:      0 4px 16px rgba(255, 255, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.20);
   --bright-glass:      0 8px 32px rgba(255, 255, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.35);

   /* Steel family  (light-steel-blue / medium-steel-blue / slate-grey) */
   --subtle-steel:      0 2px 8px rgba(93, 113, 140, 0.14),  0 4px 16px rgba(93, 113, 140, 0.08);
   --bright-steel:      0 6px 20px rgba(93, 113, 140, 0.20), 0 12px 36px rgba(191, 209, 231, 0.18);
   --deep-steel:        0 12px 36px rgba(93, 113, 140, 0.26), 0 24px 56px rgba(93, 113, 140, 0.14);
   --glow-steel:        0 0 20px rgba(217, 230, 244, 0.50),   0 0 48px rgba(93, 113, 140, 0.22);

   /* Blue family  (dusty-blue / cyan-blue) */
   --subtle-blue:       0 2px 8px rgba(33, 141, 236, 0.16),  0 4px 16px rgba(33, 141, 236, 0.09);
   --bright-blue:       0 6px 20px rgba(33, 141, 236, 0.24), 0 12px 36px rgba(33, 141, 236, 0.13);
   --deep-blue:         0 12px 36px rgba(33, 141, 236, 0.30), 0 24px 56px rgba(0, 210, 255, 0.14);
   --glow-blue:         0 0 24px rgba(0, 210, 255, 0.40),     0 0 56px rgba(33, 141, 236, 0.20);
}:root {
    /* Forms and Card */
    --form-size: clamp(20rem, 40vw, 45rem);
    --card-size: clamp(5rem, 13vw, 20rem);
    --article-size: clamp(21rem, 38vw, 42rem);
}:root {
    /* P Margins */
    --full-margin: 1rem;

    --around-margin: 0.5rem;
    --minor-margin: 0.25rem;

    --bottom-margin: 0 0 1rem 0;
    --top-margin: 1rem 0 0 0;
    --right-margin: 0 1rem 0 0;
    --left-margin: 0 0 0 1rem;

    --medium-bottom: 0 0 3rem 0;
    --medium-top: 3rem 0 0 0;

    --strong-bottom: 0 0 5rem 0;
    --strong-top: 5rem 0 0 0; 

    --half-top: 0.5rem 0 0 0;
    --half-bottom: 0 0 0.5rem 0;
    --half-right: 0 0.5rem 0 0;
    --half-left: 0 0 0 0.5rem;
    
}:root {
    /* Base Padding */
    --base-padding: 1rem;

    --medium-padding: clamp(1rem, 1.2vw, 1.5rem) 0 clamp(3rem, 6vw, 8rem) 0;

    --strong-padding: clamp(1.5rem, 2.5vw, 3rem) 0 clamp(4rem, 7vw, 9rem) 0;

    --full-padding: 1rem;
    --half-padding: 0.5rem;

    --around-padding: 0 0.5rem 0.5rem;

    --bottom-padding: 0 0 1rem 0;
    --top-padding: 1rem 0 0 0;
    --right-padding: 0 1rem 0 0;
    --left-padding: 0 0 0 1rem;

    --media-bottom: 0 0 5rem 0;

    --header-padding: 0.10rem 0.625rem;

}:root {
    /* Base Radius */
    --no-radius: 0rem;
    --full-radius: 1rem;
    --round-edges: 2rem;
    --almost-circle: 3rem;
    --full-circle: 10rem;
}:root {
    --base-gap: clamp(0.25rem, 1vw, 1.25rem);
    --full-gap: 1rem;

    --half-gap: 0.5rem;
    --bottom-half: 0 0 0.5rem 0;
    --top-half: 0.5rem 0 0 0;
    --right-halfp: 0 0.5rem 0 0;
    --left-half: 0 0 0 0.5rem;

    --third-gap: 0.3rem;

    --quarter-gap: 0.25rem;

    --nav-gap: 0.5rem;

    --top-gap: 1rem 0 0 0;
    --bottom-gap: 0 0 1rem 0;
    --right-gap: 0 1rem 0 0;
    --left-gap: 0 0 0 1rem;

    --medium-gap: 3rem;

    --strong-gap: 5rem;

    --even-gap: 2rem;
}.description {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

html {
  box-sizing: border-box;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow: hidden;
  height: 100%;
  margin: 0 0 0 0;
  font-family: var(--font-family);
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
}

body,
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}body {
  margin: 0;
  padding: 0;
  background-color: var(--soft-white);
  color: var(--rich-black, #222);
  font-family: var(--font-family, 'Inter', 'Helvetica', 'Outfit', sans-serif);
  width: 100%;
}

.hidden {
  display: none;
}/* main {
  flex: 1;
  padding: 0 0 3rem 0;
}

.wrap {
  width: 100%;
  padding: 1rem;
  margin: 0 0 0 0;
  box-sizing: border-box;
  background-color: var(--rich-white);
} */h1 {

    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: 700;
    margin: .3rem;
    text-align: center;

}h2 {

    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: var(--font-weight);
    text-align: center;
}h3 {

    font-family: var(--font-family);
    font-size: 1.5rem;
    font-weight: var(--font-weight);
    text-align: center;
    margin: var(--bottom-margin);
}h4 {

    font-family: var(--font-family);
    font-size: var(--h4-size);
    font-weight: var(--font-weight);
    text-align: center;
}p {
  margin: var(--full-margin);
  text-align: center;
}a {
  color: inherit;
  text-decoration: none;
  text-align: center;
}ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
  text-align: center;
}
.layout {
    display: flex;
    flex-wrap: wrap;
}

.sidebar {
    width: 100%;
    box-sizing: border-box;
}

.main {
    width: 100%;
    box-sizing: border-box;
}.badgecontainer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.9375rem 0 0 0;
}

.badgecontainercenter {
  justify-content: center
}

.badgecontainerstart {
  justify-content: flex-start
}


.applinkofficial {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.applinkofficial:hover {
  transform: translateY(-0.125rem);
  opacity: 0.9
}

.applinkofficial svg {
  height: 2.5rem;
  width: 100%;
  display: block
}

.productbadge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  height: 2.5rem;
  padding: 0.25rem 0.5rem 0.3125rem 0.5rem;
  border-radius: 0.375rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box
}

.badgecontent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.0625rem;
  text-align: left;
  white-space: nowrap
}

.badgesubtitle {
  display: block;
  color: #fff;
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none
}

.badgetitle {
  display: block;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.015em
}.shell {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 9998;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--rich-black);
  /* overscroll gap matches header, no white flash */
}* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

.scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--rich-white);
    justify-content: center;
    padding: var(--bottom-padding);
    overscroll-behavior-y: none;
}.interface {
  flex: 1;
  overflow-y: auto;
  width: clamp(10rem, 100%, 60rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}.container {
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
}header {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    background: var(--rich-black);
    color: var(--rich-white);
    z-index: 1100;
    transform: translateY(0);
}


header .container {
    width: auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--header-padding);
    box-sizing: border-box;
    margin: 0;
}


.page-header {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.page-header h2 {
    margin: 0.5rem 0 0.25rem 0;
}

.page-header p {
    margin: 0 0 0.35rem 0;
}

.page-header nav {
    margin: 0 0 0.5rem 0;
}nav {
    margin: 0;
    display: flex;
    gap: var(--third-gap);
    flex-wrap: wrap;
    justify-content: flex-start;
}

nav a {
    color: inherit;
    text-decoration: none;
    font-weight: var(--font-weight);
    font-size: var(--nav-size);
    margin: .2rem;
    transition: color 0.3s ease;
    white-space: nowrap;
}

nav a:hover {
    color: var(--corporate-color);
}
footer {
  background-color: var(--rich-black);
  color: var(--soft-white);
  text-align: center;
  padding: 0.7rem;
  font-size: var(--footer-size);
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  flex-shrink: 0;
  z-index: 30;
  height: auto;
  overflow: visible;
}

footer a {
  padding: .35rem;

}

.copyright {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}section {
    flex: 1;
    border-radius: var(--base-radius);
}.icons {
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
  border: 0.125rem solid rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.logo .image,
.logo.image {
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
}
button.copy {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

button.copy:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0.8;
}

.copy {
    position: relative;
}

.copy-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--rich-black);
    color: var(--rich-white);
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    border-radius: var(--round-edges, 0.25rem);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 10;
}

.copy:hover .copy-tooltip {
    visibility: visible;
    opacity: 1;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Outfit', sans-serif;
  table-layout: fixed;
  background: var(--rich-white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--full-border);
  border-radius: var(--full-radius);
  overflow: hidden;
  margin: 1rem 0 1rem 0;
}

th {
  background-color: var(--frost-glass, rgba(255, 255, 255, 0.3));
  color: var(--rich-black);
  padding: var(--full-padding);
  font-weight: var(--font-weight);
  text-transform: capitalize;
  text-align: left;
  border-bottom: var(--full-border);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: anywhere;
}

th:first-child {
  border-top-left-radius: 1.5rem;
}

th:last-child {
  border-top-right-radius: 1.5rem;
}

td {
  padding: var(--full-padding);
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: anywhere;
}.tab {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--rich-black);
    border: none;
    border-radius: 0;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tab:hover {
    background: rgba(0, 0, 0, 0.05);
}

.tab.active {
    border-bottom: 2px solid #000;
}


form {
  display: flex;
  flex-direction: column;
  background: var(--rich-white);
  padding: var(--full-padding);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--full-radius);
  color: var(--rich-black);
  justify-self: center;
  width: var(--form-size);
  flex: 1;
}

form label {
  display: none;
}


input,
select,
textarea {
  width: 100%;
  padding: var(--full-padding);
  border-radius: 0.375rem;
  box-sizing: border-box;
  background: #fff;
  margin: var(--bottom-margin);
  overflow: auto;
  border: none;
  font-family: inherit;
  font-size: var(--font-size);
  color: var(--rich-black);
  border: var(--full-border);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #000;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0;
}

.error {
  color: var(--error-red);
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
}

.reveal {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1rem 0;
}

.reveal input,
form .reveal input {
  width: 100%;
  margin: 0 0 0 0;
  box-sizing: border-box;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
}

.reveal i,
.reveal .icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  line-height: 1;
}

.reveal .icon svg {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
  transform: none;
  margin: 0 0 0 0;
}

.authentication {
  border-radius: var(--base-radius, 1rem);
  border: 0.0625rem solid var(--rich-black, #ccc);
  padding: 2rem 2rem 2rem 2rem;
}

.instruction {
  text-align: center;
  margin: 0 0 2rem 0;
}

.barcode {
  text-align: center;
  margin: 0 0 2rem 0;
}

.qr {
  margin: 0 auto 0 auto;
}

form .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin: 1rem 0 0 0;
}

input[type="file"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}.emails {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.emails .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.emails .row input {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0 0;
}

.emails .row .add {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: var(--rich-black, #111111);
  color: var(--rich-white, #ffffff);
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  transition: opacity 0.15s ease-in-out;
}

.emails .row .add:hover {
  opacity: 0.8;
}

.emails .row .add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.emails .list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.emails .list .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.emails .list .row input {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0 0;
}
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 1rem 0;
  box-sizing: border-box;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 1.25rem 0.75rem 0.35rem 0.75rem;
  border-radius: 0.375rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--rich-black, #111111);
  margin: 0 0 0 0;
  outline: none;
  transition: border-color 0.18s ease-in-out;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #000000;
}

.field textarea {
  resize: vertical;
}

.field label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  pointer-events: none;
  font-size: 0.875rem;
  color: #888888;
  letter-spacing: 0.02rem;
  transition: all 0.18s ease-in-out;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.field textarea ~ label {
  top: 1.25rem;
}

.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field select:valid ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  top: 0.35rem;
  transform: translateY(0);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #666666;
}
button,
.bt {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.bt {
    display: inline-flex;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: var(--font-weight);
    padding: var(--full-padding);
    justify-content: center;
    background: var(--rich-black);
    color: var(--rich-white);
    border-radius: var(--round-edges);
    white-space: nowrap;
    justify-self: center;
    margin: var(--around-margin);
}

.bt:hover:not(:disabled) {
    color: var(--grey);
}

.bt:disabled,
.bt[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bt:hover,
.bt-secondary:hover {
    color: var(--grey);
}

.bt-secondary {
    display: inline-flex;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: var(--font-weight);
    padding: var(--full-padding);
    justify-content: center;
    background: var(--rich-white);
    color: var(--rich-black);
    border-radius: var(--round-edges);
    white-space: nowrap;
    justify-self: center;
    margin: var(--around-margin);
}



.close {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    border: 0.0625rem solid #cbd5e0;
    background: #f8fafc;
    color: #1f2937;
    font-size: 1.35rem;
}

.add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--rich-black);
    color: var(--rich-white);
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 0;
    margin: var(--around-margin);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.add:hover:not(:disabled) {
    color: var(--grey);
}

.iconbt,
.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: inherit;
    padding: 0.375rem 0.375rem 0.375rem 0.375rem;
    margin: 0 0 0 0;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: opacity 0.15s ease;
}

.iconbt:hover,
.iconbtn:hover {
    opacity: 0.7;
}.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem 0;
}

.toolbar.end,
.toolbar.right {
    justify-content: flex-end;
}


.toolbar .actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toolbar .check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rich-black);
    padding: 0.4rem 0.85rem 0.4rem 0.85rem;
    border-radius: 2rem;
    border: none;
    background: var(--rich-white, #ffffff);
    user-select: none;
    transition: all 0.2s ease;
}

.toolbar .check:hover {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.02);
}

.toolbar .check.active,
.toolbar .check:has(input:checked) {
    background: var(--rich-black, #111111);
    color: var(--rich-white, #ffffff);
    border: none;
}

.toolbar .check input {
    cursor: pointer;
    margin: 0 0 0 0;
    width: 0.95rem;
    height: 0.95rem;
    accent-color: #000000;
}

.toolbar .check.active input,
.toolbar .check:has(input:checked) input {
    accent-color: #ffffff;
}
.chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.25rem 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--rich-white, #ffffff);
    border: none;
    border-radius: 2rem;
    padding: 0.4rem 0.85rem 0.4rem 0.85rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rich-black, #111111);
    white-space: nowrap;
    user-select: none;
    transition: all 0.2s ease;
    margin: 0 0 0 0;
}

.chip:hover {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.02);
}

.chip.active,
.chip[aria-pressed="true"] {
    background: var(--rich-black, #111111);
    color: var(--rich-white, #ffffff);
    border: none;
}
.dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(11rem, 14rem, 18rem);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text, #111111);
    border-radius: 1rem;
    box-shadow: var(--soft-shadow, 0 0.25rem 0.75rem rgba(13, 13, 13, 0.1));
    padding: 0.4rem 0.4rem 0.4rem 0.4rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    box-sizing: border-box;
}

.menu[hidden] {
    display: none;
}

.menu .item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.5rem 0.85rem 0.5rem 0.85rem;
    margin: 0 0 0 0;
    border: none;
    border-radius: 0.65rem;
    background: transparent;
    color: var(--theme-text, #111111);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menu .item:hover {
    background: var(--theme-hover, rgba(0, 0, 0, 0.04));
}

.menu .item.active {
    background: var(--rich-black, #111111);
    color: var(--rich-white, #ffffff);
}

.primary {
  display: none;
}


/* Flip modifier */
.flip {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin: 0;
  /* Margin handled by grid gap now */
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  transform: perspective(62.5rem) rotateY(0deg);
}

a:hover .flip,
a:focus-within .flip,
.flip:hover,
.flip:focus-within {
  transform: perspective(62.5rem) rotateY(180deg);
  box-shadow: none;
}

/* Faces for flip card */
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

.front {
  color: var(--rich-black);
  background: var(--rich-white);
}

.back {
  color: var(--rich-white);
  background: var(--rich-black);
  transform: rotateY(180deg);
}.banner {
  font-family: var(--font-family);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.banner.runner {
  height: 2.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.banner.page {
  color: var(--rich-white);
  border-radius: var(--no-radius);
  padding: var(--full-padding);
}

.banner.feature {
  display: flex;
}

.banner.feature .canvas {
  padding: var(--full-padding);
  background: var(--icon);
}

.banner.page.main {
  background-color: var(--tyrian-purple);
  padding: var(--half-padding);
}

.banner.page.secondary {
  background-color: var(--dusty-blue);
}.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--full-gap);
    transition: opacity 0.24s ease-out;
}

.stage.is-leaving {
    opacity: 0;
}

.stage.is-entering {
    animation: fadeIn 0.76s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}.symbol {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0 1rem;
}
.name {
    font-size: 1.25rem;
    opacity: 0.9;
}
.username {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.username input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 2.5rem 0.875rem 1.25rem;
  margin: 0 0 0 0;
}

.username .status {
  position: absolute;
  right: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
}

.username .status.success {
  color: #2e7d32;
}

.username .status.error {
  color: #d32f2f;
}

.username .status.checking {
  color: #757575;
}
.analysis {
    font-size: var(--label-size);
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    width: 5rem;
}

.analysis[data-tone="bullish"] {
    background-color: var(--success-green);
    color: var(--rich-black);
}

.analysis[data-tone="bearish"] {
    background-color: var(--error-red);
    color: var(--rich-black);
}.metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--even-gap);
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quarter-gap);
    background: var(--translucent-light);
    padding: var(--full-padding);
    border-radius: var(--full-radius);
    width: max-content;
    box-sizing: border-box;
}.label {
    font-size: var(--label-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.section title {
    text-transform: uppercase;
}option {
    font-family: var(--font-family)
}.value {
    font-size: 1.25rem;
    font-weight: var(--font-weight);
}

.value[data-tone="up"] {
    color: var(--success-green);
}

.value[data-tone="down"] {
    color: var(--vivid-red);
}.hero .title,
.hero.title {
  margin-top: 8px;
  text-align: center
}

.hero {
  position: relative;
  width: 100vw;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  font-size: 0;
  padding: 0
}

.hero .picture,
.hero.picture {
  width: 100vw;
  max-height: 10rem;
  object-fit: cover;
}

.hero .content,
.hero.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  text-align: center;
  box-shadow: none;
  justify-content: center;
  align-items: center;
}

.hero .content .prefix,
.hero.content .prefix {
  display: inline-block;
  color: #fff;
  font-size: 2.37rem;
  font-weight: 800;
  margin: 0;
  padding: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  letter-spacing: 1px
}

.hero .content .title,
.hero.content .title {
  color: #fff;
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  padding: .3rem;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9)
}
.calendar {
    background: transparent;
    opacity: 0;
    display: none;
    text-align: center;
    visibility: hidden;
    padding: 0;
    animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 0.875rem;
    border-radius: 0.3125rem;
    position: absolute;
    width: 21rem;
    box-sizing: border-box;
    box-sizing: border-box;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background: #fff;
    box-shadow: 0.0625rem 0 0 #e6e6e6, -0.0625rem 0 0 #e6e6e6, 0 0.0625rem 0 #e6e6e6, 0 -0.0625rem 0 #e6e6e6, 0 0.1875rem 0.8125rem rgba(0, 0, 0, 0.08);
    box-shadow: 0.0625rem 0 0 #e6e6e6, -0.0625rem 0 0 #e6e6e6, 0 0.0625rem 0 #e6e6e6, 0 -0.0625rem 0 #e6e6e6, 0 0.1875rem 0.8125rem rgba(0, 0, 0, 0.08)
}

.calendar.open,
.calendar.inline {
    opacity: 1;
    height: max-content;
    visibility: visible;
    width: max-content;
}

.calendar.open {
    display: inline-block;
    z-index: 99999
}

.calendar.animate.open {
    animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1);
    animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1)
}

.calendar.inline {
    display: block;
    position: relative;
    top: 0.125rem
}

.calendar.static {
    position: absolute;
    top: calc(100% + 0.125rem)
}

.calendar.static.open {
    z-index: 999;
    display: block
}

.calendar.multiMonth .days .dayContainer:nth-child(n+1) .day.inRange:nth-child(7n+7) {
    box-shadow: none;
    box-shadow: none
}

.calendar.multiMonth .days .dayContainer:nth-child(n+2) .day.inRange:nth-child(7n+1) {
    box-shadow: -0.125rem 0 0 #e6e6e6, 0.3125rem 0 0 #e6e6e6;
    box-shadow: -0.125rem 0 0 #e6e6e6, 0.3125rem 0 0 #e6e6e6
}

.calendar .hasWeeks .dayContainer,
.calendar .hasTime .dayContainer {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.calendar .hasWeeks .dayContainer {
    border-left: 0
}

.calendar.hasTime .time {
    height: 2.5rem;
    border-top: 0.0625rem solid #e6e6e6
}

.calendar.noCalendar.hasTime .time {
    height: auto
}

.calendar:before,
.calendar:after {
    position: absolute;
    display: block;
    pointer-events: none;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    left: 1.375rem
}

.calendar.rightMost:before,
.calendar.arrowRight:before,
.calendar.rightMost:after,
.calendar.arrowRight:after {
    left: auto;
    right: 1.375rem
}

.calendar.arrowCenter:before,
.calendar.arrowCenter:after {
    left: 50%;
    right: 50%
}

.calendar:before {
    border-width: 0.3125rem;
    margin: 0 -0.3125rem
}

.calendar:after {
    border-width: 0.25rem;
    margin: 0 -0.25rem
}

.calendar.arrowTop:before,
.calendar.arrowTop:after {
    bottom: 100%
}

.calendar.arrowTop:before {
    border-bottom-color: #e6e6e6
}

.calendar.arrowTop:after {
    border-bottom-color: #fff
}

.calendar.arrowBottom:before,
.calendar.arrowBottom:after {
    top: 100%
}

.calendar.arrowBottom:before {
    border-top-color: #e6e6e6
}

.calendar.arrowBottom:after {
    border-top-color: #fff
}

.calendar:focus {
    outline: 0
}

.wrapper {
    position: relative;
    display: inline-block
}

.months {
    display: box;
    display: flex;
    display: -ms-flexbox;
    display: flex
}

.months .month {
    background: transparent;
    color: rgba(0, 0, 0, 0.9);
    fill: rgba(0, 0, 0, 0.9);
    height: 2.125rem;
    text-align: center;
    position: relative;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    box-flex: 1;
    flex: 1;
    -ms-flex: 1;
    flex: 1
}

.months .prevmonth,
.months .nextmonth {
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    position: absolute;
    top: 0;
    height: 2.125rem;
    padding: 0.625rem;
    z-index: 3;
    color: rgba(0, 0, 0, 0.9);
    fill: rgba(0, 0, 0, 0.9)
}

.months .prevmonth.disabled,
.months .nextmonth.disabled {
    display: none
}

.months .prevmonth i,
.months .nextmonth i {
    position: relative
}

.months .prevmonth.prevmonth,
.months .nextmonth.prevmonth {
    /*
      /*rtl:begin:ignore*/
    left: 0
        /*
      /*rtl:end:ignore*/
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.months .prevmonth.nextmonth,
.months .nextmonth.nextmonth {
    /*
      /*rtl:begin:ignore*/
    right: 0
        /*
      /*rtl:end:ignore*/
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.months .prevmonth:hover,
.months .nextmonth:hover {
    color: #959ea9
}

.months .prevmonth:hover svg,
.months .nextmonth:hover svg {
    fill: #f64747
}

.months .prevmonth svg,
.months .nextmonth svg {
    width: 0.875rem;
    height: 0.875rem
}

.months .prevmonth svg path,
.months .nextmonth svg path {
    transition: fill .1s;
    transition: fill .1s;
    fill: inherit
}

.numInputWrapper {
    position: relative;
    height: auto
}

.numInputWrapper input,
.numInputWrapper span {
    display: inline-block
}

.numInputWrapper input {
    width: 100%
}

.numInputWrapper input::-ms-clear {
    display: none
}

.numInputWrapper input::uter-spin-button,
.numInputWrapper input::inner-spin-button {
    margin: 0;
    appearance: none
}

.numInputWrapper span {
    position: absolute;
    right: 0;
    width: 0.875rem;
    padding: 0 0.25rem 0 0.125rem;
    height: 50%;
    opacity: 0;
    border: 0.0625rem solid rgba(57, 57, 57, 0.15);
    box-sizing: border-box;
    box-sizing: border-box
}

.numInputWrapper span:hover {
    background: rgba(0, 0, 0, 0.1)
}

.numInputWrapper span:active {
    background: rgba(0, 0, 0, 0.2)
}

.numInputWrapper span:after {
    display: block;
    content: "";
    position: absolute
}

.numInputWrapper span.arrowUp {
    top: 0;
    border-bottom: 0
}

.numInputWrapper span.arrowUp:after {
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-bottom: 0.25rem solid rgba(57, 57, 57, 0.6);
    top: 26%
}

.numInputWrapper span.arrowDown {
    top: 50%
}

.numInputWrapper span.arrowDown:after {
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-top: 0.25rem solid rgba(57, 57, 57, 0.6);
    top: 40%
}

.numInputWrapper span svg {
    width: inherit;
    height: auto
}

.numInputWrapper span svg path {
    fill: rgba(0, 0, 0, 0.5)
}

.numInputWrapper:hover {
    background: rgba(0, 0, 0, 0.05)
}

.numInputWrapper:hover span {
    opacity: 1
}

.currentmonth {
    font-size: 135%;
    font-weight: 300;
    color: inherit;
    position: absolute;
    width: 75%;
    left: 12.5%;
    padding: 0.4675rem 0 0 0;
    height: 2.125rem;
    display: inline-block;
    text-align: center;
    transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.currentmonth span.cur-month {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    display: inline-block;
    margin: 0 0 0 .5ch;
    padding: 0
}

.currentmonth span.cur-month:hover {
    background: rgba(0, 0, 0, 0.05)
}

.currentmonth .numInputWrapper {
    width: 6ch;
    width: 7ch\0;
    display: inline-block
}

.currentmonth .numInputWrapper span.arrowUp:after {
    border-bottom-color: rgba(0, 0, 0, 0.9)
}

.currentmonth .numInputWrapper span.arrowDown:after {
    border-top-color: rgba(0, 0, 0, 0.9)
}

.currentmonth input.cur-year {
    background: transparent;
    box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    cursor: text;
    padding: 0 0 0 .5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    height: auto;
    border: 0;
    border-radius: 0;
    vertical-align: initial;
    appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.currentmonth input.cur-year:focus {
    outline: 0
}

.currentmonth input.cur-year[disabled],
.currentmonth input.cur-year[disabled]:hover {
    font-size: 100%;
    color: rgba(0, 0, 0, 0.5);
    background: transparent;
    pointer-events: none
}

.currentmonth .monthDropdownmonths {
    appearance: menulist;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    height: auto;
    margin: -0.0625rem 0 0 0;
    outline: none;
    padding: 0 0 0 .5ch;
    position: relative;
    vertical-align: initial;
    box-sizing: border-box;
    appearance: menulist;
    -moz-appearance: menulist;
    width: auto
}

.currentmonth .monthDropdownmonths:focus,
.currentmonth .monthDropdownmonths:active {
    outline: none
}

.currentmonth .monthDropdownmonths:hover {
    background: rgba(0, 0, 0, 0.05)
}

.currentmonth .monthDropdownmonths .monthDropdownmonth {
    background-color: transparent;
    outline: none;
    padding: 0
}

.weekdays {
    background: transparent;
    text-align: center;
    overflow: hidden;
    width: 100%;
    display: box;
    display: flex;
    display: -ms-flexbox;
    display: flex;
    box-align: center;
    align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 1.75rem
}

.weekdays .weekdaycontainer {
    display: box;
    display: flex;
    display: -ms-flexbox;
    display: flex;
    box-flex: 1;
    flex: 1;
    -ms-flex: 1;
    flex: 1
}

span.weekday {
    cursor: default;
    font-size: 90%;
    background: transparent;
    color: rgba(0, 0, 0, 0.54);
    margin: 0;
    text-align: center;
    display: block;
    box-flex: 1;
    flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: bolder
}

.dayContainer,
.weeks {
    padding: 0.0625rem 0 0 0
}

.days {
    position: relative;
    overflow: hidden;
    display: box;
    display: flex;
    display: -ms-flexbox;
    display: flex;
    box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 21rem
}

.days:focus {
    outline: 0
}

.dayContainer {
    padding: 0;
    outline: 0;
    text-align: left;
    width: 21rem;
    width: clamp(21rem, 100%, 100%);
    width: clamp(0px, 100%, 21rem);
    box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    display: -ms-flexbox;
    display: box;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-around;
    justify-content: space-around;
    transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

.dayContainer+.dayContainer {
    box-shadow: -0.0625rem 0 0 #e6e6e6;
    box-shadow: -0.0625rem 0 0 #e6e6e6
}

.day {
    background: none;
    border: 0.0625rem solid transparent;
    border-radius: 9.375rem;
    box-sizing: border-box;
    box-sizing: border-box;
    color: #393939;
    font-weight: 400;
    width: 14.2857143%;
    flex-basis: 14.2857143%;
    -ms-flex-preferred-size: 14.2857143%;
    flex-basis: 14.2857143%;
    width: clamp(0px, 100%, 2.4375rem);
    height: 2.4375rem;
    margin: 0;
    display: inline-block;
    position: relative;
    box-pack: center;
    justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.day.inRange,
.day.prevMonthDay.inRange,
.day.nextMonthDay.inRange,
.day.today.inRange,
.day.prevMonthDay.today.inRange,
.day.nextMonthDay.today.inRange,
.day:hover,
.day.prevMonthDay:hover,
.day.nextMonthDay:hover,
.day:focus,
.day.prevMonthDay:focus,
.day.nextMonthDay:focus {
    outline: 0;
    background: #e6e6e6;
    border-color: #e6e6e6
}

.day.today {
    border-color: #959ea9
}

.day.today:hover,
.day.today:focus {
    border-color: #959ea9;
    background: #959ea9;
    color: #fff
}

.day.selected,
.day.startRange,
.day.endRange,
.day.selected.inRange,
.day.startRange.inRange,
.day.endRange.inRange,
.day.selected:focus,
.day.startRange:focus,
.day.endRange:focus,
.day.selected:hover,
.day.startRange:hover,
.day.endRange:hover,
.day.selected.prevMonthDay,
.day.startRange.prevMonthDay,
.day.endRange.prevMonthDay,
.day.selected.nextMonthDay,
.day.startRange.nextMonthDay,
.day.endRange.nextMonthDay {
    background: #569ff7;
    box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #569ff7
}

.day.selected.startRange,
.day.startRange.startRange,
.day.endRange.startRange {
    border-radius: 3.125rem 0 0 3.125rem
}

.day.selected.endRange,
.day.startRange.endRange,
.day.endRange.endRange {
    border-radius: 0 3.125rem 3.125rem 0
}

.day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
.day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
    box-shadow: -0.625rem 0 0 #569ff7;
    box-shadow: -0.625rem 0 0 #569ff7
}

.day.selected.startRange.endRange,
.day.startRange.startRange.endRange,
.day.endRange.startRange.endRange {
    border-radius: 3.125rem
}

.day.inRange {
    border-radius: 0;
    box-shadow: -0.3125rem 0 0 #e6e6e6, 0.3125rem 0 0 #e6e6e6;
    box-shadow: -0.3125rem 0 0 #e6e6e6, 0.3125rem 0 0 #e6e6e6
}

.day.disabled,
.day.disabled:hover,
.day.prevMonthDay,
.day.nextMonthDay,
.day.notAllowed,
.day.notAllowed.prevMonthDay,
.day.notAllowed.nextMonthDay {
    color: rgba(57, 57, 57, 0.3);
    background: transparent;
    border-color: transparent;
    cursor: default
}

.day.disabled,
.day.disabled:hover {
    cursor: not-allowed;
    color: rgba(57, 57, 57, 0.1)
}

.day.week.selected {
    border-radius: 0;
    box-shadow: -0.3125rem 0 0 #569ff7, 0.3125rem 0 0 #569ff7;
    box-shadow: -0.3125rem 0 0 #569ff7, 0.3125rem 0 0 #569ff7
}

.day.hidden {
    visibility: hidden
}

.rangeMode .day {
    margin: 0.0625rem
}

.weekwrapper {
    float: left
}

.weekwrapper .weeks {
    padding: 0 0.75rem 0 0 0;
    box-shadow: 0.0625rem 0 0 #e6e6e6;
    box-shadow: 0.0625rem 0 0 #e6e6e6
}

.weekwrapper .weekday {
    float: none;
    width: 100%;
}

.weekwrapper span.day,
.weekwrapper span.day:hover {
    display: block;
    width: 100%;
    width: auto;
    color: rgba(57, 57, 57, 0.3);
    background: transparent;
    cursor: default;
    border: none
}

.innerContainer {
    display: block;
    display: box;
    display: flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.rContainer {
    display: inline-block;
    padding: 0;
    box-sizing: border-box;
    box-sizing: border-box
}

.time {
    text-align: center;
    outline: 0;
    display: block;
    height: 0;
    max-height: 2.5rem;
    box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    display: box;
    display: flex;
    display: -ms-flexbox;
    display: flex
}

.time:after {
    content: "";
    display: table;
    clear: both
}

.time .numInputWrapper {
    box-flex: 1;
    flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 40%;
    height: 2.5rem;
    float: left
}

.time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #393939
}

.time .numInputWrapper span.arrowDown:after {
    border-top-color: #393939
}

.time.hasSeconds .numInputWrapper {
    width: 26%
}

.time.time24hr .numInputWrapper {
    width: 49%
}

.time input {
    background: transparent;
    box-shadow: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
    color: #393939;
    font-size: 0.875rem;
    position: relative;
    box-sizing: border-box;
    box-sizing: border-box;
    appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.time input.hour {
    font-weight: bold
}

.time input.minute,
.time input.second {
    font-weight: 400
}

.time input:focus {
    outline: 0;
    border: 0
}

.time .timeseparator,
.time .ampm {
    height: inherit;
    float: left;
    color: #393939;
    font-weight: bold;
    width: 2%;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}

.time .ampm {
    outline: 0;
    width: 18%;
    text-align: center;
    font-weight: 400
}

.time input:hover,
.time .ampm:hover,
.time input:focus,
.time .ampm:focus {
    background: #eee
}

.input[readonly] {}

@keyframes fpFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -1.25rem, 0);
        transform: translate3d(0, -1.25rem, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fpFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -1.25rem, 0);
        transform: translate3d(0, -1.25rem, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

/* Custom Flatpickr Theme - Soft Modern UI */
.calendar {
    background: #ffffff;
    border: 0.0625rem solid #f0f0f0;
    box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.08);
    color: #333333;
    border-radius: 1rem;
    padding: 0.625rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.calendar:before,
.calendar:after {
    display: none;
}

.calendar .day {
    color: #4b5563;
    border: 0.0625rem solid transparent;
    border-radius: 0.5rem;
    margin: 0;
    transition: all 0.2s ease;
}

.calendar .day:hover,
.calendar .day:focus {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}

.calendar .day.selected {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
    font-weight: 600;
    box-shadow: 0 0.25rem 0.625rem rgba(17, 24, 39, 0.2);
}

.calendar .day.today {
    border-color: #d1d5db;
    font-weight: 600;
}

.currentmonth .monthDropdownmonths {
    background: transparent;
    color: #111827;
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.125rem;
}

.currentmonth .numInputWrapper span.arrowUp:after {
    border-bottom-color: #9ca3af;
}

.currentmonth .numInputWrapper span.arrowDown:after {
    border-top-color: #9ca3af;
}

.time {
    border-top: 0.0625rem solid #f3f4f6;
    margin: 0.3125rem 0 0 0;
}

.time input {
    color: #111827;
    font-weight: 500;
}

.months .month {
    color: #111827;
    fill: #111827;
    margin: 0 0 0.3125rem 0;
}

.currentmonth .monthDropdownmonths:hover {
    background: #f3f4f6;
}

.months .prevmonth:hover svg,
.months .nextmonth:hover svg {
    fill: #111827;
}#toasts {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: clamp(16rem, 100%, 28.125rem);
  pointer-events: none;
  align-items: center;
}

.toast {
  background: var(--rich-white);
  color: var(--dark-charcoal);
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  border-left: 0.3125rem solid var(--dusty-blue);
  animation: slide-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  width: calc(100% - 3rem);
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: pan-x;
  user-select: none;
  cursor: grab;
}

.toast .close,
.toast .indicator {
  display: none;
}

.toast:active {
  cursor: grabbing;
}

.toast.success {
  border-left-color: var(--success-green);
}

.message {
  font-size: 0.9375rem;
  font-family: var(--font-family);
  font-weight: 500;
  width: 100%;
  text-align: center;
}

@keyframes slide-in {
  from {
    transform: translateY(-2.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast.fade-out {
  animation: fade-out 0.3s ease-in forwards;
}

@keyframes fade-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-1.875rem);
    opacity: 0;
  }
}
.indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  vertical-align: middle;
}

.indicator.turquoise,
.indicator-turquoise {
  background-color: #00ced1;
  box-shadow: 0 0 0.5rem rgba(0, 206, 209, 0.8);
  animation: pulse-turquoise 2s infinite;
}

.indicator.blue,
.indicator-blue {
  background-color: #0070f3;
  box-shadow: 0 0 0.5rem rgba(0, 112, 243, 0.8);
  animation: pulse-blue 2s infinite;
}

.indicator.violet,
.indicator-violet {
  background-color: #7928ca;
  box-shadow: 0 0 0.5rem rgba(121, 40, 202, 0.8);
  animation: pulse-violet 2s infinite;
}

.indicator.green,
.indicator-green {
  background-color: #10b981;
  box-shadow: 0 0 0.5rem rgba(16, 185, 129, 0.8);
  animation: pulse-green 2s infinite;
}

.indicator.red,
.indicator-red {
  background-color: #ef4444;
  box-shadow: 0 0 0.5rem rgba(239, 68, 68, 0.8);
  animation: pulse-red 2s infinite;
}

.indicator.amber,
.indicator-amber {
  background-color: #f59e0b;
  box-shadow: 0 0 0.5rem rgba(245, 158, 11, 0.8);
  animation: pulse-amber 2s infinite;
}

@keyframes pulse-turquoise {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 206, 209, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(0, 206, 209, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 206, 209, 0);
  }
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes pulse-amber {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.timestamp {
    bottom: 0.8rem;
    z-index: 6;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #6b7280;
    text-align: right;
    white-space: nowrap;
    margin: 1rem 0 0 0;
}

.date,
.msmg .story-time,
.msmg .story-metadata .author {
    font-size: 1.1rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01rem;
    margin: 1rem 0 0 0;
    display: inline-block;
}
/* selectors.css */

.tlc-selector {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  font-size: 0.95rem;
  font-family: var(--font-family, 'Inter', sans-serif);
  background-color: #fff;
  color: var(--rich-black, #0D0D0D);
  box-sizing: border-box;
  height: 3rem;
}

select.tlc-selector {
  appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="file"].tlc-selector {
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
}

.tlc-selector:focus {
  outline: none;
  border-color: var(--rich-black, #0D0D0D);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.1);
}

input[type="file"].tlc-selector::file-selector-button {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: none;
  background-color: var(--rich-black, #0D0D0D);
  color: #fff;
  margin: 0 1rem 0 0;
  font-family: var(--font-family, 'Inter', sans-serif);
  font-weight: 500;
  transition: background-color 0.2s ease;
}

input[type="file"].tlc-selector::file-selector-button:hover {
  background-color: #333;
}button, a {
    cursor: pointer;
}.sheet {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(20rem, 100%, 56.25rem);
    max-height: clamp(26rem, 88vh, 54rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--rich-white, #ffffff);
    border-radius: 2rem 2rem 0 0;
    transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
    z-index: 10400;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    visibility: hidden;
    pointer-events: none;
}

.sheet.active {
    bottom: 0;
    visibility: visible;
    pointer-events: auto;
}

.sheet.expanded {
    height: 92vh;
    max-height: 92vh;
}

.handle {
    width: 3rem;
    height: 0.375rem;
    background: var(--theme-border, #e2e8f0);
    border-radius: 0.1875rem;
    margin: 1rem 0 1rem 0;
    cursor: grab;
    touch-action: none;
    align-self: center;
}

.handle:active {
    cursor: grabbing;
}

.sheet .close {
    display: none;
}

.sheet .header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 1.25rem 0 1.25rem;
    box-sizing: border-box;
    text-align: center;
}

.sheet .title {
    text-align: center;
    width: 100%;
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    color: var(--theme-text, #1e1e1e);
    text-transform: uppercase;
}

.sheet .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.25rem 2.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sheet .panel {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.sheet .panel.hidden {
    display: none;
}

.sheet p,
.sheet .muted,
.sheet span,
.sheet label {
    font-size: 0.9rem;
    color: var(--medium-grey, #757575);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}

.sheet form {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.sheet input,
.sheet textarea,
.sheet select {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.sheet .reveal input,
.sheet form .reveal input {
    margin: 0 0 0 0;
}

.sheet .actions,
.sheet form .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1rem 0 0 0;
}

.sheet .bt,
.sheet button {
    align-self: center;
    text-align: center;
}

.sheet .chips {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 1.25rem 0;
}

.sheet .reveal:has(.qr) {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet .qr,
.sheet img.qr {
    width: 11rem;
    height: 11rem;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    background: #ffffff;
    border: 0.0625rem solid var(--light-grey, #e2e8f0);
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
    display: block;
    margin: 0.5rem 0 1rem 0;
    align-self: center;
}/* Shared 2FA Platform Show Sheet Styles */

.\32 fa, [class~="2fa"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  gap: 1rem;
}

.\32 fa .title, [class~="2fa"] .title {
  text-align: center;
  width: 100%;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: var(--theme-text, #1e1e1e);
  text-transform: uppercase;
}

.\32 fa .description, [class~="2fa"] .description {
  font-size: 0.9rem;
  color: var(--medium-grey, #757575);
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

.\32 fa .choices, [class~="2fa"] .choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 1rem 0;
}

.\32 fa .choice, [class~="2fa"] .choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 1rem;
  border-radius: 0.75rem;
  background: var(--soft-white, #f8f9fa);
  border: 0.0625rem solid var(--light-grey, #e2e8f0);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.\32 fa .choice:hover, [class~="2fa"] .choice:hover {
  background: var(--pale-blue, #edf3fb);
  border-color: var(--cyan-blue, #00d2ff);
}

.\32 fa .choice .name, [class~="2fa"] .choice .name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rich-black, #1e1e1e);
}

.\32 fa .choice .detail, [class~="2fa"] .choice .detail {
  font-size: 0.85rem;
  color: var(--medium-grey, #757575);
}

.\32 fa .settings, [class~="2fa"] .settings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin: 1rem 0 0.5rem 0;
}

.\32 fa .tile, [class~="2fa"] .tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 1rem;
  background: var(--soft-white, #f8f9fa);
  border-radius: 0.75rem;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}

.\32 fa .tile .label, [class~="2fa"] .tile .label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rich-black, #1e1e1e);
  margin: 0 0 0 0;
}

.\32 fa .qr, [class~="2fa"] .qr {
  width: 11rem;
  height: 11rem;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  background: #ffffff;
  border: 0.0625rem solid var(--light-purple, #f3e8ff);
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(103, 58, 183, 0.12);
  display: block;
  margin: 0.5rem 0 1rem 0;
  align-self: center;
}

.\32 fa .secret, [class~="2fa"] .secret {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.\32 fa .key, [class~="2fa"] .key {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  color: var(--deep-purple, #673ab7);
  word-break: break-all;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  background: var(--soft-white, #f8f9fa);
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.\32 fa .inputs, [class~="2fa"] .inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.\32 fa .inputs label, [class~="2fa"] .inputs label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rich-black, #1e1e1e);
  width: 100%;
  text-align: center;
  margin: 0 0 0 0;
}

.\32 fa .inputs input, [class~="2fa"] .inputs input {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.\32 fa .inputs input[readonly], [class~="2fa"] .inputs input[readonly] {
  background: var(--soft-white, #f8f9fa);
  color: var(--medium-grey, #757575);
  cursor: default;
}

.code {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.35rem;
  text-indent: 0.35rem;
  font-weight: 600;
  width: 100%;
  box-sizing: border-box;
}

.\32 fa .actions, [class~="2fa"] .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 1rem 0 0 0;
}

.\32 fa .actions button, [class~="2fa"] .actions button,
.\32 fa .actions .bt, [class~="2fa"] .actions .bt {
  cursor: pointer;
}

.\32 fa .codes, [class~="2fa"] .codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: 100%;
  margin: 0.75rem 0 0.75rem 0;
}

.\32 fa .item, [class~="2fa"] .item {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.25rem 0.5rem 0.25rem;
  background: var(--soft-white, #f8f9fa);
  border-radius: 0.375rem;
  text-align: center;
}

/* 2FA Platform Toggle Button Switch Styling */
.switch {
  position: relative;
  width: clamp(2.75rem, 2.75rem, 2.75rem);
  height: 1.5rem;
  background: var(--light-grey, #cccccc);
  border-radius: 0.75rem;
  transition: background 0.3s;
  cursor: pointer;
  flex-shrink: 0;
}

.switch::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

.switch.active,
.switch.on,
.switch.enabled,
.switch.is-on {
  background: var(--deep-purple, #673ab7);
}

.switch.active::after,
.switch.on::after,
.switch.enabled::after,
.switch.is-on::after {
  transform: translateX(1.25rem);
}

.settings {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}

.settings .label {
    font-size: 1rem;
    font-weight: 600;
}.overlay {
  position: fixed;
  inset: 0;
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--full-padding);
  background: var(--black-glass);
  backdrop-filter: blur(0.25rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-y: auto;
}

.overlay.active,
.overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 10400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
}

.modal[hidden] {
  display: none;
}

.linker {
  position: fixed;
  top: 50%;
  left: 50%;
  width: clamp(16rem, 90vw, 30rem);
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  border-radius: 1rem;
  background: var(--rich-white, #fff);
  color: var(--rich-black, #111);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.linker::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.linker .panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}

.linker h3,
.linker label {
  margin: 0 0 0 0;
  text-align: left;
}

.linker input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

.linker .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.75rem 0 0 0;
}

.linker button {
  cursor: pointer;
}

.editoriconbt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  padding: 0.375rem 0.375rem 0.375rem 0.375rem;
  margin: 0 0 0 0;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: opacity 0.15s ease;
}

.editoriconbt:hover {
  opacity: 0.7;
}

.editoriconbt .icon,
.attachbtn .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.attachbtn {
  cursor: pointer;
}

.attachicon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.attachtabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem 0;
  width: 100%;
}

.attachtab {
  flex: 1 1 0;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.attachtab.active {
  background: var(--rich-black, #111);
  color: var(--rich-white, #fff);
  border-color: var(--rich-black, #111);
}

.attachpane {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.attachpane.hidden {
  display: none;
}

.attachor {
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
  margin: 0.25rem 0 0.25rem 0;
}

.gearbox {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.gearcenter {
  transform-origin: 18px 18px;
  animation: gearspin 8s linear infinite;
}

.editoriconbt.generating .gearcenter,
.editoriconbt:disabled .gearcenter {
  animation: gearspin 2s linear infinite;
}

.gearorbit {
  transform-origin: 18px 18px;
  animation: gearorbit 5s linear infinite;
}

.editoriconbt.generating .gearorbit,
.editoriconbt:disabled .gearorbit {
  animation: gearorbit 1.5s linear infinite;
}

.gearouter {
  transform-origin: 18px 5.5px;
  animation: gearspin 3s linear infinite reverse;
}

.editoriconbt.generating .gearouter,
.editoriconbt:disabled .gearouter {
  animation: gearspin 1s linear infinite reverse;
}

#ai-write-trigger {
  cursor: pointer;
}

@keyframes gearspin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes gearorbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dialogs */

.dialog {
  background: #ffffff;
  border-radius: 1.75rem;
  width: clamp(18rem, 88%, 24rem);
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
  transform: scale(0.9);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.overlay.active .dialog {
  transform: scale(1);
}

.dialog .title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--almost-black, #1D1D1F);
  margin: 0 0 1rem 0;
}

.dialog .content {
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.95rem;
  color: var(--medium-grey, #757575);
  margin: 0 0 1.5rem 0;
}

.dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.electionmodal {
  background: var(--rich-white, #ffffff);
  border-radius: var(--full-radius, 1rem);
  padding: 1.5rem;
  width: clamp(20rem, 90%, 80rem);
  box-sizing: border-box;
  margin: 2rem 0 2rem 0;
}

/* content.css */

.content {
  width: max-content;
  box-sizing: border-box;
  font-size: var(--content-font, 1rem);
}
:root {
    --full-border: 1px solid rgba(0, 0, 0, 0.12);
    --bold-border: 2px solid var(--metallic-gold);
}.graph-container {
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;
  position: relative;
}

.canvas {
  width: 100%;
  display: block;
}

.x-axis {
  border-top: 2px solid var(--rich-black, #000);
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

.y-axis {
  border-right: 2px solid var(--rich-black, #000);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 0.5rem;
  margin-right: 0.25rem;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}.filters,
form.filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0.5rem 0 0.5rem;
    box-sizing: border-box;
    margin: 0 0 0.5rem 0;
}

.filters .chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 0.5rem 0;
}

.filters .chip {
    background: var(--rich-white, #fff);
    border: none;
    border-radius: 2rem;
    padding: 0.25rem 1rem 0.25rem 1rem;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--rich-black, #000);
    margin: 0 0 0 0;
}

.filters .chip.active,
.filters .chip:hover {
    background: var(--rich-black, #000);
    color: var(--rich-white, #fff);
    border: none;
}
/* Search Widget Styles */
.searchbar {
    display: flex;
    align-items: center;
    background: var(--rich-white, #fff);
    border: 1px solid #ccc;
    border-radius: 2rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    width: calc(66vw + 1px);
    box-sizing: border-box;
    margin: 0 calc(50% - (33vw + 0.5px)) 0.5rem calc(50% - (33vw + 0.5px));
}

.searchbar i {
    color: #999;
    font-size: 1rem;
    flex-shrink: 0;
}

.searchbar input {
    background: transparent;
    border: none;
    color: var(--rich-black, #000);
    outline: none;
    margin: 0 0 0 0;
    padding: 0.5rem 0 0.5rem 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.searchbar button {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1.25rem;
    flex-shrink: 0;
    outline: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0.5rem;
}

.searchbar button:hover {
    color: var(--rich-black, #000);
}
.home .container .section {
  background: var(--warm-sand);
  border-radius: var(--full-radius);
  padding: var(--around-padding);
  text-align: left;
}

.home .container .section p {
  text-align: left;
}

.home .container .section,
.home .container form {
  flex: 1;
  margin: 0 1.0625rem 1rem 1.0625rem;
}

.home .container form {
  width: 100%;
}

.home .bt,
.home .bt-secondary {
  display: inline-flex;
}

.home .container ul,
.home .container li {
  text-align: left;
}

.error-title {
  font-size: 5rem;
  margin: 0 0 1.25rem 0;
  color: #4b0082;
}

.error-subtitle {
  font-size: 1.5rem;
  margin: 0 0 1.875rem 0;
}

.error-text {
  color: #666;
  margin: 0 0 2.5rem 0;
}

.demo-tip {
  font-size: 0.9rem;
  color: #666;
  margin: 0.75rem 0 0 0;
}

.demo-empty {
  padding: 1.5rem;
  border: 1px dashed #ddd;
  border-radius: 0.5rem;
  text-align: center;
  color: #777
}

.demo-video {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.0625rem 0.375rem rgba(0, 0, 0, 0.06);
}

.demo-warning {
  margin: 0.5rem 0;
  color: #b04;
}

.home .hero .logo {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  z-index: 2;
}

.home .hero .content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home .hero .content .title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  white-space: nowrap;
}

.home .compact {
  display: none;
}

.home .full {
  display: inline;
}

.home .contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.home .email {
  flex: 1;
  text-align: right;
}

.home .separator {
  flex: 0 0 auto;
}

.home .phone {
  flex: 1;
  text-align: left;
}

.home .socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--full-gap);
  margin: var(--top-margin);
}

.home .socials a {
  font-size: 1.5rem;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.home .socials a:hover {
  opacity: 0.7;
}

.home .mount {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.about .mount,
.divisions .mount {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 100%;
  margin: 1.5rem 0 2.5rem 0;
  padding: 0 0 0 0;
}

.about .container.flip,
.divisions .container.flip {
  width: clamp(9.75rem, 18vw, 13rem);
  flex: 0 0 clamp(9.75rem, 18vw, 13rem);
  height: clamp(7.5rem, 13.85vw, 10rem);
  margin: 1rem 1rem 1rem 1rem;
  position: relative;
  box-sizing: border-box;
  padding: 0 0 0 0;
}

.about .front,
.about .back,
.divisions .front,
.divisions .back {
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.95rem;
  padding: 0.75rem 0.75rem;
}
.brand .title {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  color: inherit;
  font-size: inherit;
  font-weight: var(--font-weight);
}

.brand .space {
  opacity: 1
}

.brand {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.09375rem;
}

.brand .refresh {
  display: inline;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

[data-brand-refresh] {
  cursor: pointer;
}

[data-brand-refresh]:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.25rem;
}


.appgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.appmodule {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  transition: transform 0.3s ease;
}

.appmodule:hover {
  transform: translateY(-0.25rem);
}

.appicon {
  width: 5rem;
  height: 5rem;
  margin: 0 0 1rem 0;
  flex-shrink: 0;
}

.appicon a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}

.appicon img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1rem rgba(17, 24, 39, 0.08);
  border: 0.0625rem solid #edf0f7;
}

.appmodule h3 {
  margin: 0 0 0.375rem 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.appmodule p {
  margin: 0 0 0.75rem 0;
  color: #586072;
  font-size: 0.875rem;
  line-height: 1.4;
}

.applinkofficial,
.badgesubtitle,
.badgetitle {
  color: #ffffff;
}

.systems .appmodule .badgecontainer + .badgecontainer {
  margin: .17rem;
}


.services {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  margin: 1.5rem 0 0 0;
}

.service {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: #ffffff;
  padding: var(--full-padding);
  border-radius: var(--full-radius);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  gap: 1.5rem;
}

.service:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

.serviceicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: #f3f4f6;
  color: #374151;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.serviceinfo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.heading {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.systems .pillars .container.half {
  justify-content: flex-start;
}

.systems.ees header {
  background-color: var(--rich-white);
  border-bottom: 0.0625rem solid var(--light-grey);
}

.systems.ees header .container {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.systems.ees header .brand.title {
  color: var(--rich-black);
  margin: 0 0 0 0;
  text-align: left;
}

/* Systems Hub Dashboard (Learmond White Theme) */
.ic.systems .pillars.row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 1rem;
  box-sizing: border-box;
}

.ic.systems .pillars .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 33%;
  min-height: 25rem;
  background-color: var(--rich-white);
  border-radius: var(--round-edges);
  margin: 0.5rem;
  box-sizing: border-box;
  box-shadow: none;
  border: 0.0625rem solid #e5e7eb;
  padding: 1.25rem;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ic.systems .pillars .container:hover {
  transform: translateY(-0.15rem);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.04);
}

.ic.systems .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 0.75rem 0;
}

.ic.systems .head h2 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--rich-black);
}

.ic.systems .stream {
  width: 100%;
  height: 18rem;
  overflow-y: auto;
  background: var(--rich-white);
  color: var(--rich-black);
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  border: 0.0625rem solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-sizing: border-box;
}

.ic.systems .entry {
  margin: 0 0 0.35rem 0;
  word-break: break-all;
}

.ic.systems .entry .time {
  color: var(--medium-grey);
  margin: 0 0.4rem 0 0;
}

.ic.systems .triage {
  width: 100%;
  height: 18rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ic.systems .ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.0625rem solid #f3f4f6;
  padding: 0.5rem 0 0.5rem 0;
  gap: 0.5rem;
}

.ic.systems .ticket .info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ic.systems .ticket .title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--rich-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic.systems .ticket .meta {
  font-size: 0.75rem;
  color: var(--medium-grey);
}

.ic.systems .gauges {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin: 2rem 0 1.5rem 0;
}

.ic.systems .gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.ic.systems .ring {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 0.35rem solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.ic.systems .operations {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin: 1.5rem 0 0 0;
}

.ic.systems .operations .bt {
  width: 100%;
  margin: 0;
}

.ic.systems .table {
  margin: 0.5rem 0 0.5rem 0;
}

.ic.systems .chips {
  margin: 0;
}

.ic.systems .triage .empty {
  text-align: center;
  margin: auto;
}

.ic.systems .label.online {
  color: #10b981;
}

.ic.systems .actions {
  margin: auto 0 0 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.ic.systems .metrics {
  text-align: center;
  margin: 0;
}

/* Source CSS */

.app-link-source {
  background: #ffffff;
  border-color: #efe4a6;
  color: #f2c300
}

.app-link-source-mark {
  display: block;
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: #f2c300
}

.source-appicon {
  background-color: transparent;
  padding:0;
  box-shadow: none;
}

.source-appicon img {
  border-radius: 2rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.tech-square-source {
  flex: 1;
  background-color: white;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:clamp(3.5rem, 10vw, 5.5rem) 1rem;
  color: #FFD700;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tech-square-source:hover {
  transform: translateY(-0.0625rem);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.1);
}

.pillars .container.source .pillar h3 {
  color: #FFD700
}

.pillars .container.source .pillar p {
  color: #FFD700
}

.source-footer-button {
  background-color: #FFD700;
  color: white;
  padding:0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  margin-left:0;
  display: inline-block
}

footer .source-footer-button {
  white-space: nowrap
}
.pillars.row {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: visible;
  align-items: stretch;
  padding: var(--full-padding);
  box-sizing: border-box;
  width: 100%;
}

.pillars .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33%;
  background-color: var(--rich-white);
  border-radius: var(--round-edges);
  margin: var(--minor-margin);
  box-sizing: border-box;
  box-shadow: var(--soft-shadow);
  border: var(--full-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  flex-shrink: 1;
  font-family: 'Outfit', sans-serif;
  padding: var(--full-padding);
}

.pillars .container.full {
  width: clamp(10rem, 100%, 100%);
}


.pillars .container:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--hover-shadow);
  border-color: rgba(0, 0, 0, 0.1)
}

.pillar {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--full-padding);
  text-align: center;
  font-family: 'Outfit', sans-serif;
}


.pillars .container.half {
  width: 50%;
}.profile-graph-shell {

  top: calc(4.5rem + env(safe-area-inset-top, 0));
  bottom: calc(15.375rem + env(safe-area-inset-bottom, 0));

}

.profile-graph-frame {

  top: 0.625rem;
  right: 0.375rem;
  bottom: 0.125rem;
  left: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);

}

.profile-graph-tabs {

  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(9.75rem + env(safe-area-inset-bottom, 0));
  z-index: 18;
  white-space: nowrap;

}

.profile-nav-divider {

  bottom: calc(14.25rem + env(safe-area-inset-bottom, 0));

}

.profile-performance-label {

  bottom: calc(13.125rem + env(safe-area-inset-bottom, 0));
  font-size: 0.6875rem;

}

.profile-portfolio-readout {

  bottom: calc(12rem + env(safe-area-inset-bottom, 0));
  font-size: 0.6875rem;

}

.profile-balance-readout {

  bottom: calc(10rem + env(safe-area-inset-bottom, 0));
  font-size: 1.125rem;

}

.profile-balance-actions {

  bottom: calc(7.5rem + env(safe-area-inset-bottom, 0));
  gap: 0.75rem;

}

.profile-toc-horizontal {

  bottom: calc(3.875rem + env(safe-area-inset-bottom, 0));
  gap: 0.875rem;

}

.profile-nav-divider-bottom {

  bottom: calc(3.25rem + env(safe-area-inset-bottom, 0));

}

.profile-toc-btn {

  width: 5.75rem;
  font-size: 0.86rem;
  padding: 0.5rem 0;

}

#depositBtn {

  width: 5.25rem;
  font-size: 0.84rem;
  padding: 0.5rem 0;


}

#withdrawBtn {

  width: 5.25rem;
  font-size: 0.84rem;
  padding: 0.5rem 0;


}




.profile-dashboard {

  width: 100%;
  margin: 0 0;
  min-height: 25rem;
  display: block;
  font-family: "Segoe UI", "Roboto", sans-serif;

}

.profile-balance-box {

  border: 0.125rem solid #222;

  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.3em;
  background: #f9f9f9;
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.07);
  padding: 2rem 1.75rem;
  margin: 0 0;

}

.profile-graph-shell {

  position: fixed;
  left: 0;
  right: calc(var(--profile-sidebar-right-gap) + var(--profile-sidebar-width) - var(--profile-sidebar-pad-left));
  top: calc(5.25rem + env(safe-area-inset-top, 0));
  bottom: calc(16.375rem + env(safe-area-inset-bottom, 0));
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 15;

}

.profile-graph-frame {

  position: absolute;
  top: 1.875rem;
  right: 1.6875rem;
  bottom: 0.25rem;
  left: 1.4375rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 0.0625rem solid #171717;
  background: #020202;
  box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.28);
  overflow: hidden;

}

.profile-sidebar {

  position: fixed;
  top: calc(6.625rem + env(safe-area-inset-top, 0));
  right: var(--profile-sidebar-right-gap);
  width: var(--profile-sidebar-width);
  bottom: calc(16.4375rem + env(safe-area-inset-bottom, 0));
  padding: 1rem 0 0.125rem var(--profile-sidebar-pad-left);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  z-index: 16;

}

.symbol-widget {

  border: 0.0625rem solid #d5d5d5;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.625rem 0.75rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;

}

.symbol-widget-title {

  font-size: 0.8125rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 0.25rem 0;

}

.symbol-widget-list {

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;

}

.symbol-widget-list::scrollbar {

  width: 0;
  height: 0;
  display: none;

}

.symbol-widget-item {

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 0.0625rem solid #ececec;

}

.symbol-widget-item:last-child {

  border-bottom: none;

}

.symbol-widget-item .symbol {

  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.0125rem;

}

.symbol-widget-item .price-wrap {

  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

.symbol-widget-item .price {

  color: #222;
  font-size: 0.8125rem;
  font-weight: 700;

}

.symbol-widget-item .delta {

  color: #666;
  font-size: 0.75rem;
  margin: 0.125rem 0 0 0;

}

.symbol-widget-item.up .price {

  color: #137333;

}

.symbol-widget-item.up .delta {

  color: #137333;

}

.symbol-widget-item.down .price {

  color: #b42318;

}

.symbol-widget-item.down .delta {

  color: #b42318;

}

.symbol-widget-item .error {

  color: #b42318;
  font-size: 0.75rem;

}

.symbol-widget-loading {

  font-size: 0.8125rem;
  color: #555;

}

.symbol-widget-error {

  font-size: 0.8125rem;
  color: #555;

}

.profile-graph-tabs {

  position: fixed;
  right: calc(var(--profile-sidebar-right-gap) + var(--profile-sidebar-width) - var(--profile-sidebar-pad-left) + 0.875rem);
  bottom: calc(16.4375rem + env(safe-area-inset-bottom, 0));
  z-index: 16;
  display: flex;
  gap: 0.5rem;

}

.profile-graph-tabs {

  position: fixed;
  right: calc(var(--profile-sidebar-right-gap) + var(--profile-sidebar-width) - var(--profile-sidebar-pad-left) + 0.875rem);
  bottom: calc(16.4375rem + env(safe-area-inset-bottom, 0));
  z-index: 16;
  display: flex;
  gap: 0.5rem;

}

.profile-graph-tab {

  border: 0.0625rem solid #d0d0d0;
  background: #fff;
  color: #222;
  border-radius: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-family: "Segoe UI", "Roboto", sans-serif;
  font-size: 0.8125rem;

}

.profile-graph-tab.active {

  background: #222;
  color: #fff;
  border-color: #222;

}

.profile-graph-canvas {

  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.625rem;
  overflow: hidden;
  background: #040404;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;

}

.profile-graph-canvas svg {

  width: 100%;
  height: 100%;
  display: block;

}

.profile-graph-svg {

  width: 100%;
  height: 100%;
  display: block;
  background: #ffffff;
  border-radius: 0.625rem;

}

.profile-graph-line {

  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: none;

}

.profile-graph-dot {

  stroke: none;
  opacity: 1;
  animation: none;
  transition: transform 120ms ease, filter 120ms ease;
  cursor: pointer;

}

.profile-graph-line.portfolio {

  stroke: #4deeff;

}

.profile-graph-dot.portfolio {

  fill: #4deeff;

}

.profile-graph-line.performance {

  stroke: #6b7280;

}

.profile-graph-dot.performance {

  fill: #6b7280;

}

.profile-graph-dot:hover {

  transform: scale(1.45);
  filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.38));

}

.profile-graph-dot.is-active {

  transform: scale(1.45);
  filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.38));

}

.profile-graph-tooltip {

  position: absolute;
  z-index: 100;

  width: 100%;
  pointer-events: none;
  background: #ffffff;
  color: #000000;
  border: 0.0625rem solid #e5e7eb;
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  white-space: nowrap;
  backdrop-filter: blur(0.25rem);

}

.profile-graph-empty {

  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.8125rem;

}

.profile-graph-legend {

  display: none;

}

.profile-graph-legend .line {

  display: inline-block;
  width: 1.25rem;
  height: 0.125rem;
  vertical-align: middle;
  margin: 0 0.375rem 0 0;

}

.profile-graph-legend .line.portfolio {

  background: #111;

}

.profile-graph-legend .line.performance {

  background: #666;

}

.profile-toc-horizontal {

  gap: 0.375rem;
  justify-items: center;
  align-items: center;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(6rem + env(safe-area-inset-bottom, 0));
  z-index: 15;
  width: min(31.25rem, calc(100vw - 1rem));
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  overflow-x: auto;
  overflow-y: hidden;

}

.profile-nav-divider {

  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16.125rem + env(safe-area-inset-bottom, 0));
  border-top: 0.25rem solid #000;
  z-index: 14;

}

.profile-portfolio-readout {

  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14.125rem + env(safe-area-inset-bottom, 0));
  z-index: 15;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #444;
  white-space: nowrap;

}

.profile-nav-divider-bottom {

  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0));
  border-top: 0.25rem solid #000;
  z-index: 14;

}

.profile-balance-readout {

  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12.375rem + env(safe-area-inset-bottom, 0));
  z-index: 15;
  font-size: 1.375rem;
  font-weight: 600;
  color: #222;
  white-space: nowrap;

}

.profile-performance-label {

  position: fixed;
  left: 50%;
  transform: translateX(calc(-50% + 0.125rem));
  bottom: calc(15.25rem + env(safe-area-inset-bottom, 0));
  z-index: 15;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #444;
  letter-spacing: 0.0125rem;
  white-space: nowrap;

}

.profile-menu {

  position: fixed;
  top: calc(4.75rem + env(safe-area-inset-top, 0));
  right: 0.875rem;

  width: 100%;
  background: #fff;
  border: 0.0625rem solid #d2d2d2;
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.16);
  padding: 0.75rem;
  z-index: 40;

}

.profile-menu-title {

  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.375rem 0;

}

.profile-menu-row {

  font-size: 0.8125rem;
  color: #333;
  margin: 0 0 0.375rem 0;
  word-break: break-word;

}

.profile-menu-link {

  margin: 0.25rem 0 0 0;
  color: #111;
  font-weight: 600;

}

.profile-balance-actions {

  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(9.375rem + env(safe-area-inset-bottom, 0));
  width: min(31.25rem, calc(100vw - 1rem));
  gap: 0.375rem;
  justify-items: center;
  align-items: center;
  z-index: 15;


}

.profile-toc-btn {

  font-size: 1.1em;
  color: #222;
  background: #eee;
  border: none;
  border-radius: 0.375rem;
  width: 7rem;
  padding: 0.625rem 0;
  transition: background 0.2s;
  font-family: "Segoe UI", "Roboto", sans-serif;
  text-align: center;
  cursor: pointer;

}

.profile-toc-btn:hover {

  background: #ddd;

}



.pay-sheet {

  width: min(40rem, 100vw);
  max-height: 86vh;
  height: 34vh;
  overflow-y: auto;
  background: #fff;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 -0.5rem 2rem rgba(0, 0, 0, 0.2);
  padding: 0.875rem 1rem calc(1.125rem + env(safe-area-inset-bottom, 0)) 1rem;
  font-family: "Segoe UI", "Roboto", sans-serif;
  transition: height 180ms ease;

}

.pay-sheet-handle {

  width: 3rem;
  height: 0.3125rem;
  border-radius: 62.4375rem;
  background: #c7c7c7;
  margin: 0.125rem 0 0.75rem 0;
  touch-action: none;
  cursor: ns-resize;

}

.pay-sheet-title {

  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;

}

.pay-sheet-label {

  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 0.375rem 0;

}

.pay-sheet-input {

  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid #d8d8d8;
  border-radius: 0.625rem;
  font-size: 1rem;
  background: #fff;

}

.pay-sheet-select {

  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid #d8d8d8;
  border-radius: 0.625rem;
  font-size: 1rem;
  background: #fff;

}

.pay-sheet-methods {

  gap: 0.5rem;
  margin: 0.125rem 0 0.5rem 0;

}

.pay-sheet-methods.single-option {}

.pay-sheet-method {

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid #d8d8d8;
  border-radius: 0.625rem;
  background: #fff;
  color: #222;
  font-size: 0.875rem;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

}

.pay-sheet-method i {

  font-size: 1rem;

}

.pay-sheet-method.is-active {

  border-color: #111;
  background: #f7f7f7;
  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.18) inset;

}

.pay-sheet-method:disabled {

  opacity: 0.55;
  cursor: not-allowed;

}

.pay-sheet-element {

  border: 0.0625rem solid #d8d8d8;
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  margin: 0.5rem 0 0 0;

}

.pay-sheet-primary {

  width: 100%;
  margin: 0.75rem 0 0 0;
  padding: 0.6875rem 0.875rem;
  border: 0;
  border-radius: 0.625rem;
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;

}

.pay-sheet-close {

  width: 100%;
  margin: 0.625rem 0 0 0;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid #d8d8d8;
  border-radius: 0.625rem;
  background: #fff;
  color: #222;
  font-size: 0.9375rem;

}

.pay-sheet-error {

  min-height: 1.25rem;
  margin: 0.5rem 0 0 0;
  color: #b00020;
  font-size: 0.875rem;

}

.side-btn {

  width: 100%;
  text-align: left;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border: 0.0625rem solid #eee;
  border-radius: 0.5rem;
  font-size: 1em;

}

.side-btn.active {

  background: #222;
  color: #fff;

}

.profile-center {

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.projections-row {

  width: 100%;
  margin: 0 0 0 0;

}

.performance-row {

  width: 100%;
  margin: 0 0 0 0;

}

.chart-box {

  border: 0.125rem solid #222;
  width: 7.5rem;
  background: #f9f9f9;
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.07);
  font-size: 1.1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.projection-box {

  width: 7.5rem;
  height: 7.5rem;
  padding: 0.625rem;

}

.performance-box {

  height: 4.375rem;
  padding: 0.75rem;

}

.projections-page {

  width: 100%;
  min-height: calc(100vh - 9.375rem);
  box-sizing: border-box;
  padding: 0.5rem 1.25rem 11.875rem 1.25rem;
  grid-template-rows: 1.35fr 1fr;
  gap: 1rem;
  font-family: "Segoe UI", "Roboto", sans-serif;

}

.projections-half {

  width: 100%;
  gap: 1rem;
  align-items: stretch;

}

.projection-card {

  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.875rem 0.5rem 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 10rem;

}

.projection-card canvas {

  width: 100%;
  height: 4.5rem;
  display: block;
  margin: 0 0 0.375rem 0;

}

.projections-bottom-half .projection-card {

  min-height: 8.125rem;

}

.projection-graph {

  width: 100%;
  height: 4.5rem;
  margin: 0 0 0.375rem 0;

}

.projection-graph svg {

  width: 100%;
  height: 100%;

}

.projection-graph polyline {

  fill: none;
  stroke: #222;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

}

.projection-graph line {

  fill: none;
  stroke: #222;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

}

.projection-value {

  font-size: 1.85rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 0.375rem 0;
  font-family: "Segoe UI", "Roboto", sans-serif;
  text-align: center;

}

.projection-label {

  font-size: 0.8125rem;
  font-weight: 500;
  color: #444;
  letter-spacing: 0.0125rem;
  font-family: "Segoe UI", "Roboto", sans-serif;
  text-align: center;

}











.sr-only {

  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;

}


.server-loading {

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;

}

.server-error {

  margin: 3rem 0;
  padding: 1.125rem;
  font-family: "Segoe UI", "Roboto", "Arial", sans-serif;
  color: #b42318;
  border: 0.0625rem solid #fecdca;
  border-radius: 0.75rem;
  background: #fef3f2;

}


.auth-container {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.25rem 2.5rem;
  flex: 1;

}

.hero-logo {

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 2.25rem;
  color: #000000;
  text-align: center;
  margin: 0 0 0.5rem 0;

}

.minor-logo {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 2.50rem;
  color: #000000;
  text-align: center;
  margin: 0 0 0 0;
}



.glass-card {

  background: var(--glass-white);
  border: 0.0625rem solid var(--glass-border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  width: 100%;
  box-shadow: var(--glass-glow);

}

.auth-tabs {

  display: flex;
  gap: 1rem;
  margin: 0 0 2rem 0;
  border-bottom: 0.0625rem solid var(--glass-border);
  padding: 0 0 0.5rem 0;

}

.auth-tab {

  background: none;
  border: none;
  color: var(--medium-grey);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;

}

.auth-tab.active {

  color: var(--almost-black);

}

.auth-tab.active::after {

  content: '';
  position: absolute;
  bottom: -0.5625rem;
  left: 0;
  right: 0;
  height: 0.125rem;
  background: var(--deep-purple);
  box-shadow: 0 0 0.5rem var(--deep-purple);

}

.form-group {

  margin: 0 0 1.5rem 0;

}

.form-group label {

  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--medium-grey);
  margin: 0 0 0.5rem 0;

}





.btn-glow {

  width: 100%;
  background: #000000;
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 0.875rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  margin: 0.5rem 0 0 0;
  cursor: pointer;

}

.btn-glow:hover {

  background: #222222;
  transform: translateY(-0.0625rem);

}

.btn-glow:active {

  transform: translateY(0);

}


@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }
}

.animate-fade {

  animation: fadeIn 0.6s ease-out forwards;

}



.flash-stack {

  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

}

.flash {

  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.9);
  color: white;
  backdrop-filter: blur(0.5rem);
  border: 0.0625rem solid var(--glass-border);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);

  animation: slideIn 0.3s ease-out;

}

.flash-error {

  border-left: 0.25rem solid #ef4444;

}

.flash-success {

  border-left: 0.25rem solid #10b981;

}

@keyframes slideIn {

  from {

    transform: translateX(100%);
    opacity: 0;

  }

  to {

    transform: translateX(0);
    opacity: 1;

  }
}


.positions-container {

  padding: 0 1.5rem 1.25rem;
  width: 100%;
  margin: 0;
  box-sizing: border-box;

}



.asset-cell {

  display: flex;
  align-items: center;
  gap: 0.75rem;

}

.logo-box {

  width: 2rem;
  height: 2rem;
  background: #f8fafc;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.logo-img {

  width: 100%;
  height: 100%;
  object-fit: contain;

}

.symbol-ticker {

  font-weight: 700;
  font-size: 0.95rem;

}

.delta.positive {

  color: #10b981;

}

.delta.negative {

  color: #ef4444;

}

.badge-bullish {

  color: #10b981;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;

}

.badge-bearish {

  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;

}






.watchlist-container {

  padding: 0 1.5rem 2rem;
  width: 100%;
  margin: 0 0;
  box-sizing: border-box;

}

.industry-section {

  margin: 1.75rem 0 0 0;

}

.industry-section:first-of-type {

  margin: 1.5rem 0 0 0;

}

.industry-section-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 0 0.75rem 0;
  border-bottom: 0.0625rem solid #e2e8f0;

}

.industry-section-kicker {

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;

}

.industry-section title {

  margin: 0.25rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;

}

.industry-section-count {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 62.4375rem;
  background: #f8fafc;
  border: 0.0625rem solid #e2e8f0;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;

}


.watchlist-card {

  background: #fff;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: none;
  overflow: hidden;

}

.card-top {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;


}

.symbol-group {

  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;


}



.symbol-text {

  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.symbol-subcopy {

  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.industry-label {

  font-size: 0.75rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.price-row {

  display: flex;
  justify-content: space-between;
  align-items: baseline;

}

.card-price {

  font-size: 1.25rem;
  font-weight: 700;
  color: #000;

}

.change-pill {

  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;

}

.change-pill.positive {

  background: #ecfdf5;
  color: #10b981;

}

.change-pill.negative {

  background: #fef2f2;
  color: #ef4444;

}

.card-meta {

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 0 0 0;
  border-top: 0.0625rem solid #f1f5f9;

}

.analysis-badge {

  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;

}

.analysis-badge.bullish {

  color: #10b981;

}

.analysis-badge.bearish {

  color: #ef4444;

}

.watchlist-empty {

  margin: 1.5rem 0 0 0;
  padding: 1.125rem 1.25rem;
  border: 0.0625rem dashed #cbd5e1;
  border-radius: 0.75rem;
  background: #fff;

}

.positions-empty {

  margin: 1.5rem 0 0 0;
  padding: 1.125rem 1.25rem;
  border: 0.0625rem dashed #cbd5e1;
  border-radius: 0.75rem;
  background: #fff;

}

.muted {

  color: var(--medium-grey);

}





.sr-only {

  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;

}

#header .profile-popout {
  position: absolute;
  top: 6.875rem;
  right: 0;
  transform: translateX(-1.25rem);
  width: 17.5rem;
  background: #ffffff;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
  z-index: 2000;
  display: none;
  animation: lcmPopIn 200ms ease-out;
}

#header .profile-popout.is-active {
  display: block;
}

@keyframes lcmPopIn {
  from {
    opacity: 0;
    transform: translateX(-1.25rem) translateY(-0.625rem) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-1.25rem) translateY(0) scale(1);
  }
}

.profile-popout-wrap {

  position: relative;

}

.popout-user-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.125rem 0;
}

.popout-email {
  font-weight: 500;
  color: #64748b;
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popout-op {

  font-size: 0.8rem;
  color: #64748b;
  margin: 0 0 1.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;

}

.admin-panel {

  border-top: 0.0625rem solid #f1f5f9;
  padding: 1rem 0 0 0;
  margin: 1rem 0 0 0;

}

.admin-label {

  font-size: 0.7rem;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  margin: 0 0 0.625rem 0;
  display: block;

}

.popout-btn {
  display: block;
  width: 100%;
  padding: 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  transition: 120ms;
  margin: 0.5rem 0 0 0;
}

.popout-btn-primary {

  background: #000;
  color: #fff;

}

.popout-btn-secondary {

  background: #f8fafc;
  color: #000;
  border: 0.0625rem solid #e2e8f0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;

}

.popout-btn-signout {

  margin: 0.75rem 0 0 0;
  color: #ef4444;

}

.admin-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  margin: 0 0 0.5rem 0;
}

.auth-toggle-hidden {

  display: none;

}

.auth-intro {

  margin: 0 0 1.5rem 0;
  text-align: center;

}

.auth-intro-title {

  font-size: 1.5rem;
  margin: 0 0 0.5rem;

}

.auth-intro-copy {

  font-size: 0.9rem;
  margin: 0;

}

.hero-logo-left {

  text-align: left;
  color: black;

}



.projections-container {

  padding: 2.5rem 1.25rem;
  width: 100%;
  margin: 0;

}


.proj-card {

  background: var(--glass-white);
  backdrop-filter: blur(0.75rem);
  border: 0.0625rem solid var(--glass-border);
  border-radius: 1.5rem;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;

}

.proj-value {

  font-size: 2.2rem;
  font-weight: 700;
  font-family: var(--font-family);
  color: var(--deep-purple);

}

.proj-label {

  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--medium-grey);
  letter-spacing: 0.1em;

}

.mini-chart-wrap {

  height: 5rem;
  width: 100%;
  background: transparent;
  border-radius: 0.75rem;

}

.proj-section title {

  font-family: var(--font-family);
  font-size: 1.5rem;
  margin: 2.5rem 0 0 0;
  border-bottom: 0.0625rem solid var(--glass-border);
  padding: 0 0 0.625rem 0;

}

.projections-title {

  margin: 0;
  font-size: 2.5rem;
  text-align: left;

}


.settings-sidebar {

  display: flex;
  flex-direction: column;
  gap: 1.875rem;

}

.settings-content {

  gap: 1.875rem;

}

.settings-card {

  background: #ffffff;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 1.875rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);

}

.card-title {

  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem 0;
  border-bottom: 0.0625rem solid #f1f5f9;
  padding: 0 0 0.9375rem 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;

}

.profile-hero {

  text-align: center;
  padding: 1.25rem 0;

}

.profile-avatar-large {

  width: 6.25rem;
  height: 6.25rem;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1.25rem;

}

.settings-name {

  margin: 0 0 0.3125rem;

}

.settings-member-since {

  color: #64748b;
  font-size: 0.9rem;
  margin: 0;

}

.settings-profile-fields {

  margin: 1.875rem 0 0 0;

}

.field-group {

  margin: 0 0 1.25rem 0;

}

.field-label {

  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;

}

.field-value {

  color: #000;
  font-weight: 500;

}

.field-value-capitalize {

  text-transform: capitalize;

}

.settings-input {

  width: 100%;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  transition: 150ms;
  box-sizing: border-box;

}

.settings-input:focus {

  border-color: #000;
  background: #fff;
  outline: none;

}

.btn-save {

  background: #000;
  color: #fff;
  border: none;
  padding: 0.875rem;
  border-radius: 0.75rem;
  font-weight: 700;
  width: 100%;
  margin: 0.625rem 0 0 0;

}

.toggle-wrap {

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  gap: 1rem;

}

.settings-item-title {

  font-weight: 600;

}

.settings-item-copy {

  font-size: 0.8rem;
  color: #64748b;

}

.switch {

  position: relative;
  display: inline-block;
  width: 3.125rem;
  height: 1.5rem;
  flex-shrink: 0;

}

.switch input {

  opacity: 0;
  width: 0;
  height: 0;

}


.advanced-badge {

  font-size: 0.65rem;
  background: #f1f5f9;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #64748b;

}

.settings-actions {

  display: flex;
  gap: 0.625rem;
  margin: 0 0 1.25rem 0;

}

.settings-action-link {

  flex: 1;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;

}

.settings-schedule-note {

  font-size: 0.8rem;
  color: #64748b;

}



.settings-platform-note {

  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;

}

.settings-modal {

  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  align-items: center;
  justify-content: center;

}

.settings-modal-card {

  width: 25rem;
  width: 100%;
  text-align: center;

}

.settings-modal-title {

  margin: 0 0 0.9375rem;

}

.settings-modal-copy {

  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 1.5625rem;

}

.settings-secret {

  background: #f8fafc;
  padding: 1.25rem;
  border-radius: 0.75rem;
  font-family: monospace;
  font-size: 1.2rem;
  margin-bottom: 1.5625rem;
  border: 0.0625rem dashed #e2e8f0;
  word-break: break-word;

}

.settings-modal-input {

  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.3125rem;
  margin-bottom: 1.25rem;

}

.settings-modal-cancel {

  margin-top: 0.625rem;
  border: none;
  background: none;
  color: #64748b;

}


.support-hero {

  text-align: center;
  margin-bottom: 3.75rem;

}

.support-title {

  font-size: 2.5rem;
  margin-bottom: 0.9375rem;

}

.faq-section {

  margin-bottom: 3.125rem;

}

.faq-item {

  background: #ffffff;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 1rem;
  margin-bottom: 0.9375rem;
  overflow: hidden;
  transition: 200ms;

}

.faq-trigger {

  padding: 1.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: black;

}

.faq-trigger:hover {

  background: #f8fafc;

}

.faq-chevron {

  font-size: 0.8rem;
  opacity: 0.5;
  transition: 200ms;

}

.faq-content {

  padding: 0 1.5rem 1.5rem;
  color: #64748b;
  font-size: 0.95rem;
  display: none;

}

.faq-item.is-active .faq-content {

  display: block;

}

.faq-item.is-active .faq-chevron {

  transform: rotate(180deg);

}

.contact-card {

  background: #000000;
  border-radius: 1.5rem;
  padding: 2.5rem;
  color: #ffffff;
  text-align: center;
  margin-top: 3.75rem;

}

.contact-form-wrap {

  background: #ffffff;
  padding: 2.5rem;
  border-radius: 1.5rem;
  border: 0.0625rem solid #e2e8f0;
  margin-top: 2.5rem;

}

.contact-title {

  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: #000;
  text-align: center;

}

.contact-copy {

  text-align: center;
  margin-bottom: 1.875rem;

}

.support-message {

  height: 9.375rem;
  resize: none;

}

.btn-glow-spaced {

  margin-top: 1.25rem;

}

.contact-heading {

  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.25rem;

}

.contact-subcopy {

  opacity: 0.7;
  font-size: 1.1rem;
  margin-bottom: 1.875rem;

}

.contact-email {

  color: #fff;
  text-decoration: underline;
  font-weight: 700;
  font-size: 1.2rem;

}


.logo-placeholder {

  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 800;

}

.card-meta-copy {

  font-size: 0.75rem;

}

.card-meta-copy:first-child {

  flex: 1 1 auto;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.card-meta-copy:last-child {

  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 0;

}

.watchlist-empty {

  text-align: center;
  padding: 6.25rem;

}

.analysis-neutral {

  font-size: 0.75rem;

}

.positions-empty {

  text-align: center;
  padding: 3.75rem;

}






.positions-container,
.watchlist-container {
  padding: 2.5rem 1.5rem 3.75rem;
  background: radial-gradient(circle at top right, #f8fafc, #ffffff);
}

.hero-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  background-clip: text;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.industry-section {
  margin-top: 2rem;
}

.industry-section-header {
  border-bottom: 0.125rem solid #f1f5f9;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.industry-section title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
}

.watchlist-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(0.625rem);
  backdrop-filter: blur(0.625rem);
  border: 0.0625rem solid rgba(226, 232, 240, 0.5);
  box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.05), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.03);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.watchlist-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.1), 0 0.625rem 0.625rem -0.3125rem rgba(0, 0, 0, 0.04);
  border-color: #3b82f6;
}

.logo-box {
  background: #ffffff;
  box-shadow: inset 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06);
}

.logo-placeholder {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.change-pill {
  border-radius: 62.4375rem;
  padding: 0.25rem 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
}

.change-pill.positive {
  background: #dcfce7;
  color: #166534;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(22, 101, 52, 0.1);
}

.change-pill.negative {
  background: #fee2e2;
  color: #991b1b;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(153, 27, 27, 0.1);
}

.analysis-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  background: #f1f5f9;
  color: #475569;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.analysis-badge.bullish {
  background: #ecfdf5;
  color: #059669;
}

.analysis-badge.bearish {
  background: #fff1f2;
  color: #e11d48;
}.msmg {
  background-color: var(--rich-white);
  font-family: var(--font-family), "Inter";
  color: var(--rich-black);
}

.msmg .scroll {
  background-color: var(--warm-sand);
  font-family: var(--font-family), "Inter";
  color: var(--rich-black);
}

.msmg.consent .scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.msmg header {
  background: var(--rich-white);
  color: var(--rich-black);
}

.msmg.shell {
  background-color: var(--rich-white);
  height: 100%;
  height: 100dvh;
  bottom: 0;
}

.msmg footer {
  background: var(--rich-white);
  color: var(--rich-black);
  margin: 0 0 0 0;
  padding: 0.45rem 0.7rem 0.45rem 0.7rem;
}

.msmg .story p {
  text-align: left;
}



.msmg header .branding {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.msmg header .tagline {
  font-size: 0.72rem;
  letter-spacing: 0.04rem;
  color: var(--dim-grey);
  margin: 0 0 0 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  display: block;
}

.msmg header .brand a,
.msmg .brand a,
.msmg .brand .refresh {
  text-decoration: underline;
}


.msmg header nav {
  order: 2;
}

.msmg .story .content a {
  overflow-wrap: anywhere;
}

.msmg.legal .live-banner,
.legal.msmg .live-banner {
  order: 2;
}

.msmg.legal header nav,
.legal.msmg header nav {
  order: 3;
}



.msmg .h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.2em 0;
  text-transform: uppercase;
  color: #111;
  display: flex;
  align-items: center;
}


.msmg .article {
  background-color: var(--rich-white);
  border: 0.0625rem solid rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.2s;
  width: var(--article-size);
  height: max-content;
}



.msmg .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background-color: #eee;
}


.msmg .feature .headline,
.msmg .pillar.feature .headline {
  font-size: clamp(1.25rem, 1.75vw, 1.625rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.25rem 0 0.5rem 0;
  text-align: left;
  white-space: normal;
}


.feature .excerpt {
  margin: 0.125rem 0 0.25rem 0;
  line-height: 1.35;
  text-align: left;
}

.msmg .standard:hover {
  transform: translateY(-0.3125rem);
}


.msmg .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background-color: #eee;
  margin: 0;
}


.msmg .standard .headline {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0.375rem 0 0.25rem 0;
  text-align: left;
  color: var(--rich-black);
}


.msmg .standard .excerpt {
  display: none;
}


.msmg .feature .story-metadata {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
  text-align: left;
}

.msmg .feature .date,
.msmg .feature .story-time,
.msmg .feature .author {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 0.75rem;
  text-align: left;
  display: inline;
  width: auto;
}

.msmg .standard .date,
.msmg .standard .story-time,
.msmg .standard .author {
  margin: 0.125rem 0 0 0;
  font-size: 0.75rem;
  text-align: left;
  display: block;
  width: 100%;
}

.msmg .story-metadata {
  width: 100%;
  text-align: left;
}

.msmg .story-metadata .author,
.msmg .meta .author {
  text-transform: none;
}


.msmg .tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  background: var(--backdrop-soft);
  color: #7b7266;
  max-width: calc(100% - 0.8rem);
}


.msmg .story .pillars .container,
.msmg .story .article {
  display: block;
  padding: 0 0 0 0;
  overflow: hidden;
}

.msmg .story .article-body {
  display: flow-root;
  padding: 0 2rem 2rem 2rem;
}

.msmg .viewer-image {
  float: left;
  display: block;
  width: clamp(18rem, 40%, 30rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 0 1.5rem 0;
  margin: 0 2rem 1.5rem -2rem;
  background-color: #eee;
}

.msmg .story .content {
  display: block;
  width: auto;
}

.msmg .story .byline {
  clear: both;
  width: 100%;
  margin: 1rem 0 0 0;
  color: #888;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01rem;
  text-align: left;
  text-transform: none;
}

.msmg .meta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #7b7266;
  margin: 0 0 1.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  text-align: left;
}

.msmg .content p {
  margin: 0 0 1.25rem 0;
}


.msmg ._hidden1 {
  padding: 0 1.25rem 1.25rem 1.25rem;
}


.msmg .back-link {
  display: inline-block;
  margin: var(--full-margin);
  text-decoration: none;
  color: #7b7266;
  font-weight: var(--font-weight);
  text-transform: uppercase;
  font-size: 0.75rem;
}


.msmg .back-link:hover {
  color: #000;
}


.msmg .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


.msmg .sticky-spacer {
  height: var(--header-height);
}


.msmg .no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
}


.msmg .live-banner {
  display: flex;
  justify-content: center;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  position: relative;
  z-index: 10;
  order: 3;
  flex: 0 0 100%;
}


.msmg .live-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 1.5rem;
  background: transparent;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  border-radius: 3.125rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  transition: all 0.3s ease;
  text-shadow: none;
  margin: 0 1.25rem 0 1.25rem;
}


.msmg .live-button:hover {
  transform: translateY(-0.0625rem);
  opacity: 0.88;
}


.msmg .pulse-dot {
  width: 0.625rem;
  height: 0.625rem;
  background: #ff0000;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  animation: pulse 1.5s infinite;
}



@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }


  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.625rem rgba(255, 0, 0, 0);
  }


  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }

}

.msmg .election-header {
  margin: 0.625rem 0 1.875rem;
  text-align: center;
}

.msmg .tracker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.75rem 0 1rem 0;
  padding: 0 0 0 0;
}

.msmg .chamber {
  display: none;
  width: clamp(18rem, 95vw, 95vw);
  box-sizing: border-box;
  background: var(--rich-white);
  border-radius: 1rem;
  padding: 0.875rem 1.25rem 0.625rem 1.25rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
}

.msmg .chamber.active {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.msmg .chamber .timestamp {
  margin: 0 0 0 0;
}

.msmg .score {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  width: 100%;
}

.msmg .party {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 0;
}

.msmg .party.democrat {
  text-align: left;
  align-items: flex-start;
}

.msmg .party.republican {
  text-align: right;
  align-items: flex-end;
}

.msmg .party.democrat .muted {
  text-align: left;
}

.msmg .party.republican .muted {
  text-align: right;
}

.msmg .democrat .label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #1d4ed8;
}

.msmg .republican .label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #b91c1c;
}

.msmg .tally {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.msmg .democrat .tally {
  color: #1d4ed8;
}

.msmg .republican .tally {
  color: #b91c1c;
}

.msmg .votes {
  font-size: 0.75rem;
  color: #64748b;
}

.msmg .target {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  flex: 2 1 0;
  padding: 0 1rem 0 1rem;
}

.msmg .target .title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.msmg .threshold {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
}

.msmg .lead {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  text-align: center;
}

.msmg .meter {
  width: 100%;
  position: relative;
  padding: 0.25rem 0 0.25rem 0;
}

.msmg .gauge {
  position: relative;
  width: 100%;
  height: 1.25rem;
  border-radius: 9999rem;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 48%, #ffffff 50%, #f87171 52%, #dc2626 100%);
  box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

.msmg .marker {
  position: absolute;
  left: 50%;
  top: -0.25rem;
  width: 0.1875rem;
  height: 1.75rem;
  background: #0f172a;
  transform: translateX(-50%);
  border-radius: 0.125rem;
  z-index: 2;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);
}

.msmg .needle {
  position: absolute;
  top: -0.5rem;
  transform: translateX(-50%);
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.msmg .pointer {
  width: 0.875rem;
  height: 2.25rem;
  background: #0f172a;
  border: 0.125rem solid #ffffff;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
}

.msmg .small {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
}


.msmg .election-tabs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  border-bottom: 0.0625rem solid var(--desert-sand);
  margin: 0 0 2rem 0;
}


.msmg .tab-btn {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  position: relative;
}


.msmg .tab-btn.active {
  color: #000;
}


.msmg .tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -0.0625rem;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: #000;
}


.msmg .tab-content {
  display: none;
}


.msmg .tab-content.active {
  display: block;
}





.msmg .candidate-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.msmg .candidate-card {
  width: clamp(15rem, 30%, 19rem);
  background: var(--rich-white);
  border: 0.0625rem solid var(--desert-sand);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.2s;
}


.msmg .candidate-card:hover {
  transform: translateY(-0.25rem);
}


.msmg .candidate-img-row {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}


.msmg .candidate-img-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}


.msmg .candidate-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  text-align: center;
  background: linear-gradient(135deg, #efe7da 0%, #ddd2bf 100%);
  color: #4f4437;
  font-weight: 700;
}


.msmg .candidate-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 1rem 0.75rem 1rem;
}


.msmg .candidate-name {
  font-family: 'Outfit', sans-serif;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 0.25rem 0;
}


.msmg .candidate-party {
  font-size: 0.8rem;
  color: #666;
  margin: 0 0 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


.msmg .party-tag {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
}


.msmg .party-D {
  color: #0044cc;
  background: #e6eeff;
}


.msmg .party-R {
  color: #cc0000;
  background: #ffe6e6;
}


.msmg .party-I {
  color: #666;
  background: #eee;
}


.msmg .candidate-race {
  font-size: 0.875rem;
  font-weight: 600;
}

.msmg .winner {
  color: var(--golden-yellow);
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
}

.msmg .winner svg {
  stroke-width: 4;
}

.msmg .candidate-card .muted {
  display: block;
  font-size: 0.75rem;
  text-align: right;
  align-self: flex-end;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0 0;
  margin: 0.125rem 0 0 0;
}

.msmg .candidate-card .timestamp {
  display: block;
  text-align: right;
  align-self: flex-end;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0 0;
  margin: 0.25rem 0 0 0;
}





.msmg section {
  gap: 2.5rem;
  align-items: start;
}


.msmg .feature.article {
  text-align: left;
}

.msmg .pillars .container.full,
.msmg .pillars.row.expand .container.full,
.msmg .pillars.row .container.full,
.msmg .container.full {
  border-radius: 1rem;
  padding: 0 0 0 0;
  overflow: hidden;
}

.msmg .pillar.feature {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 0 0 0;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  box-sizing: border-box;
}

.msmg .feature {
  flex-direction: row;
  text-align: left;
}

.msmg .pillar.feature.reverse,
.msmg .feature.reverse,
.msmg .reverse {
  flex-direction: row-reverse;
}

.msmg .feature .image {
  width: 50%;
  flex: 0 0 50%;
  max-height: clamp(14rem, 20rem, 22rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 20%;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0 0 0 0;
  display: block;
  box-sizing: border-box;
}

.msmg .feature.reverse .image,
.msmg .reverse .image {
  width: 50%;
  flex: 0 0 50%;
  max-height: clamp(14rem, 20rem, 22rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 20%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin: 0 0 0 0;
  display: block;
  box-sizing: border-box;
}

.msmg .feature .content,
.msmg .feature.reverse .content,
.msmg .reverse .content {
  width: 50%;
  flex: 0 0 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 1rem 1.5rem 1rem 1.5rem;
}

.msmg .layout {
  display: flex;
  gap: 4rem;
  width: 100%;
}

.msmg .main {
  width: calc(70% - 2.8rem);
}

.msmg .mount {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.msmg .container.standard,
.msmg .pillars .container.standard {
  width: 23.5%;
  padding: 0 0 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.msmg .pillars.row {
  justify-content: flex-start;
}

.msmg .standard .pillar {
  width: 100%;
  height: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.msmg .standard .content {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
}

.msmg .feature .content h3,
.msmg .feature .content p,
.msmg .feature .content span {
  text-align: left;
}

.msmg .standard .pillar .image,
.msmg .standard .image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: block;
}

@media (min-width: 56.3125rem) {
  .msmg .section-listing .feature .image,
  .msmg .section-listing .standard .image {
    height: auto;
    aspect-ratio: 2 / 1;
  }
}

.msmg .sidebar .pillars.row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.msmg .sidebar .pillars .container.standard,
.msmg .sidebar .container.standard,
.msmg .sidebar .mount .container.standard {
  border-radius: 1rem;
  overflow: hidden;
}

.msmg .sidebar .pillars .container.standard {
  width: 48%;
  aspect-ratio: auto;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  margin: 0 0 1rem 0;
}

.msmg .sidebar .standard .content {
  height: auto;
  padding: 0 0 0 0;
}

.msmg .sidebar {
  width: calc(30% - 1.2rem);
  display: flex;
  flex-direction: column;
}

.msmg .sidebar-secondary {
  margin: 1.2rem 0;
}


.msmg .sidebar-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 1.2rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 0.125rem solid #000;
  text-transform: uppercase;
  color: #111;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


.msmg .tech-indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #0070f3;
  border-radius: 50%;
  box-shadow: 0 0 0.5rem rgba(0, 112, 243, 0.8);
  animation: pulse-blue 2s infinite;
}



@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.7);
  }


  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(0, 112, 243, 0);
  }


  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 112, 243, 0);
  }

}

.msmg .ent-indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #7928ca;
  border-radius: 50%;
  box-shadow: 0 0 0.5rem rgba(121, 40, 202, 0.8);
  animation: pulse-violet 2s infinite;
}



@keyframes pulse-violet {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(121, 40, 202, 0.7);
  }


  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(121, 40, 202, 0);
  }


  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(121, 40, 202, 0);
  }

}

.msmg .docket-indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #00ced1;
  border-radius: 50%;
  box-shadow: 0 0 0.5rem rgba(0, 206, 209, 0.8);
  animation: pulse-turquoise 2s infinite;
}

@keyframes pulse-turquoise {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 206, 209, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.375rem rgba(0, 206, 209, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 206, 209, 0);
  }
}

.msmg .sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}


.msmg .sidebar-card {
  display: flex;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
}


.msmg .sidebar-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


.msmg .sidebar-card:hover {
  transform: translateX(0.25rem);
  opacity: 0.9;
}


.msmg .sidebar-img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 1rem;
  background-color: #eee;
  flex-shrink: 0;
}


.msmg .sidebar-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}


.msmg .sidebar-headline {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
  margin: 0;
}


.msmg .sidebar-preview {
  font-size: 0.75rem;
  color: #555;
  display: box;
  line-clamp: 2;
  line-clamp: 2;
  box-orient: vertical;
  overflow: hidden;
  margin: 0;
}


.msmg .sidebar-date {
  font-size: 0.625rem;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03125rem;
}


.msmg .sidebar-empty {
  font-size: 0.8125rem;
  color: #888;
  text-align: center;
  padding: 1.5rem 0;
  font-style: italic;
}


.msmg ._hidden4 {
  font-size: 1.1rem;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01rem;
  margin: 1rem 0 0 0;
  display: inline-block;
}


.msmg ._hidden3 {
  display: flex;
  flex-direction: column;
}


.msmg ._hidden7 {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
}


.msmg .sidebar-slider-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


.msmg .sidebar-list.rotating {
  will-change: transform;
}


.msmg .sidebar-list.rotating .sidebar-card {
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
  padding-bottom: 1.25rem;
}


.msmg .sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0.25rem;
}


.msmg .contact-map-placeholder {
  width: 100%;
  height: 18.75rem;
  background: #f0f0f0;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-weight: 600;
  border: 0.0625rem solid #ddd;
}


/* =========================================
   Language Selector
   ========================================= */

.language-selector {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 2.5rem 1.5rem 2.5rem 1.5rem;
  overflow-x: hidden;
  background-color: var(--rich-white);
  color: var(--very-dark-grey);
}

.language-selector .header {
  box-sizing: border-box;
  width: clamp(16rem, 100%, 25rem);
  text-align: center;
  margin: 0 0 2.5rem 0;
  animation: fadeInDown 0.8s ease-out;
}

.language-selector .header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.625rem 0;
  letter-spacing: -0.0312rem;
}

.language-selector .header p {
  color: var(--medium-grey, #666);
  font-size: 1rem;
  font-weight: 300;
  margin: 0 0 0 0;
}

.language-selector .language-list {
  box-sizing: border-box;
  width: clamp(16rem, 100%, 25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 0 0;
  padding: 0 0 2.5rem 0;
  animation: fadeInUp 0.8s ease-out;
}

.language-selector .language-item {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem 1.125rem 1.5rem;
  background-color: var(--ghost-white, #f4f4f9);
  border-radius: 1rem;
  text-decoration: none;
  color: var(--very-dark-grey);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0.0625rem solid transparent;
}

.language-selector .language-item:active {
  transform: scale(0.96);
  background-color: #ebebeb;
}

.language-selector .language-item:hover {
  border-color: #ddd;
  background-color: var(--rich-white);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.language-selector .language-name {
  font-size: 1.0625rem;
  font-weight: 500;
}

.language-selector .language-native {
  font-size: 0.875rem;
  color: #888;
  font-weight: 300;
}

.language-selector .accent-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--cyan-blue, #007aff);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.language-selector .language-item:hover .accent-dot {
  opacity: 1;
}

.msmg ul {
  width: max-content;
  margin: 0 0 0 0;
}

.msmg h2 {
  margin: 0.5rem 0 0.5rem 0;
}

.msmg .news.section,
.msmg .sports.section,
.msmg .split.section,
.msmg .section.news,
.msmg .section.sports,
.msmg .section.split {
  width: 100%;
  margin: 1.5rem 0 2rem 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
}

.msmg .spread {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
  margin: 1rem 0 1rem 0;
}

.msmg .spread .container.standard {
  width: clamp(14rem, 23.5%, 24rem);
  flex: 0 0 clamp(14rem, 23.5%, 24rem);
  margin: 0 0 0 0;
  box-sizing: border-box;
}

.msmg .main .spread {
  gap: 1rem;
}

.msmg .main .spread .container.standard {
  width: calc(25% - 0.75rem);
  flex: 0 0 calc(25% - 0.75rem);
}

.msmg .sportsgrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  margin: 1rem 0 1.5rem 0;
}

.msmg .sportsgrid .featurecard {
  width: calc(50% - 0.75rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.msmg .sportsgrid .featurecard h2,
.msmg .sportsgrid .weathercolumn h2 {
  text-align: center;
  justify-content: center;
  display: flex;
  width: 100%;
  margin: 0 0 1rem 0;
}

.msmg .sports .sportstitle {
  display: none;
}

.msmg .sportsgrid .featurecard .container {
  width: 100%;
  margin: 0 0 0 0;
  overflow: hidden;
}

.msmg .sportsgrid .weathercolumn {
  width: calc(50% - 0.75rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.msmg .sportsgrid .weathercard {
  margin: 0 0 0 0;
  width: 100%;
}

.msmg .sportsgrid .container.standard {
  width: clamp(14rem, 23.5%, 24rem);
  flex: 0 0 clamp(14rem, 23.5%, 24rem);
  margin: 0 0 0 0;
  box-sizing: border-box;
}

.msmg .spread .container.standard,
.msmg .sportsgrid .featurecard .container,
.msmg .sportsgrid .container.standard {
  background-color: var(--rich-white);
  border-radius: 1rem;
  box-shadow: var(--soft-shadow);
  border: var(--full-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.msmg .spread .container.standard:hover,
.msmg .sportsgrid .featurecard .container:hover,
.msmg .sportsgrid .container.standard:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--hover-shadow);
  border-color: rgba(0, 0, 0, 0.1);
}

.msmg .pillars.row.expand,
.msmg .pillars.row:has(.container.full) {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0 0 0 0;
  margin: 0 0 1.5rem 0;
}

.msmg .pillars.row.expand .container.full,
.msmg .pillars.row .container.full,
.msmg .spread .container.full,
.msmg .sportsgrid .container.full,
.msmg .splitgrid .container.full {
  width: 100%;
  flex: 1 1 100%;
  box-sizing: border-box;
  display: block;
}

.msmg .splitgrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  margin: 0 0 0 0;
  box-sizing: border-box;
}

.msmg .splitgrid .column {
  width: calc(50% - 0.75rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.msmg .splitgrid .column h2 {
  text-align: center;
  justify-content: center;
  display: flex;
  width: 100%;
  margin: 0 0 1rem 0;
}

.msmg .splitgrid .column .spread {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  margin: 1rem 0 1rem 0;
}

.msmg .splitgrid .column .spread .container.standard {
  width: calc(50% - 0.5rem);
  flex: 0 0 calc(50% - 0.5rem);
  margin: 0 0 0 0;
  box-sizing: border-box;
  background-color: var(--rich-white);
  border-radius: 1rem;
  box-shadow: var(--soft-shadow);
  border: var(--full-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.msmg .splitgrid .column .spread .container.standard:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--hover-shadow);
  border-color: rgba(0, 0, 0, 0.1);
}

.msmg .weathercard {
  background-color: var(--rich-white);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  margin: 0 0 1.5rem 0;
  width: 100%;
  box-sizing: border-box;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  transition: background 0.4s ease, color 0.4s ease;
}

.msmg .weathercard[data-condition="sun"] {
  background: radial-gradient(circle at 80% 20%, rgba(255, 245, 195, 0.65) 0%, rgba(255, 230, 150, 0.2) 28%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #1b6ca8 0%, #3a9bdc 45%, #6dc0f5 85%, #a1dbf9 100%);
}

.msmg .weathercard[data-condition="cloud-sun"] {
  background: radial-gradient(circle at 75% 20%, rgba(255, 250, 215, 0.5) 0%, rgba(255, 255, 255, 0.15) 30%, transparent 60%), linear-gradient(180deg, #2b5876 0%, #4e7d9e 45%, #7aa1be 80%, #a8c2d6 100%);
}

.msmg .weathercard[data-condition="cloud"] {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 70%), linear-gradient(180deg, #37424d 0%, #4a5765 40%, #687787 75%, #8896a4 100%);
}

.msmg .weathercard[data-condition="rain"] {
  background: radial-gradient(ellipse at 50% 10%, rgba(130, 155, 175, 0.15) 0%, transparent 60%), linear-gradient(180deg, #1a2530 0%, #283745 45%, #3c4f60 80%, #526678 100%);
}

.msmg .weathercard[data-condition="thunder"] {
  background: radial-gradient(circle at 65% 25%, rgba(142, 120, 215, 0.25) 0%, transparent 55%), linear-gradient(180deg, #0e121d 0%, #1a1e30 40%, #292a47 75%, #3d3b5c 100%);
}

.msmg .weathercard[data-condition="snow"] {
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 60%), linear-gradient(180deg, #324759 0%, #476177 45%, #698399 80%, #9cb1c2 100%);
}

.msmg .weathercard[data-condition="fog"] {
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 65%), linear-gradient(180deg, #3f4750 0%, #545e69 45%, #76818d 80%, #9ca7b2 100%);
}

.msmg .weathercard[data-time="night"] {
  background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 45%), linear-gradient(180deg, #090e17 0%, #101928 45%, #182337 75%, #24334a 100%);
}

.msmg .weathercard[data-time="night"][data-condition="sun"] {
  background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.22) 0%, rgba(200, 225, 255, 0.08) 25%, transparent 50%), linear-gradient(180deg, #090e17 0%, #0f1826 40%, #152238 75%, #1e2f4a 100%);
}

.msmg .weathercard[data-time="night"][data-condition="cloud-sun"] {
  background: radial-gradient(circle at 75% 25%, rgba(200, 220, 255, 0.14) 0%, transparent 45%), linear-gradient(180deg, #0b111a 0%, #141c28 40%, #202c3c 75%, #2c3a4d 100%);
}

.msmg .weathercard[data-time="night"][data-condition="cloud"] {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%), linear-gradient(180deg, #0a0e14 0%, #131921 50%, #1c242e 100%);
}

.msmg .weathercard[data-time="night"][data-condition="rain"] {
  background: radial-gradient(ellipse at 50% 10%, rgba(100, 130, 160, 0.12) 0%, transparent 60%), linear-gradient(180deg, #070c13 0%, #101822 50%, #192432 100%);
}

.msmg .weathercard[data-time="night"][data-condition="thunder"] {
  background: radial-gradient(circle at 65% 25%, rgba(120, 90, 210, 0.25) 0%, transparent 55%), linear-gradient(180deg, #060810 0%, #0f1120 45%, #1a1a32 80%, #262444 100%);
}

.msmg .weathercard[data-time="night"][data-condition="snow"] {
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), linear-gradient(180deg, #0d1520 0%, #172230 50%, #243447 100%);
}

.msmg .weathercard[data-time="night"][data-condition="fog"] {
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.14) 0%, transparent 60%), linear-gradient(180deg, #10141a 0%, #1a2027 50%, #28303a 100%);
}

.msmg .weathercard[data-time="night"] .glyph .symbol {
  color: #dfe6e9;
  filter: drop-shadow(0 0.125rem 0.5rem rgba(255, 255, 255, 0.25));
}

.msmg .weathercard .tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  width: 100%;
}

.msmg .weathercard .tab {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 0;
  border-radius: 1rem;
  padding: 0.35rem 0.75rem 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.msmg .weathercard .tab.active {
  background: #ffffff;
  color: #111111;
}

.msmg .weathercard .stage {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 0 1.25rem 0;
}

.msmg .weathercard .overview {
  display: flex;
  flex-direction: column;
}

.msmg .weathercard .city {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.25rem 0;
}

.msmg .weathercard .reading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.msmg .weathercard .value {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

.msmg .weathercard .glyph .symbol {
  width: 2.5rem;
  height: 2.5rem;
  color: #ffffff;
  filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.18));
}

.msmg .weathercard[data-condition="sun"] .glyph .symbol {
  color: #ffda79;
}

.msmg .weathercard[data-condition="thunder"] .glyph .symbol {
  color: #f6e58d;
}

.msmg .weathercard .summary {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0.35rem 0 0.2rem 0;
}

.msmg .weathercard .range {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}

.msmg .weathercard .timestamp {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.75rem 0 0 0;
  text-align: right;
  width: 100%;
  display: block;
}

.msmg .weathercard .metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: right;
}

.msmg .weathercard .metric {
  display: flex;
  flex-direction: column;
}

.msmg .weathercard .label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04rem;
}

.msmg .weathercard .stat {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #ffffff;
}

.msmg .weathercard .outlook {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 0 0 0;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.msmg .weathercard .slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.msmg .weathercard .day {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.msmg .weathercard .slot .glyph .symbol {
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
}

.msmg .weathercard .span {
  font-size: clamp(0.6875rem, 1.2vw, 0.75rem);
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.msmg .lead .card.weathercard {
  position: relative;
  flex: 0 0 clamp(12rem, 30vw, 18rem);
  width: clamp(12rem, 30vw, 18rem);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  box-shadow: none;
  scroll-snap-align: start;
  border: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  display: block;
}

.msmg .lead .card.weathercard .weatherveil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 1.25rem 0.875rem 0.875rem 0.875rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

.msmg .lead .card.weathercard .reading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 auto 0;
}

.msmg .lead .card.weathercard .value {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.msmg .lead .card.weathercard .glyph .symbol {
  width: 3rem;
  height: 3rem;
  color: #ffffff;
  filter: drop-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.35));
}

.msmg .lead .card.weathercard[data-condition="sun"] .glyph .symbol {
  color: #ffda79;
}

.msmg .lead .card.weathercard[data-condition="thunder"] .glyph .symbol {
  color: #f6e58d;
}

.msmg .lead .card.weathercard[data-time="night"] .glyph .symbol {
  color: #dfe6e9;
}

.msmg .lead .card.weathercard .timestamp {
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
  width: 100%;
  margin: 0.25rem 0 0 0;
  display: block;
}

.msmg .gaglock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 2.5rem 1rem;
  margin: 1.5rem 0 1.5rem 0;
  background-color: var(--rich-white);
  border-radius: 1rem;
  text-align: center;
  width: 100%;
}

.msmg .gagprompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.msmg .gagmessage {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--rich-black);
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.msmg .gagbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--rich-black);
  border-radius: 9999rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.msmg .gagcontent {
  width: 100%;
}

.msmg .gaghidden {
  display: none;
}

.msmg .lead {
  width: 100%;
  background: var(--rich-white, #ffffff);
  margin: 0 0 0.5rem 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
}

.msmg .lead .reel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.msmg .lead .reel::-webkit-scrollbar {
  display: none;
}

.msmg .lead .card {
  position: relative;
  flex: 0 0 clamp(12rem, 30vw, 18rem);
  width: clamp(12rem, 30vw, 18rem);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--rich-white, #ffffff);
  background: var(--rich-white, #ffffff);
  box-shadow: none;
  scroll-snap-align: start;
  border: none;
}

.msmg .lead .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  background: var(--rich-white, #ffffff);
}

.msmg .lead .veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 0.875rem 0.875rem 0.875rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

.msmg .lead .tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--rich-white, #ffffff);
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 0.35rem 0;
}

.msmg .lead .title {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ic .splitcol {
    flex: 1;
    min-width: 0;
}

.ic table {
    margin: 0 var(--full-padding) var(--base-padding, 1rem) var(--full-padding);
    width: calc(100% - 2rem);
}

.hub.ic .pillars .container,
.hub.ic .pillars .container.full {
    width: 100%;
}

.hub.ic #features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

.hub.ic #features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

.hub.ic #features .container {
    width: calc(20% - 0.4rem);
    flex: 0 0 calc(20% - 0.4rem);
    box-sizing: border-box;
    justify-content: flex-start;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    overflow: hidden;
}

.hub.ic #features .container[hidden] {
    display: none;
}

.hub.ic #features table {
    table-layout: fixed;
    width: 100%;
    margin: 1rem 0 1rem 0;
}

.ic .pillars .container.half {
    justify-content: flex-start;
}

.dashboard.ic .pillars.row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
}

.dashboard.ic .pillars .container {
    width: clamp(14rem, calc(25% - 0.5rem), 25%);
}

.hub.ic #features select,
.hub.ic .pillars select,
.hub.ic .pillars .feature-selector-meta {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub.ic #features select[multiple],
.hub.ic .pillars select[multiple] {
    height: clamp(10rem, 14rem, 18rem);
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    border-radius: 0.75rem;
    white-space: normal;
    overflow-y: auto;
    cursor: pointer;
}

.hub.ic #features select[multiple] option,
.hub.ic .pillars select[multiple] option {
    padding: 0.375rem 0.5rem 0.375rem 0.5rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hub.ic #features select[multiple] option:checked,
.hub.ic .pillars select[multiple] option:checked {
    background: #0D0D0D;
    color: #fff;
}

.landing.ic .scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 0;
}

.landing.ic form {
    margin: 0 0 0 0;
    flex: none;
}

.landing.ic .sheet form,
.ic .sheet form {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}




.profile {
    display: flex;
    justify-content: center;
}

.profile table {
    width: 100%;
    border: none;
}

.results table {
    border: none;
}

.ic .grid {
    margin: 1.5rem 0 0 0;
}

.ic .empty {
    padding: 2rem 2rem 2rem 2rem;
}

.ic dialog {
    border: none;
    border-radius: var(--base-radius, 1rem);
    background: var(--rich-white, #ffffff);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    padding: 2rem 2rem 2rem 2rem;
}

.ic dialog form {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.ic .modal form {
    width: 50rem;
    padding: 2rem 2rem 1.5rem 2rem;
    margin: 4rem auto 4rem auto;
    background: var(--rich-white, #ffffff);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
    border-radius: var(--round-edges, 0.5rem);
    border: none;
    flex: none;
}

.ic #ai-modal {
    z-index: 10600;
}

.ic .overlay,
.ic .modal {
    align-items: flex-start;
    overflow-y: auto;
    padding-bottom: 4rem;
    cursor: pointer;
}

.ic .modal form,
.ic .electionmodal,
.ic dialog {
    cursor: default;
}

.ic .muted {
    text-align: center;
    font-size: 0.85rem;
    margin: -0.4rem 0 0.6rem 0;
    color: var(--dim-grey, #6c757d);
}

.ic .wordcount {
    text-align: right;
}

.ic .checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin: var(--full-margin);
}

.ic #candidate-form .checks {
    justify-content: flex-end;
}

.ic .checks .check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
}

.ic #row-form label.check {
    color: inherit;
    font: inherit;
    margin: 0;
}

.workspace {
    display: flex;
    flex-direction: column;
}

.workspacesplit {
    flex-direction: row;
    gap: 1rem;
}

.workspacepanel {
    flex: 1;
    width: 100%;
}

.ic .slider {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.ic .slider .gallery {
    width: 100%;
    scroll-behavior: smooth;
}

.ic .arrow {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: transparent;
    color: var(--rich-black, #111111);
    border: none;
    box-shadow: none;
    font-size: 1.15rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    opacity: 0.45;
    transition: opacity 0.2s, transform 0.2s;
}

.ic .arrow:hover {
    background-color: transparent;
    opacity: 0.95;
    transform: scale(1.1);
}

.ic .arrow:active {
    transform: scale(0.95);
}

.ic .gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.5rem 0 0.5rem 0;
    width: 100%;
}

.ic .gallery img {
    height: 8rem;
    width: auto;
    object-fit: contain;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 0.25rem;
}

.ic .image-preview img {
    width: 12.5%;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    border-radius: clamp(0rem, 0.25rem, 0.5rem);
}

.ic .image-preview-toolbar {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ic .image-preview-toolbar button {
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
    border-radius: 2rem;
    border: 1px solid var(--border, #ccc);
    background: transparent;
    color: var(--color, #333);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.ic .image-preview-toolbar button:hover {
    background: var(--shade, rgba(0,0,0,0.05));
}

.ic .image-info {
    justify-content: center;
    margin-top: 1rem;
}

.ic input[type="file"] {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--rich-black, #111111);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: 0.5rem 0 0.5rem 0;
    margin: var(--bottom-margin);
}

.ic input[type="file"]::file-selector-button {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
    margin: 0 1rem 0 0;
    border-radius: 2rem;
    border: none;
    background: var(--rich-black, #111111);
    color: var(--rich-white, #ffffff);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ic input[type="file"]::file-selector-button:hover {
    background: #333333;
    color: var(--grey, #888888);
}

.ic input[type="file"]::-webkit-file-upload-button {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
    margin: 0 1rem 0 0;
    border-radius: 2rem;
    border: none;
    background: var(--rich-black, #111111);
    color: var(--rich-white, #ffffff);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ic input[type="file"]::-webkit-file-upload-button:hover {
    background: #333333;
    color: var(--grey, #888888);
}

.ic dialog .actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 1rem 0 0 0;
}

.ic dialog .actions .bt {
    margin: 0 0 0 0;
}

.ic .page-header nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 0 1.5rem 0 1.5rem;
}

.ic .page-header nav .add {
    position: absolute;
    right: 1.5rem;
}

.chips .add {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.15rem;
    line-height: 1;
}

.ic #entry-dialog .actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}

.ic #entry-dialog .actions .bt,
.ic #entry-dialog .actions .bt-secondary {
    flex: 1;
    min-width: 8.5rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem 0 1rem;
    margin: 0 0 0 0;
    text-align: center;
    box-sizing: border-box;
}




.ic .logstable {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    border: var(--full-border, 0.0625rem solid rgba(0, 0, 0, 0.12));
    border-radius: 0.5rem;
    overflow: hidden;
}

.ic .logstable th,
.ic .logstable td {
    padding: 0.35rem 0.6rem 0.35rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: nowrap;
    vertical-align: top;
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
}

.ic .logstable tbody tr:last-child td {
    border-bottom: none;
}

.ic .logstable td.messagecol {
    white-space: normal;
    word-break: break-word;
    width: clamp(16rem, 45%, 50rem);
}

.ic .pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 1.25rem 0 1.25rem 0;
    padding: 0 0.5rem 0 0.5rem;
    box-sizing: border-box;
}

.ic .pagination .pageinfo {
    font-size: 0.85rem;
    color: var(--grey, #888888);
}

.ic .pagination .actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.ic .pagination .actions a.btn {
    cursor: pointer;
}

.ic .searchline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    margin: 0 0 0.5rem 0;
}

.ic .searchline .searchbar {
    margin: 0 0 0 0;
    width: clamp(18rem, 60vw, 50rem);
}

.ic .searchline .add {
    position: static;
    margin: 0 0 0 0;
    flex-shrink: 0;
}

.ic .searchline .refresh {
    position: static;
    margin: 0 0 0 0;
    flex-shrink: 0;
}

.ic .chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem 0;
}

.ic th.id,
.ic td.id {
    width: clamp(2.5rem, 4%, 3.75rem);
    text-align: center;
}

.ic .previewdialog {
    width: clamp(24rem, 80%, 56rem);
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}

.ic .previewframe {
    width: 100%;
    height: 35rem;
    border: none;
    background: #ffffff;
    border-radius: 0.5rem;
}

.ic [hidden],
.ic .field.hidden,
.ic .container.hidden,
.ic .hidden {
    display: none;
}

.ic .field {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 1rem 0;
}

.ic label,
.ic .field label,
.ic form label {
    position: static;
    transform: none;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 0 0.35rem 0;
    color: var(--dim-grey, #6c757d);
    letter-spacing: normal;
}

.ic label.muted,
.ic form label.muted,
.ic .field label.muted {
    margin: 0 0 0.35rem 0;
    color: var(--dim-grey, #6c757d);
}

.ic .field input,
.ic .field select,
.ic .field textarea,
.ic form input,
.ic form select,
.ic form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 1.125rem 1rem 1.125rem 1rem;
    border-radius: var(--round-edges, 0.375rem);
    border: var(--full-border, 1px solid rgba(0, 0, 0, 0.12));
    background: var(--rich-white, #ffffff);
    font-size: var(--font-size, 1rem);
    color: var(--rich-black, #111111);
    margin: 0 0 0.75rem 0;
    font-family: inherit;
    transition: border-color 0.2s ease;
    resize: none;
}

.ic .reveal,
.ic form .reveal {
    width: 100%;
    margin: 0 0 0.75rem 0;
}

.ic .reveal input,
.ic form .reveal input {
    margin: 0 0 0 0;
    padding: 1.125rem 2.5rem 1.125rem 1rem;
}

.ic .field select,
.ic form select {
    padding: 0.875rem 1rem 0.875rem 1rem;
    cursor: pointer;
    line-height: 1.5;
    height: auto;
}

.ic textarea[name="story"] {
    height: 28rem;
}

.ic #master-form textarea[name="preview"] {
    field-sizing: content;
    block-size: auto;
    min-block-size: 4rem;
    overflow: hidden;
    text-align: start;
    align-content: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ic .field input:focus,
.ic .field select:focus,
.ic .field textarea:focus,
.ic form input:focus,
.ic form select:focus,
.ic form textarea:focus {
    outline: none;
    border-color: #000000;
}

.ic form input[type="checkbox"],
.ic form input[type="radio"] {
    width: auto;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

.ic .searchbar input {
    background: transparent;
    border: none;
    padding: 0.5rem 0 0.5rem 0;
    margin: 0 0 0 0;
}

.coms .pillars.row,
.comms .pillars.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    margin: 1.5rem 0 1.5rem 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
}

.coms .pillars .container.card,
.comms .pillars .container.card {
    width: clamp(16rem, calc(25% - 1.25rem), 24rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    background: var(--rich-white, #ffffff);
    border-radius: var(--round-edges, 0.5rem);
    box-shadow: var(--soft-shadow, 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05));
    border: 0.0625rem solid rgba(0, 0, 0, 0.08);
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    margin: 0 0 0 0;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coms .pillars .container.card:hover,
.comms .pillars .container.card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--hover-shadow, 0 0.375rem 1rem rgba(0, 0, 0, 0.08));
}

.coms .pillars .pillar,
.comms .pillars .pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    padding: 0 0 0 0;
    text-align: left;
    box-sizing: border-box;
}

.coms .pillars .pillar .tag,
.comms .pillars .pillar .tag {
    margin: 0 0 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.coms .pillars .pillar h3,
.comms .pillars .pillar h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rich-black, #111111);
}

.coms .pillars .pillar .subject,
.comms .pillars .pillar .subject {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: #666666;
    flex-grow: 1;
}

.coms .pillars .pillar .actions,
.comms .pillars .pillar .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.coms .printlabel,
.comms .printlabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0 0.25rem 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.6rem;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

.landing.ic nav {
    display: none;
}

.ic .copyright .logout {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--medium-grey, #757575);
    cursor: pointer;
    transition: color 0.2s;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    white-space: nowrap;
}

.ic .copyright .logout:hover {
    color: var(--rich-white, #ffffff);
}

.ic:not(.landing) .copyright .report-error-link,
.ic .copyright:has(.logout) .report-error-link {
    right: 4.8rem;
}

@media (max-width: 27.5rem) {
    .ic:not(.landing) .copyright .report-error-link,
    .ic .copyright:has(.logout) .report-error-link {
        right: 4.2rem;
    }
    .ic:not(.landing) .copyright span {
        padding: 0 5.5rem 0 0.625rem;
        box-sizing: border-box;
    }
}

.ic .portfolio th,
.ic .portfolio td {
    padding: 0.25rem 0.35rem 0.25rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.2;
    vertical-align: middle;
    box-sizing: border-box;
}

.ic .portfolio th:nth-child(1),
.ic .portfolio td:nth-child(1) {
    width: 10%;
}

.ic .portfolio th:nth-child(2),
.ic .portfolio td:nth-child(2) {
    width: 14%;
}

.ic .portfolio th:nth-child(3),
.ic .portfolio td:nth-child(3) {
    width: 14%;
}

.ic .portfolio th:nth-child(4),
.ic .portfolio td:nth-child(4) {
    width: 14%;
}

.ic .portfolio th:nth-child(5),
.ic .portfolio td:nth-child(5) {
    width: 12%;
}

.ic .portfolio th:nth-child(6),
.ic .portfolio td:nth-child(6) {
    width: 16%;
}

.ic .portfolio th:nth-child(7),
.ic .portfolio td:nth-child(7) {
    width: 20%;
}

.ic .portfolio input,
.ic .portfolio select {
    width: 100%;
    height: 1.75rem;
    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
    margin: 0 0 0 0;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

.ic .portfolio select {
    cursor: pointer;
}

.ic .portfolio .bt {
    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
    margin: 0.1rem 0.05rem 0.1rem 0.05rem;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: normal;
    box-sizing: border-box;
    border: none;
}

.ic .portfolio .badge {
    padding: 0.15rem 0.35rem 0.15rem 0.35rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.ic .portfolio .badge.up {
    background: rgba(46, 125, 50, 0.15);
    color: #2e7d32;
}

.ic .portfolio .badge.down {
    background: rgba(198, 40, 40, 0.15);
    color: #c62828;
}
/* Daily Motivation Division Stylesheet */

.dm {
  --dm-accent: var(--deep-purple, #673ab7);
  color: var(--theme-text, #2c2c2c);
  background-color: var(--theme-bg, #f9f6f0);
}

.dm.chat .container {
  width: clamp(0rem, 100%, 56.25rem);
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow: hidden;
}

.dm.chat .scroll {
  margin: 5rem 0 0 0;
  padding: 1rem 1rem 1rem 1rem;
  min-height: 0;
  overflow: hidden;
}

.dm.chat .conversation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  height: 100%;
  min-height: 0;
  padding: 0 0 0 0;
}

.dm.chat .conversation .sidebar {
  min-inline-size: 0;
  min-height: 0;
}

.dm.chat .conversation .feed {
  min-inline-size: 0;
  height: 100%;
  min-height: 0;
  overscroll-behavior: contain;
}

.dm.chat .conversation .composer {
  position: static;
  width: 100%;
}

.dm.chat[data-native="true"][data-ads="true"] .scroll {
  padding: 1rem 1rem calc(var(--dm-banner-height, 3.125rem) + env(safe-area-inset-bottom, 0rem)) 1rem;
}

/* Hidden Utility */
.dm .hidden,
.dm div.hidden,
.dm section.hidden,
.dm p.hidden,
.dm span.hidden,
.dm button.hidden,
.dm svg.hidden, 
.dm img.hidden {
  display: none;
}

/* Scroll Area & Viewport Positioning */
.dm .scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: calc(100vh - 5rem);
  margin: 5rem 0 0 0;
  padding: 1.5rem 1rem 4rem 1rem;
  box-sizing: border-box;
  background-color: var(--theme-bg, #f9f6f0);
}

/* Central Content Container */
.dm .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: clamp(22rem, 90vw, 32rem);
  flex: 1 0 auto;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  background-color: transparent;
}

/* Header Navigation Bar */
.dm .bar {
  height: 5rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.25rem;
  padding: 0 0.5rem 0 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.06);
}

.dm .icon {
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  padding: 0.375rem 0.375rem 0.375rem 0.375rem;
  color: var(--medium-grey, #757575);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.dm .icon svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  display: block;
  stroke: currentColor;
  fill: none;
}

.dm .icon:hover {
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
}

.dm .logo {
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 50%;
  overflow: hidden;
}

.dm .logo .image {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.4);
  box-shadow: none;
  filter: none;
}

.dm .logo .title {
  display: none;
}

.dm .bolt {
  width: 1.5rem;
  height: 1.5rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--medium-grey, #757575);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm .bolt::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background: grey;
  border-radius: 50%;
}

/* Screens */
.dm .screen {
  display: none;
  width: 100%;
}

.dm .screen.active,
.dm .screen.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

/* Quote Card */
.dm .card {
  position: relative;
  background-color: var(--light-purple, #f3e8ff);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 0.5rem 1.5rem rgba(103, 58, 183, 0.12);
  min-height: clamp(10rem, 24vh, 18rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

.dm .card .text {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep-purple, #673ab7);
  margin: 0 0 0 0;
  line-height: 1.5;
}

.dm .card .action {
  position: absolute;
  top: -0.625rem;
  left: -0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #2196f3;
  z-index: 10;
  transition: transform 0.2s;
  cursor: pointer;
}

.dm .card .action:hover {
  transform: scale(1.1);
}

/* Actions & Buttons */
.dm .actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.3rem 0 0 0;
  width: 100%;
}

.dm #userActions {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0 0;
}

.dm #userActions .bt {
  margin: 0 0 0 0;
}

/* Home screen stretches to the bottom of the viewport so the streak days sit just above the ad */
.dm #homeScreen.active {
  flex: 1 0 auto;
}

/* Streak Tracker */
.dm .streak {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 100%;
  margin: 1rem 0 0 0;
}

.dm .streak .ring {
  position: relative;
  overflow: hidden;
  width: 12.75rem;
  height: 12.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 0.35rem solid var(--light-purple, #f3e8ff);
  box-shadow: 0 0.5rem 2rem rgba(103, 58, 183, 0.18);
  margin: 1rem 0 2rem 0;
  transition: all 0.3s ease;
}

.dm .streak .fire {
  color: var(--deep-purple, #673ab7);
  fill: none;
  width: 7rem;
  height: 7rem;
  transition: all 0.3s ease;
}

/* Liquid fill: one seventh for each day of the Sunday–Saturday week. */
.dm .streak .tide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--deep-purple, #673ab7);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s ease;
}

.dm .streak .tide .fire {
  color: #ffffff;
}

.dm .streak .ring[data-fill="1"] .tide {
  clip-path: inset(85.714% 0 0 0);
}

.dm .streak .ring[data-fill="2"] .tide {
  clip-path: inset(71.429% 0 0 0);
}

.dm .streak .ring[data-fill="3"] .tide {
  clip-path: inset(57.143% 0 0 0);
}

.dm .streak .ring[data-fill="4"] .tide {
  clip-path: inset(42.857% 0 0 0);
}

.dm .streak .ring[data-fill="5"] .tide {
  clip-path: inset(28.571% 0 0 0);
}

.dm .streak .ring[data-fill="6"] .tide {
  clip-path: inset(14.286% 0 0 0);
}

.dm .streak .ring[data-fill="7"] .tide {
  clip-path: inset(0 0 0 0);
}

/* A completed week turns the fire outline radiant light blue neon. */
.dm .streak .ring[data-fill="7"],
.dm .streak.complete .ring {
  border-color: var(--cyan-blue, #00d2ff);
  box-shadow: 0 0 1.5rem rgba(0, 210, 255, 0.45), 0 0 3.5rem rgba(33, 141, 236, 0.25);
}

.dm .streak .ring[data-fill="7"] .tide {
  clip-path: inset(0 0 0 0);
}

.dm .streak .ring[data-fill="7"] .fire,
.dm .streak .ring[data-fill="7"] .tide .fire,
.dm .streak.complete .fire,
.dm .streak.complete .tide .fire {
  color: var(--cyan-blue, #00d2ff);
  stroke: var(--cyan-blue, #00d2ff);
  fill: rgba(0, 210, 255, 0.25);
  filter: drop-shadow(0 0 0.4rem #00d2ff) drop-shadow(0 0 1rem rgba(0, 210, 255, 0.9)) drop-shadow(0 0 2rem rgba(0, 210, 255, 0.5));
}

.dm .streak .summary {
  color: var(--deep-purple, #673ab7);
  font-size: 0.9rem;
  margin: 0 0 2rem 0;
}

.dm .streak .track {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 0;
  overflow: visible;
  padding: 0 9.5% 0 0;
  margin: 0 0 0 0;
  box-sizing: border-box;
}

.dm .week {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1;
  transform: translateY(-0.85rem);
}

.dm .week .count {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-purple, #673ab7);
  line-height: 1;
}

.dm .week .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 0.15rem solid var(--deep-purple, #673ab7);
  color: var(--deep-purple, #673ab7);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  background: #ffffff;
  box-sizing: border-box;
}

.dm .week.lit .count {
  color: var(--deep-purple, #673ab7);
}

.dm .week.lit .mark {
  border-color: var(--deep-purple, #673ab7);
  color: var(--deep-purple, #673ab7);
}

.dm .streak .days {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  padding: 0 0 0 0;
  margin: 0.85rem 0 0 0;
}

.dm .streak .day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #b0bec5;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

.dm .streak .day.lit {
  color: var(--deep-purple, #673ab7);
  font-weight: 800;
  text-shadow: 0 0 0.5rem rgba(103, 58, 183, 0.5);
  transform: scale(1.15);
}

.dm .bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--deep-purple, #673ab7);
  color: #ffffff;
  border-radius: 2rem;
  padding: 0.75rem 1.75rem 0.75rem 1.75rem;
  border: 0.0625rem solid transparent;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  text-decoration: none;
}

.dm .bt:hover {
  background: #5e35b1;
  transform: translateY(-0.0625rem);
}

.dm .bt.secondary {
  background: #ffffff;
  color: var(--deep-purple, #673ab7);
  border: 0.0625rem solid var(--deep-purple, #673ab7);
}

.dm .bt.secondary:hover {
  background: var(--light-purple, #f3e8ff);
}

/* Forms & Inputs */
.dm form {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  box-shadow: none;
}

.dm input[type="text"],
.dm input[type="password"],
.dm input[type="email"],
.dm input[type="time"] {
  width: 100%;
  padding: 0.875rem 1.25rem 0.875rem 1.25rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: var(--rich-black, #1e1e1e);
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
  margin: 0 0 0 0;
}

.dm input[type="text"]:focus,
.dm input[type="password"]:focus,
.dm input[type="email"]:focus,
.dm input[type="time"]:focus {
  border-color: var(--deep-purple, #673ab7);
}

.dm .error {
  width: 100%;
  color: #d32f2f;
  font-size: 0.875rem;
  text-align: center;
  box-sizing: border-box;
}

.dm .username {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.dm .username input {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1.25rem;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

.dm .username .status {
  position: absolute;
  right: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
}

.dm .username .status.success {
  color: #2e7d32;
}

.dm .username .status.error {
  color: #d32f2f;
}

.dm .username .status.checking {
  color: #757575;
}

/* Section Headings */
.dm h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  text-align: center;
  color: var(--rich-black, #1e1e1e);
}

.dm #loginScreen h1,
.dm #loginScreen h2,
.dm #loginScreen h3,
.dm #loginScreen h4 {
  color: var(--deep-purple, #673ab7);
}

.dm h3 {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  margin: 1.25rem 0 0.5rem 0;
  color: var(--medium-grey, #757575);
}

.dm h3:first-of-type {
  margin: 0 0 0.5rem 0;
}

/* Settings Panels & Tiles */
.dm .settings {
  width: 100%;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 0.5rem 0 0.5rem 0;
  margin: 0.25rem 0 1rem 0;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
  border: 0.0625rem solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.dm #accountManagementSection {
  width: 100%;
}

.dm .tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem 0.875rem 1.25rem;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--rich-black, #1e1e1e);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s;
}

.dm .tile:hover {
  background-color: rgba(103, 58, 183, 0.04);
}

.dm .tile .label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--rich-black, #1e1e1e);
  text-transform: uppercase;
  flex: 1;
  text-align: left;
}

.dm .tile .pill,
.dm .tile .value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-purple, #673ab7);
  flex-shrink: 0;
}

.dm .tile .check {
  margin: 0 0 0 0.5rem;
  flex-shrink: 0;
}

/* Switches */
.dm .switch {
  position: relative;
  width: clamp(2.75rem, 2.75rem, 2.75rem);
  height: 1.5rem;
  background: #cccccc;
  border-radius: 0.75rem;
  transition: background 0.3s;
  cursor: pointer;
  flex-shrink: 0;
}

.dm .switch::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

.dm .switch.active,
.dm .switch.is-on {
  background: var(--deep-purple, #673ab7);
}

.dm .switch.active::after,
.dm .switch.is-on::after {
  transform: translateX(1.25rem);
}

.dm .tile .switch {
  pointer-events: none;
}

/* Profile Screen */
.dm .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0 1rem 0;
  margin: 0 0 0 0;
  text-align: center;
}

.dm .avatar {
  width: clamp(5rem, 6rem, 7rem);
  height: clamp(5rem, 6rem, 7rem);
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 0 1rem 0;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.dm .avatar .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm .profile .name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-purple, #673ab7);
  margin: 0.25rem 0 0.25rem 0;
}

.dm .profile .value {
  font-size: 0.95rem;
  color: var(--deep-purple, #673ab7);
  background: rgba(103, 58, 183, 0.08);
  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-family: monospace;
  margin: 0.75rem 0 0.5rem 0;
}

.dm .profile .text {
  font-size: 1rem;
  color: var(--medium-grey, #757575);
  margin: 0 0 1rem 0;
}

.dm .profile .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 1.25rem 0 0 0;
}

.dm .profile .actions .bt {
  width: clamp(14rem, 80%, 14rem);
  margin: 0 0 0 0;
}


/* Lists (Saved Quotes & Languages) */
.dm .list {
  width: 100%;
  max-height: clamp(15rem, 50vh, 32rem);
  overflow-y: auto;
  margin: 0.5rem 0 0 0;
}

.dm #savedScreen .title {
  margin: 0 0 1.125rem 0;
}

.dm #savedQuotesList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.dm #savedScreen .card {
  position: relative;
  background-color: var(--light-purple, #f3e8ff);
  border-radius: 1rem;
  padding: 0.875rem 1.25rem 2.875rem 1.25rem;
  text-align: center;
  box-shadow: 0 0.1875rem 0.625rem rgba(103, 58, 183, 0.08);
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

.dm #savedScreen .card .text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--deep-purple, #673ab7);
  margin: 0 0 0 0;
  line-height: 1.45;
  width: 100%;
}

.dm #savedScreen .card .meta {
  position: absolute;
  bottom: 0.5rem;
  right: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
  z-index: 2;
}

.dm #savedScreen .card .meta .day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.375rem;
  background: rgba(103, 58, 183, 0.08);
  line-height: 1;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--medium-purple, #9c27b0);
  margin: 0 0 0 0;
}

.dm #savedScreen .card .meta .fire {
  width: 1rem;
  height: 1rem;
  color: var(--cyan-blue, #00d2ff);
  stroke: var(--cyan-blue, #00d2ff);
  fill: var(--cyan-blue, #00d2ff);
  filter: drop-shadow(0 0 0.375rem rgba(0, 210, 255, 0.85));
}

.dm .empty {
  text-align: center;
  color: var(--medium-grey, #757575);
  font-size: 1rem;
  padding: 2.5rem 1rem 2.5rem 1rem;
}

/* Text Size Variations */
.dm[data-size="small"] {
  font-size: 0.875rem;
}

.dm[data-size="medium"] {
  font-size: 1rem;
}

.dm[data-size="large"] {
  font-size: 1.15rem;
}

.dm[data-size="small"] .card .text {
  font-size: 1.25rem;
}

.dm[data-size="medium"] .card .text {
  font-size: 1.5rem;
}

.dm[data-size="large"] .card .text {
  font-size: 1.85rem;
}

.dm[data-size="small"] #savedScreen .card .text {
  font-size: 1.05rem;
}

.dm[data-size="medium"] #savedScreen .card .text {
  font-size: 1.25rem;
}

.dm[data-size="large"] #savedScreen .card .text {
  font-size: 1.55rem;
}

.dm[data-size="small"] #savedScreen .card .meta .day {
  font-size: 0.7rem;
}

.dm[data-size="medium"] #savedScreen .card .meta .day {
  font-size: 0.8125rem;
}

.dm[data-size="large"] #savedScreen .card .meta .day {
  font-size: 0.95rem;
}

.dm[data-size="small"] h1,
.dm[data-size="small"] h2 {
  font-size: 1.25rem;
}

.dm[data-size="medium"] h1,
.dm[data-size="medium"] h2 {
  font-size: 1.5rem;
}

.dm[data-size="large"] h1,
.dm[data-size="large"] h2 {
  font-size: 1.85rem;
}

.dm[data-size="small"] h3 {
  font-size: 0.75rem;
}

.dm[data-size="medium"] h3 {
  font-size: 0.875rem;
}

.dm[data-size="large"] h3 {
  font-size: 1.05rem;
}

.dm[data-size="small"] .bt {
  font-size: 0.875rem;
}

.dm[data-size="medium"] .bt {
  font-size: 1rem;
}

.dm[data-size="large"] .bt {
  font-size: 1.2rem;
}

.dm[data-size="small"] .tile,
.dm[data-size="small"] .tile .label {
  font-size: 0.875rem;
}

.dm[data-size="medium"] .tile,
.dm[data-size="medium"] .tile .label {
  font-size: 1rem;
}

.dm[data-size="large"] .tile,
.dm[data-size="large"] .tile .label {
  font-size: 1.2rem;
}

.dm[data-size="small"] .tile .pill,
.dm[data-size="small"] .tile .value {
  font-size: 0.825rem;
}

.dm[data-size="medium"] .tile .pill,
.dm[data-size="medium"] .tile .value {
  font-size: 0.95rem;
}

.dm[data-size="large"] .tile .pill,
.dm[data-size="large"] .tile .value {
  font-size: 1.15rem;
}

.dm[data-size="small"] input[type="text"],
.dm[data-size="small"] input[type="password"],
.dm[data-size="small"] input[type="email"],
.dm[data-size="small"] input[type="time"] {
  font-size: 0.875rem;
}

.dm[data-size="medium"] input[type="text"],
.dm[data-size="medium"] input[type="password"],
.dm[data-size="medium"] input[type="email"],
.dm[data-size="medium"] input[type="time"] {
  font-size: 1rem;
}

.dm[data-size="large"] input[type="text"],
.dm[data-size="large"] input[type="password"],
.dm[data-size="large"] input[type="email"],
.dm[data-size="large"] input[type="time"] {
  font-size: 1.2rem;
}

.dm[data-size="small"] .profile .name {
  font-size: 1.05rem;
}

.dm[data-size="medium"] .profile .name {
  font-size: 1.25rem;
}

.dm[data-size="large"] .profile .name {
  font-size: 1.55rem;
}

.dm[data-size="small"] .profile .value {
  font-size: 0.825rem;
}

.dm[data-size="medium"] .profile .value {
  font-size: 0.95rem;
}

.dm[data-size="large"] .profile .value {
  font-size: 1.15rem;
}

.dm[data-size="small"] .profile .text,
.dm[data-size="small"] .empty {
  font-size: 0.875rem;
}

.dm[data-size="medium"] .profile .text,
.dm[data-size="medium"] .empty {
  font-size: 1rem;
}

.dm[data-size="large"] .profile .text,
.dm[data-size="large"] .empty {
  font-size: 1.2rem;
}

.dm[data-size="small"] .week .count {
  font-size: 0.95rem;
}

.dm[data-size="medium"] .week .count {
  font-size: 1.1rem;
}

.dm[data-size="large"] .week .count {
  font-size: 1.35rem;
}

.dm[data-size="small"] .week .mark {
  font-size: 0.825rem;
}

.dm[data-size="medium"] .week .mark {
  font-size: 0.95rem;
}

.dm[data-size="large"] .week .mark {
  font-size: 1.15rem;
}

.dm[data-size="small"] .streak .day {
  font-size: 0.9rem;
}

.dm[data-size="medium"] .streak .day {
  font-size: 1.05rem;
}

.dm[data-size="large"] .streak .day {
  font-size: 1.25rem;
}

.dm[data-size="small"] .bonus .text {
  font-size: 0.7rem;
}

.dm[data-size="medium"] .bonus .text {
  font-size: 0.8rem;
}

.dm[data-size="large"] .bonus .text {
  font-size: 0.95rem;
}

.dm[data-size="small"] .chip {
  font-size: 0.825rem;
}

.dm[data-size="medium"] .chip {
  font-size: 0.95rem;
}

.dm[data-size="large"] .chip {
  font-size: 1.15rem;
}

.dm[data-size="small"] .explain .body {
  font-size: 0.95rem;
}

.dm[data-size="medium"] .explain .body {
  font-size: 1.1rem;
}

.dm[data-size="large"] .explain .body {
  font-size: 1.35rem;
}

.dm[data-size="small"] .error {
  font-size: 0.75rem;
}

.dm[data-size="medium"] .error {
  font-size: 0.875rem;
}

.dm[data-size="large"] .error {
  font-size: 1.05rem;
}

.dm[data-size="small"] .toast {
  font-size: 0.825rem;
}

.dm[data-size="medium"] .toast {
  font-size: 0.95rem;
}

.dm[data-size="large"] .toast {
  font-size: 1.15rem;
}

.dm[data-size="small"] .banner .text {
  font-size: 0.875rem;
}

.dm[data-size="medium"] .banner .text {
  font-size: 1rem;
}

.dm[data-size="large"] .banner .text {
  font-size: 1.2rem;
}

/* Theme: Dark */
.dm[data-theme="dark"],
.dm[data-theme="dark"] .scroll {
  --dm-accent: #c4b5fd;
  background-color: #121212;
  color: #f4f6f8;
}

.dm[data-theme="dark"] .bar {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.dm[data-theme="dark"] .settings {
  background-color: #1e1e1e;
  border: 0.0625rem solid #2e2e2e;
}

.dm[data-theme="dark"] .tile {
  color: #f4f6f8;
}

.dm[data-theme="dark"] .tile:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.dm[data-theme="dark"] .tile .label {
  color: #f4f6f8;
}

.dm[data-theme="dark"] h2 {
  color: #ffffff;
}

.dm[data-theme="dark"] #loginScreen h1,
.dm[data-theme="dark"] #loginScreen h2,
.dm[data-theme="dark"] #loginScreen h3,
.dm[data-theme="dark"] #loginScreen h4 {
  color: var(--light-purple, #f3e8ff);
}

.dm[data-theme="dark"] #savedScreen .card {
  background-color: #1e1e1e;
  border: 0.0625rem solid #2e2e2e;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}

.dm[data-theme="dark"] #savedScreen .card .text {
  color: #f4f6f8;
}

.dm[data-theme="dark"] #savedScreen .card .meta .day {
  color: var(--light-purple, #f3e8ff);
}

.dm[data-theme="dark"] h3 {
  color: #a0a0a0;
}

.dm[data-theme="dark"] input[type="text"],
.dm[data-theme="dark"] input[type="password"] {
  background-color: #1e1e1e;
  color: #ffffff;
  border-color: #333333;
}

.dm[data-theme="dark"] .week .mark {
  background: #1e1e1e;
  border-color: var(--deep-purple, #673ab7);
  color: var(--deep-purple, #673ab7);
}

.dm[data-theme="dark"] .week .count {
  color: var(--deep-purple, #673ab7);
}

.dm[data-theme="dark"] .banner {
  background-color: transparent;
  border: none;
}

.dm[data-theme="dark"] .banner .text {
  color: #d1c4e9;
}

.dm[data-theme="dark"] .timepicker,
.dm[data-theme="dark"] .datepicker {
  background: #1e1e1e;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6);
}

.dm[data-theme="dark"] .timepicker .title,
.dm[data-theme="dark"] .datepicker .title {
  color: #ffffff;
}

.dm[data-theme="dark"] .timepicker .unit,
.dm[data-theme="dark"] .datepicker .unit,
.dm[data-theme="dark"] .timepicker .sep,
.dm[data-theme="dark"] .datepicker .sep {
  color: #d1c4e9;
}

.dm[data-theme="dark"] .timepicker .step,
.dm[data-theme="dark"] .datepicker .step {
  background: #2e2e2e;
  color: #d1c4e9;
}

.dm[data-theme="dark"] .timepicker .step:hover,
.dm[data-theme="dark"] .datepicker .step:hover {
  background: #673ab7;
  color: #ffffff;
}

/* Theme: White */
.dm[data-theme="white"],
.dm[data-theme="white"] .scroll {
  background-color: #ffffff;
  color: #2c2c2c;
}

.dm[data-theme="white"] .bar {
  background-color: #ffffff;
}

.dm[data-theme="white"] .settings {
  background-color: #fcfcfc;
  border: 0.0625rem solid #ebebeb;
}

.dm[data-theme="white"] .tile,
.dm[data-theme="white"] .tile .label {
  color: #2c2c2c;
}

.dm[data-theme="white"] .banner {
  background-color: #ffffff;
  border-top: 0.0625rem solid #ebebeb;
}

.dm[data-theme="white"] .banner .text {
  color: #673ab7;
}

/* Theme: Light (Cream, Off-White) */
.dm[data-theme="light"],
.dm[data-theme="light"] .scroll {
  background-color: #f9f6f0;
  color: #2c2c2c;
}

.dm[data-theme="light"] .bar {
  background-color: #f9f6f0;
}

.dm[data-theme="light"] .settings {
  background-color: #ffffff;
  border: 0.0625rem solid #e8e2d8;
}

.dm[data-theme="light"] .tile,
.dm[data-theme="light"] .tile .label {
  color: #2c2c2c;
}

/* Theme: System (Light Default: Cream, Off-White) */
.dm[data-theme="system"],
.dm[data-theme="system"] .scroll {
  background-color: #f9f6f0;
  color: #2c2c2c;
}

.dm[data-theme="system"] .bar {
  background-color: #f9f6f0;
}

.dm[data-theme="system"] .settings {
  background-color: #ffffff;
  border: 0.0625rem solid #e8e2d8;
}

.dm[data-theme="system"] .tile,
.dm[data-theme="system"] .tile .label {
  color: #2c2c2c;
}

/* Theme: System (Matches dark device preference) */
@media (prefers-color-scheme: dark) {
  .dm[data-theme="system"],
  .dm[data-theme="system"] .scroll {
    --dm-accent: #c4b5fd;
    background-color: #121212;
    color: #f4f6f8;
  }

  .dm[data-theme="system"] .bar {
    background-color: transparent;
    border: none;
    box-shadow: none;
  }

  .dm[data-theme="system"] .settings {
    background-color: #1e1e1e;
    border: 0.0625rem solid #2e2e2e;
  }

  .dm[data-theme="system"] .tile {
    color: #f4f6f8;
  }

  .dm[data-theme="system"] .tile:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .dm[data-theme="system"] .tile .label {
    color: #f4f6f8;
  }

  .dm[data-theme="system"] h2 {
    color: #ffffff;
  }

  .dm[data-theme="system"] #loginScreen h1,
  .dm[data-theme="system"] #loginScreen h2,
  .dm[data-theme="system"] #loginScreen h3,
  .dm[data-theme="system"] #loginScreen h4 {
    color: var(--light-purple, #f3e8ff);
  }

  .dm[data-theme="system"] #savedScreen .card {
    background-color: #1e1e1e;
    border: 0.0625rem solid #2e2e2e;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
  }

  .dm[data-theme="system"] #savedScreen .card .text {
    color: #f4f6f8;
  }

  .dm[data-theme="system"] #savedScreen .card .meta .day {
    color: var(--light-purple, #f3e8ff);
  }

  .dm[data-theme="system"] h3 {
    color: #a0a0a0;
  }

  .dm[data-theme="system"] input[type="text"],
  .dm[data-theme="system"] input[type="password"] {
    background-color: #1e1e1e;
    color: #ffffff;
    border-color: #333333;
  }

  .dm[data-theme="system"] .week .mark {
    background: #1e1e1e;
    border-color: var(--deep-purple, #673ab7);
    color: var(--deep-purple, #673ab7);
  }

  .dm[data-theme="system"] .week .count {
    color: var(--deep-purple, #673ab7);
  }

  .dm[data-theme="system"] .banner {
    background-color: transparent;
    border: none;
  }

  .dm[data-theme="system"] .banner .text {
    color: #d1c4e9;
  }

  .dm[data-theme="system"] .timepicker,
  .dm[data-theme="system"] .datepicker {
    background: #1e1e1e;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6);
  }

  .dm[data-theme="system"] .timepicker .title,
  .dm[data-theme="system"] .datepicker .title {
    color: #ffffff;
  }

  .dm[data-theme="system"] .timepicker .unit,
  .dm[data-theme="system"] .datepicker .unit,
  .dm[data-theme="system"] .timepicker .sep,
  .dm[data-theme="system"] .datepicker .sep {
    color: #d1c4e9;
  }

  .dm[data-theme="system"] .timepicker .step,
  .dm[data-theme="system"] .datepicker .step {
    background: #2e2e2e;
    color: #d1c4e9;
  }

  .dm[data-theme="system"] .timepicker .step:hover,
  .dm[data-theme="system"] .datepicker .step:hover {
    background: #673ab7;
    color: #ffffff;
  }
}

/* Bottom Sheet: sit above shared overlay, fit phone width, extendable and scrollable */
.dm .sheet {
  z-index: 10400;
  max-height: clamp(26rem, 88vh, 54rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background-color: var(--theme-surface, #ffffff);
}

.dm .sheet.expanded {
  height: 92vh;
  max-height: 92vh;
}

.dm .sheet .handle {
  background-color: var(--theme-border, #e2e8f0);
}

/* Bottom Sheet: hide the X; close by tapping outside or dragging the handle down */
.dm .sheet .close {
  display: none;
}

/* Centered Bottom Sheet Headings */
.dm .sheet .header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 1.25rem 0 1.25rem;
  text-align: center;
}

.dm .sheet .title {
  text-align: center;
  width: 100%;
  margin: 0 0 1.25rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: var(--theme-text, #1e1e1e);
  text-transform: uppercase;
}

/* Content fills the panel with safe clearance for bottom ad banner */
.dm .sheet .content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 1.25rem 6rem 1.25rem;
}

.dm .sheet .panel {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0 0;
}

/* Options sit directly on the panel, laid out in rows */
.dm .sheet .settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

.dm .sheet .tile {
  justify-content: center;
  padding: 0.875rem 0.5rem 0.875rem 0.5rem;
  border-radius: 0.75rem;
}

.dm .sheet .tile .label {
  flex: 0 1 auto;
  text-align: center;
  font-size: 0.9rem;
}

/* Two-Factor Setup */
.dm #twoFactorSetupContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: center;
}

.dm #twoFactorSetupContent div,
.dm #login2faGroup,
.dm #loginPinGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.dm #sheetTwoFactorPanel p,
.dm #twoFactorSetupContent span {
  font-size: 0.9rem;
  color: var(--medium-grey, #757575);
  margin: 0 0 0 0;
  line-height: 1.5;
}

.dm #qrCodeImg {
  width: 11rem;
  height: 11rem;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  background: #ffffff;
  border: 0.0625rem solid var(--light-purple, #f3e8ff);
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(103, 58, 183, 0.12);
}

.dm #twoFactorSecret {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08rem;
  color: var(--deep-purple, #673ab7);
  word-break: break-all;
}

.dm #twoFactorSetupContent label,
.dm #login2faGroup label,
.dm #loginPinGroup label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rich-black, #1e1e1e);
}

.dm #twoFactorVerifyCode,
.dm #login2faCode {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
}

.dm #confirm2faBtn,
.dm #login2faSubmitBtn,
.dm #loginPinSubmitBtn {
  width: 100%;
  margin: 0.5rem 0 0 0;
}

/* PayPal Subscription Panel in Bottom Sheet */
.dm #sheetPaypalPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.5rem 0 1rem 0;
}

.dm #sheetPaypalPanel.hidden {
  display: none;
}

.dm #sheetPaypalPanel p {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.dm #sheetPaypalPanel strong {
  color: var(--deep-purple, #673ab7);
  font-weight: 700;
}

.dm #paypal-button-container {
  width: clamp(16rem, 88%, 20rem);
  margin: 0.5rem 0 1rem 0;
  box-sizing: border-box;
}

.dm #sheetPaypalPanel .loading {
  font-size: 0.95rem;
  color: #757575;
  margin: 1rem 0 1rem 0;
}

/* Confirmation Dialog Overlay & Box */
.dm #dialogOverlay {
  z-index: 10500;
  align-items: center;
  justify-content: center;
}

.dm .dialog {
  background: #ffffff;
  border-radius: 2rem;
  width: clamp(18rem, 88%, 23rem);
  padding: 1.75rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0 1rem 3rem rgba(103, 58, 183, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.dm .dialog .title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rich-black, #1e1e1e);
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  letter-spacing: 0.05rem;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.dm .dialog .content {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  color: #4b5563;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: center;
  margin: 0 0 1.5rem 0;
  max-height: 60vh;
  overflow-y: auto;
}

.dm .dialog .actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

.dm .dialog .actions .bt {
  flex: 1;
  min-width: 0;
  height: 2.875rem;
  font-size: 1.25rem;
  background: transparent;
  color: var(--rich-black, #1e1e1e);
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

.dm .dialog .actions .bt:hover {
  opacity: 0.7;
}

.dm .dialog .actions .bt .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Custom Notification Time Actions & Oval Styling */
.dm #sheetTimePanel .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 1.25rem 0 0 0;
  width: 100%;
  box-sizing: border-box;
}

.dm #customTimeDisplay,
.dm .box {
  width: clamp(5.75rem, 28%, 7.25rem);
  flex-shrink: 0;
  height: 3rem;
  border-radius: 2rem;
  border: 0.125rem solid var(--light-purple, #f3e8ff);
  background: #ffffff;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--deep-purple, #673ab7);
  box-shadow: 0 0.125rem 0.5rem rgba(103, 58, 183, 0.08);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.dm #customTimeDisplay:hover,
.dm .box:hover {
  border-color: var(--deep-purple, #673ab7);
  box-shadow: 0 0.25rem 0.75rem rgba(103, 58, 183, 0.18);
  transform: scale(1.02);
}

.dm #saveCustomTimeBtn {
  flex: 0 0 auto;
  width: fit-content;
  height: 3rem;
  padding: 0.5rem 1.25rem 0.5rem 1.25rem;
  font-size: 0.9rem;
  white-space: nowrap;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

/* Custom Time Picker & Date Picker Modals */
.dm #timePickerOverlay,
.dm #datePickerOverlay {
  z-index: 10500;
  align-items: center;
  justify-content: center;
}

.dm .timepicker,
.dm .datepicker {
  background: #ffffff;
  border-radius: 2rem;
  width: clamp(18rem, 88%, 22rem);
  padding: 1.75rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0 1rem 3rem rgba(103, 58, 183, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.dm .timepicker .title,
.dm .datepicker .title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rich-black, #1e1e1e);
  text-transform: uppercase;
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.05rem;
  text-align: center;
  width: 100%;
}

.dm .timepicker .stepper,
.dm .datepicker .stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem 0;
  width: 100%;
}

.dm .datepicker .stepper {
  gap: 0.5rem;
}

.dm .timepicker .col,
.dm .datepicker .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dm .timepicker .step,
.dm .datepicker .step {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dm .timepicker .step:hover,
.dm .datepicker .step:hover {
  background: var(--deep-purple, #673ab7);
  color: #ffffff;
  transform: scale(1.08);
}

.dm .timepicker .unit,
.dm .datepicker .unit {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--deep-purple, #673ab7);
  width: clamp(2.5rem, 30%, 4.5rem);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dm .datepicker .unit {
  font-size: clamp(1.4rem, 5vw, 1.85rem);
}

.dm .timepicker .sep,
.dm .datepicker .sep {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--deep-purple, #673ab7);
  margin: 0 0.125rem 0 0.125rem;
}

.dm .datepicker .sep {
  font-size: clamp(1.4rem, 5vw, 1.85rem);
}

.dm .timepicker .period {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 1.5rem 0;
}

.dm .timepicker .ampm {
  padding: 0.5rem 2rem 0.5rem 2rem;
  border-radius: 1.5rem;
  background: var(--deep-purple, #673ab7);
  color: #ffffff;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
  box-shadow: 0 0.25rem 0.75rem rgba(103, 58, 183, 0.25);
}

.dm .timepicker .ampm:hover {
  transform: scale(1.05);
}

.dm .timepicker .actions,
.dm .datepicker .actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

.dm .timepicker .actions .bt,
.dm .datepicker .actions .bt {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 2.875rem;
  font-size: 1.25rem;
  background: transparent;
  color: var(--rich-black, #1e1e1e);
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
}

.dm .timepicker .actions .bt:hover,
.dm .datepicker .actions .bt:hover {
  opacity: 0.7;
}

.dm .timepicker .actions .bt .icon,
.dm .datepicker .actions .bt .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.dm #dobInput {
  cursor: pointer;
}

/* Upgraded User Banner */
.dm .banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.125rem;
  width: 100%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
}

.dm .banner.hidden {
  display: none;
}

.dm .banner .text {
  color: #673ab7;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

/* Quote Explanation Panel in Bottom Sheet */
.dm .explain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0 1rem 0;
  margin: 0 0 0 0;
}

.dm .explain.hidden {
  display: none;
}

.dm .explain .chip {
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
  border-radius: 1rem;
  padding: 0.75rem 1.25rem 0.75rem 1.25rem;
  margin: 0 0 1.25rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-style: italic;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  cursor: default;
}

.dm .explain .body {
  font-size: 1rem;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  padding: 0 0 0 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-line;
}

.dm .explain .loading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 2rem 0;
  padding: 0 0 0 0;
  text-align: center;
}

.dm .dm-gearbox {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--deep-purple, #673ab7);
  fill: var(--deep-purple, #673ab7);
}

/* Muted Pro Quote Directly Beneath Streak Days */
.dm .bonus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.15rem 0 0.5rem 0;
  padding: 0 1.25rem 0 1.25rem;
  box-sizing: border-box;
  text-align: center;
}

.dm .bonus.hidden {
  display: none;
}

.dm .bonus .text {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 500;
  color: #90a4ae;
  line-height: 1.4;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.dm #subscriptionDialog {
  width: clamp(18rem, 88%, 24rem);
  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
}

.dm #subscriptionDialog .title {
  margin: 0 0 0.65rem 0;
}

.dm #subscriptionDialog .actions {
  gap: 0.5rem;
  margin: 0 0 0.35rem 0;
  width: 100%;
}

.dm #subscriptionDialog .actions .bt {
  display: flex;
  flex-direction: column;
  height: auto;
  min-width: 0;
  padding: 0.35rem 0.25rem 0.35rem 0.25rem;
  border-radius: 1rem;
  text-align: center;
  box-sizing: border-box;
  gap: 0.1rem;
}

.dm #subscriptionDialog .actions .bt .label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 0 0;
  opacity: 1;
}

.dm #subscriptionDialog .actions .bt .name {
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0 0 0 0;
  opacity: 1;
}

.dm #subscriptionDialog .actions .bt .value {
  font-size: 0.72rem;
  font-weight: 400;
  margin: 0 0 0 0;
}

.dm #subscriptionDialog .content {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

[data-dm][data-theme="dark"] {
  color-scheme: dark;
}

[data-dm][data-theme="light"],
[data-dm][data-theme="white"],
[data-dm][data-theme="system"] {
  color-scheme: light;
}

.dm .conversation .sidebar,
.dm form.message .entry,
.dm .share {
  background: var(--theme-surface, #ffffff);
  border-color: var(--theme-border, #e8e2d8);
  color: var(--theme-text, #2c2c2c);
}

.dm .conversation .thread,
.dm .conversation .bubble.received,
.dm .share textarea {
  background: var(--theme-subtle, #f4f0e8);
  border-color: var(--theme-border, #e8e2d8);
  color: var(--theme-text, #2c2c2c);
}

.dm .conversation .thread.active,
.dm .conversation .thread:hover,
.dm .share .destination:hover {
  background: var(--theme-hover, rgba(0, 0, 0, 0.04));
}

.dm form.message textarea {
  color: var(--theme-text, #2c2c2c);
}

.dm .conversation .thread .preview,
.dm .conversation .timestamp,
.dm .conversation .edited,
.dm .conversation .action,
.dm form.message .attach {
  color: var(--theme-muted, #6e675f);
}

.dm .conversation .icon,
.dm .conversation .topic h3 {
  color: var(--dm-accent);
}

.dm .conversation .quote,
.dm .conversation .context,
.dm form.message .attachment,
.dm .share .destination {
  background: var(--theme-subtle, #f4f0e8);
  color: var(--dm-accent);
}

.dm .conversation .icon:hover,
.dm form.message .attach:hover:not(:disabled) {
  background: var(--theme-hover, rgba(0, 0, 0, 0.04));
  color: var(--dm-accent);
}

.dm .captcha .refresh {
  background: var(--theme-subtle, #f4f0e8);
  color: var(--theme-text, #2c2c2c);
}

@media (prefers-color-scheme: dark) {
  [data-dm][data-theme="system"] {
    color-scheme: dark;
  }
}
.legal {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.legal h1,
.legal h2,
.legal h3,
.legal h4,
.legal h5,
.legal h6,
.dm .legal h1,
.dm .legal h2,
.dm .legal h3,
.dm .legal h4,
.dm .legal h5,
.dm .legal h6 {
  text-align: center;
  width: 100%;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  margin: 1.5rem 0 0.75rem 0;
}

.legal p,
.dm .legal p {
  text-align: center;
  width: 100%;
  margin: 0 0 1rem 0;
}

.legal ul,
.legal ol,
.dm .legal ul,
.dm .legal ol {
  text-align: center;
  list-style-position: inside;
  width: 100%;
  padding: 0;
  margin: 0 0 1rem 0;
}

.legal li,
.dm .legal li {
  text-align: center;
  width: 100%;
  margin: 0.25rem 0 0.25rem 0;
}

.legal blockquote,
.dm .legal blockquote {
  text-align: center;
  width: 100%;
  margin: 1rem 0 1rem 0;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

.legal table,
.dm .legal table {
  text-align: center;
  width: 100%;
  margin: 1rem 0 1rem 0;
}

.legal header .container {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.legal header nav {
  justify-content: flex-start;
  width: 100%;
}

.legal header h1 {
  margin: 0 0 0 0;
  text-align: center;
  width: 100%;
  letter-spacing: -0.09375rem;
}
.after-main-ad {

  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:2rem 0;

}

.after-main-ad iframe {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 728px;
  height: 90px;
  border: none;
  overflow: hidden;
}

.after-main-ad>div {

  display: block;
  margin-left:0;
  margin-right:0;

}

.after-main-ad>a {

  display: block;
  margin-left:0;
  margin-right:0;

}

.mrec {
  display: none;
}

.mrec .slot {
  display: none;
}.newsletter {
  display: block;
  position: fixed;
  right: 0.75rem;
  bottom: calc(var(--footer-height) + 1.125rem + env(safe-area-inset-bottom, 0));
  width: min(18.75rem, calc(100vw - 1.5rem));
  background: rgba(13, 13, 13, 0.4);
  backdrop-filter: blur(1.25rem) saturate(160%);
  backdrop-filter: blur(1.25rem) saturate(160%);
  color: #fff;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.3);
  padding: 1.125rem;
  z-index: 10030;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.newsletter.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(2.5rem);
  filter: blur(0.625rem);
}



.newsletter h3 {
  margin: 0 1.5rem 0.625rem 0;
  font-size: 1rem;
  cursor: grab;
  user-select: none;
}

.newsletter h3:active {
  cursor: grabbing;
}

.newsletter.is-dragging {
  cursor: grabbing;
}

.newsletter-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0.125rem solid #fff;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: bold;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10035;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.newsletter-close:hover {
  background: var(--rich-black);
  transform: scale(1.1) rotate(90deg);
}

.newsletter-close:active {
  transform: scale(0.95);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--rich-black);
}

.newsletter-form input {
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.05);
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.875rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-form input:focus {
  border-color: var(--rich-black);
}

.newsletter-form button {
  padding: 0.5rem;
  background: var(--rich-black);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.newsletter-status {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  text-align: center;
}.hamilton {
  background: var(--rich-white);
  font-family: 'Outfit';
}

.hamilton header {
  background: var(--rich-white);
  color: var(--rich-black);
}


.hamiltonauth {
  position: absolute;
  top: 100%;
  right: 0;
  width: clamp(10rem, 90%, 25rem);
  background: var(--rich-white);
  border: 0.0625rem solid var(--light-grey);
  border-radius: var(--full-radius);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
  padding: var(--full-padding);
  z-index: 2000;
  margin: var(--full-margin);
}

.hamiltonauth[hidden] {
  display: none;
}

.hamilton .action {
  margin: 0 1rem;
  font-weight: normal;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0;
}

.hamilton .container .action {
  padding: .3rem;
}

.hamilton .brand {
  background: linear-gradient(135deg, var(--dusty-blue) 0%, var(--light-grey) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hamilton .composer {
  display: flex;
  align-items: center;
  align-self: center;
  background: var(--rich-white);
  border: 0.0625rem solid var(--light-grey);
  border-radius: 2rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 1rem 0 1rem 0;
  width: clamp(10rem, 90%, 45rem);
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

.hamilton .composer:focus-within {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  border-color: var(--dusty-blue);
}

.hamilton .field {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin: 0 0 0 0;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--rich-black);
  height: clamp(3.6rem, auto, 11rem);
  field-sizing: content;
}

.hamilton .send {
  background: var(--rich-black);
  color: var(--rich-white);
  border-radius: 2rem;
  padding: 0.5rem 1.25rem 0.5rem 1.25rem;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin: 0 0 0 0.5rem;
  white-space: nowrap;
}

.hamilton .send:hover {
  background: var(--dusty-blue);
  color: var(--rich-white);
}

.hamilton form {
  width: 100%;
}

.hamilton .layout {
  flex: 1;
  flex-wrap: nowrap;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.hamilton .main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}

.hamilton .scroll {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}



.hamilton .bt,
.hamilton .bt-secondary {
  flex: 1;
}

.hamilton .bt-secondary.active {
  background: var(--rich-black);
  color: var(--rich-white);
  border-color: var(--rich-black);
}

.hamilton .setting {
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--light-grey);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  min-width: 8rem;
  text-decoration: none;
  color: var(--rich-black);
  margin: 0.5rem;
  background: var(--rich-white);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hamilton .setting:hover {
  background: rgba(0, 0, 0, 0.02);
  border-color: #aaa;
}

.hamilton .setting b {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.5;
  text-transform: uppercase;
  text-align: left;
  align-self: flex-start;
}

.hamilton .setting span {
  font-weight: bold;
  text-align: center;
  align-self: center;
  margin: 0.5rem 0 0 0;
}

.hamilton .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
  width: 100%;
}

.hamilton #actions {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s ease-in-out, opacity 0.4s ease-in-out;
  overflow: hidden;
}

.hamilton #actions.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.hamilton #actions-inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hamilton .grid section {
  padding: 3rem 3rem 3rem 3rem;
  border: 0.0625rem solid var(--light-grey);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 15rem;
}

.hamilton form {
  border: none;
  z-index: 1100;
  width: 100%;
}

.hamilton #chat-messages {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1rem 1rem;
}

.hamilton .user,
.hamilton .assistant {
  display: flex;
  width: 100%;
  margin: 0 0 1rem 0;
}

.hamilton .user {
  justify-content: flex-end;
}

.hamilton .assistant {
  justify-content: flex-start;
}

.hamilton .wrapper {
  display: flex;
  flex-direction: column;
  width: clamp(10rem, 75%, 45rem);
}

.hamilton .user .wrapper {
  align-items: flex-end;
}

.hamilton .assistant .wrapper {
  align-items: flex-start;
}

.hamilton .bubble {
  padding: 0.75rem 1.25rem 0.75rem 1.25rem;
  border-radius: 1.25rem;
  line-height: 1.5;
  font-size: 1rem;
  word-wrap: break-word;
}

.hamilton .user .bubble {
  background: var(--dusty-blue);
  color: var(--rich-white);
  border-bottom-right-radius: 0.25rem;
}

.hamilton .assistant .bubble {
  background: var(--light-grey);
  color: var(--rich-black);
  border-bottom-left-radius: 0.25rem;
}

.hamilton .time {
  font-size: 0.75rem;
  color: #888;
  margin: 0.25rem 0 0 0;
}

.hamilton .indicator {
  display: flex;
  align-items: center;
}

.hamilton .pulse {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--dusty-blue);
  border-radius: 50%;
  margin: 0 0.5rem 0 0;
  animation: hamiltonPulse 1.5s infinite;
}

@keyframes hamiltonPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

.hamilton .status {
  font-size: 0.85rem;
  opacity: 0.8;
  font-style: italic;
}



.hamilton .picture {
  margin: 0 0 0.5rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.hamilton .picture img {
  display: block;
  width: 100%;
  height: auto;
}



.hamilton .panel h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.hamilton .panel p {
  margin: 0 0 0 0;
  color: var(--slate-grey);
}

.hamilton .panel .close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  cursor: pointer;
  color: var(--rich-black);
  text-decoration: none;
  font-weight: bold;
}

.hamilton .panel form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hamilton .panel .field {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 1rem;
  margin: 0 0 1rem 0;
  border: 0.0625rem solid var(--light-grey);
  border-radius: 0.5rem;
  box-sizing: border-box;
}

.hamilton .panel .list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hamilton .panel .group {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.5rem 0;
}

.hamilton .panel .group .label {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--slate-grey);
  margin: 0 0 0.5rem 0;
}

.hamilton .panel .metrics {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem 0 0 0;
  text-align: center;
}

.hamilton .panel .metrics .label {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--slate-grey);
}

.hamilton .panel .summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem 0;
}

.hamilton .panel .badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--dusty-blue);
  color: var(--rich-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}


.hamilton .modal .panel {
  position: relative;
  width: clamp(10rem, 90%, 25rem);
  animation: none;
}

.hamilton .modal {
  animation: none;
}

.hamilton .sheet {
  z-index: 10400;
}

.hamilton .panel .buttons {
  display: flex;
  gap: 0.5rem;
}

.hamilton .panel .choice {
  background: transparent;
  color: var(--rich-black);
  border: 0.0625rem solid var(--light-grey);
  flex: 1;
}

.hamilton .panel .choice.is-active {
  background: var(--rich-black);
  color: var(--rich-white);
  border-color: var(--rich-black);
}
.muted {
  color: var(--dim-grey);
  text-align: center;
  padding: 0 1rem;
}

@media (max-width: 56.25rem) {
  #nav-sign-in-link {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
  }
}
/* Astreet overrides */
.astreet .bt {
    background: var(--metallic-gold);
    color: var(--rich-white);
    border: 2px solid var(--metallic-gold);
    white-space: nowrap;
    justify-self: center;
}

.astreet .bt:hover:not(:disabled) {
    color: var(--rich-white);
    opacity: 0.9;
}

.astreet .bt-secondary {
    background: var(--rich-white);
    color: var(--metallic-gold);
    border: 2px solid var(--metallic-gold);
}

.astreet .bt-secondary:hover {
    color: var(--metallic-gold);
    background: rgba(212, 175, 55, 0.05);
}

.astreet header {
    background-color: var(--rich-white);
    color: var(--rich-black);
}

.astreet {
    background-color: var(--rich-white);
}

.astreet main {
    width: 100%;
}

.astreet .brand-link {
    color: var(--rich-black);
}

.astreet .brand-link:hover {
    color: var(--rich-black);
}

.astreet .primary-mailbox-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.astreet .layout {
    flex-wrap: nowrap;
}

.astreet .sidebar {
    width: 35%;
    padding: var(--full-padding);
}


.astreet article {
    text-align: left;
}

.astreet ol {
    text-align: left;
    list-style-type: decimal;
    padding: 0 0 0 2rem;
}

.astreet li {
    display: list-item;
    margin: 0 0 0.5rem 0;
    text-align: left;
}

.astreet h4 {
    text-align: left;
    margin: 1.5rem 0 0.5rem 0;
}

.astreet .main {
    flex: 1;
    padding: var(--full-padding);
}

.astreet .reveal input[name="handle"] {
    padding-right: 8.5rem;
}

.astreet .reveal input[name="handle"]~i {
    font-style: normal;
    font-size: 0.9rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.aliases td {
    text-align: center;
}

.astreet .reveal .success {
    color: var(--success-green);
}

.astreet .reveal .error {
    color: var(--error-red);
}

.astreet .reveal .checking {
    color: var(--dim-grey);
}

.astreet .stage {
    margin: 0 0 2rem 0;
}

.astreet .pillars .container {
    width: 24%;
}.construction .bt,
.construction .bt-secondary {
  display: flex;
}


.construction .pillars .model {
  width: clamp(10rem, 15rem, 20rem);
  padding: 1rem 1rem 1rem 1rem;
  justify-content: flex-start;
  cursor: pointer;
}

.construction .model .link {
  width: 100%;
}

.construction .model img {
  width: 100%;
  height: clamp(5rem, 7rem, 9rem);
  object-fit: cover;
  border-radius: 1rem;
  margin: 0 0 0.5rem 0;
}

.construction .model h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}

.construction .model p {
  margin: 0 0 0 0;
  font-size: 0.9rem;
}



.construction .detail { 
  width: clamp(20rem, 100%, 68.75rem); 
  margin: 0 auto 0 auto; 
  padding: 1.25rem 1.25rem 1.25rem 1.25rem; 
}

.construction .thumb { 
  float: right; 
  width: clamp(10rem, 22.5rem, 22.5rem); 
  margin: 0 0 1rem 1.75rem; 
  border-radius: 0.5rem; 
  box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08); 
}

.construction .description { 
  overflow: hidden; 
  background-color: var(--rich-white, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  border-radius: 1rem;
}

.construction .description p {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
}

.construction .floorplan { 
  clear: both; 
  margin: 1.75rem 0 0 0; 
  text-align: center; 
}

.construction .floorplan img {
  width: clamp(10rem, 100%, 100%); 
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08);
}.report-error-link {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 0 0 0;
    text-decoration: none;
    color: var(--soft-white, #ffffff);
    font-size: 0.8rem;
    cursor: pointer;
}

.report-error-text-short {
    display: none;
}

#raeSheet textarea {
    height: 6rem;
    resize: none;
}

.copyright:has(.logout) .report-error-link {
    right: 5.5rem;
}.captcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.75rem 0 0.75rem 0;
}

.captcha .trap {
    position: absolute;
    left: -625rem;
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    pointer-events: none;
}

.captcha .challenge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.captcha .visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: clamp(8.5rem, 9.5rem, 11rem);
    border-radius: 0.5rem;
    overflow: hidden;
    user-select: none;
}

.captcha .visual svg {
    display: block;
    width: 100%;
    height: 100%;
}

.captcha .refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.25rem, 2.5rem, 2.75rem);
    height: 2.5rem;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border-radius: 0.5rem;
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-primary, #111827);
    font-size: 1.125rem;
    cursor: pointer;
}

.captcha input[data-captcha-answer] {
    width: clamp(6rem, 8rem, 10rem);
    height: 2.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.75rem;
    margin: 0 0 0 0;
    text-align: center;
}
.consent {
  background: var(--theme-bg, #f9f6f0);
  color: var(--theme-text, #2c2c2c);
}

.consent .scroll {
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  align-content: center;
  height: auto;
  min-height: 0;
  margin: 0 0 0 0;
  padding: 1rem 1rem 1rem 1rem;
  overflow: auto;
}

.dm.consent .scroll {
  margin: 5rem 0 0 0;
}

.dm.consent .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.consent .agreement {
  width: clamp(0rem, 100%, 38rem);
  box-sizing: border-box;
  padding: clamp(1rem, 4vw, 2rem);
  border-radius: 1rem;
  background: var(--theme-surface, #ffffff);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.14), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
  text-align: center;
}

.consent .agreement h1 {
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  margin: 0 0 1rem 0;
  color: inherit;
}

.consent .agreement p {
  line-height: 1.55;
  margin: 0 0 1rem 0;
  color: inherit;
}

.consent .agreement a {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.consent .agreement form {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.consent .agreement .verification {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 7rem);
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
}

.consent .agreement .verification label {
  grid-column: 1 / -1;
  width: 100%;
}

.consent .agreement .verification img {
  display: block;
  align-self: center;
  height: 3rem;
  width: 100%;
  margin: 0 0 0 0;
}

.consent .agreement .verification input {
  align-self: center;
  width: 100%;
  height: 3rem;
  margin: 0 0 0 0;
  box-sizing: border-box;
  border: 0.0625rem solid var(--theme-border, #e8e2d8);
  border-radius: 1rem;
  background: var(--theme-bg, #f9f6f0);
  color: inherit;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}

.consent .agreement .trap {
  position: absolute;
  left: -625rem;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}

.consent .agreement .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  width: 100%;
}

.consent .agreement .actions button {
  flex: 1 1 0;
  height: 3.5rem;
  border-radius: 1rem;
  padding: 0.75rem 1rem 0.75rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
}

.consent .agreement .confirm {
  background: #000000;
  color: #ffffff;
  border: 0.0625rem solid #000000;
}

.consent .agreement .cancel {
  background: #ffffff;
  color: #000000;
  border: 0.0625rem solid #000000;
}

.consent .agreement .error {
  color: var(--theme-text, #2c2c2c);
}

.consent .agreement :focus-visible {
  outline: 0.1875rem solid var(--theme-text, #2c2c2c);
  outline-offset: 0.1875rem;
}
.share {
  position: fixed;
  top: 50%;
  left: 50%;
  width: clamp(0rem, 90vw, 28rem);
  height: fit-content;
  max-height: 85dvh;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  border-radius: 1rem;
  background: var(--rich-white, #ffffff);
  color: var(--rich-black, #1e1e1e);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.share::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.share .panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
}

.share h3 {
  margin: 0 0 0 0;
  font-size: 1.1rem;
  text-align: left;
}

.share textarea {
  width: 100%;
  margin: 0 0 0 0;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: #f0f2f5;
  color: inherit;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
  box-sizing: border-box;
}

.share .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 0 0;
}

.share .destinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.share .destination {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
  margin: 0 0 0 0;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  border-radius: 0.65rem;
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.share .destination:hover {
  background: rgba(103, 58, 183, 0.15);
}

.share .destination:focus-visible {
  outline: 0.125rem solid var(--deep-purple, #673ab7);
  outline-offset: 0.125rem;
}

.share .destination i {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  font-size: 1.1rem;
  text-align: center;
}

.share .actions button,
.share .actions .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
  fill: none;
  color: inherit;
  cursor: pointer;
}

.share .bt {
  margin: 0 0 0 0;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
}

.share [hidden] {
  display: none;
}
form.message[data-message-form] {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  width: clamp(0rem, 100%, 56.25rem);
  gap: 0.35rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

form.message .entry {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  margin: 0 0 0 0;
  padding: 0.35rem 0.45rem 0.35rem 0.45rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.12);
  border-radius: 1.75rem;
  background: var(--rich-white, #ffffff);
  box-shadow: 0 0.125rem 0.6rem rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

form.message .entry:focus-within {
  border-color: var(--deep-purple, #673ab7);
  box-shadow: 0 0.125rem 0.75rem rgba(103, 58, 183, 0.15);
}

form.message textarea {
  grid-column: 2;
  width: 100%;
  height: auto;
  min-height: 2.25rem;
  max-height: 9.75rem;
  margin: 0 0 0 0;
  padding: 0.375rem 0 0.375rem 0;
  border: none;
  border-radius: 0;
  outline: none;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5rem;
  text-align: start;
  color: var(--rich-black, #1e1e1e);
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

form.message textarea:focus {
  border: none;
  outline: none;
}

form.message textarea:placeholder-shown {
  text-align: justify;
}

form.message .send {
  display: flex;
  grid-column: 3;
  align-self: end;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rich-white, #ffffff);
  background: var(--deep-purple, #673ab7);
  cursor: pointer;
  box-sizing: border-box;
}

form.message .send:hover:not(:disabled) {
  background: #5e35b1;
}

form.message .send:disabled {
  color: var(--medium-grey, #9e9e9e);
  background: rgba(0, 0, 0, 0.08);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

form.message .attach {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--medium-grey, #757575);
  font-size: 1.1rem;
  cursor: pointer;
}

form.message .attach:hover:not(:disabled) {
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
}

form.message .attach:disabled,
form.message .remove:disabled {
  opacity: 0.45;
  cursor: default;
}

form.message .attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}

form.message .attachment {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: clamp(0rem, 100%, 18rem);
  padding: 0.4rem 0.6rem 0.4rem 0.6rem;
  border-radius: 0.75rem;
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
  box-sizing: border-box;
}

form.message .attachment .name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  text-align: left;
}

form.message .attachment .size {
  flex-shrink: 0;
  font-size: 0.7rem;
}

form.message .remove {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

form.message [hidden] {
  display: none;
}

.messages .bubble {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: clamp(0rem, 100%, 56.25rem);
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.conversation .sidebar {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  background: var(--rich-white, #ffffff);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.conversation .header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  margin: 0 0 0.5rem 0;
  padding: 0 0 0 0;
}

.conversation .header h2 {
  margin: 0 0 0 0;
  font-size: 1.1rem;
  text-align: left;
}

.conversation .header .actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  gap: 0.35rem;
  margin: 0 0 0 0;
}

.conversation .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--deep-purple, #673ab7);
  font-size: 1.4rem;
  cursor: pointer;
}

.conversation .threads {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  overflow-x: auto;
  margin: 0 0 0 0;
  padding: 0.25rem 0 0.5rem 0;
  list-style: none;
  box-sizing: border-box;
}

.conversation .thread {
  flex-shrink: 0;
  width: clamp(8rem, 40%, 14rem);
  margin: 0 0 0 0;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.06);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  cursor: pointer;
}

.conversation .thread.active,
.conversation .thread:hover {
  background: var(--light-purple, #f3e8ff);
}

.conversation .thread .title,
.conversation .thread .preview {
  width: 100%;
  margin: 0 0 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.conversation .thread .preview {
  font-size: 0.75rem;
  color: var(--medium-grey, #757575);
}

.conversation .feed {
  width: 100%;
  height: clamp(22rem, 64vh, 46rem);
  overflow-y: auto;
  padding: 0.5rem 0 1rem 0;
  box-sizing: border-box;
}

.conversation .pane {
  display: none;
  width: 100%;
}

.conversation .pane.active {
  display: flex;
  flex-direction: column;
}

.conversation .topic h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--deep-purple, #673ab7);
}

.conversation .messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.conversation div.message {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 0.35rem;
  width: clamp(0rem, 85%, 26rem);
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.conversation .message.sent {
  align-self: flex-end;
  text-align: left;
}

.conversation .message.received {
  align-self: flex-start;
  text-align: left;
}

.conversation .message .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-inline-size: 0;
  gap: 0.25rem;
}

.conversation .message.sent .content {
  align-items: flex-end;
}

.conversation .segment {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
}

.conversation .message.sent .segment {
  flex-direction: row-reverse;
}

.conversation .details {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
}

.conversation .message.sent .details {
  flex-direction: row-reverse;
}

.conversation .bubble {
  min-inline-size: 0;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-radius: 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.conversation .bubble.sent {
  border-bottom-right-radius: 0.25rem;
  color: #ffffff;
  background: var(--deep-purple, #673ab7);
}

.conversation .bubble.received {
  border-bottom-left-radius: 0.25rem;
  color: var(--rich-black, #1e1e1e);
  background: #f0f2f5;
}

.conversation .bubble .attachments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.35rem 0 0 0;
  white-space: normal;
}

.conversation .bubble .attachment {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.conversation .bubble .attachment i {
  flex-shrink: 0;
}

.conversation .message.replying .bubble {
  outline: 0.125rem solid var(--deep-purple, #673ab7);
}

.conversation .timestamp,
.conversation .edited {
  display: block;
  margin: 0 0 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--medium-grey, #757575);
  white-space: normal;
}

.conversation .details .timestamp {
  white-space: nowrap;
}

.conversation .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.75rem;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  background: transparent;
  color: var(--medium-grey, #757575);
  cursor: pointer;
}

.conversation .action i {
  font-size: inherit;
  line-height: inherit;
}

.conversation .segment .action {
  align-self: flex-start;
}

.conversation .quote {
  width: 100%;
  padding: 0.35rem 0.5rem 0.35rem 0.5rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.conversation .composer {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.35rem;
}

.conversation .context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.85rem;
  border-radius: 0.75rem;
  background: var(--light-purple, #f3e8ff);
  color: var(--deep-purple, #673ab7);
  font-size: 0.8rem;
  box-sizing: border-box;
}

.conversation .context[hidden] {
  display: none;
}

.conversation .cancel {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 56.25rem) {
  .conversation div.message {
    width: 100%;
  }
}
@media (max-width: 56.25rem) {

  .header .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: auto;
    min-height: 0;
    padding: 0.5rem 0.625rem 0;
    gap: 0.25rem;
  }

  header nav {
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: center;
    gap: var(--nav-gap);
    width: 100%;
    box-sizing: border-box;
  }

  .header nav a {
    margin: 0;
  }

  .pillars.row,
  .pillars.row.columns {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .pillars .container,
  .pillars .container.half,
  .pillars .container.full {
    width: 100%;
  }



  .brand.title {
    text-align: center;
    width: 100%;
    justify-content: center;
  }

  .hero-logo {
    font-size: 2rem;

  }

  .hero .content .prefix,
  .hero.content .prefix {
    font-size: 1.5rem;
  }

  .hero .content .title,
  .hero.content .title {
    font-size: 1.8rem;
  }




  .hamilton section .guide {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    margin: 0;
  }

  .scroll {
    padding: var(--media-padding);
  }

}
@media (max-width: 56.25rem) {
  .home .hero .logo {
    display: none;
  }

  .home .full {
    display: none;
  }

  .home .compact {
    display: inline;
  }

  .home .hero .full {
    display: none;
  }

  .home .hero .compact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .home .hero .compact .logo {
    display: inline-flex;
    width: clamp(3.25rem, 8vw, 4.25rem);
    height: clamp(3.25rem, 8vw, 4.25rem);
    position: static;
    transform: none;
  }

  .home .hero .compact .logo .image {
    width: 78%;
    height: 78%;
  }

  .about .mount,
  .divisions .mount {
    display: grid;
    grid-template-columns: repeat(2, clamp(7.8rem, 42vw, 10.4rem));
    justify-content: center;
    justify-items: center;
    gap: 1rem 1rem;
    width: 100%;
  }

  .about .container.flip,
  .divisions .container.flip {
    width: clamp(7.8rem, 42vw, 10.4rem);
    height: clamp(6rem, 32.3vw, 8rem);
    box-sizing: border-box;
  }

  .about .front,
  .about .back,
  .divisions .front,
  .divisions .back {
    font-size: 0.85rem;
    padding: 0.5rem 0.5rem;
  }
}
@media (max-width: 56.25rem) {
    .hub.ic #features {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        margin: 0 0 1rem 0;
        box-sizing: border-box;
    }

    .hub.ic #features .container {
        width: calc(50% - 0.25rem);
        flex: 0 0 calc(50% - 0.25rem);
        box-sizing: border-box;
        margin: 0 0 0 0;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        background: var(--rich-white, #ffffff);
        border-radius: var(--round-edges, 0.5rem);
        border: 0.0625rem solid var(--border-color, #e5e7eb);
        overflow: hidden;
    }

    .hub.ic #features table {
        table-layout: fixed;
        display: table;
        width: 100%;
        margin: 0 0 0 0;
        border-collapse: collapse;
    }

    .hub.ic #features thead {
        display: table-header-group;
    }

    .hub.ic #features tbody {
        display: table-row-group;
    }

    .hub.ic #features tr {
        display: table-row;
        width: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .hub.ic #features th {
        display: table-cell;
        text-align: center;
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 0.25rem 0 0.5rem 0;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hub.ic #features td {
        display: table-cell;
        padding: 0.25rem 0 0.25rem 0;
        border: none;
    }

    .hub.ic #features td::before {
        display: none;
        content: none;
    }

    .hub.ic #features .feature-selector-label {
        font-size: 0.75rem;
        font-weight: 600;
        display: block;
        margin: 0 0 0.25rem 0;
    }

    .hub.ic #features select.tlc-selector {
        width: 100%;
        max-width: 100%;
        font-size: 0.75rem;
        padding: 0.35rem 0.25rem 0.35rem 0.25rem;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hub.ic #features select[multiple] {
        height: clamp(8rem, 11rem, 14rem);
        font-size: 0.75rem;
        white-space: normal;
    }

    .hub.ic #features button {
        width: 100%;
        padding: 0.35rem 0.5rem 0.35rem 0.5rem;
        font-size: 0.75rem;
        margin: 0.25rem 0 0 0;
    }

    .hub.ic .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        width: 100%;
        margin: 0 0 0.75rem 0;
    }

    .hub.ic .filters {
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard.ic .pillars.row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        margin: 0 0 0.5rem 0;
    }

    .dashboard.ic .pillars .container {
        width: calc(50% - 0.25rem);
        margin: 0 0 0 0;
        box-sizing: border-box;
    }

    .dashboard.ic .pillar {
        width: 100%;
        padding: 0.75rem 0.625rem 0.75rem 0.625rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 0;
    }

    .dashboard.ic .pillar h2 {
        font-size: 0.9375rem;
        line-height: 1.2;
        margin: 0 0 0.25rem 0;
    }

    .dashboard.ic .pillar p {
        font-size: 0.75rem;
        line-height: 1.25;
        margin: 0 0 0.5rem 0;
        flex-grow: 1;
    }

    .dashboard.ic .pillar .bt {
        padding: 0.35rem 0.5rem 0.35rem 0.5rem;
        font-size: 0.75rem;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
    }

    .landing.ic form {
        width: clamp(22rem, calc(100% - 1.5rem), 24rem);
        margin: 0 0 0 0;
        box-sizing: border-box;
    }

    .landing.ic .scroll {
        padding: 1rem 0.75rem 1rem 0.75rem;
        box-sizing: border-box;
    }

    .ic .searchline {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0 0.5rem 0 0.5rem;
        box-sizing: border-box;
        margin: 0 0 0.5rem 0;
    }

    .ic .searchline .searchbar {
        width: 100%;
        min-width: 0;
        flex: 1;
        margin: 0 0 0 0;
    }

    .ic .searchline .add,
    .ic .searchline .refresh {
        flex-shrink: 0;
        position: static;
        margin: 0 0 0 0;
        white-space: nowrap;
        cursor: pointer;
    }

    .ic .page-header nav {
        flex-wrap: wrap;
        padding: 0 0.5rem 0 0.5rem;
    }

    .ic .page-header nav .add {
        position: static;
        margin: 0 0 0 0.5rem;
    }

    .ic .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: center;
        width: 100%;
        padding: 0 0.5rem 0 0.5rem;
        box-sizing: border-box;
        margin: 0.5rem 0 0.75rem 0;
    }

    .ic .chip {
        font-size: 0.85rem;
        padding: 0.35rem 0.75rem 0.35rem 0.75rem;
    }

    .ic .container:has(table),
    .ic .workspacepanel:has(table),
    .ic .grid:has(table) {
        width: 100%;
        overflow-x: visible;
        box-sizing: border-box;
        margin: 0 0 1rem 0;
    }

    .ic table {
        display: block;
        width: 100%;
        border: none;
        margin: 0.75rem 0 0.75rem 0;
    }

    .ic table thead {
        display: none;
    }

    .ic table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .ic table tr {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0.875rem 1rem 0.875rem 1rem;
        box-sizing: border-box;
        border-radius: var(--border-radius-base, 0.5rem);
        background: var(--bg-surface, #ffffff);
        border: 1px solid var(--border-color, #e5e7eb);
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
        gap: 0.4rem;
        margin: 0 0 0.75rem 0;
    }

    .ic table td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        padding: 0.35rem 0 0.35rem 0;
        border: none;
        border-bottom: 1px solid var(--border-subtle, #f3f4f6);
        box-sizing: border-box;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 0.8125rem;
    }

    .ic table td:last-child {
        border-bottom: none;
        padding: 0.35rem 0 0 0;
    }

    .ic table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.7rem;
        color: var(--text-muted, #6b7280);
        text-transform: uppercase;
        letter-spacing: 0.03rem;
        text-align: left;
        margin: 0 0 0.15rem 0;
        display: block;
    }

    .ic table td:empty {
        display: none;
    }

    .ic table td div,
    .ic table td span,
    .ic table td strong,
    .ic table td code {
        text-align: left;
        width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ic table td:has(.bt),
    .ic table td:has(button) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
        align-items: center;
        padding: 0.5rem 0 0 0;
    }

    .ic table td:has(input[type="checkbox"]) {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .ic table td .bt,
    .ic table td button,
    .ic table td a.bt {
        margin: 0.25rem 0 0.25rem 0;
        padding: 0.35rem 0.625rem 0.35rem 0.625rem;
        font-size: 0.75rem;
        cursor: pointer;
    }

    .ic table td.empty {
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.5rem 0 1.5rem 0;
        color: var(--text-muted, #6b7280);
    }

    .ic table td.empty::before {
        display: none;
    }

    .ic .pillars table {
        display: table;
        width: 100%;
        border: none;
        margin: 0 0 0 0;
    }

    .ic .pillars thead {
        display: none;
    }

    .ic .pillars tbody {
        display: table-row-group;
    }

    .ic .pillars tr {
        display: table-row;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }

    .ic .pillars td {
        display: table-cell;
        padding: 0.35rem 0 0.35rem 0;
        border: none;
        text-align: left;
    }

    .ic .pillars td::before {
        display: none;
        content: none;
    }

    .ic .logstable td.messagecol {
        white-space: normal;
        word-break: break-word;
        width: 100%;
        text-align: left;
    }

    .ic #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0.5rem;
        box-sizing: border-box;
        z-index: 10500;
        overflow-y: auto;
    }

    .ic #election {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0.5rem;
        box-sizing: border-box;
        z-index: 10300;
        overflow-y: auto;
    }

    .ic #overlay #panel {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        box-sizing: border-box;
        margin: 0.5rem 0 0.5rem 0;
        padding: 1rem 0.75rem 1rem 0.75rem;
        background: var(--rich-white, #ffffff);
        border-radius: var(--round-edges, 0.5rem);
        border: none;
    }

    .ic #overlay #panel #master-form {
        width: 100%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        box-shadow: none;
        background: transparent;
        border: none;
        box-sizing: border-box;
    }

    .ic .modal form {
        width: clamp(18rem, calc(100% - 1rem), 40rem);
        padding: 1.25rem 1rem 1.25rem 1rem;
        margin: 1rem auto 1rem auto;
        border: none;
        box-sizing: border-box;
    }

    .ic #master-form input[type="text"],
    .ic #master-form input[type="datetime-local"],
    .ic #master-form select,
    .ic #master-form textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 1rem;
    }

    .ic #master-form textarea[name="story"],
    .ic #story-textarea {
        width: 100%;
        height: clamp(12rem, 30vh, 20rem);
        box-sizing: border-box;
        resize: vertical;
    }

    .ic #master-form .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        width: 100%;
        margin: 0 0 0.75rem 0;
    }

    .ic #master-form .chips .chip {
        padding: 0.35rem 0.75rem 0.35rem 0.75rem;
        font-size: 0.8125rem;
    }

    .ic #master-form .checks {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
        margin: 0.75rem 0 0.75rem 0;
    }

    .ic #master-form .checks .check,
    .ic #master-form .checks label.check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        width: 100%;
        cursor: pointer;
    }

    .ic #master-form .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        margin: 0.75rem 0 0 0;
    }

    .ic #master-form .actions .bt,
    .ic #master-form .actions .bt-secondary {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem 0.5rem 0.75rem;
        white-space: nowrap;
    }

    .ic #master-form .slider {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        box-sizing: border-box;
        margin: 0.5rem 0 0.5rem 0;
    }

    .ic #master-form .slider .gallery {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
    }

    .ic #master-form .toolbar {
        width: 100%;
        flex-wrap: wrap;
        margin: 0 0 0.75rem 0;
    }

    .ic .electionmodal {
        width: 100%;
        max-width: 100%;
        padding: 1rem 0.75rem 1rem 0.75rem;
        margin: 0.5rem 0 0.5rem 0;
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        box-sizing: border-box;
    }

    .ic #ai-modal {
        z-index: 10600;
    }

    .ic dialog {
        width: clamp(18rem, calc(100% - 1.5rem), 48rem);
        padding: 1.25rem 1rem 1.25rem 1rem;
        border: none;
        box-sizing: border-box;
    }

    .ic .electionmodal {
        border: none;
    }

    .ic .previewdialog {
        width: clamp(18rem, calc(100% - 1.5rem), 52rem);
        padding: 1rem 0.75rem 1rem 0.75rem;
        box-sizing: border-box;
    }

    .ic .previewframe {
        height: clamp(18rem, 50vh, 28rem);
        width: 100%;
    }

    .ic #entry-dialog .actions .bt,
    .ic #entry-dialog .actions .bt-secondary {
        min-width: 0;
        flex: 1;
    }



    .ic .workspacesplit {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .ic .workspacepanel {
        width: 100%;
    }

    .coms .pillars.row,
    .comms .pillars.row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin: 1rem 0 1rem 0;
        width: 100%;
    }

    .coms .pillars .container.card,
    .comms .pillars .container.card {
        width: 100%;
        margin: 0 0 0 0;
    }

    .ic .pagination {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        text-align: center;
        padding: 0 0.5rem 0 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .ic .field input,
    .ic .field select,
    .ic .field textarea,
    .ic form input,
    .ic form select,
    .ic form textarea {
        font-size: 1rem;
        padding: 0.875rem 0.75rem 0.875rem 0.75rem;
    }

    .ic .reveal input,
    .ic form .reveal input {
        padding: 0.875rem 2.5rem 0.875rem 0.75rem;
        margin: 0 0 0 0;
    }

    .ic textarea[name="story"] {
        height: 18rem;
    }

    .hub.ic .pillars select[multiple] {
        height: clamp(6rem, 9rem, 12rem);
        font-size: 0.875rem;
    }
}
@media (max-width: 56.25rem) {
  .msmg header .branding {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 0 0.5rem 0;
  }

  .msmg header .tagline {
    text-align: center;
    display: block;
  }

  .msmg .live-banner {
    order: 2;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 0.5rem 0;
  }

  .msmg header nav {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .msmg .layout {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .msmg .main {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .msmg .sidebar {
    width: 100%;
  }

  .msmg .pillars .container {
    padding: 0 0 0 0;
    overflow: hidden;
  }

  .msmg .pillar {
    width: 100%;
    padding: 0 0 0 0;
    align-items: stretch;
  }

  .msmg .pillars.row.expand,
  .msmg .pillars.row:has(.container.full) {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0 0.75rem 0;
  }

  .msmg .pillars.row.expand .container.full,
  .msmg .pillars.row .container.full,
  .msmg .pillars .container.full,
  .msmg .container.full {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    display: block;
    margin: 0 0 0.5rem 0;
    border-radius: 0.25rem;
  }

  .msmg .pillar.feature,
  .msmg .pillar.feature.reverse,
  .msmg .feature,
  .msmg .feature.reverse,
  .msmg .reverse {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-radius: 0.25rem;
  }

  .msmg .pillar.feature .image,
  .msmg .pillar.feature.reverse .image,
  .msmg .feature .image,
  .msmg .feature.reverse .image,
  .msmg .reverse .image,
  .msmg .feature .no-image {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 0.25rem 0.25rem 0 0;
    display: block;
    margin: 0 0 0 0;
    box-sizing: border-box;
  }

  .msmg .pillar.feature .content,
  .msmg .pillar.feature.reverse .content,
  .msmg .feature .content {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  }

  .msmg .feature .tag {
    display: inline-block;
    width: fit-content;
    margin: 0 0 0.2rem 0;
    text-align: left;
  }

  .msmg .feature .headline,
  .msmg .pillar.feature .headline {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.25rem 0;
    text-align: left;
    width: 100%;
  }

  .msmg .feature .excerpt {
    font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
    line-height: 1.25;
    margin: 0 0 0.25rem 0;
    text-align: left;
    width: 100%;
  }

  .msmg .feature .story-metadata {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
  }

  .msmg .feature .date,
  .msmg .feature .story-time,
  .msmg .feature .author {
    font-size: 0.75rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: left;
    display: inline;
    width: auto;
  }

  .msmg .mount {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .msmg .mount .pillars.row,
  .msmg .sidebar .pillars.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0 0 0 0;
    box-sizing: border-box;
  }

  .msmg .mount .pillars.row .container.standard,
  .msmg .mount .container.standard,
  .msmg .main .pillars .container.standard,
  .msmg .sidebar .pillars .container.standard,
  .msmg .standard {
    width: calc(50% - 0.375rem);
    flex: 0 1 calc(50% - 0.375rem);
    aspect-ratio: auto;
    margin: 0 0 0.75rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
  }

  .msmg .standard .pillar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }

  .msmg .standard .pillar .image,
  .msmg .standard .image {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
  }

  .msmg .standard .content {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.625rem 0.625rem 0.75rem 0.625rem;
  }

  .msmg .standard .headline {
    font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 0.375rem 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--rich-black);
  }

  .msmg .standard .excerpt {
    display: none;
  }

  .msmg .standard .story-metadata {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    margin: 0.25rem 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
  }

  .msmg .standard .date,
  .msmg .standard .story-time,
  .msmg .standard .author {
    font-size: 0.6875rem;
    color: #888;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: left;
    display: block;
    width: 100%;
    line-height: 1.25;
  }

  .msmg .story .pillars .container,
  .msmg .story .article,
  .msmg .article {
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .msmg .story .article-body,
  .msmg .article-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0;
  }

  .msmg .story .viewer-image,
  .msmg .viewer-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 1rem 1rem 0 0;
    float: none;
    display: block;
    margin: 0 0 0 0;
  }

  .msmg .story .content {
    width: 100%;
    box-sizing: border-box;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }

  .msmg .story .byline {
    box-sizing: border-box;
    margin: 0 0 0 0;
    padding: 0 1.25rem 1.25rem 1.25rem;
  }

  .msmg .main .spread,
  .msmg .spread {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 1rem 0 1rem 0;
    box-sizing: border-box;
  }

  .msmg .main .spread .container.standard,
  .msmg .spread .container.standard {
    width: calc(50% - 0.375rem);
    flex: 0 1 calc(50% - 0.375rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    overflow: hidden;
    margin: 0 0 0.75rem 0;
    box-sizing: border-box;
  }

  .msmg .news.section,
  .msmg .sports.section,
  .msmg .split.section,
  .msmg .section.news,
  .msmg .section.sports,
  .msmg .section.split {
    padding: 0 0 0 0;
    box-sizing: border-box;
  }

  .msmg .sportsgrid {
    gap: 1rem;
  }

  .msmg .sportsgrid .featurecard,
  .msmg .sportsgrid .weathercolumn {
    width: 100%;
  }

  .msmg .sports .sportstitle {
    display: block;
    margin: 1.5rem 0 0.5rem 0;
    width: 100%;
  }

  .msmg .sportsgrid .container.standard {
    width: calc(50% - 0.375rem);
    flex: 0 1 calc(50% - 0.375rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    overflow: hidden;
    margin: 0 0 0.75rem 0;
    box-sizing: border-box;
  }

  .msmg .splitgrid {
    gap: 1rem;
  }

  .msmg .splitgrid .column {
    width: 100%;
  }

  .msmg .splitgrid .column .spread {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 1rem 0 1rem 0;
    box-sizing: border-box;
  }

  .msmg .splitgrid .column .spread .container.standard {
    width: calc(50% - 0.375rem);
    flex: 0 1 calc(50% - 0.375rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    overflow: hidden;
    margin: 0 0 0.75rem 0;
    box-sizing: border-box;
  }

  .msmg .lead .card {
    flex: 0 0 clamp(9.5rem, 42vw, 13rem);
    width: clamp(9.5rem, 42vw, 13rem);
  }

  .msmg footer {
    margin: 0 0 0 0;
    padding: 0.45rem 0.7rem 0.45rem 0.7rem;
  }
}
@media (max-width: 56.25rem) {
  .astreet .pillars .container {
    width: 100%;
  }

  .astreet .layout {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }

  .astreet .sidebar {
    width: 100%;
  }
}
@media (max-width: 27.5rem) {

  /* Restored MSMG Classes */
  .msmg-body header nav {
    align-items: center;
    row-gap: 0.5rem;
  }

  /* From msmg.css */
  .msmg-flex-container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .msmg-brand {
    margin-right: 0;
    margin-left: 0;
    text-align: center;
  }

  .msmg-nav {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
    width: 100%;
  }

  .msmg-sticky-spacer {
    height: 4.5rem;
  }

  .msmg-live-banner {
    top: 4.5rem;
  }

  .title {
    font-size: 1.7rem;
  }

  .prefix {
    font-size: 1.3rem;
  }

  .report-error-text-full {
    display: none;
  }

  .report-error-text-short {
    display: inline;
  }
}