@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

:root{
  color-scheme:dark;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --radius-pill:999px;
  --palette-main-bg:#F6F8F9;
  --palette-panel:#E0E0E0;
  --palette-dark-gray:#5E5E5E;
  --palette-charcoal:#4A4A4A;
  --palette-main-text:#000000;
  --palette-orange:#DF7354;
  --palette-blue:#43C7FF;
  --bg:#030303;
  --bg-soft:#0a0a0a;
  --surface:#181a1d;
  --surface-2:#1d2024;
  --surface-3:#23272c;
  --border:rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.14);
  --text:#f1f3f6;
  --muted:#9ca4ae;
  --accent:#43C7FF;
  --accent-strong:#7fd8ff;
  --success:#FF9848;
  --danger:#f87171;
  --shadow-panel:none;
  --shadow-card:none;
  --shadow-control:none;
  --font-app:"Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-page-max-width:1320px;
  --app-page-padding-x:24px;
  --app-page-padding-top:32px;
  --app-page-padding-bottom:36px;
  --app-box-gap:18px;
  --app-header-box-gap:24px;
  --app-page-heading-size:20px;
  --app-page-subheading-size:14px;
  --app-navbar-bg:var(--palette-main-bg);
  --app-navbar-shadow:0 5px 12px rgba(53, 63, 72, 0.22);
  --app-navbar-soft-shadow:0 3px 7px rgba(53, 63, 72, 0.18);
  --app-navbar-active-shadow:0 2px 5px rgba(53, 63, 72, 0.16);
  --app-navbar-bottom-shadow:0 -4px 8px rgba(38, 48, 58, 0.22);
  --app-search-bg:var(--palette-main-bg);
  --app-search-text:var(--palette-main-text);
  --app-search-placeholder:var(--palette-dark-gray);
  --app-search-shadow:inset 2px 2px 6px rgba(124, 132, 140, 0.54), inset -2px -2px 6px rgba(255, 255, 255, 0.9);
  --app-search-focus-shadow:var(--app-search-shadow), 0 0 0 1px rgba(67, 199, 255, 0.42);
  --app-loading-spinner-track:rgba(74, 74, 74, 0.18);
  --app-loading-spinner-color:var(--palette-orange);
  --app-skeleton-base:rgba(94, 94, 94, 0.14);
  --app-skeleton-shine:rgba(255, 255, 255, 0.62);
}

