/* Material 3 light theme — matches the Android author app */
:root {
  --md-primary: #2563EB;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #E8F0FE;
  --md-on-primary-container: #0B2B66;
  --md-secondary-container: #EEF4FF;
  --md-surface: #FFFFFF;
  --md-surface-1: #F8FAFD;
  --md-surface-2: #F1F5FA;
  --md-surface-3: #E9EFF7;
  --md-outline: #CBD5E1;
  --md-outline-variant: #E2E8F0;
  --md-text: #0F172A;
  --md-text-2: #334155;
  --md-muted: #64748B;
  --md-radius: 16px;
  --md-radius-sm: 10px;
  --md-shadow: 0 2px 10px rgba(15, 23, 42, .06), 0 12px 30px -24px rgba(15, 23, 42, .25);
}

html, body, body.admin-body, body.landing-body, body.author-site {
  background: var(--bg) !important;
  color: var(--text) !important;
}
body.landing-body, body.author-site {
  background-image: radial-gradient(800px 460px at 8% 0%, #E8F0FE 0%, transparent 60%),
                    radial-gradient(700px 400px at 100% 0%, #EEF4FF 0%, transparent 55%) !important;
}
::selection { background: rgba(37, 99, 235, .18); color: var(--md-text); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-color: #F6F7FB; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Navigation */
.site-nav, .topbar, .sidebar, .sidebar-foot, .nav-inner {
  background: var(--md-surface) !important;
  border-color: var(--md-outline-variant) !important;
  box-shadow: none !important;
}
.site-nav { backdrop-filter: none !important; border-bottom: 1px solid var(--md-outline-variant) !important; }
.nav-links a, .nav-link, .user-btn, .sidebar-brand, .brand, .topbar .title, .topbar .crumb {
  color: var(--md-text-2) !important;
}
.nav-links a:hover, .nav-link:hover { background: var(--md-surface-2) !important; color: var(--md-primary) !important; }
.nav-link.active, .nav-link[aria-current="page"] {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}
.nav-link.active .ico, .nav-link.active svg { color: var(--md-primary) !important; }

/* Cards / panels */
.panel, .card, .stat-card, .app-card, .notice-card, .login-card, .auth-card,
.modal, .dialog, .drawer, .user-dropdown, .dropdown, .popover, .table-wrap,
.secret-line, .mini-item, .kind-option .kbox, .pill-tabs {
  background: var(--md-surface) !important;
  border-color: var(--md-outline-variant) !important;
  box-shadow: var(--md-shadow) !important;
}
.stat-card, .app-card { border-radius: var(--md-radius) !important; background-image: none !important; }
.panel { border-radius: var(--md-radius) !important; overflow: hidden; }
.modal, .dialog, .drawer, .user-dropdown, .dropdown, .popover {
  border-radius: var(--md-radius) !important;
  border: 1px solid var(--md-outline-variant) !important;
}
.donut::after { background: var(--md-surface) !important; border-color: var(--md-outline-variant) !important; }
.chart-tooltip { background: #0F172A !important; color: #F8FAFC !important; border-color: #1E293B !important; }

/* Tables */
table.data, .table-wrap, .data-table { background: var(--md-surface) !important; }
table.data thead th, .table-wrap thead th {
  background: var(--md-surface-2) !important;
  color: var(--md-muted) !important;
  border-color: var(--md-outline-variant) !important;
  font-weight: 600 !important;
}
table.data tbody td, .table-wrap tbody td { border-color: var(--md-outline-variant) !important; color: var(--md-text-2) !important; }
table.data tbody tr:hover { background: #F8FAFD !important; }
.cell-main .t { color: var(--md-text) !important; }
.s, .faint, .muted { color: var(--md-muted) !important; }

/* Inputs */
.input, .select, textarea, select, input[type="text"], input[type="password"], input[type="number"], input[type="search"] {
  background: var(--md-surface) !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-radius-sm) !important;
  box-shadow: none !important;
}
.input:focus, .select:focus, textarea:focus, input:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
  outline: none !important;
}
.input::placeholder, input::placeholder, textarea::placeholder { color: #94A3B8 !important; }
.field label, .form-label { color: var(--md-muted) !important; }

/* Buttons */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-primary, .btn.btn-primary {
  background: var(--md-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--md-primary) !important;
}
.btn-primary:hover { background: #1D4ED8 !important; }
.btn-ghost, .btn.btn-ghost {
  background: transparent !important;
  color: var(--md-text-2) !important;
  border-color: var(--md-outline-variant) !important;
}
.btn-ghost:hover, .btn:hover { background: var(--md-surface-2) !important; }
.btn-danger { background: #DC2626 !important; color: #fff !important; }
.btn-sm { border-radius: 999px !important; }

/* Chips / tabs / badges */
.pill-tabs, .chip, .badge, .tag, .app-id-chip, .filter-chip {
  background: var(--md-surface-2) !important;
  border-color: var(--md-outline-variant) !important;
  color: var(--md-text-2) !important;
}
.pill-tabs .active, .chip.active, .filter-chip.active,
.pill-tabs button.active, .pill-tabs button[aria-selected="true"] {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
  border-color: #D2E3FC !important;
}
.badge, .tag { border-radius: 999px !important; }
.badge-success { background: #D1FAE5 !important; color: #065F46 !important; }
.badge-warning { background: #FEF3C7 !important; color: #92400E !important; }
.badge-danger { background: #FEE2E2 !important; color: #991B1B !important; }
.badge-info { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }

/* Landing / author */
.hero, .landing-hero, .author-auth-art {
  background: linear-gradient(135deg, #EEF5FF 0%, #F6F7FB 55%, #E8F0FE 100%) !important;
  border-color: var(--md-outline-variant) !important;
}
.hero-title, .author-auth-art h1, .author-auth-art h2 { color: var(--md-text) !important; }
.hero-desc, .author-auth-art p, .author-auth-art .muted { color: var(--md-text-2) !important; }
.author-auth { background: var(--bg) !important; }
.author-auth-art::before { opacity: .25 !important; }
.author-site .input { background: #fff !important; }

/* Misc */
.divider, .divider-v, hr { background: var(--md-outline-variant) !important; border-color: var(--md-outline-variant) !important; }
a { color: var(--md-primary); }
.link, a.link { color: var(--md-primary) !important; }
.loading-block, .empty, .empty-ico { color: var(--md-muted) !important; }
.progress, .progress-line .progress { background: var(--md-surface-3) !important; }
.progress i { background: var(--md-primary) !important; }
.bar, .chart-bar { background: #DBEAFE !important; }


/* Landing light sections */
.stat-strip {
  background: #EEF4FF !important;
  border-color: #DCE7F8 !important;
}
.stat-strip .stat, .stat-strip .stat-strip-item { background: transparent !important; border: 0 !important; }
.stat-strip b, .stat-strip strong, .stat-strip .num { color: #0F172A !important; }
.stat-strip span, .stat-strip small, .stat-strip .label { color: #64748B !important; }

.feature, .feature:hover {
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05), 0 16px 36px -28px rgba(15, 23, 42, .28) !important;
}
.feature h3 { color: #0F172A !important; }
.feature p, .feature li { color: #64748B !important; }
.feature ul { border-color: #E2E8F0 !important; }
.feature li::before { background: #2563EB !important; }

.workflow { background: #F8FAFD !important; border-color: #E2E8F0 !important; }
.workflow h2, .workflow h3 { color: #0F172A !important; }
.workflow p { color: #64748B !important; }

.cta-card {
  background: radial-gradient(600px 300px at 50% -10%, #E8F0FE 0%, transparent 70%), #FFFFFF !important;
  border-color: #D2E3FC !important;
  box-shadow: 0 12px 40px -28px rgba(37, 99, 235, .35) !important;
}
.cta-card h2, .cta-card h3 { color: #0F172A !important; }
.cta-card p { color: #64748B !important; }
.cta-glow { background: radial-gradient(ellipse, rgba(37, 99, 235, .10), transparent 70%) !important; }

.nav-links { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
.nav-links a { color: #334155 !important; }

/* Admin panels */
.sidebar, .topbar, .content, .main, .page, .page-body { background: var(--bg) !important; }
.sidebar { background: #FFFFFF !important; }
.topbar { background: #FFFFFF !important; }
.panel, .table-wrap, .card, .stat-card, .app-card { background: #FFFFFF !important; }
.toolbar { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
.pill-tabs { background: #F1F5FA !important; }
.notice-card, .secret-line, .mini-item, .kind-option .kbox { background: #F8FAFD !important; }
.login-panel, .login-wrap, .auth-panel { background: #FFFFFF !important; }


/* ===== Mobile-app layout ===== */
.app-shell {
  display: block !important;
  min-height: 100vh !important;
  padding-bottom: 78px !important;
  background: var(--bg) !important;
}
.main { display: block !important; }
.sidebar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 70px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  border-right: 0 !important;
  border-top: 1px solid var(--md-outline-variant) !important;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  z-index: 90 !important;
}
.sidebar-brand, .sidebar-foot { display: none !important; }
.sidebar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.nav-group { display: contents !important; margin: 0 !important; }
.nav-label { display: none !important; }
.nav-link {
  flex: 1 0 64px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 5px 4px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: var(--md-muted) !important;
}
.nav-link svg { width: 20px !important; height: 20px !important; }
.nav-link.active {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}
.nav-link.active svg { color: var(--md-primary) !important; }
.nav-link.active::before { display: none !important; }
.nav-link .nav-badge { display: none !important; }

.page {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 20px 18px 32px !important;
}
.topbar {
  height: 62px !important;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--md-outline-variant) !important;
  backdrop-filter: blur(16px) !important;
}
.topbar h1 { font-size: 19px !important; }
.stat-grid { gap: 10px !important; }
.stat-card { padding: 16px !important; }
.dash-grid, .dash-grid-lower, .settings-grid { gap: 12px !important; }

/* Login: centered mobile card */
.login-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 22px !important;
  background: var(--bg) !important;
}
.login-brand { display: none !important; }
.login-form-side {
  width: 100% !important;
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
}
.login-card {
  width: 100% !important;
  max-width: 420px !important;
  padding: 28px 24px !important;
  border: 1px solid var(--md-outline-variant) !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.06), 0 24px 60px -36px rgba(15,23,42,.35) !important;
}
.login-card .mobile-brand { display: flex !important; align-items: center; gap: 10px; margin-bottom: 20px; }
.login-card h2 { font-size: 22px !important; }

@media (max-width: 720px) {
  .topbar { gap: 10px !important; }
  .page { padding: 16px 12px 28px !important; }
  .nav-link { flex-basis: 58px !important; }
}

.hidden, .app-shell.hidden, .login-view.hidden { display: none !important; }


/* Disable legacy drawer: mobile app uses fixed bottom navigation */
.sidebar { transform: none !important; }
.nav-toggle { display: none !important; }
body.nav-open .sidebar { transform: none !important; width: 100% !important; }
body.nav-open::after { display: none !important; content: none !important; }
@media (max-width: 960px) {
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 70px !important;
    transform: none !important;
  }
  .nav-toggle { display: none !important; }
  .app-shell { display: block !important; }
}