/* Floating support chat shared across SVTech pages */
#svSupportWidget, #svSupportWidget * { box-sizing:border-box; }
.sv-support-launcher { position:fixed; right:22px; bottom:22px; z-index:10020; display:grid; width:60px; height:60px; place-items:center; border:0; border-radius:50%; background:#111; color:#fff; box-shadow:0 5px 18px rgba(0,0,0,.28); cursor:pointer; transition:transform .2s ease,background .2s ease; }
.sv-support-launcher:hover { transform:translateY(-3px); background:#292c31; }
.sv-support-launcher svg { width:27px; height:27px; }
.sv-support-panel { position:fixed; right:22px; bottom:94px; z-index:10020; display:none; width:min(370px,calc(100vw - 28px)); height:min(570px,calc(100vh - 125px)); height:min(570px,calc(100dvh - 125px)); min-height:360px; overflow:hidden; flex-direction:column; border:1px solid #d8dbe0; border-radius:14px; background:#fff; box-shadow:0 12px 42px rgba(0,0,0,.24); color:#222; font:16px Arial,sans-serif; }
.sv-support-panel.open { display:flex; }
.sv-support-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; background:#666b7a; color:#fff; }
.sv-support-head strong { display:block; font-size:18px; }
.sv-support-state { margin-top:3px; font-size:12px; opacity:.85; }
.sv-support-close { width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:23px; line-height:1; cursor:pointer; }
.sv-support-messages { display:flex; flex:1; min-height:0; flex-direction:column; gap:10px; overflow:auto; padding:15px 13px; background:#f7f7f8; scrollbar-width:none; }
.sv-support-messages::-webkit-scrollbar { display:none; }
.sv-support-empty { margin:auto; color:#737780; text-align:center; line-height:1.45; }
.sv-support-message { max-width:84%; align-self:flex-start; padding:9px 12px; border:1px solid #e2e3e6; border-radius:13px 13px 13px 4px; background:#fff; color:#25272b; overflow-wrap:anywhere; white-space:pre-wrap; }
.sv-support-message.mine { align-self:flex-end; border-color:#d9d9df; border-radius:13px 13px 4px 13px; background:#eaeaf0; }
.sv-support-message small { display:block; margin-bottom:4px; color:#747780; font-size:11px; }
.sv-support-banner { display:none; padding:8px 12px; background:#fff5e7; color:#775421; font-size:12px; }
.sv-support-banner.visible { display:block; }
.sv-support-form { display:grid; gap:8px; padding:11px; border-top:1px solid #e1e2e5; background:#fff; }
.sv-support-identity { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sv-support-form input,.sv-support-form textarea { width:100%; min-width:0; border:1px solid #d5d7dc; border-radius:8px; padding:9px 10px; background:#fff; color:#222; font:14px Arial,sans-serif; }
.sv-support-form textarea { height:64px; min-height:50px; max-height:100px; resize:vertical; }
.sv-support-submit { justify-self:end; min-height:36px; padding:0 16px; border:0; border-radius:18px; background:#111; color:#fff; font: bold 14px Arial,sans-serif; cursor:pointer; }
.sv-support-submit:disabled { opacity:.55; cursor:wait; }
@media(max-width:520px) { .sv-support-launcher { right:14px; bottom:14px; width:54px; height:54px; } .sv-support-panel { right:10px; bottom:78px; width:calc(100vw - 20px); height:min(590px,calc(100vh - 94px)); height:min(590px,calc(100dvh - 94px)); } }

/* Keep the page gutter in place while the scrollbar track stays invisible. */
html { scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: transparent transparent; }
* { scrollbar-width: auto; scrollbar-color: transparent transparent; }
*::-webkit-scrollbar { display:block; width:15px; height:15px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb { background:transparent; border-color:transparent; }
*::-webkit-scrollbar-thumb { border:4px solid transparent; background-clip:padding-box; }

/* Mobile browsers use overlay scrollbars; do not reserve a desktop gutter there. */
@media(max-width:768px) {
  html { scrollbar-gutter:auto; scrollbar-width:none; }
  * { scrollbar-width:none; }
  *::-webkit-scrollbar { width:0; height:0; }
}

.theme-toggle { position:relative; display:inline-grid; flex:0 0 58px; width:58px; height:36px; place-items:center; padding:0; border:1px solid #d7dce4; border-radius:999px; background:#e9edf3; color:#28303b; cursor:pointer; box-shadow:inset 0 1px 2px rgba(20,30,45,.08),0 2px 5px rgba(20,30,45,.08); transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .18s ease; }
.theme-toggle:hover { transform:translateY(-1px); box-shadow:inset 0 1px 2px rgba(20,30,45,.08),0 4px 10px rgba(20,30,45,.14); }
.theme-toggle:focus-visible { outline:3px solid rgba(89,132,220,.45); outline-offset:3px; }
.theme-toggle-track { position:relative; display:block; width:100%; height:100%; }
.theme-toggle-thumb { position:absolute; top:3px; left:3px; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:linear-gradient(145deg,#fff,#f7f8fb); color:#d38a00; box-shadow:0 2px 6px rgba(24,33,48,.2); transition:transform .24s cubic-bezier(.2,.8,.2,1),background .22s ease,color .22s ease; }
.theme-toggle-icon { display:block; font:17px/1 Arial,sans-serif; }
.theme-toggle-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.theme-toggle-floating { position:fixed; top:14px; right:14px; z-index:10050; }
.cta-buttons.has-theme .cta-button { min-width:0; }
@media(max-width:768px) { .cta-buttons.has-theme .cta-button { width:auto; min-width:0; max-width:300px; flex:1 1 auto; } }
html.theme-dark { color-scheme:dark; --page-bg:#11151b; --surface:#191f28; --ink:#eef1f5; --muted:#a8b0bc; --line:#303743; --accent-soft:#27352c; --shadow:0 12px 35px rgba(0,0,0,.24); }
html.theme-dark body { background:#11151b; color:#eef1f5; }
html.theme-dark header, html.theme-dark .site-header { background:#171c24; color:#eef1f5; border-color:#303743; }
html.theme-dark header nav a, html.theme-dark .site-nav a { color:#e2e6ed; }
html.theme-dark header nav a:hover, html.theme-dark .site-nav a:hover, html.theme-dark .site-nav a[aria-current="page"] { color:#a6d59f; }
html.theme-dark .theme-toggle { border-color:#3d4655; background:#303a49; box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 2px 7px rgba(0,0,0,.22); }
html.theme-dark .theme-toggle-thumb { transform:translateX(22px); background:linear-gradient(145deg,#414b5c,#323b49); color:#f4d06f; box-shadow:0 2px 7px rgba(0,0,0,.35); }
html.theme-dark .theme-toggle:hover { background:#394456; }
html.theme-dark header > a:first-child > img, html.theme-dark .brand img, html.theme-dark .logo a img { filter:brightness(0) invert(1); }
html.theme-dark .hero, html.theme-dark .page-hero { background:#252d39; color:#f2f4f8; }
html.theme-dark .cards { background:#11151b; }
html.theme-dark .card { background:linear-gradient(135deg,#252c38,#1b222c); color:#edf0f5; box-shadow:0 8px 24px rgba(0,0,0,.32); }
html.theme-dark .card p, html.theme-dark .lead, html.theme-dark .info-card p, html.theme-dark .rule-card p, html.theme-dark .news-card p, html.theme-dark .support-panel p { color:#b9c1cc; }
html.theme-dark .cta-section { background:#191f28; color:#eef1f5; }
html.theme-dark .page-main { color:#eef1f5; }
html.theme-dark .info-card, html.theme-dark .rule-card, html.theme-dark .news-card, html.theme-dark .support-panel, html.theme-dark .notice { background:#191f28; color:#eef1f5; border-color:#303743; }
html.theme-dark .info-card .card-mark, html.theme-dark .rule-number, html.theme-dark .news-category { background:#29323e; color:#c4d8c1; }
html.theme-dark .news-card.featured { background:linear-gradient(135deg,#202832,#191f28); }
html.theme-dark .news-filter, html.theme-dark .news-search, html.theme-dark .news-refresh, html.theme-dark .nav-toggle { background:#202732; color:#edf0f5; border-color:#3a4350; }
html.theme-dark .news-filter[aria-pressed="true"] { background:#e6e9ee; color:#171a1f; }
html.theme-dark .modal-content { background:#1b222c; color:#eef1f5; }
html.theme-dark .modal-input, html.theme-dark .qr-login-refresh, html.theme-dark .qr-login-toggle { background:#202732; color:#eef1f5; border-color:#3a4350; }
html.theme-dark .qr-scan-hint { color:#b9c1cc; }
html.theme-dark .chat-messages { background:#151b23; }
html.theme-dark .chat-form { background:#191f28; border-color:#303743; }
html.theme-dark .chat-field, html.theme-dark .chat-textarea { background:#202732; color:#eef1f5; border-color:#3a4350; }
html.theme-dark .chat-bubble { background:#202732; color:#eef1f5; border-color:#3a4350; }
html.theme-dark .chat-message-text { color:#eef1f5; }
html.theme-dark .cta-button { background:#e8eaf0; color:#17191d; }
html.theme-dark .cta-button:not(.logged-in)::after { background:#e8eaf0; color:#17191d; }
html.theme-dark .cta-button:hover { background:#d8dce4; }
html.theme-dark footer { background:#0b0e12; }
@media(max-width:768px) {
  .cta-buttons.has-theme { flex-wrap:nowrap; gap:8px; }
  .cta-buttons.has-theme .cta-button { width:auto; min-width:0; max-width:300px; flex:1 1 auto; padding:10px 12px; }
  .cta-buttons.has-theme .theme-toggle { flex:0 0 58px; width:58px; padding:0; }
}
@media(max-width:380px) {
  .cta-buttons.has-theme .cta-button { padding:9px 8px; font-size:13px; }
  .cta-buttons.has-theme .cta-button img { width:18px; height:18px; margin-right:5px; }
  .cta-buttons.has-theme .theme-toggle { min-height:34px; height:34px; flex-basis:54px; width:54px; }
  .cta-buttons.has-theme .theme-toggle-thumb { width:26px; height:26px; }
  html.theme-dark .cta-buttons.has-theme .theme-toggle-thumb { transform:translateX(20px); }
}

/* Keep the original card gradient animated in either theme. */
.main-content .card { background-size:400% 400%; }
html:not(.theme-dark) .main-content .card {
  background-image:linear-gradient(135deg,#eae6ff,#f4f4f4);
  background-size:400% 400%;
  animation:gradientFlow 8s ease infinite;
}
html.theme-dark .main-content .card {
  background-image:linear-gradient(135deg,#342b4a,#213a43,#3d2b43);
  background-size:400% 400%;
  animation:gradientFlow 8s ease infinite;
}
html.theme-dark .main-content .card p { color:#d1d4df; }
html.theme-dark #logoutButton { filter:brightness(0); }

/* Touch friendly card rail on the home and plans pages. */
@media(max-width:768px) {
  #cardsContainer {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    gap:14px;
    padding:20px 16px;
  }
  #cardsContainer > .card {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:0 0 100% !important;
    padding:20px !important;
    margin:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    overflow-x:clip;
    overflow-y:visible;
    text-align:center;
  }
  #cardsContainer > .card > * {
    display:block;
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
    width:100%;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal;
  }
  #cardsContainer > .card h2 {
    font-size:clamp(18px,5vw,21px) !important;
    line-height:1.2;
  }
  #cardsContainer > .card p {
    font-size:14px !important;
    line-height:1.5;
  }
  #cardsContainer > .card button {
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:10px 12px !important;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .theme-toggle {
    position:relative;
    top:auto;
    right:auto;
    z-index:auto;
    width:58px;
    height:36px;
    flex:0 0 58px;
    border-radius:999px;
  }
  .theme-toggle-thumb {
    top:3px;
    left:3px;
    width:28px;
    height:28px;
  }
  html.theme-dark .theme-toggle-thumb { transform:translateX(22px); }
  .cta-buttons.has-theme .theme-toggle { width:58px; height:36px; flex:0 0 58px; padding:0; }
  .cta-buttons.has-theme .theme-toggle-thumb { width:28px; height:28px; }
  html.theme-dark .cta-buttons.has-theme .theme-toggle-thumb { transform:translateX(22px); }
  .cta-button.logged-in > img:first-child {
    display:block;
    width:20px !important;
    height:20px !important;
    flex:0 0 20px;
    object-fit:cover;
    align-self:center;
    transform:translateY(1px);
  }
  .cta-button.logged-in #logoutButton {
    display:block;
    width:24px !important;
    height:24px !important;
    flex:0 0 24px;
    object-fit:contain;
    align-self:center;
    vertical-align:middle;
    transform:translateY(1px);
  }
  .profile-box > img {
    width:40px !important;
    height:40px !important;
    flex:0 0 40px;
    object-fit:cover;
    align-self:center;
  }
}
@media(max-width:380px) {
  .cta-buttons.has-theme .theme-toggle { width:54px; height:34px; flex:0 0 54px; }
  .cta-buttons.has-theme .theme-toggle-thumb { width:26px; height:26px; }
  html.theme-dark .cta-buttons.has-theme .theme-toggle-thumb { transform:translateX(20px); }
}
html.theme-dark .profile-box { background:#11151b; color:#f1f3f6; border:1px solid #303743; box-shadow:0 10px 28px rgba(0,0,0,.5); }
html.theme-dark .profile-box #profileName,
html.theme-dark .profile-box #profileBalance,
html.theme-dark .profile-box #profileStatus,
html.theme-dark .profile-box #profileSubscription { color:#edf0f5; }