/*upper style*/
*{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:'Segoe UI',sans-serif;background:#f4f7fb;color:#222;display:flex;flex-direction:column;align-items:center;padding:20px;}
    h1,h2{color:#1a73e8;margin-bottom:8px;}
    .version,.last-updated{font-size:.85rem;color:#555;margin-bottom:16px;}
    .inputs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%; /* changed from 900px */
  box-sizing: border-box; /* recommended */
}

    .input-group, .slider-group {
  padding: 12px;
  border-radius: 8px;
}

/* 🔥 Light Mode Styling (default if NOT dark) */
body:not(.dark) .input-group,
body:not(.dark) .slider-group {
  background-color: #f9f9fc;
  border: 1px solid #bbb;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

    label{display:block;margin-bottom:6px;font-weight:600;}
    input[type=number],input[type=text],input[type=range]{font-size:1rem;}
    input[type=number],input[type=text]{width:100%;padding:6px;margin-bottom:4px;border:1px solid #aaa;border-radius:4px;}
    .slider-container{display:flex;align-items:center;gap:8px;}
    .output{font-size:1.2rem;font-weight:600;margin:16px 0;text-align:center;}
#finChart{
  display:block;
  width:100%;
  max-width:none;      /* no cap */
  height:auto;         /* base height; expanded CSS will set real height */
  background:#fff;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}



    .buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px;}
    .btn{padding:10px 20px;font-size:1rem;color:#fff;border:none;border-radius:4px;cursor:pointer;}
    .btn-red{background:#d32f2f;} .btn-red:hover{background:#b71c1c;}
    .btn-blue{background:#1976d2;} .btn-blue:hover{background:#0d47a1;}
    .btn-green{background:#388e3c;} .btn-green:hover{background:#1b5e20;}
    #ageWarning{color:#d84315;text-align:center;margin-bottom:10px;display:none;}
    @media print{.btn,.buttons,.last-updated{display:none;}body{padding:0;background:none;}}
 
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider:before {
  transform: translateX(16px);
}


.version-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  margin-bottom: 10px;
}

.version,
.last-updated {
  margin-right: 15px;
  white-space: nowrap;
}


.inputs-container,
.results-container {
  flex: 1 1 400px;
  max-width: 480px;
}

.graph-container {
  flex: 1 1 auto;
  min-width: 300px;
  width: 100%;
  padding: 0 0 10px;
  box-sizing: border-box;
}


.main-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.fin-toggle-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


@media (min-width: 540px) {
  .main-layout {
    flex-direction: row;
  }

 .left-column,
.inputs-container {
  flex: 1 1 480px;
  min-width: 240px;
  max-width: 520px;
}

.inputs-container {
  margin-top: 0px;
}

}


body.dark {
  background: #121212;
  color: #eee;
}

body.dark .input-group,
body.dark .slider-group,
body.dark .results-container,
body.dark .graph-container,
body.dark .buttons {
  background: #1e1e1e;
  color: #eee;
}

body.dark input[type=number],
body.dark input[type=text],
body.dark input[type=range] {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark .btn-red,
body.dark .btn-blue,
body.dark .btn-green {
  opacity: 0.9;
}

body.dark table {
  color: #ddd;
}

body.dark th {
  background: #333;
}

body.dark td {
  background: #1e1e1e;
}


.header-title {
  font-size: 1.8rem;
  color: #007bff;
  margin: 0;
  white-space: nowrap;  /* ⛔ Prevents line break */
}


.dark-mode-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}


.highlight-success {
  color: #3df283;
  font-weight: bold;
}

.info-icon {
  margin-left: 6px;
  cursor: help;
  font-size: 14px;
  color: #aaa;
}
.info-icon:hover {
  color: #fff;
}

.tooltip-container {
  position: relative;
  display: inline-block;
  
  overflow: visible;
}
.tooltip-container::after {
  content: none !important;
}


.tooltip-text {
  font-weight: normal;
  visibility: hidden;
  opacity: 0;
  background-color: #fff8b3;
  color: #222;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e0c300;
  position: absolute;
  top: 100%; /* ⬇️ show below the element */
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 100;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: normal;
  max-width: 250px;
  width: max-content;
  word-wrap: break-word;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(10px);
}
.summary-box {
  background-color: var(--card-bg, #fff);
  color: var(--text-color, #000);
  padding: 20px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 0.95rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 24px 48px; /* vertical gap 24px, horizontal gap 48px */
}

.summary-header {
  display: contents; /* lets summary-box handle grid */
}

.output {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  padding: 0;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
}

.icon {
  font-size: 1.3rem;
  line-height: 1;
}

.output strong {
  font-size: 1.4rem;
  color: #007bff;
  font-weight: 700;
  white-space: nowrap;
}

/* Tooltip styles can remain as is, or add margin if needed */
.tooltip-text {
  font-weight: normal;
  font-size: 0.85rem;
  max-width: 260px;
  margin-top: 6px;
  color: #444;
}

/* Dark mode */
body.dark .summary-box {
  background-color: #1a1a1a;
  color: #eee;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.dark .output strong {
  color: #3399ff;
}

body.dark .tooltip-text {
  background-color: #444c00;  /* darker yellow/olive */
  color: #fff;                /* white text for contrast */
  border-color: #666600;      /* darker border to match */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* subtle shadow for legibility */
}



/* Only applied when .debug-layout is on <body> */
.debug-layout .main-layout {
  outline: 2px dashed #444;
  position: relative;
}

.debug-layout .left-column {
  background-color: rgba(0, 128, 255, 0.05);
  border: 1px solid rgba(0, 128, 255, 0.2);
  position: relative;
}

.debug-layout .inputs-container {
  background-color: rgba(255, 128, 0, 0.05);
  border: 1px solid rgba(255, 128, 0, 0.2);
  position: relative;
}

.debug-layout .left-column::before,
.debug-layout .inputs-container::before {
  content: attr(class);
  position: absolute;
  top: -1.5em;
  font-size: 12px;
  font-family: monospace;
  background: #222;
  color: #0f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.main-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  box-sizing: border-box;
}

.middle-column {
  flex: 1 1 580px;
  min-width: 320px;
  max-width: 700px;
}

.main-layout.chart-is-expanded .middle-column {
  max-width: none;
}

.right-column {
  flex: 0 1 340px;
  max-width: 400px;
  min-width: 240px;
}




@media (max-width: 768px) {
  .main-layout {
    flex-direction: row;
    row-gap: 0px; /* Adjust this value to your liking, or set to 0 to remove the gap completely */
  }


  .inputs-container {
    margin-top: 0px;
  }

  /* Reduces side padding on the whole page */
  body {
    padding: 20px;
  }
}



.fin-toggle {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  min-width: 150px; /* ⬅️ Keep toggles equally spaced */
  justify-content: space-between;
}

.fin-toggle label {
  margin-right: 8px;
  white-space: nowrap;
}


.toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  white-space: nowrap;
  justify-content: center;
}

#scenario-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 🧱 4 equal columns */
  gap: 10px;
  max-width: 100%;
  margin: 0;         /* ✅ eliminate top/bottom margin */
    padding: 0;
}

#scenario-row {
  margin: 0;         /* ✅ eliminate top/bottom margin */
    padding: 0;
}

@media (min-width: 721px) {
  #scenario-row {
    margin: 0;         /* ✅ eliminate top/bottom margin */
    padding: 0;        /* or keep if horizontal padding needed */
  }

  

  .summary-bar {
    margin: 0;
  }
}


/* 🔁 Base (dark mode default) */
.scenario-btn {
  background-color: #444;
  color: white;
  border: 1px solid #888;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.scenario-btn {
  white-space: nowrap;
  flex: 1 1 140px;
  min-width: 100px;
  max-width: 150px;
  overflow: hidden;
}
.scenario-btn.active {
  background-color: #0094ff;
  border-color: #0094ff;
}

.scenario-btn {
  flex: 1 0 auto;         /* Prevent shrinking */
  width: 100%;            /* Fill container evenly */
  text-align: center;
  white-space: nowrap;    /* Prevent line break */
}
.scenario-btn {
  flex: 1 1 160px;  /* Let them grow/shrink evenly */
}
#scenario-row .scenario-btn[data-scenario="retired"] {
  min-width: 120px;
}

.scenario-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

scenario-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
}


.scenario-btn:hover {
  background-color: #666;
}

/* --- Modern Light Mode Scenario Buttons --- */

/* Default (Inactive) Button Style in Light Mode */
body:not(.dark) .scenario-btn {
  background-color: #ffffff;    /* Clean white background */
  color: #1976d2;             /* Use primary blue for text */
  border: 1px solid #dadce0;     /* Soft, modern gray border */
  font-weight: 600;              /* Slightly bolder text */
}

/* Hover State for Inactive Buttons in Light Mode */
body:not(.dark) .scenario-btn:not(.active):hover {
  background-color: #f8fbff;    /* A very subtle light blue glow */
  border-color: #cce0fc;         /* A slightly stronger blue border */
}

/* Active Button Style in Light Mode */
body:not(.dark) .scenario-btn.active {
  background-color: #1976d2;    /* Solid primary blue background */
  color: #ffffff;                /* White text for contrast */
  border-color: #1976d2;         /* Matching solid blue border */
}

/* --- Modern Expand Button --- */
.graph-expand-btn {
  /* Positioning and Shape */
  display: block;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 12px auto 0; /* Centers the button horizontally */
  padding: 6px 16px;
  border-radius: 99px; /* Creates the pill shape */
  
  /* Font and Appearance */
  font-size: 0.8rem; /* 13px */
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Light Mode Colors */
body:not(.dark) .graph-expand-btn {
  background-color: #f1f3f4;
  color: #3c4043;
}

/* Dark Mode Colors */
body.dark .graph-expand-btn {
  background-color: #3c4043;
  color: #e8eaed;
}

/* Hover Effect */
.graph-expand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark .graph-expand-btn:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


#futureIncomeDisplay {
  background: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
}

body.dark #futureIncomeDisplay {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #555;
}
.readonly-box {
  background: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 4px;

  box-sizing: border-box;
  padding: 2px 4px;

  text-align: left;
  white-space: nowrap;

  font-size: 1rem; 
  line-height: 1.2;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  overflow: hidden; /* ✅ stops scrollbars if value is still too large momentarily */
}





body.dark .readonly-box {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #555;
}

.autoscale {
  font-size: 1.2rem;
  transition: font-size 0.2s ease;
}

.header-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}