body,
button,
input,
select,
textarea{
  font-family:var(--font-app);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.app-search-input{
  width:100%;
  min-width:0;
  min-height:46px;
  border:0;
  border-radius:var(--radius-md);
  padding:11px 13px;
  background:var(--app-search-bg);
  color:var(--app-search-text);
  box-shadow:var(--app-search-shadow);
  font:600 13px/1.2 var(--font-app);
  outline:none;
}

.app-search-input:focus{
  box-shadow:var(--app-search-focus-shadow);
}

.app-search-input::placeholder{
  color:var(--app-search-placeholder);
}

.app-search-input-compact{
  min-height:34px;
  padding:8px 10px;
  font-size:12px;
}

.app-loading-block{
  width:100%;
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.app-loading-center{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-loading-spinner{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:inline-flex;
  border-radius:var(--radius-pill);
  border:3px solid var(--app-loading-spinner-track);
  border-top-color:var(--app-loading-spinner-color);
  animation:app-loading-spin .82s linear infinite;
}

.app-skeleton-stack{
  display:grid;
  gap:10px;
}

.app-skeleton-card{
  border-radius:var(--radius-lg);
  background:var(--app-skeleton-base);
}

.app-skeleton-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.app-skeleton-line,
.app-skeleton-circle,
.app-skeleton-pill{
  display:block;
  background:linear-gradient(90deg, var(--app-skeleton-base) 0%, var(--app-skeleton-shine) 48%, var(--app-skeleton-base) 100%);
  background-size:220% 100%;
  animation:app-skeleton-shine 1.28s ease-in-out infinite;
}

.app-skeleton-line{
  width:100%;
  height:10px;
  border-radius:var(--radius-pill);
}

.app-skeleton-circle{
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:var(--radius-pill);
}

.app-skeleton-pill{
  width:100%;
  height:34px;
  border-radius:var(--radius-md);
}

.app-skeleton-w-25{ width:25%; }
.app-skeleton-w-35{ width:35%; }
.app-skeleton-w-45{ width:45%; }
.app-skeleton-w-55{ width:55%; }
.app-skeleton-w-65{ width:65%; }
.app-skeleton-w-75{ width:75%; }
.app-skeleton-w-80{ width:80%; }
.app-skeleton-w-90{ width:90%; }

@keyframes app-loading-spin{
  to { transform:rotate(360deg); }
}

@keyframes app-skeleton-shine{
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

.app-navbar,
.app-navbar *,
.app-navbar-mobile-top,
.app-navbar-mobile-top *{
  box-sizing:border-box;
}

.app-navbar-mobile-top{
  display:none;
}

.app-navbar-mount{
  position:sticky;
  top:12px;
  z-index:20;
  margin-bottom:var(--app-header-box-gap);
}

.app-navbar{
  width:calc(100vw - (var(--app-page-padding-x) * 2));
  margin-left:calc(50% - 50vw + var(--app-page-padding-x));
  margin-right:calc(50% - 50vw + var(--app-page-padding-x));
  padding:12px var(--app-page-padding-x);
  min-height:64px;
  display:grid;
  grid-template-columns:minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items:center;
  gap:var(--app-box-gap);
  background:var(--app-navbar-bg);
  border-radius:18px;
  box-shadow:var(--app-navbar-shadow);
}

.app-navbar-logo{
  color:var(--palette-main-text);
  text-decoration:none;
  font-size:24px;
  font-weight:900;
  line-height:1;
  letter-spacing:.12em;
  white-space:nowrap;
}

.app-navbar-menu{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.app-navbar-link{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  padding:0 12px;
  color:var(--palette-charcoal);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  line-height:1;
  transition:color .18s ease, box-shadow .18s ease;
}

.app-navbar-link:hover,
.app-navbar-link:focus-visible{
  color:var(--palette-orange);
  box-shadow:none;
}

.app-navbar-link.is-active{
  color:var(--palette-orange);
}

.app-navbar-link-icon{
  display:none;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.app-navbar-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.app-navbar-language,
.app-navbar-theme,
.app-navbar-signin{
  min-height:40px;
  border:0;
  border-radius:var(--radius-md);
  box-shadow:var(--app-navbar-soft-shadow);
  cursor:pointer;
  font:700 13px/1 var(--font-app);
  transition:box-shadow .18s ease, filter .18s ease;
}

.app-navbar-language,
.app-navbar-theme{
  background:var(--app-navbar-bg);
  color:var(--palette-charcoal);
}

.app-navbar-language{
  padding:0 12px;
  letter-spacing:.08em;
}

.app-navbar-theme{
  width:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.app-navbar-theme-icon{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.app-navbar-theme-icon-moon{
  display:none;
}

body[data-theme="light"] .app-navbar-theme-icon-sun{
  display:none;
}

body[data-theme="light"] .app-navbar-theme-icon-moon{
  display:block;
}

.app-navbar-signin{
  padding:0 18px;
  background:var(--palette-orange);
  color:#ffffff;
}

.app-navbar-language:hover,
.app-navbar-language:focus-visible,
.app-navbar-theme:hover,
.app-navbar-theme:focus-visible,
.app-navbar-signin:hover,
.app-navbar-signin:focus-visible{
  filter:brightness(1.03);
  box-shadow:var(--app-navbar-shadow);
}

.app-navbar-language:active,
.app-navbar-theme:active,
.app-navbar-signin:active{
  box-shadow:var(--app-navbar-active-shadow);
}

body[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f7fb;
  --bg-soft:#edf2f7;
  --surface:#fbfcfe;
  --surface-2:#f3f6fa;
  --surface-3:#e8eef5;
  --border:rgba(70, 86, 105, 0.12);
  --border-strong:rgba(70, 86, 105, 0.2);
  --text:#111111;
  --muted:#536070;
  --accent:#43C7FF;
  --accent-strong:#2baddf;
  --success:#FF9848;
  --danger:#dc2626;
  --shadow-panel:none;
  --shadow-card:none;
  --shadow-control:none;
}

.shared-page-shell{
  display:flex;
  justify-content:center;
  padding:var(--app-page-padding-top) var(--app-page-padding-x) var(--app-page-padding-bottom);
}

@media (max-width:860px){
  body.has-app-navbar{
    padding-top:72px;
    padding-bottom:92px;
  }

  .app-navbar-mount{
    position:static;
    margin-bottom:0;
  }

  .app-navbar-mobile-top{
    position:fixed;
    top:10px;
    right:var(--app-page-padding-x);
    left:var(--app-page-padding-x);
    z-index:30;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--app-box-gap);
    padding:8px 10px 8px 14px;
    background:var(--app-navbar-bg);
    border-radius:16px;
    box-shadow:var(--app-navbar-shadow);
  }

  .app-navbar-mobile-logo{
    font-size:21px;
  }

  .app-navbar-mobile-signin{
    min-height:36px;
    padding:0 16px;
  }

  .app-navbar{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:30;
    width:auto;
    min-height:62px;
    margin:0;
    padding:6px var(--app-page-padding-x) max(6px, env(safe-area-inset-bottom));
    display:block;
    border-radius:18px 18px 0 0;
    box-shadow:var(--app-navbar-bottom-shadow);
  }

  .app-navbar > .app-navbar-logo,
  .app-navbar-actions{
    display:none;
  }

  .app-navbar-menu{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:4px;
    overflow:visible;
  }

  .app-navbar-link{
    min-width:0;
    min-height:48px;
    padding:8px 4px 3px;
    flex-direction:column;
    gap:4px;
    font-size:10px;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
  }

  .app-navbar-link-icon{
    display:block;
  }

  .app-navbar-link-title{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width:640px){
  :root{
    --app-page-padding-x:12px;
    --app-page-padding-top:20px;
    --app-page-padding-bottom:28px;
    --app-box-gap:14px;
    --app-header-box-gap:20px;
    --app-page-heading-size:16px;
    --app-page-subheading-size:12px;
  }

  body.has-app-navbar{
    padding-top:68px;
    padding-bottom:88px;
  }
}