/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: #090b0f;
  color: #ffffff;
}

body.modal-open {
  overflow: hidden;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {
  width: 100%;
  height: 100vh;

  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);

  overflow: hidden;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
  width: 100%;
  height: 100vh;

  min-height: 0;

  padding: 16px;

  background:
    linear-gradient(
      180deg,
      #11151b 0%,
      #0d1015 100%
    );

  border-right: 1px solid #262c35;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #343b46 #11151b;
}

.sidebar::-webkit-scrollbar {
  width: 7px;
}

.sidebar::-webkit-scrollbar-track {
  background: #11151b;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #343b46;
  border-radius: 999px;
}


/* =========================================================
   BRAND
========================================================= */

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 14px;
}

.brand-icon {
  width: 52px;
  height: 52px;

  object-fit: contain;

  border-radius: 14px;

  flex-shrink: 0;

  filter:
    drop-shadow(
      0 7px 16px
      rgba(68, 100, 255, 0.22)
    );
}

.brand-header h1 {
  margin: 0;

  font-size: 23px;
  line-height: 1.05;
}

.brand-header p {
  margin: 4px 0 0;

  color: #8f98a6;

  font-size: 11px;
  line-height: 1.35;
}


/* =========================================================
   PANEL SECTIONS
========================================================= */

.panel-section {
  margin-bottom: 10px;

  padding: 12px;

  background: #151a21;

  border: 1px solid #2b323c;

  border-radius: 13px;
}

.section-heading {
  margin-bottom: 8px;

  color: #f5f7fa;

  font-size: 13px;
  font-weight: 800;
}


/* =========================================================
   SCRIPT HEADING / WARM-UP
========================================================= */

.script-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 8px;
}

.script-section-heading .section-heading {
  margin-bottom: 0;
}

.mini-action-btn {
  width: auto;

  min-height: 28px;

  padding: 4px 8px;

  border:
    1px solid
    rgba(
      79,
      140,
      255,
      0.34
    );

  border-radius: 999px;

  background:
    rgba(
      79,
      140,
      255,
      0.10
    );

  color: #c9d8ff;

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;
}

.mini-action-btn:hover {
  background:
    rgba(
      79,
      140,
      255,
      0.16
    );
}

.mini-action-btn.active {
  border-color:
    rgba(
      98,
      214,
      149,
      0.36
    );

  background:
    rgba(
      98,
      214,
      149,
      0.10
    );

  color: #8ce5af;
}


/* =========================================================
   VOICE WARM-UP MENU
========================================================= */

.voice-warmup-menu {
  margin-bottom: 9px;

  padding: 10px;

  border-radius: 11px;

  border:
    1px solid
    rgba(
      79,
      140,
      255,
      0.24
    );

  background:
    linear-gradient(
      180deg,
      rgba(24, 30, 39, 0.98),
      rgba(17, 22, 29, 0.98)
    );
}

.voice-warmup-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 8px;
}

.voice-warmup-title {
  color: #ffffff;

  font-size: 11px;
  font-weight: 800;
}

.voice-warmup-subtitle {
  margin-top: 2px;

  color: #7f8996;

  font-size: 8.5px;
  line-height: 1.25;
}

.warmup-close-btn {
  width: 24px;
  height: 24px;

  min-width: 24px;
  min-height: 24px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #262d36;

  border: 1px solid #343c47;

  color: #aeb6c1;

  font-size: 16px;
  font-weight: 500;

  line-height: 1;

  flex-shrink: 0;
}

.warmup-close-btn:hover {
  background: #303844;
}

.warmup-options {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 6px;
}

.warmup-option {
  min-width: 0;
  min-height: 46px;

  padding: 7px 8px;

  display: flex;
  align-items: center;

  gap: 7px;

  text-align: left;

  border-radius: 9px;

  border: 1px solid #303844;

  background: #11161c;

  color: #ffffff;
}

.warmup-option:hover {
  opacity: 1;

  border-color:
    rgba(
      79,
      140,
      255,
      0.44
    );

  background:
    rgba(
      79,
      140,
      255,
      0.08
    );
}

.warmup-option-icon {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 7px;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  font-size: 13px;
}

.warmup-option-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 1px;
}