.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

@media (max-width: 600px) {
  .header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .header-title {
    margin-bottom: 2px;
  }
}
.header-center {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;  /* 👈 pushes toggles to the right */
}
.toggle-bar {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 600px) {
  .toggle-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .toggle-item {
    font-size: 13px;
    flex: 1 1 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .switch {
    transform: scale(0.75);
  }
}

.version-info {
  font-size: 0.65rem;  /* smaller font size */
  opacity: 0.75;
  margin-top: 4px;     /* a little space below the title */
  white-space: nowrap; /* prevent wrapping */
}
#tableSection {
  margin-top: 20px;
  background: var(--card-bg, #fff);
  color: var(--text-color, #000);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 0.9rem;
  max-width: 900px;
  padding: 0;
}

#tableHeader {
  cursor: pointer;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1.2rem;
  user-select: none;
  background: #007bff;
  color: white;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* Dark mode */
body.dark #tableSection {
  background: #1a1a1a;
  color: #eee;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.dark #tableHeader {
  background: #3399ff;
  color: #eee;
}

body.dark #tableContent {
  background: #222;
}
#tableContent {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#tableContent.open {
  max-height: 1500px;
}


body.debug-layout .header-flex,
body.debug-layout .main-wrapper,
body.debug-layout .main-layout,
body.debug-layout .header-flex,
body.debug-layout .header-left,        /* ⬅️ ADD THIS */
body.debug-layout .main-wrapper,
body.debug-layout .left-column,
body.debug-layout .middle-column,
body.debug-layout .right-column,
body.debug-layout .inputs-container,
body.debug-layout .graph-container,
body.debug-layout .summary-bar,
body.debug-layout .summary-box,
body.debug-layout .graph-modal-content,
body.debug-layout #scenario-row,
body.debug-layout #faq,
body.debug-layout #tableView {
  position: relative;
}

body.debug-layout .header-flex::before,
body.debug-layout .header-flex::before,
body.debug-layout .header-left::before, /* ⬅️ ADD THIS */
body.debug-layout .main-wrapper::before,
body.debug-layout .main-wrapper::before,
body.debug-layout .main-layout::before,
body.debug-layout .left-column::before,
body.debug-layout .middle-column::before,
body.debug-layout .right-column::before,
body.debug-layout .inputs-container::before,
body.debug-layout .graph-container::before,
body.debug-layout .summary-bar::before,
body.debug-layout .summary-box::before,
body.debug-layout .graph-modal-content::before,
body.debug-layout #scenario-row::before,
body.debug-layout #faq::before,
body.debug-layout #tableView::before {
  content: attr(class);
  position: absolute;
  top: -1.5em;
  left: 0;
  font-size: 12px;
  font-family: monospace;
  background: #222;
  color: #0f0;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 1000;
}

/* Light Theme */
.tippy-box[data-theme~='light'] {
  background-color: #fffbe7;
  color: #222;
  border: 1px solid #e0c300;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark Theme */
.tippy-box[data-theme~='dark'] {
  background-color: #2e2e2e;
  color: #f8f8a3;
  border: 1px solid #888800;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: left;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#tableView table tbody tr:nth-child(even) {
  background-color: #e9f1fb; /* Soft sky blue for better contrast */
}

body.dark #tableView table tbody tr:nth-child(even) {
  background-color: #1f1f1f; /* a notch lighter than pure black */
}

#tableView table td {
  border-bottom: 1px solid #ccc;
}

body.dark #tableView table td {
  border-bottom: 1px solid #444;
}

#tableView table .retirement-row {
  background-color: #fff9db !important; /* Light golden highlight */
  font-weight: 600;
}

