/* RVTik Studio Cards — Unified Visual Skin
   Scope: Connecting, Weekly Analytics, Information, Online Users, Manual Books.
   Presentation only: does not change DOM, JavaScript, disabled states, or click handlers.
   Built against dashboard(9).zip, app/v340/index.html (2026-10-27).
*/

/* Neutral shell; use same size/color language as deployed Overlay Studio Cards. */
#tab-engine,
#tab-weekly-analytics,
#tab-extra,
#tab-online-users,
#tab-tutorial {
  --rsc-bg: #181a20;
  --rsc-bg-hover: #1e2028;
  --rsc-line: #30323d;
  --rsc-line-hover: #565163;
  --rsc-ink: #eeedf4;
  --rsc-muted: #a2a3b0;
  --rsc-subtle: #8c8e9d;
  --rsc-purple: #a59ade;
  --rsc-ease: 150ms ease;
}

/* CONNECTING — original composition, three separate action buttons, banner, and actual profile content remain intact. */
body .app-container #tab-engine > .engine-session-row > .tkp-form-group,
body .app-container #tab-engine > .engine-connect-card,
body .app-container #tab-engine > .engine-status-card,
body .app-container #tab-engine > #followerCounterLiveSummary,
body .app-container #tab-engine > .engine-connection-info-card {
  background: var(--rsc-bg) !important;
  background-image: none !important;
  border: 1px solid var(--rsc-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color var(--rsc-ease), background-color var(--rsc-ease) !important;
}
body .app-container #tab-engine > .engine-session-row > .tkp-form-group:hover,
body .app-container #tab-engine > .engine-connect-card:hover,
body .app-container #tab-engine > .engine-status-card:hover,
body .app-container #tab-engine > #followerCounterLiveSummary:hover,
body .app-container #tab-engine > .engine-connection-info-card:hover {
  background-color: var(--rsc-bg-hover) !important;
  border-color: #41414e !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Preserve the existing form grid and the native start/stop/login row. */
body .app-container #tab-engine > .engine-connect-card,
body .app-container #tab-engine > .engine-status-card,
body .app-container #tab-engine > .engine-connection-info-card { isolation: isolate; }
#tab-engine .engine-session-row .tkp-label,
#tab-engine .engine-connect-card .tkp-label { color: #b6b2c3 !important; }
#tab-engine .engine-status-card .status-badge {
  color: #c7c2d5;
  text-shadow: none !important;
}
/* Do not hide actual cover art or modify the profile media loading state. */
#tab-engine #followerCounterLiveSummary .followers-profile-cover {
  background: #20212a !important;
  background-image: none !important;
  border-color: var(--rsc-line) !important;
}
#tab-engine #followerCounterLiveSummary .followers-profile-cover-overlay {
  background: linear-gradient(180deg, rgba(15,16,22,.12),rgba(15,16,22,.68)) !important;
}
#tab-engine .engine-connection-info-card .engine-info-title,
#tab-engine .engine-connection-info-card .panel-title { color: var(--rsc-ink) !important; }

/* ANALYTICS — values, chart data, period filters, export and all actual report rendering remain native. */
body .app-container #tab-weekly-analytics .analytics-header,
body .app-container #tab-weekly-analytics .analytics-primary-card,
body .app-container #tab-weekly-analytics .analytics-support-card,
body .app-container #tab-weekly-analytics .analytics-section,
body .app-container #tab-weekly-analytics .analytics-state-card {
  background: var(--rsc-bg) !important;
  background-image: none !important;
  border: 1px solid var(--rsc-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color var(--rsc-ease), background-color var(--rsc-ease) !important;
}
body .app-container #tab-weekly-analytics .analytics-header:hover,
body .app-container #tab-weekly-analytics .analytics-primary-card:hover,
body .app-container #tab-weekly-analytics .analytics-support-card:hover,
body .app-container #tab-weekly-analytics .analytics-section:hover {
  background-color: var(--rsc-bg-hover) !important;
  border-color: #44424e !important;
  transform: none !important;
  box-shadow: none !important;
}
#tab-weekly-analytics .analytics-primary-card {
  min-height: 130px;
  padding: 16px !important;
}
#tab-weekly-analytics .analytics-primary-card::before {
  width: 2px !important;
  background: #8276bc !important;
  opacity: .8 !important;
}
#tab-weekly-analytics .analytics-primary-card[data-summary-card="growth"]::before { background: #5fa996 !important; }
#tab-weekly-analytics .analytics-primary-card[data-summary-card="duration"]::before { background: #7598bf !important; }
#tab-weekly-analytics .analytics-primary-card[data-summary-card="sessions"]::before { background: #b59479 !important; }
#tab-weekly-analytics .analytics-card-head,
#tab-weekly-analytics .analytics-support-card > span { color: var(--rsc-muted) !important; }
#tab-weekly-analytics .analytics-primary-value,
#tab-weekly-analytics .analytics-support-card > strong { color: var(--rsc-ink) !important; }
#tab-weekly-analytics .analytics-card-icon {
  background: #242632 !important;
  border: 1px solid #343546 !important;
  border-radius: 8px !important;
  color: #aca3d9 !important;
  box-shadow: none !important;
}
#tab-weekly-analytics .analytics-section h3 { color: var(--rsc-ink) !important; }
#tab-weekly-analytics .analytics-section-desc { color: var(--rsc-muted) !important; }
#tab-weekly-analytics .analytics-count-badge {
  background: #252630 !important;
  color: #cbc9d6 !important;
  border: 1px solid #373743 !important;
  box-shadow: none !important;
}