.warmup-option-text strong {
  font-size: 9.5px;
  line-height: 1.15;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.warmup-option-text small {
  color: #76808d;

  font-size: 7.5px;
  font-weight: 600;

  line-height: 1.15;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.warmup-option-wide {
  grid-column: 1 / -1;
}


/* =========================================================
   INPUTS
========================================================= */

input[type="email"],
input[type="password"],
input[type="text"],
textarea,
select {
  width: 100%;

  border: 1px solid #353d48;
  border-radius: 9px;

  background: #0d1116;

  color: #ffffff;

  font-size: 13px;
}

input[type="email"],
input[type="password"],
input[type="text"],
select {
  min-height: 36px;

  padding: 8px 10px;
}

textarea {
  min-height: 125px;

  padding: 10px;

  resize: vertical;

  line-height: 1.4;
}

input::placeholder,
textarea::placeholder {
  color: #626b77;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #4f8cff;
  outline-offset: 1px;
}


/* =========================================================
   BUTTONS
========================================================= */

button,
.file-upload-btn {
  border: none;
  border-radius: 9px;

  min-height: 34px;

  padding: 7px 11px;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.1s ease,
    opacity 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

button:hover,
.file-upload-btn:hover {
  opacity: 0.92;
}

button:active,
.file-upload-btn:active {
  transform: scale(0.985);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.primary-btn {
  width: 100%;

  background:
    linear-gradient(
      135deg,
      #2f8cff,
      #6c5ce7
    );

  color: #ffffff;
}

.secondary-btn {
  width: 100%;

  background: #282f38;

  color: #ffffff;

  border: 1px solid #39424e;
}

.danger-btn {
  width: 100%;

  background: #402126;

  color: #ffafb8;

  border: 1px solid #6c3039;
}

.google-btn {
  width: 100%;

  margin-top: 7px;

  background: #ffffff;
  color: #1f2328;
}

.file-upload-btn {
  display: block;

  margin-top: 7px;

  text-align: center;

  background: #282f38;

  color: #ffffff;

  border: 1px solid #39424e;
}


/* =========================================================
   BUTTON ROW
========================================================= */

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;

  margin-top: 7px;
}


/* =========================================================
   STATUS
========================================================= */

.status-text {
  margin-top: 6px;

  min-height: 15px;

  color: #8e97a4;

  font-size: 10px;
  line-height: 1.3;
}

.status-text.success {
  color: #62d695;
}

.status-text.error {
  color: #ff7d89;
}


/* =========================================================
   ACCOUNT
========================================================= */

.auth-logged-out input + input {
  margin-top: 7px;
}

.auth-logged-in {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 9px;
}

.account-user {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

.account-avatar {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  background:
    linear-gradient(
      135deg,
      #2f8cff,
      #6c5ce7
    );

  color: #ffffff;

  font-size: 12px;
  font-weight: 800;
}

.account-details {
  min-width: 0;
  flex: 1;
}

.account-name-row {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;
}

.account-name {
  min-width: 0;

  font-size: 12px;
  font-weight: 800;

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

.account-email {
  width: 100%;

  margin-top: 3px;

  color: #8f98a5;

  font-size: 10px;
  line-height: 1.25;

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

.account-actions {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 6px;

  align-items: center;
}

.auth-logged-in .secondary-btn {
  width: 100%;

  min-width: 0;

  min-height: 30px;

  padding: 5px 8px;

  font-size: 10px;
}

#manageSubscriptionBtn {
  width: 100%;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

#signOutBtn {
  width: auto;

  white-space: nowrap;
}


/* =========================================================
   PLAN BADGE
========================================================= */

.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  min-height: 18px;

  padding: 3px 6px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.45px;
}

.plan-badge.free {
  color: #b9ccff;

  background:
    rgba(
      79,
      140,
      255,
      0.10
    );

  border:
    1px solid
    rgba(
      79,
      140,
      255,
      0.28
    );
}

.plan-badge.pro {
  color: #ffe3a2;

  background:
    rgba(
      241,
      169,
      59,
      0.11
    );

  border:
    1px solid
    rgba(
      241,
      169,
      59,
      0.35
    );
}


/* =========================================================
   UPGRADE BUTTON
========================================================= */

.upgrade-btn {
  width: auto;

  min-height: 30px;

  padding: 5px 8px;

  border:
    1px solid
    rgba(
      79,
      140,
      255,
      0.40
    );

  background:
    linear-gradient(
      135deg,
      rgba(47, 140, 255, 0.20),
      rgba(108, 92, 231, 0.18)
    );

  color: #cddcff;

  font-size: 10px;
}

.upgrade-btn:hover {
  border-color:
    rgba(
      79,
      140,
      255,
      0.65
    );
}


/* =========================================================
   SAVED SCRIPTS
========================================================= */

.saved-scripts-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 8px;
}

.saved-scripts-heading .section-heading {
  margin-bottom: 0;
}

.cloud-limit-text {
  color: #758092;

  font-size: 9px;
  line-height: 1.2;

  text-align: right;

  white-space: nowrap;
}


/* =========================================================
   STORAGE SUBHEADINGS
========================================================= */

.storage-subheading {
  margin-bottom: 6px;

  color: #dfe5ed;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.2;
}

.storage-subheading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 6px;
}


/* =========================================================
   CLOUD STORAGE
========================================================= */

.cloud-storage-section {
  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid #2b323c;
}

.cloud-storage-note {
  margin:
    -1px
    0
    7px;

  color: #7f8996;

  font-size: 9px;
  line-height: 1.3;
}

.cloud-storage-section .primary-btn {
  margin-top: 4px;
}

.cloud-storage-section select {
  margin-top: 7px;
}


/* =========================================================
   REMOTE HEADER
========================================================= */

.remote-header-row {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 8px;
}

.remote-header-row .section-heading {
  margin-bottom: 3px;
}

.firebase-status {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: #8f98a5;

  font-size: 10px;
  font-weight: 700;
}

.firebase-status::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #777f8a;

  flex-shrink: 0;
}

.firebase-status.connected {
  color: #62d695;
}

.firebase-status.connected::before {
  background: #62d695;

  box-shadow:
    0 0 7px
    rgba(98, 214, 149, 0.5);
}

.firebase-status.error {
  color: #ff7d89;
}

.firebase-status.error::before {
  background: #ff7d89;
}


/* =========================================================
   FREE SESSION BADGE
========================================================= */

.free-session-badge {
  display: inline-flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

  min-width: 76px;

  padding: 5px 7px;

  border-radius: 9px;

  background:
    rgba(
      79,
      140,
      255,
      0.10
    );

  border:
    1px solid
    rgba(
      79,
      140,
      255,
      0.28
    );

  line-height: 1.05;

  flex-shrink: 0;
}

.free-session-label {
  color: #91a9d3;

  font-size: 8px;
  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.45px;
}

.free-session-time {
  margin-top: 2px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 800;

  font-variant-numeric: tabular-nums;
}

.free-session-badge.warning {
  background:
    rgba(
      241,
      169,
      59,
      0.11
    );

  border-color:
    rgba(
      241,
      169,
      59,
      0.34
    );
}

.free-session-badge.warning .free-session-label {
  color: #eeb55b;
}

.free-session-badge.warning .free-session-time {
  color: #ffd27a;
}

.free-session-badge.critical {
  background:
    rgba(
      255,
      92,
      106,
      0.12
    );

  border-color:
    rgba(
      255,
      92,
      106,
      0.38
    );
}

.free-session-badge.critical .free-session-label {
  color: #ff8792;
}

.free-session-badge.critical .free-session-time {
  color: #ff9da6;
}


/* =========================================================
   SESSION CODE
========================================================= */

.remote-section .primary-btn,
.remote-section .danger-btn {
  margin-top: 6px;
}

.session-code-box {
  margin-top: 8px;

  padding: 9px;

  border-radius: 10px;

  background: #0e1217;

  border: 1px solid #303843;

  text-align: center;
}

.session-code-label {
  color: #7f8996;

  font-size: 8px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.session-code {
  margin-top: 3px;

  font-size: 22px;
  font-weight: 800;

  letter-spacing: 4px;
}

.session-status {
  margin-top: 4px;

  color: #9aa3af;

  font-size: 10px;
}


/* =========================================================
   QR CODE
========================================================= */

.qr-section {
  margin-top: 8px;

  text-align: center;
}

.qr-code {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code canvas {
  display: block;

  max-width: 100%;
  height: auto;

  border-radius: 7px;

  background: #ffffff;

  padding: 4px;
}

.qr-help {
  margin-top: 5px;

  color: #7e8793;

  font-size: 9px;
  line-height: 1.3;
}


/* =========================================================
   SELECT
========================================================= */

select {
  margin-top: 7px;

  cursor: pointer;
}


/* =========================================================
   CONTROLS
========================================================= */

.control-group {
  margin-top: 11px;
}

.control-label-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 5px;
}

.control-label-row label,
.control-group > label {
  color: #b8c0ca;

  font-size: 11px;
  font-weight: 700;
}

.control-label-row span {
  color: #7f8996;

  font-size: 10px;
}

input[type="range"] {
  width: 100%;

  accent-color: #4f8cff;

  cursor: pointer;
}


/* =========================================================
   TOGGLES
========================================================= */

.toggle-row {
  display: flex;

  align-items: center;

  gap: 7px;

  margin-top: 9px;

  color: #c6ccd4;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.toggle-row input {
  width: 14px;
  height: 14px;

  accent-color: #4f8cff;
}


/* =========================================================
   PROMPTER AREA
========================================================= */

.prompter-area {
  position: relative;

  width: 100%;
  height: 100vh;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      #11151b 0%,
      #090b0f 70%
    );
}

.prompter-window {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scroll-behavior: auto;

  padding:
    42vh
    5vw
    55vh;

  scrollbar-width: none;

  overflow-anchor: none;
}

.prompter-window::-webkit-scrollbar {
  width: 0;
  height: 0;

  display: none;
}


/* =========================================================
   PROMPTER TEXT
========================================================= */

.prompter-text {
  width: 70%;

  margin: 0 auto;

  color: #ffffff;

  font-size: 48px;
  font-weight: 600;

  line-height: 1.5;

  text-align: center;

  white-space: pre-wrap;

  overflow-wrap: break-word;

  transform-origin: center center;

  overflow-anchor: none;
}

.prompter-text.mirrored {
  transform: scaleX(-1);
}


/* =========================================================
   READING GUIDE
========================================================= */

.reading-guide {
  position: fixed;

  top: 50%;

  left: 360px;
  right: 0;

  height: 2px;

  pointer-events: none;

  z-index: 15;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(79, 140, 255, 0.75),
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(79, 140, 255, 0.18);

  transform: translateY(-50%);
}

.reading-guide.hidden-guide {
  display: none;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown {
  position: fixed;

  top: 50%;
  left: calc(50% + 180px);

  transform: translate(-50%, -50%);

  z-index: 50;

  width: 110px;
  height: 110px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(
      12,
      15,
      20,
      0.92
    );

  border:
    2px solid
    rgba(
      79,
      140,
      255,
      0.6
    );

  box-shadow:
    0 20px 60px
    rgba(
      0,
      0,
      0,
      0.35
    );

  font-size: 50px;
  font-weight: 800;
}


/* =========================================================
   FOCUS MODE
========================================================= */

.exit-focus-btn {
  position: fixed;

  top: 16px;
  right: 16px;

  z-index: 100;

  width: auto;

  min-height: 34px;

  padding: 7px 11px;

  background:
    rgba(
      20,
      24,
      30,
      0.9
    );

  color: #ffffff;

  border:
    1px solid #343b46;
}

body.focus-mode .sidebar {
  display: none;
}

body.focus-mode .app-shell {
  display: block;

  width: 100vw;
  height: 100vh;
}

body.focus-mode .prompter-area {
  width: 100vw;
  height: 100vh;
}

body.focus-mode .reading-guide {
  left: 0;
}

body.focus-mode .countdown {
  left: 50%;
}


/* =========================================================
   PRO MODAL
========================================================= */

.pro-modal {
  position: fixed;

  inset: 0;

  z-index: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.pro-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(
      3,
      5,
      8,
      0.82
    );

  backdrop-filter: blur(8px);
}

.pro-modal-card {
  position: relative;

  z-index: 2;

  width: min(620px, 100%);

  max-height: calc(100vh - 48px);

  overflow-y: auto;

  padding: 28px;

  border-radius: 20px;

  border:
    1px solid
    rgba(
      100,
      127,
      255,
      0.28
    );

  background:
    linear-gradient(
      180deg,
      #181e27 0%,
      #11161d 100%
    );

  box-shadow:
    0 28px 90px
    rgba(
      0,
      0,
      0,
      0.55
    );

  scrollbar-width: thin;
  scrollbar-color: #394250 #161c24;
}

.pro-modal-card::-webkit-scrollbar {
  width: 6px;
}

.pro-modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.pro-modal-card::-webkit-scrollbar-thumb {
  background: #394250;

  border-radius: 999px;
}

.pro-modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 32px;
  height: 32px;

  min-width: 32px;
  min-height: 32px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #242b35;

  color: #aab3bf;

  border: 1px solid #353e4a;

  font-size: 21px;
  font-weight: 400;

  line-height: 1;
}

.pro-modal-close:hover {
  opacity: 1;

  background: #303844;

  color: #ffffff;
}

.pro-modal-brand {
  display: flex;
  align-items: center;

  gap: 9px;

  padding-right: 44px;

  color: #aebfff;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 0.3px;
}

.pro-modal-icon {
  width: 32px;
  height: 32px;

  object-fit: contain;

  border-radius: 9px;
}

.pro-modal-card h2 {
  margin:
    18px
    0
    8px;

  color: #ffffff;

  font-size: 30px;
  line-height: 1.08;

  letter-spacing: -0.6px;
}

.pro-modal-intro {
  margin:
    0
    0
    20px;

  color: #9ba5b2;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   PRO FEATURES
========================================================= */

.pro-feature-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.pro-feature {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding: 10px;

  border-radius: 11px;

  border: 1px solid #2d3540;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}

.pro-feature:last-child {
  grid-column: 1 / -1;
}

.pro-feature-check {
  width: 23px;
  height: 23px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    rgba(
      98,
      214,
      149,
      0.11
    );

  border:
    1px solid
    rgba(
      98,
      214,
      149,
      0.30
    );

  color: #73dfa1;

  font-size: 12px;
  font-weight: 900;
}

.pro-feature strong {
  display: block;

  color: #f4f7fb;

  font-size: 12px;
  line-height: 1.25;
}

.pro-feature small {
  display: block;

  margin-top: 2px;

  color: #7f8996;

  font-size: 10px;
  line-height: 1.35;
}


/* =========================================================
   PRO PRICING OPTIONS
========================================================= */

.pro-pricing-options {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 18px;
}

.pro-price-card {
  position: relative;

  min-width: 0;

  padding: 17px;

  border-radius: 15px;

  border: 1px solid #313a46;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  text-align: center;
}

.pro-price-card-featured {
  border-color:
    rgba(
      79,
      140,
      255,
      0.56
    );

  background:
    linear-gradient(
      180deg,
      rgba(47, 140, 255, 0.11),
      rgba(108, 92, 231, 0.065)
    );

  box-shadow:
    0 12px 32px
    rgba(
      47,
      140,
      255,
      0.08
    );
}

.pro-price-best-value {
  position: absolute;

  top: -9px;
  left: 50%;

  transform: translateX(-50%);

  padding: 4px 8px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #2f8cff,
      #6c5ce7
    );

  color: #ffffff;

  font-size: 7.5px;
  font-weight: 900;

  letter-spacing: 0.65px;

  white-space: nowrap;
}

.pro-price-card-heading {
  color: #d5dce6;

  font-size: 11px;
  font-weight: 800;
}

.pro-price-main {
  margin-top: 8px;

  color: #ffffff;

  font-size: 30px;
  font-weight: 900;

  line-height: 1;
}

.pro-price-period {
  margin-top: 4px;

  color: #8993a1;

  font-size: 9px;
  font-weight: 700;
}

.pro-price-note {
  min-height: 28px;

  margin-top: 9px;

  color: #7c8693;

  font-size: 9px;
  line-height: 1.35;
}

.pro-price-card .pro-cta-btn {
  margin-top: 12px;
}


/* =========================================================
   PRO CHECKOUT BUTTONS
========================================================= */

.pro-cta-btn {
  width: 100%;

  min-height: 39px;

  background:
    linear-gradient(
      135deg,
      #2f8cff,
      #6c5ce7
    );

  color: #ffffff;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );
}

.pro-cta-btn:hover {
  opacity: 1;

  filter: brightness(1.06);
}

.pro-checkout-note {
  margin-top: 13px;

  color: #737e8c;

  font-size: 9px;
  line-height: 1.45;

  text-align: center;
}

.pro-free-btn {
  width: 100%;

  margin-top: 7px;

  min-height: 36px;

  background: transparent;

  color: #9da7b4;

  border: 1px solid transparent;
}

.pro-free-btn:hover {
  opacity: 1;

  color: #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border-color: #303844;
}


/* =========================================================
   HIDDEN
========================================================= */

.hidden {
  display: none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

  .app-shell {
    grid-template-columns:
      320px
      minmax(0, 1fr);
  }

  .reading-guide {
    left: 320px;
  }

  .countdown {
    left: calc(50% + 160px);
  }

  .prompter-text {
    width: 82%;
  }

  .account-actions {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .upgrade-btn,
  .auth-logged-in .secondary-btn {
    padding:
      5px
      7px;
  }
}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 760px) {

  html,
  body {
    height: auto;

    min-height: 100%;

    overflow-x: hidden;
    overflow-y: auto;
  }

  body.modal-open {
    overflow: hidden;
  }

  .app-shell {
    display: block;

    width: 100%;
    height: auto;

    min-height: 100vh;

    overflow: visible;
  }

  .sidebar {
    width: 100%;
    height: auto;

    min-height: auto;

    overflow: visible;

    padding: 14px;

    border-right: none;

    border-bottom:
      1px solid
      #262c35;
  }

  .prompter-area {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 100vh;

    overflow: hidden;
  }

  .prompter-window {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow-y: auto;

    padding:
      42vh
      5vw
      55vh;
  }

  .reading-guide {
    left: 0;
  }

  .countdown {
    left: 50%;
  }

  .prompter-text {
    width: 90%;
  }

  body.focus-mode {
    overflow: hidden;
  }

  body.focus-mode .app-shell {
    width: 100vw;
    height: 100vh;
  }

  body.focus-mode .prompter-area {
    width: 100vw;
    height: 100vh;
  }

  .pro-modal {
    padding: 16px;
  }

  .pro-modal-card {
    max-height: calc(100vh - 32px);

    padding:
      24px
      20px
      20px;
  }

  .pro-modal-card h2 {
    font-size: 26px;
  }

  .pro-feature-list {
    grid-template-columns: 1fr;
  }

  .pro-feature:last-child {
    grid-column: auto;
  }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 520px) {

  .pro-pricing-options {
    grid-template-columns: 1fr;
  }

  .pro-price-note {
    min-height: 0;
  }
}


@media (max-width: 460px) {

  .sidebar {
    padding: 12px;
  }

  .panel-section {
    padding: 11px;
  }

  .brand-header {
    gap: 10px;
  }

  .brand-icon {
    width: 46px;
    height: 46px;
  }

  .brand-header h1 {
    font-size: 20px;
  }

  .remote-header-row {
    align-items: center;
  }

  .free-session-badge {
    min-width: 72px;

    padding:
      5px
      7px;
  }

  .free-session-time {
    font-size: 13px;
  }

  .button-row {
    grid-template-columns: 1fr 1fr;
  }

  .auth-logged-in {
    align-items: stretch;
  }

  .account-actions {
    grid-template-columns:
      1fr;
  }

  .upgrade-btn,
  .auth-logged-in .secondary-btn,
  #signOutBtn {
    width: 100%;
  }

  .cloud-limit-text {
    font-size: 8px;
  }

  .storage-subheading {
    font-size: 10.5px;
  }

  .cloud-storage-note {
    font-size: 8.5px;
  }

  .mini-action-btn {
    min-height: 26px;

    padding:
      4px
      7px;

    font-size: 9px;
  }

  .voice-warmup-menu {
    padding: 9px;
  }

  .warmup-options {
    grid-template-columns: 1fr;
  }

  .warmup-option-wide {
    grid-column: auto;
  }

  .prompter-text {
    width: 94%;
  }

  .pro-modal {
    padding: 10px;
  }

  .pro-modal-card {
    max-height: calc(100vh - 20px);

    padding:
      22px
      16px
      16px;

    border-radius: 16px;
  }

  .pro-modal-card h2 {
    margin-top: 15px;

    font-size: 23px;
  }

  .pro-modal-intro {
    font-size: 12px;
  }

  .pro-feature {
    padding: 9px;
  }

  .pro-feature small {
    font-size: 9px;
  }

  .pro-price-main {
    font-size: 27px;
  }
}