body.dark #tableView table .retirement-row td {
  background-color: #5c4500 !important; /* Deep amber */
  color: #e0f2f1 !important;            /* Warm yellow text */
  font-weight: 600;
}

#tableView table .on-track-green {
  background-color: #c8facc !important; /* Pale green for light mode */
  color: #006400 !important;            /* Dark green text */
  font-weight: 600;
}

body.dark #tableView table .on-track-green td {
  background-color: #006400 !important; /* Toggle-matching teal */
  color: #e0f2f1 !important;            /* Light mint for contrast */
  font-weight: 600;
}
body.dark #tableView table .on-track-green,
body.dark #tableView table .on-track-green td,
body.dark #tableView table td.on-track-green {
  background-color: #006400 !important;
  color: #e0f2f1 !important;
  font-weight: 600;
}





/* --- Final Styles for Expanded Chart (fixed) --- */

.main-layout.chart-is-expanded .middle-column {
  flex: 1;
  height: 70vh;            /* gives a nice tall area */
}

.main-layout.chart-is-expanded .graph-container {
  display: block;
  height: 100%;
  flex-direction: unset;   /* not needed when display:block */
}

.main-layout.chart-is-expanded .right-column {
  display: none;
}

/* Base graph container rules */
.graph-container {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  padding-bottom: 6px;
}

#finChartContainer {
  display: block;
  width: 100%;
  height: 100%;
}



@media (max-width: 1530px) {
  .main-layout.chart-is-expanded {
    flex-direction: column;
    align-items: center;
  }

  .main-layout.chart-is-expanded .middle-column {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .main-layout.chart-is-expanded .graph-container {
    width: 100%;
    height: 60vh;     /* responsive height on narrower screens */
    margin-top: 20px;
  }
}
@media (max-width: 1530px) {
  /* your existing small screen styles */
}

/* Let middle column use all remaining width and reduce the left column width */
.left-column { flex: 0 0 420px; }       /* make inputs a fixed narrower column */
.main-layout.chart-is-expanded .middle-column { max-width: none; flex: 1 1 auto; }
.main-layout.chart-is-expanded .graph-container,
#finChartContainer { width: 100%; height: 70vh; }
#finChart { width: 100% !important; height: 100% !important; }


@media (max-width: 600px) {
  .summary-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    justify-items: center;
    width: 100%;
  }

  .summary-bar .output {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: center;
  }
}

.on-track-green {
  background-color: #c7f7c1 !important;
  color: #176a12 !important;
  font-weight: bold;
}
.on-track-green td {
  background-color: #c7f7c1 !important;
  color: #176a12 !important;
}


/* Standardize slider thumb color across devices */
input[type=range] {
  accent-color: #1a73e8; /* For modern Chrome, Edge, Firefox */
}

input[type=range]::-webkit-slider-thumb {
  background-color: #1a73e8;
}

input[type=range]::-moz-range-thumb {
  background-color: #1a73e8;
}

#calcDragHandle {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  padding: 10px;
  width: 100%;
}

/* Green highlight for on-track retirement row */
.retirement-row.on-track {
  background-color: #d1f2cc !important;  /* Light green */
  color: #145d19 !important;            /* Dark green text */
}
body.dark .retirement-row.on-track {
  background-color: #2a3f2a !important; /* Darker green for dark mode */
  color: #8fffa1 !important;            /* Light green text */
}

/* --- New Layout for Top Interactive Area --- */

.top-interactive-area {
  display: flex;
  flex-direction: column; /* Mobile First: Stack vertically by default */
  width: 100%;
  max-width: 1100px; /* Match the header width */
  margin: 0 auto;
  gap: 10px;
}

/* On screens wider than 1000px, switch to a side-by-side layout */
@media (min-width: 1000px) {
  .top-interactive-area {
    flex-direction: row; /* Horizontal layout */
    align-items: center; /* Vertically center the items */
    justify-content: space-between;
    gap: 20px;
  }

  #scenario-row {
    flex: 1 1 auto; /* Allow the scenario buttons to grow and fill available space */
    margin: 0;
  }

  .summary-bar {
    flex: 0 0 auto; /* Prevent the summary bar from growing or shrinking */
    margin: 0;
    padding: 12px 20px;
    border-radius: 8px;
    background-color: #f9f9fc;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  body.dark .summary-bar {
    background-color: #1e1e1e;
    border-color: #444;
  }
}
/* EXPANDED (keep inputs visible) — final overrides */
.left-column { flex: 0 0 420px; }                 /* narrower inputs column */

.main-layout.chart-is-expanded .middle-column {
  max-width: none;
  flex: 1 1 auto;
}

.main-layout.chart-is-expanded .graph-container,
.main-layout.chart-is-expanded #finChartContainer {
  display: block !important;
  width: 100% !important;
  height: 70vh !important;
}

.main-layout.chart-is-expanded canvas#finChart {
  width: 100% !important;
  height: 100% !important;
}
/* === Canonical graph container rules === */
.graph-container {
  display: block;          /* full row, not inline-block */
  flex: 1 1 auto;          /* still allowed as a flex child */
  min-width: 300px;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  padding-bottom: 6px;
  box-sizing: border-box;
}

/* Chart wrapper + canvas fill the container */
#finChartContainer { width: 100%; height: 100%; }
#finChart { width: 100% !important; height: 100% !important; }

/* Expanded: keep inputs visible, give chart vertical space */
.main-layout.chart-is-expanded .graph-container {
  height: 70vh;            /* was 100% — that depended on sibling height */
}

/* Narrower screens: a bit shorter */
@media (max-width: 1530px) {
  .main-layout.chart-is-expanded .graph-container {
    height: 60vh;
    margin-top: 20px;
  }
}
/* Keep inputs + chart side‑by‑side when expanded */
.main-layout.chart-is-expanded {
  flex-direction: row;     /* force row */
  flex-wrap: nowrap;       /* do NOT wrap to a new line */
  justify-content: flex-start; /* stop centering that encourages wrap */
  align-items: stretch;
}

/* Fixed width for inputs; chart takes the rest */
.left-column { flex: 0 0 430px; }     /* your chosen inputs width */
.main-layout.chart-is-expanded .middle-column { flex: 1 1 auto; max-width: none; }



@media (max-width: 1075px) and (min-width: 821px) {
  .main-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 8px;
  }

  .left-column {
    flex: 0 0 55%;
    max-width: 55%;
    min-width: 300px;
    order: 1;
  }

  .right-column {
    flex: 0 0 42%;
    max-width: 42%;
    min-width: auto;
    order: 2;
  }

  .middle-column {
    flex: 0 0 100%;
    max-width: 100%;
    order: 3;
    margin-top: 0;
  }

  .graph-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
  }

  #finChartContainer,
  #finChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
}



@media (min-width: 1375px) and (max-width: 1499px) {
  .main-layout {
    max-width: 100%;
    padding: 0 12px;
    justify-content: space-between;
  }

  .left-column {
    flex: 0 0 430px;
  }

  .middle-column {
    flex: 1 1 0;
    max-width: 900px;
  }



  .graph-container {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
  }

  #finChartContainer,
  #finChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .disclosures {
    margin-top: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 900px;
  }
}