/* INFORMATION — utility panels, updates, credits, inner library items, information rows. */
body .app-container #tab-extra .engine-status-grid > .panel,
body .app-container #tab-extra .rvtik-credit-card,
body .app-container #tab-extra > .rvtik-info-card {
  background: var(--rsc-bg) !important;
  background-image: none !important;
  border: 1px solid var(--rsc-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color var(--rsc-ease), background-color var(--rsc-ease) !important;
}
body .app-container #tab-extra .engine-status-grid > .panel:hover,
body .app-container #tab-extra .rvtik-credit-card:hover,
body .app-container #tab-extra > .rvtik-info-card:hover {
  border-color: #44424e !important;
  box-shadow: none !important;
  transform: none !important;
}
#tab-extra .rvtik-credit-card::after { display: none !important; }
#tab-extra .rvtik-library-item,
#tab-extra .rvtik-info-item {
  background: #121419 !important;
  background-image: none !important;
  border: 1px solid #292c36 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transition: border-color var(--rsc-ease), background-color var(--rsc-ease) !important;
}
#tab-extra .rvtik-library-item:hover,
#tab-extra .rvtik-info-item:hover {
  background: #1c1e26 !important;
  border-color: #4e495e !important;
  transform: none !important;
}
#tab-extra .rvtik-library-icon,
#tab-extra .rvtik-info-icon {
  background: #252634 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#tab-extra .rvtik-library-role,
#tab-extra .rvtik-credit-subtitle,
#tab-extra .rvtik-info-item p { color: var(--rsc-muted) !important; }
#tab-extra .rvtik-credit-title,
#tab-extra .rvtik-info-heading { color: var(--rsc-ink) !important; }
/* Inside the update panel, do not restyle progress bars, statuses or action controls. */

/* RVTik ONLINE — supports dynamically rendered user cards, but no change to JS fetching, filtering or refresh. */
body .app-container #tab-online-users > .online-users-panel,
body .app-container #tab-online-users .online-user-card {
  background: var(--rsc-bg) !important;
  background-image: none !important;
  border: 1px solid var(--rsc-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color var(--rsc-ease), background-color var(--rsc-ease) !important;
}
body .app-container #tab-online-users .online-user-card:hover {
  background: var(--rsc-bg-hover) !important;
  border-color: #58516b !important;
  transform: none !important;
  box-shadow: none !important;
}
#tab-online-users .online-users-total {
  background: #242533 !important;
  border: 1px solid #373548 !important;
  color: #c6bde8 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#tab-online-users .online-users-header .panel-title { color: var(--rsc-ink) !important; }
#tab-online-users .online-users-header .panel-desc { color: var(--rsc-muted) !important; }
/* No pointer changes: live buttons, avatars and links preserve their native behavior. */

/* MANUAL BOOKS — instructional cards, code blocks and step headings; original text and links stay untouched. */
body .app-container #tab-tutorial .extra-box {
  background: var(--rsc-bg) !important;
  background-image: none !important;
  border: 1px solid var(--rsc-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color var(--rsc-ease), background-color var(--rsc-ease) !important;
}
body .app-container #tab-tutorial .extra-box:hover {
  background: var(--rsc-bg-hover) !important;
  border-color: #454250 !important;
  box-shadow: none !important;
  transform: none !important;
}
#tab-tutorial .extra-box .extra-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--rsc-ink) !important;
  margin-bottom: 13px !important;
}
#tab-tutorial .extra-box .extra-info { color: #b9b8c4 !important; line-height: 1.55 !important; }
#tab-tutorial .extra-box .code {
  display: inline-block;
  background: #101217 !important;
  border: 1px solid #323440 !important;
  border-radius: 7px !important;
  padding: 5px 9px !important;
  box-shadow: none !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  #tab-engine .tkp-form-group,
  #tab-engine .engine-connect-card,
  #tab-weekly-analytics .analytics-primary-card,
  #tab-weekly-analytics .analytics-support-card,
  #tab-weekly-analytics .analytics-section,
  #tab-extra .rvtik-credit-card,
  #tab-extra .rvtik-library-item,
  #tab-online-users .online-user-card,
  #tab-tutorial .extra-box { transition: none !important; }
}