/* Global UI Refresh 2026 */
:root {
  --refresh-bg-a: #eef7fd;
  --refresh-bg-b: #fbfdff;
  --refresh-ink: #132a3a;
  --refresh-muted: #4c6677;
  --refresh-accent: #0f9ecb;
  --refresh-accent-2: #ff7a18;
  --refresh-border: rgba(9, 52, 82, 0.16);
  --refresh-surface: rgba(255, 255, 255, 0.9);
  --refresh-shadow: 0 12px 30px rgba(13, 61, 95, 0.12);
}

html,
body {
  color: var(--refresh-ink);
  background:
    radial-gradient(820px 380px at 0% -8%, rgba(15, 158, 203, 0.18), transparent 62%),
    radial-gradient(700px 340px at 100% 110%, rgba(255, 122, 24, 0.14), transparent 62%),
    linear-gradient(160deg, var(--refresh-bg-a), var(--refresh-bg-b));
}

body {
  font-family: 'Manrope', 'Raleway', Arial, sans-serif;
}

a {
  color: #0a7ea6;
}

a:hover {
  color: #086786;
}

img {
  border-radius: 6px;
}

.menu-container,
.toolbar,
.topbar,
.site-header {
  backdrop-filter: blur(4px);
}

.dropbtn,
button,
input[type='submit'],
input[type='button'],
.get-started-link,
.submit-like-button,
.highlight-box,
.saveChanges-box,
.archive-button,
.mobile-t-box-container,
.t-box-container {
  border-radius: 10px;
}

.dropbtn,
.get-started-link,
.submit-like-button#submitInput,
.saveChanges-box {
  background-image: linear-gradient(135deg, #0d92be, #1aa8cd);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 22px rgba(14, 130, 170, 0.24);
}

.dropbtn:hover,
.get-started-link:hover,
.submit-like-button#submitInput:hover,
.saveChanges-box:hover {
  filter: brightness(0.95);
}

.dropdown-content,
.all-input,
.textbox,
.faqcontainer,
.feedbackcontainer,
.paymentcontainer,
.modal-dialog,
.modal-dialog-signin,
.modal-dialog-startGuide,
.modal-dialog-archive-titles,
.teamListContainer,
#code-container,
#phone-code-container {
  border: 1px solid var(--refresh-border);
  border-radius: 12px;
  box-shadow: var(--refresh-shadow);
  background: var(--refresh-surface);
}

#query,
.queryBoxStyle,
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
  border: 1px solid rgba(10, 97, 132, 0.24);
  border-radius: 10px;
}

#query:focus,
.queryBoxStyle:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0c95c1;
  box-shadow: 0 0 0 3px rgba(15, 158, 203, 0.14);
}

.leftcontainer,
.middlecontainer,
.rightcontainer,
.main-container,
.content,
.page-container,
.email-container {
  animation: refresh-fade-in 360ms ease-out both;
}

@keyframes refresh-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  body {
    background:
      radial-gradient(440px 220px at 0% -5%, rgba(15, 158, 203, 0.15), transparent 62%),
      linear-gradient(160deg, #f2f9ff, #fbfdff);
  }

  .dropdown-content {
    max-width: 90vw;
  }
}

/* =============================
   UI Refresh 2026 - Pass 2
   Scoped polish by page family
   ============================= */

/* Homepage / marketing pages */
.homepage-menu-container {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(11, 85, 120, 0.14);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(10, 54, 82, 0.12);
  margin: 10px 14px;
  width: calc(100% - 28px);
}

.features,
.features-list {
  border-radius: 14px;
}

.features {
  border: 1px solid rgba(13, 76, 106, 0.14);
  box-shadow: 0 14px 28px rgba(12, 64, 94, 0.12);
}

.features-header,
.li-title {
  font-family: 'Manrope', 'Raleway', sans-serif;
}

.li-title {
  color: #0f5f83;
  font-weight: 700;
}

.read-more-link {
  background-image: linear-gradient(135deg, #fb8a35, #ff7a18);
  color: #fff;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: 0 8px 22px rgba(208, 102, 21, 0.25);
}

.read-more-link:hover {
  filter: brightness(0.95);
}

/* Auth / account forms */
.content-box,
.signin-form,
#signinForm,
#registrationForm,
#step1,
#step2 {
  font-family: 'Manrope', 'Raleway', sans-serif;
}

.content-box {
  border: 1px solid rgba(9, 67, 97, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 44px rgba(8, 57, 88, 0.16) !important;
}

.content-box input,
.content-box button {
  min-height: 42px;
}

.content-box input[type='submit'],
.content-box button {
  background-image: linear-gradient(135deg, #0d92be, #1aa8cd);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
}

.content-box input[type='submit']:hover,
.content-box button:hover {
  filter: brightness(0.95);
}

/* Quick Start */
.main-card {
  border: 1px solid rgba(11, 72, 102, 0.2);
  box-shadow: 0 24px 44px rgba(8, 50, 78, 0.2);
}

.main-card .card,
.main-card .instructions {
  border: 1px solid rgba(9, 76, 108, 0.16);
  box-shadow: 0 10px 24px rgba(11, 58, 85, 0.1);
}

.main-card textarea {
  min-height: 130px;
  line-height: 1.45;
}

.skip-link {
  border: 1px solid rgba(14, 86, 117, 0.2);
  border-radius: 999px;
  color: #0a7296;
  background: #f4fbff;
}

/* Docs */
.developerLeftContainer,
.developerContentContainer,
.faqcontainer {
  border: 1px solid rgba(9, 70, 100, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(9, 59, 89, 0.14) !important;
}

.middleTitle,
.faq_question {
  color: #0b7fa8 !important;
}

#middlecontent,
.faq_answer,
#answer {
  color: #133244;
  line-height: 1.6;
}

.no-underline {
  color: #0a6f93 !important;
  font-weight: 600;
}

.no-underline:hover {
  color: #075874 !important;
}

code,
pre {
  border-radius: 10px;
}

pre {
  border: 1px solid rgba(8, 72, 103, 0.18);
  background: #f5fbff;
}

/* Blog */
.blog_menu,
.blogcontainer,
.blogcontainer_main {
  border: 1px solid rgba(8, 67, 97, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 30px rgba(8, 56, 85, 0.12) !important;
}

.blog_heading {
  color: #0c7da6 !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.blog_subhead,
.name_field,
.date_field {
  color: #1e4e67;
}

.transcript,
.blog_answer,
.blog_question {
  color: #1a3341;
  line-height: 1.7;
}

.past_entries_list,
#linkDropdown {
  border-radius: 10px;
  border: 1px solid rgba(10, 84, 117, 0.2);
  background: #fff;
  color: #1a4258;
}

.blog_content_image {
  border: 1px solid rgba(7, 59, 88, 0.2);
  box-shadow: 0 8px 22px rgba(14, 59, 87, 0.16);
}

/* Utility polish for content-heavy pages */
h1,
h2,
h3,
h4 {
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .homepage-menu-container {
    margin: 8px;
    width: calc(100% - 16px);
  }

  .content-box {
    margin-top: 24px !important;
  }

  .blog_menu,
  .blogcontainer,
  .blogcontainer_main,
  .developerContentContainer,
  .faqcontainer {
    border-radius: 12px !important;
  }

  .main-card textarea {
    min-height: 110px;
  }
}