@media (min-width: 1500px) and (max-width: 1899px) {
  .main-layout {
    max-width: 96vw;
    padding: 0 16px;
    justify-content: space-between;
  }

  .left-column {
    flex: 0 0 430px;
  }

  .middle-column {
    flex: 1 1 0;
    max-width: 1000px;
  }


  .graph-container {
    height: 64vh;
  }

  #finChartContainer,
  #finChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}




@media (min-width: 1900px) {
  .main-layout {
    display: flex;
    flex-wrap: nowrap;              /* ❗ prevent stacking */
    justify-content: space-between;
    max-width: 1860px;
    padding: 0 20px;
    margin: 0 auto;
  }

  .left-column {
    flex: 0 0 520px;
  }

  .middle-column {
    flex: 1 1 auto;
    max-width: none;
  }

  .right-column {
    flex: 0 0 360px;
  }

  .graph-container {
    width: 100%;
    height: 68vh;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
  }

  #finChartContainer {
    width: 100%;
    height: 100%;
    max-height: 585px;
  }

  canvas#finChart {
    width: 100% !important;
    height: 100% !important;
  }
}




 /*END of upper style*/
 
 /* Calculator Styles (copy to your CSS or inside a <style> block) */
.hidden {
  display: none !important;
}

:root {
  --calc-bg: #23272d;
  --calc-panel: #1a1c1e;
  --calc-text: #fff;
  --calc-btn-bg: #2a2d34;
  --calc-btn-hover: #1976d2;
  --calc-btn-text: #fff;
  --calc-equals-bg: #1976d2;
}

body:not(.dark) {
  --calc-bg: #f4f5f7;
  --calc-panel: #fff;
  --calc-text: #222;
  --calc-btn-bg: #f0f0f0;
  --calc-btn-hover: #1976d2;
  --calc-btn-text: #222;
  --calc-equals-bg: #1976d2;
}



.calc-btn {
  background: var(--calc-btn-bg, #2a2d34);
  color: var(--calc-btn-text, #fff);
  border: none;
  border-radius: 6px;
  padding: 12px 0;
  font-size: 1.1em;
  cursor: pointer;
  transition: background 0.14s;
  min-width: 0;
  min-height: 44px;
}

.calc-btn:active,
.calc-btn:hover {
  background: var(--calc-btn-hover, #1976d2);
  color: #fff;
}

#calcEquals {
  background: var(--calc-equals-bg, #1976d2) !important;
  color: #fff !important;
  font-weight: bold;
}

/*END of calc style*/

  /* FAQ container styles */
  #faq {
  margin-top: 20px;
  background: var(--card-bg, #fff);
  color: var(--text-color, #000);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-size: 0.9rem;
  padding: 0;
  width: 100%;
  max-width: 700px;         /* Match .middle-column width */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* FAQ main header */
  #faqHeader {
  cursor: pointer;
  padding: 8px 12px;                /* smaller padding */
  font-weight: 600;
  font-size: 1rem;                  /* smaller font */
  user-select: none;
  background: #e0e7ff;              /* soft blue background */
  color: #1a237e;                   /* navy text */
  border-radius: 6px;
  border: 1px solid #c5cae9;        /* subtle border */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
}

#faqHeader:hover {
  background: #d0d8ff;
}
  /* FAQ main content container, hidden by default */
  #faqContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: var(--card-bg, #f9f9f9);
    border-radius: 0 0 8px 8px;
    padding: 0 20px;
  }

  #faqContent.open {
    padding: 16px 20px;
    max-height: 1000px; /* enough for content */
  }

  /* Individual question styles */
  .faq-item {
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
  }

  .faq-question {
    cursor: pointer;
    font-weight: 600;
    position: relative;
    padding-right: 24px;
    user-select: none;
  }

  .faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.3s ease;
  }

  .faq-question.open::after {
    content: '-';
    transform: rotate(180deg);
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-left: 8px;
    color: #333;
    font-weight: normal;
    font-size: 0.9rem;
  }

  .faq-answer.open {
    padding-top: 8px;
    padding-bottom: 8px;
    max-height: 500px; /* large enough for most answers */
  }

  /* Dark mode tweaks */
  body.dark #faq {
    background: #1a1a1a;
    color: #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }

  body.dark #faqHeader {
  background: #1e1e1e;
  color: #ddd;
  border: 1px solid #333;
}
body.dark #faqHeader:hover {
  background: #2a2a2a;
}
  body.dark #faqContent {
    background: #222;
  }

  body.dark .faq-item {
    border-color: #444;
  }

  body.dark .faq-answer {
    color: #ccc;
  }
  
  .summary-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 10px auto 10px;
  font-size: 0.95rem;
  max-width: 960px;
}

.summary-item {
  text-align: center;
  position: relative;
  min-width: 130px;
}

.summary-item strong {
  font-size: 1.4rem;
  color: #007bff;
  display: block;
  margin-bottom: 4px;
}

.summary-item .label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 1rem;
}

.summary-item .icon {
  font-size: 1.3rem;
  line-height: 1;
}

body.dark .summary-item strong {
  color: #3399ff;
}

/* Removes top padding from only the first item in the inputs column */
.inputs-container > .input-group:first-child,
.inputs-container > .slider-group:first-child {
  padding-top: 0;
}

.summary-bar .output {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
@media (max-width: 540px) {
  .summary-bar {
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
  }
}

body.dark .summary-bar {
  background-color: transparent;
}
.scenario-btn.active:hover {
  background-color: #007bff !important;
  color: white !important;
  border-color: #007bff !important;
}

#finChartContainer {
  width: 100%;
  max-width: none;
  height: 100%;
  border-radius: 8px;
  display: block;
  overflow: hidden;
}


/* Light Mode Styling */
body:not(.dark) #finChartContainer {
  background-color: #f9f9fc;
  border: 1px solid #bbb;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Optional Dark Mode */
body.dark #finChartContainer {
  background-color: #1e1e1e;
  border: 1px solid #444;
}

#finChart {
  display: block;
  width: 100%;
  height: auto;
  background-color: transparent;
}
.chart-disclaimer {
  font-size: 0.70rem; 
  color: #555;
  text-align: center;
  margin-top: 15px;
  line-height: 1.4;
  max-width: auto; /* Prevents it from becoming too wide */
  margin-left: auto;
  margin-right: auto;
}

body.dark .chart-disclaimer {
  color: #aaa;
}

/* --- Style for the new "Expand in Place" button --- */
.graph-expand-btn-2 {
  /* Positioning and Shape */
  display: block;
  text-align: center;
  width: fit-content;
  margin: 12px 0 0; /* Aligns with the other button */
  padding: 6px 16px;
  border-radius: 99px; /* Pill shape */
  
  /* Font and Appearance */
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Light Mode Colors */
body:not(.dark) .graph-expand-btn-2 {
  background-color: #e8f0fe;
  color: #1967d2;
}

/* Dark Mode Colors */
body.dark .graph-expand-btn-2 {
  background-color: #2e3a47;
  color: #8ab4f8;
}

/* Hover Effect */
.graph-expand-btn-2:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark .graph-expand-btn-2:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}



/* Fix graph container background bleed in dark mode */
body.dark .graph-container {
  background: transparent !important;
}

body.dark #finChart {
  background-color: #1e1e1e !important;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}




.header-left {
  flex: 0 1 auto;                  /* only grow if needed */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header-center {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


.header-left {
  padding-left: 60px;  /* adjust if needed to avoid floating calculator */
}


@media (max-width: 1550px) {
  .header-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .top-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-left: 0;
    text-align: center;
  }

  .header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .header-center,
  .toggle-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
  }

  .top-interactive-area {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }

  .summary-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
  }

  .summary-bar > div {
    min-width: 120px;
    text-align: center;
  }
}
.header-flex {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.top-left {
  width: 100%;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}


/* Light mode stays as is */
.tab-wrapper {
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
}

/* Dark mode overrides */
body.dark .tab-wrapper,
body.dark .tab-content,
body.dark .tab-toggle-controls {
  background-color: #121212;
  color: #e0e0e0;
}



.tab-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  margin-top: -20px;
  justify-content: center; 
  padding: 10px 0;
}


.tab-btn {
  background: #e0e0e0;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}

.tab-btn.active {
  background: #1976d2;
  color: white;
}

.tab-toggle-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  justify-content: center;
}

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

body.dark-mode .tab-bar {
  background-color: #1f1f1f;
  border-color: #444;
}
body.dark-mode .tab-btn {
  background-color: #2a2a2a;
  color: #eee;
  border: 1px solid #555;
}

body.dark-mode .tab-btn.active {
  background-color: #007bff;
  color: white;
}
body.dark-mode .tab-toggle-controls label {
  color: #ccc;
}


/* 🌟 Modern Side Menu Overlay */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 300px;
  background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white */
  backdrop-filter: blur(10px); /* Frosted glass effect */
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  padding: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;
}

.side-menu.show {
  transform: translateX(0);
}

.side-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
}

.side-menu-header button {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: #555;
}

.side-menu-section {
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.side-menu-section:last-child {
  border-bottom: none;
}

.side-menu-section h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: #444;
  font-weight: 500;
  border-left: 3px solid #0077cc;
  padding-left: 8px;
}

.side-menu-section label {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #222;
  cursor: pointer;
}

/* Dark mode styling */
body.dark .side-menu {
  background-color: rgba(30, 30, 30, 0.85);
  color: #eee;
  border-left: 1px solid #444;
}

body.dark .side-menu-header button,
body.dark .side-menu-section label {
  color: #eee;
}

body.dark .side-menu-section h3 {
  color: #ccc;
  border-left-color: #4fa3ff;
}
/* 🌟 End of Modern Side Menu Overlay */

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;  /* ⬅️ reduced vertical spacing */
  font-size: 0.95rem;
}


.toggle-row .switch {
  width: 34px;
  height: 20px;
  flex: 0 0 auto;  /* 👈 Prevents growing/stretching */
}

.toggle-row label:not(.switch) {
  flex: 1;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

body.dark .toggle-row label:not(.switch) {
  color: #eee;
}

body:not(.dark) .side-menu {
  background-color: rgba(160, 160, 160, 0.75);  /* ⬅️ darker grey tone */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}



@media (max-width: 1075px) {
  .tab-bar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tab-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-bar {
    order: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
  }

  .version-info {
    order: 3;
    margin-top: 8px;
    text-align: center;
    width: 100%;
  }
}








/* Shortcut hint: default is collapsed & transparent */
#shortcutHint {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Fades in/out by toggling this */
#shortcutHint.is-visible { opacity: 1; }

/* Fully remove from layout only when hidden */
#shortcutHint.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
}

/* If you also use .shortcut-hint-bar on the same node */
.shortcut-hint-bar.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
}

/* 🚨 OVERWRITE help overlay in dark mode */
body.dark #helpOverlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

body.dark #helpOverlay .help-overlay-panel {
  background-color: #21222c !important;
  color: #f0f0f0 !important;
  border: 1px solid #2f2f3a !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
  border-radius: 12px !important;
}

body.dark #helpOverlay .help-grid span {
  background: transparent !important;
  color: #f0f0f0 !important;
  border: none !important;
  padding: 0 !important;
}



/* --- Mobile gap fix for Scenarios & FIN Summary bars --- */
@media (max-width: 720px) {
  /* Collapse any multi-column/grid shell to a single column */
  .app-grid,
  .bar-row,
  .header-row {
    display: block !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* Make the bars and their wrappers actually span full width */
  #scenarioBar,
  #scenariosBar,
  #finSummaryBar,
  .scenario-bar,
  .fin-summary,
  .summary-bar,
  .tab-wrapper,
  .tab-bar,
  .middle-column {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;   /* small, readable edge padding */
    padding-right: 0.5rem !important;
    box-sizing: border-box;
  }

  /* Nuke any leftover “reserved space” from desktop layout */
  .left-col,
  .right-col,
  .content-left,
  .content-right {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* If a side panel/menu reserved space using margin or transform, cancel it */
  .has-side-menu,
  .with-side-panel {
    margin-right: 0 !important;
    transform: none !important;
  }

  /* Keep the page edges tight on phones */
  body,
  .page,
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Safety: prevent horizontal scroll caused by off-screen gutters */
html, body { overflow-x: hidden; }
/* 📱 Mobile fix: remove left gap for scenario & summary bars */
@media (max-width: 720px) {
  #scenarioBar,
  #scenariosBar,
  #finSummaryBar,
  .scenario-bar,
  .fin-summary,
  .summary-bar {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;   /* small breathing room */
    padding-right: 8px !important;
    box-sizing: border-box;
  }

  /* Collapse wrappers that might keep extra space */
  .tab-wrapper,
  .middle-column,
  .bar-row,
  .header-row {
    display: block !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Safety: no horizontal scroll */
  html, body {
    overflow-x: hidden;
  }
}
/* 📱 Mobile: kill left gap on bars */
@media (max-width: 720px) {
  /* Force the containers full width */
  #scenarioBar,
  #scenariosBar,
  #finSummaryBar,
  .scenario-bar,
  .fin-summary,
  .summary-bar,
  .tab-wrapper,
  .middle-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
  }

  /* If they were side-by-side, stack them */
  .bar-row,
  .header-row {
    display: flex;
    flex-direction: column !important;
    gap: 8px;
  }

  body,
  html {
    overflow-x: hidden;
  }
}
@media (max-width: 720px) {
  .bar-row,
  .header-row {
    display: flex;
    flex-direction: column-reverse !important; /* 👈 flips order */
    gap: 8px;
  }
}
/* === PHONE EDGE-TO-EDGE RESET (final) === */
@media (max-width: 720px) {
  /* Stop centering the whole page and remove side padding */
  body {
    align-items: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Kill the fixed left pad in the header on mobile */
  .header-left { padding-left: 0 !important; }

  /* Make outer shells truly full-width with no auto-centering */
  .main-wrapper,
  .main-layout,
  .top-interactive-area,
  .tab-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  /* Bars: no inner padding or auto margins */
  #scenario-row,
  .summary-bar {
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 !important;
    padding-left: 0 !important;   /* ← remove the last visible gutter */
    padding-right: 0 !important;
  }
}
/* Global calculator — visible on any tab */
#calculatorPanel{
  position:fixed; right:20px; bottom:20px;
  width:320px; max-width:90vw;
  background:var(--calc-panel,#fff); color:var(--calc-text,#222);
  border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.28);
  z-index:2000; overflow:hidden;
}
.calculate-float-btn{ position:fixed; right:20px; top:140px; z-index:2001; }
@media (max-width:520px){
  .calculate-float-btn{ top:auto; bottom:20px; } /* keep thumb reachable on phones */
}

/* ===== Calculator visual polish (light/dark) ===== */

/* Slightly richer light palette so it doesn't look washed out */
body:not(.dark) {
  --calc-bg: #eef2f7;       /* panel background */
  --calc-panel: #ffffff;    /* input/display background */
  --calc-text: #111;
  --calc-btn-bg: #f2f3f5;
  --calc-btn-hover: #1a73e8;
  --calc-btn-text: #111;
  --calc-equals-bg: #1976d2;
}

/* Dark palette already okay; keep your existing vars.
   We’ll just add some container chrome for both modes. */
.calculator-panel {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.20);
}

/* Light mode: clearer border + softer shadow */
body:not(.dark) .calculator-panel {
  border: 1px solid #cfd6df;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.18);
}

/* Make the calc display box always visible (both modes) */
#calcDisplay {
  background: var(--calc-panel);
  color: var(--calc-text);
  border: 1px solid rgba(0,0,0,0.2); /* visible even before focus */
  border-radius: 8px;
  min-height: 44px;
  line-height: 44px;
  padding: 0 12px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

/* Light mode: crisper border for the display */
body:not(.dark) #calcDisplay {
  border-color: #c7ccd1;
}

/* Dark mode: slightly brighter border so the box is defined */
body.dark #calcDisplay {
  border-color: #3a3f44;
}

/* Button readability in light mode */
body:not(.dark) .calc-btn {
  background: var(--calc-btn-bg);
  color: var(--calc-btn-text);
  border: 1px solid #d7d9de;
}
body:not(.dark) .calc-btn:hover,
body:not(.dark) .calc-btn:active {
  background: #e7eefc; /* subtle blue hover */
  border-color: #c4d6fb;
  color: #0f3e9e;
}

/* Keep equals bold and high-contrast in both modes */
#calcEquals {
  background: var(--calc-equals-bg) !important;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid transparent !important;
}

/* Close (×) button contrast */
.calc-close {
  color: var(--calc-text);
  opacity: 0.85;
  transition: opacity .15s ease;
}
.calc-close:hover { opacity: 1; }

/* Light mode: force a darker icon */
body:not(.dark) .calc-close {
  color: #333;
}

/* Dark mode: keep it bright */
body.dark .calc-close {
  color: #fff;
}
/* ===== Calculator polish (light & dark) ===== */

/* Light theme palette */
body:not(.dark) {
  --calc-bg: #eef2f7;         /* panel background */
  --calc-panel: #ffffff;      /* display background */
  --calc-text: #111;          /* text color */
  --calc-btn-bg: #f5f6f8;     /* button background */
  --calc-btn-border: #cfd6df; /* button border */
  --calc-btn-text: #111;      /* button text */
  --calc-btn-hover-bg: #e7eefc;
  --calc-btn-hover-border: #c4d6fb;
  --calc-primary: #1976d2;    /* equals, accents */
}

/* Panel shell */
.calculator-panel {
  background: var(--calc-bg, #23272d) !important;
  color: var(--calc-text, #fff) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.18) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}

/* Light mode panel chrome */
body:not(.dark) .calculator-panel {
  border-color: #cfd6df !important;
}

/* Display: always visible, not just on focus */
#calcDisplay {
  background: var(--calc-panel, #1a1c1e) !important;
  color: var(--calc-text, #fff) !important;
  border: 1px solid #3a3f44 !important;
  border-radius: 8px !important;
  min-height: 44px;
  line-height: 44px;
  padding: 0 12px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  width: 100% !important;
  text-align: right !important;
}

/* Light/Dark borders for the display */
body:not(.dark) #calcDisplay {
  color: #111 !important;
  border-color: #c7ccd1 !important;
}
body.dark #calcDisplay {
  background: #1a1c1e !important;
  color: #f5f7fa !important;
  border-color: #3a3f44 !important;
}

/* Buttons */
.calc-btn {
  background: var(--calc-btn-bg, #2a2a2a) !important;
  color: var(--calc-btn-text, #eee) !important;
  border: 1px solid var(--calc-btn-border, #444) !important;
  border-radius: 8px !important;
  padding: 10px 0 !important;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.calc-btn:hover {
  background: var(--calc-btn-hover-bg, #3a3a3a) !important;
  border-color: var(--calc-btn-hover-border, #555) !important;
}

/* Equals = standout */
#calcEquals {
  background: var(--calc-primary, #1976d2) !important;
  color: #fff !important;
  border: 1px solid var(--calc-primary, #1976d2) !important;
  font-weight: 700;
}

/* Close (×) contrast */
.calc-close {
  color: var(--calc-text, #fff) !important;
  opacity: 0.9;
  transition: opacity .15s ease;
}
.calc-close:hover { opacity: 1; }
body:not(.dark) .calc-close { color: #333 !important; }

/* Drag handle behavior already present, just keep it crisp */
#calcDragHandle {
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
}
/* --- Fix vertical scrollbar above ~1835px --- */

/* 1500–1899px: reduce rigid height; prefer aspect ratio */
@media (min-width: 1500px) and (max-width: 1899px) {
  .graph-container {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;   /* fills space without forcing scroll */
    margin-bottom: 8px;
  }
  #finChartContainer,
  #finChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ≥1900px: same approach (no 68vh) */
@media (min-width: 1900px) {
  .graph-container {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0;
    padding: 0;
  }
  #finChartContainer,
  #finChart {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* If you use the expanded-in-place view, cap it so the page stays scroll-free */
.main-layout.chart-is-expanded .graph-container {
  height: min(60vh, 900px) !important;  /* was 70vh in your CSS */
}
/* === Help overlay: light/dark theme === */

/* Backdrop */
body:not(.dark) .help-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
}
body.dark .help-overlay {
  background: rgba(0, 0, 0, 0.70) !important; /* a bit stronger for dark */
}

/* Panel */
body:not(.dark) .help-box {
  background: #ffffff !important;
  color: #111 !important;
  box-shadow: 0 18px 40px rgba(16,24,40,0.25) !important;
  border: 1px solid #d6dbe2 !important;
}
body.dark .help-box {
  background: #171a1f !important;
  color: #e9eef5 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5) !important;
  border: 1px solid #2a2f36 !important;
}

/* Headings & hr */
body:not(.dark) .help-box h2 { color: #0f172a !important; }
body.dark .help-box h2 { color: #e6edf7 !important; }
body.dark .help-box hr { border-color: #2b3138 !important; }

/* Links */
body:not(.dark) .help-box a { color: #0b63d1 !important; }
body.dark .help-box a { color: #7bb1ff !important; }

/* Shortcut list */
body.dark .help-box li { color: #cbd5e1 !important; }

/* Buttons */
body:not(.dark) .help-box button {
  background: #1f2937 !important;
  color: #fff !important;
}
body.dark .help-box button {
  background: #2563eb !important;
  color: #fff !important;
  border: 1px solid #1d4ed8 !important;
}
body.dark .help-box button:hover { filter: brightness(1.08); }


/* Side menu dark mode background to match help overlay */
body.dark .side-menu {
  background: #171a1f !important;
  color: #e9eef5 !important;
  border-left: 1px solid #2a2f36;
}


/* === Side menu controls in dark mode === */

/* General input backgrounds */
body.dark .side-menu input[type="number"],
body.dark .side-menu input[type="text"],
body.dark .side-menu select {
  background: #22252d !important;   /* softer charcoal box */
  color: #e5eaf2 !important;        /* readable text */
  border: 1px solid #2f343c !important;
}

/* Checkboxes / toggles */
body.dark .side-menu input[type="checkbox"] {
  accent-color: #4a90e2 !important;  /* dimmed blue instead of blinding white */
}

/* Switch-style toggles (if you’re using custom switches) */
body.dark .side-menu .switch input:checked + .slider {
  background-color: #2563eb !important; /* softer primary blue */
}
body.dark .side-menu .switch .slider {
  background-color: #3a3f47 !important; /* neutral when off */
}
body.dark .side-menu .switch .slider:before {
  background-color: #e5eaf2 !important; /* knob not bright white */
}


/* === Side menu buttons unified theme === */

/* Light mode: make buttons blue instead of green */
body:not(.dark) .side-menu button {
  background: #2563eb !important;  /* same as dark mode */
  color: #fff !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
body:not(.dark) .side-menu button:hover {
  background: #1d4ed8 !important;
}

/* Dark mode already uses blue (keeping consistent) */
body.dark .side-menu button {
  background: #2563eb !important;
  color: #fff !important;
  border: 1px solid #1d4ed8 !important;
}
body.dark .side-menu button:hover {
  background: #1e40af !important;
}


/* === Side menu: scoped blue theme (buttons + toggles only) === */

/* Buttons inside the side menu (both themes) */
#sideMenuOverlay.side-menu button,
.side-menu button {
  background: #2563eb !important;
  color: #fff !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#sideMenuOverlay.side-menu button:hover,
.side-menu button:hover {
  background: #1d4ed8 !important;
}
#sideMenuOverlay.side-menu button:active,
.side-menu button:active {
  background: #1e40af !important;
}

/* Checkbox / radio accent color ONLY inside the side menu */
#sideMenuOverlay.side-menu input[type="checkbox"],
#sideMenuOverlay.side-menu input[type="radio"],
.side-menu input[type="checkbox"],
.side-menu input[type="radio"] {
  accent-color: #2563eb !important;
}

/* If you use custom switch markup (common pattern) */
.side-menu .switch .slider { background-color: #3a3f47 !important; }
.side-menu .switch input:checked + .slider { background-color: #2563eb !important; }
.side-menu .switch .slider:before { background-color: #e5eaf2 !important; } /* knob */

/* Inputs inside side menu stay neutral but not blinding */
.side-menu input[type="text"],
.side-menu input[type="number"],
.side-menu select {
  background: var(--menu-input-bg, #22252d) !important; /* dark-mode var; harmless in light */
  color: var(--menu-input-fg, #e5eaf2) !important;
  border: 1px solid #2f343c !important;
}
body:not(.dark) .side-menu input[type="text"],
body:not(.dark) .side-menu input[type="number"],
body:not(.dark) .side-menu select {
  background: #f8fafc !important;
  color: #111 !important;
  border: 1px solid #d0d5dd !important;
}



/* visually soften disabled controls for retired state */
.scenario-retired input[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}


/* When there’s no hint, kill the vertical breathing room */
.top-interactive-area.no-hint-gap { gap: 0 !important; }

.top-interactive-area.no-hint-gap #scenario-row {
  margin-bottom: 0 !important;
}

.top-interactive-area.no-hint-gap .summary-bar {
  margin-top: 0 !important;
}

/* keep your existing collapse rules */
#shortcutHint.hidden,
.shortcut-hint-bar.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
}

/* shrink the space right under the helper */
#scenario-row {
 margin: 0;         /* ✅ eliminate top/bottom margin */
    padding: 0;
}

/* shrink the space before the summary bar */
.summary-bar {
  /* was margin: 10px auto 10px; */
  margin: 6px auto 8px !important;
}

/* if your helper is inside the same wrapper that uses gap */
.top-interactive-area {
  gap: 6px !important;   /* was 10px */
}


.top-interactive-area.no-hint-gap { gap: 0 !important; }
.top-interactive-area.no-hint-gap #scenario-row { margin-top: 0 !important; }
.top-interactive-area.no-hint-gap .summary-bar { margin-top: 0 !important; }


/* Mobile wrapper */
.top-interactive-area.no-hint-gap { gap: 0 !important; }
.top-interactive-area.no-hint-gap #scenario-row { margin-top: 0 !important; }
.top-interactive-area.no-hint-gap .summary-bar { margin-top: 0 !important; }

/* Desktop wrappers (use whichever matches your DOM) */
#scenario-summary-wrap.no-hint-gap,
.tab-wrapper.no-hint-gap,
#finHeaderArea.no-hint-gap,
.top-bar.no-hint-gap {
  gap: 0 !important;
}

#scenario-summary-wrap.no-hint-gap #scenario-row,
.tab-wrapper.no-hint-gap #scenario-row,
#finHeaderArea.no-hint-gap #scenario-row,
.top-bar.no-hint-gap #scenario-row {
  margin-top: 0 !important;
}

#scenario-summary-wrap.no-hint-gap .summary-bar,
.tab-wrapper.no-hint-gap .summary-bar,
#finHeaderArea.no-hint-gap .summary-bar,
.top-bar.no-hint-gap .summary-bar {
  margin-top: 0 !important;
}

/* Helper itself still collapses cleanly */
#shortcutHint.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
}

/* ---------- 1) Kill the extra vertical gap when ≥ 720px ---------- */
@media (min-width: 720px) {
  /* If any of these exist in your DOM they’ll tighten spacing */
  .top-interactive-area { gap: 6px !important; }    /* was ~10px */
  #scenario-row         { margin: 4px auto 6px !important; }
  .summary-bar          { margin: 6px auto 8px !important; }

  /* Common wrappers that often add top/bottom padding at desktop width */
  .tab-wrapper,
  #finHeaderArea,
  .top-bar,
  #scenario-summary-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Ensure the hint bar (when visible) doesn’t force big spacing */
  #shortcutHint { margin-bottom: 6px !important; }
}

/* ---------- 2) Let tab labels breathe when < 720px ---------- */
@media (max-width: 719.98px) {
  .tab-bar {
    gap: 6px !important;      /* slightly tighter gaps */
    flex-wrap: wrap;          /* allow wrapping */
  }
  .tab-btn {
    height: auto !important;  /* remove any fixed height */
    line-height: 1.2 !important;
    padding: 8px 10px !important;
    white-space: normal !important;     /* allow wrapping */
    overflow: visible !important;       /* no clipping */
    text-overflow: clip !important;     /* remove ellipsis if set */
    display: inline-flex;               /* keep nice vertical centering */
    align-items: center;
    justify-content: center;
  }
  /* If labels live inside a span */
  .tab-btn span {
    white-space: inherit !important;
    line-height: inherit !important;
  }
}

/* ---------- Always collapse the hint with zero ghost space ---------- */
#shortcutHint.hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
}
/* --- Tabs: never clip or fix the height --- */
.tab-wrapper,
.tab-bar {
  height: auto !important;
  overflow: visible !important;        /* prevent clipping */
}

/* The tabs row should wrap on small screens and stay visible on large ones */
.tab-bar {
  display: flex !important;
  flex-wrap: wrap !important;          /* allows wrapping instead of clipping */
  gap: 8px 10px !important;            /* row/column gaps */
  align-items: center !important;
  justify-content: center;             /* optional: center the row */
}

/* Buttons themselves: no fixed heights; allow label to wrap if needed */
.tab-btn {
  height: auto !important;             /* kill any fixed height */
  line-height: 1.2 !important;
  padding: 8px 12px !important;
  white-space: normal !important;      /* allow wrapping when narrow */
  overflow: visible !important;        /* no text clipping */
  text-overflow: clip !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* If the label text lives in a span, inherit the wrapping */
.tab-btn span {
  white-space: inherit !important;
  line-height: inherit !important;
}

/* Desktop-only spacing trim (removes the “mystery” gap ≥720px) */
@media (min-width: 720px) {
  #scenario-row   { margin: 4px auto 6px !important; }
  .summary-bar    { margin: 6px auto 8px !important; }
  .tab-wrapper    { padding-top: 0 !important; margin-top: 0 !important; }
}

/* When the hint is collapsed and you add .no-hint-gap on the wrapper,
   kill surrounding margins so no white band remains */
.top-interactive-area.no-hint-gap,
.tab-wrapper.no-hint-gap {
  gap: 0 !important;
}
.tab-wrapper.no-hint-gap #scenario-row,
.top-interactive-area.no-hint-gap #scenario-row {
  margin-top: 0 !important;
}
.tab-wrapper.no-hint-gap .summary-bar,
.top-interactive-area.no-hint-gap .summary-bar {
  margin-top: 0 !important;
}

@media (min-width: 721px) {
  .top-interactive-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #scenario-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .summary-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .header-flex {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/*--
* {
  outline: 1px solid red !important;
}
*/

body.debug-layout * {
  position: relative;
}

body.debug-layout *::before {
  content: attr(class);
  font-size: 10px;
  color: lime;
  background: black;
  padding: 1px 3px;
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 9999;
}




@media (min-width: 721px) {
  .top-interactive-area {
    align-self: stretch;           /* Ensures it fills horizontally */
    margin-top: 0 !important;      /* 💣 kills the phantom gap */
  }

  .header-flex {
    align-items: flex-start;       /* Removes center bias */
    margin-bottom: 0 !important;   /* Avoid vertical shift */
    padding-bottom: 0 !important;
  }

  #scenario-row {
    margin-top: 0 !important;
  }

  .summary-bar {
    margin-top: 0 !important;
  }
}

.shortcut-hint-bar {
  background-color: #fef9e7;
  color: #222;
  font-weight: 500;
  padding: 10px 16px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #e0d8aa;
  margin: 8px auto 4px auto;
  width: 100%;
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.4;
  display: block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}



body.dark .shortcut-hint-bar {
  background-color: #2c281c;
  color: #f5e8b2;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.shortcut-hint-bar kbd {
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: monospace;
}

body.dark .shortcut-hint-bar kbd {
  background: #3a3a3a;
  border: 1px solid #666;
  color: #fef3a3;
}

.top-interactive-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  margin: -14px auto 0 auto; /* 👈 This is the key line */
  gap: 10px;
}

@media (min-width: 1000px) {
  .top-interactive-area {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}


#sideMenuOverlay.side-menu .menu-title {
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

#closeMenuBtn {
  font-size: 16px;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1001;
  transition: color 0.2s ease, transform 0.2s ease;
}

#closeMenuBtn:hover {
  color: #fff;
  transform: scale(1.1);
}
#closeMenuBtn i {
  font-size: 16px;
  color: #aaa;
}

#closeMenuBtn:hover i {
  color: #fff;
}


.nav-tabs {
  position: relative;
}
.nav-tabs .highlight {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 80px; /* will adjust dynamically with JS */
  background: #2563eb;
  transition: left 0.3s ease;
}
.tab-bar {
  position: relative;         /* allow absolute child */
  display: flex;
  gap: 10px;
  padding-bottom: 6px;  /* 👈 Give space for the underline */
}

.tab-bar {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-end; /* 👈 Important: aligns buttons to bottom */
  height: 40px;          /* 👈 Gives room for the underline */
}

.tab-btn {
  background: none;
  border: none;
  padding: 8px 12px;
  font-weight: 600;
  color: #94a3b8;             /* inactive color */
  cursor: pointer;
}
.tab-btn {
  padding: 8px 12px;
  background: none;
  border: none;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  position: relative;
}


.tab-btn.active { color: #e5eaf2; }  /* active label color */

/* the sliding bar */
.tab-highlight {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;                   /* JS sets width */
  left: 0;                    /* JS sets left   */
  background: orange;
  border-radius: 3px;
  transition: left 250ms ease, width 250ms ease;
}

.icon {
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.icon.flip {
  transform: rotateY(180deg);
  opacity: 0.3;
}


.header-btn {
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.header-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

overlay.style.cssText = `
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex; /* ensure flexbox */
`;


.lock-box {
  backdrop-filter: none !important;
  z-index: 10001 !important;
}


.lock-screen-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.lock-box {
  background: var(--card-bg, #fff);
  color: var(--text-color, #000);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  min-width: 300px;
  max-width: 92vw;
  font-family: system-ui, sans-serif;
  text-align: center;
}

.lock-input {
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.lock-submit {
  padding: 10px 20px;
  border: none;
  background: #0a84ff;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

/* Don’t disable events or blur the whole body. Just block scroll. */
body.locked { 
  overflow: hidden; 
}

/* Fullscreen overlay that handles the dim+blur by itself */
.lock-screen-overlay {
  position: fixed;
  inset: 0;
  display: none;               /* shown via JS */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* The dialog itself is NOT blurred */
.lock-box {
  background: var(--card-bg, #fff);
  color: var(--text-color, #111);
  width: min(92vw, 420px);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  padding: 24px 22px;
  text-align: center;
  position: relative;
}

.lock-input { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; }
.lock-submit { margin-top: 12px; padding: 10px 14px; font-size: 15px; border: 0; border-radius: 8px; background: #0a84ff; color: #fff; cursor: pointer; }
.lock-error { color: #d33; margin-top: 8px; font-size: 14px; }